You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/04/26 01:35:16 UTC
[31/51] [partial] ADC articles donated by Adobe Systems Inc
http://git-wip-us.apache.org/repos/asf/flex-external/blob/1bcc0e18/ADC/devnet/flex/articles/flex4_skinning.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/flex4_skinning.html b/ADC/devnet/flex/articles/flex4_skinning.html
new file mode 100644
index 0000000..e586250
--- /dev/null
+++ b/ADC/devnet/flex/articles/flex4_skinning.html
@@ -0,0 +1,2108 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!DOCTYPE html>
+<html xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+ <title>Introducing skinning in Flex 4 | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="robots" content="noodp" />
+ <meta name="keywords" content="FXG,skinning" />
+ <meta name="description" content="Learn how to skin components with the skinning architecture in Flex 4." /><meta name="creationDate" content="2010-10-09 @ 01:00:07" />
+ <meta name="lastModifiedDate" content="2010-10-09 @ 01:00:07" />
+ <meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Introducing skinning in Flex 4"/>
+<meta name="blurb" content="Learn how to skin components with the skinning architecture in Flex 4." />
+<meta name="author" content="Ryan Frishberg" />
+<meta name="area" content="devnet" />
+<link rel="icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/>
+ <link rel="shortcut icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/>
+<link rel="canonical" href="http://www.adobe.com/devnet/flex/articles/flex4_skinning.html"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-compressed.css"/>
+<!--[if !IE]><!-->
+ <link rel="stylesheet" media="screen,print" href="http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css"/>
+ <!--<![endif]-->
+ <!--[if IE]>
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-compressed.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/default/SearchBuddy.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-modes.css" />
+ <![endif]-->
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-configurator-compressed.css"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.css"/>
+ <!--[if lt IE 10]>
+ <link rel="stylesheet" media="screen" href="/include/style/modes/MirrorIE.css" />
+ <![endif]-->
+ <script>
+ function createNs ( ns )
+ {
+ var o, a;
+ a = ns.split(".");
+ o = window[a[0]] = window[a[0]] || {};
+ for(i=1; i < a.length; i++)
+ {
+ o = o[a[i]] = o[a[i]] || {};
+ }
+ return o;
+ }
+
+ createNs("Adobe.PageInfo");
+ createNs("Adobe.Tokens");
+ createNs("Adobe.UserInfo");
+ Adobe.PageInfo.AuthenticatedState = false;
+ Adobe.PageInfo.localeCode = "en";
+ Adobe.PageInfo.accountPageName = "";
+ Adobe.PageInfo.productKey = "";
+ Adobe.PageInfo.catalogName = "";
+ Adobe.PageInfo.countryCode = "US";
+ Adobe.PageInfo.localeString = "en_us";
+ Adobe.PageInfo.marketSegment = "COM";
+ Adobe.PageInfo.sitecatalystMarketSegment = "COM";
+ Adobe.PageInfo.akamaiURLPrefix = "http://wwwimages.adobe.com/www.adobe.com";
+ Adobe.PageInfo.pageLevel = "7";
+</script>
+<script src="http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-store-compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/VisitorAPI.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></script>
+ <!--[if IE 6]>
+ <script>
+ try{void(document.execCommand("BackgroundImageCache",false,true));} catch(e) {}
+ </script>
+ <![endif]-->
+ <script>
+ //<![CDATA[
+ $(window).bind("hashchange load", adobe.fn.focusHashElement);
+ cart = new adobe.ui.CartFacade("cart-dialog", "cart-dialog-flash");
+ cart.setRequiredFlashVersion("9.0.115");
+ cart.setDefaultCountry("");
+ cart.setDomain(".adobe.com"); // set this to ".adobe.com"
+ cart.setContextPath(""); // set this to empty when web context is '/'
+ // Possibly add the .edu selector or override market segment
+ Adobe.Product.Controller.CPod.EduController.processLocation(true);
+ if(cart.isOverlaySupported()) {
+ var PromoIDReport = new Array();
+ var prmid = window.location.search.match(/\bpromoid\=([^&#$]+)/);
+ if(prmid) {
+ prmid[1]=prmid[1].toUpperCase();
+ cart.setEmailTrackingId(prmid[1]);
+ }
+ // if a promo code is pass thru the URL, set the promo in the cart and the cookie
+ prmid = window.location.search.match(/\bpromocode\=([^&#$]+)/) || null;
+ if(prmid) {
+ if (Adobe && Adobe.Cart && Adobe.Cart.Models && Adobe.Cart.Models.Cart) {
+ var cart = Adobe.Cart.Models.Cart;
+ var marketSegment = cart.getMarketSegment() || Adobe.Product.Controller.CPod.EduController.COM;
+ cart.addPromotion({code:prmid[1], marketSegment:marketSegment});
+ cart.savePromoCode(prmid[1]);
+ }
+ }
+ }
+ //]]>
+</script>
+<script>
+ $(document).ready(function()
+ {
+ adobe.dom.param("wcmmode=disabled");
+ adobe.dom.param("compress=false");
+ });
+</script>
+<script>
+ var locales = {"cn":true,"us":true,"en_xx":true,"mena_fr":true,"tw":true,"jp":true};
+ var tokens = document.location.pathname.split('/');
+ var locale = ((tokens.length < 2) || ((locales[tokens[1]] == undefined) && tokens[1]!='content')) ? 'us' : tokens[1];
+ var geoCook = 'international=';
+ var cookies = document.cookie.split(';');
+ for(var i=0;i < cookies.length;i++) {
+ var c = cookies[i];
+ if ((c.indexOf(geoCook) >= 0) && !(locale=='content') ){
+ var preferredLocale = c.substring(c.indexOf(geoCook) + geoCook.length,c.length);
+ if ((preferredLocale != locale)&&(locales[preferredLocale])){
+ var url = document.location.pathname + document.location.search;
+ if (locale == 'us'){
+ url = '/' + preferredLocale + url;
+ } else {
+ var suffix = url.substring(locale.length + 1);
+ if ((suffix == null) || (suffix == ""))
+ {
+ suffix = "/";
+ }
+ if (preferredLocale != 'us'){
+ url = '/' + preferredLocale + suffix;
+ } else {
+ url = suffix;
+ }
+ }
+ window.location.replace(url);
+ }
+ }
+ }
+</script>
+<!--[if (gte IE 9)|(IEMobile)]><!-->
+ <link rel="stylesheet" media="only screen" href="/etc/pagetables/reflowtypes/adobe_adc_article.css"/>
+ <script src="/etc/pagetables/reflowtypes/adobe_adc_article.js"></script>
+ <!--<![endif]-->
+<script>
+ //<![CDATA[
+ if(typeof jQuery != 'undefined'){
+ (function($) {
+ var dispatcher = (adobe.vrbl("reflowDispatcher") || adobe.vrbl("reflowDispatcher", adobe.reflow.createDispatcher("width", window.document))),
+ viewport = $(window),
+ viewportWidth = NaN,
+ meta = window.document.getElementsByName("viewport")[0],
+ metaContent;
+
+ $(window).bind("resize orientationchange", setRenderMode);
+
+ if(meta) {
+ $(window.document).bind("adobe.reflow.LayoutChange", snapViewportToMaxWidth);
+ }
+
+ setRenderMode();
+
+ function snapViewportToMaxWidth(event, layout_event) {
+ if (layout_event.snapView && layout_event.active) {
+ var widthSetter = "width=",
+ width = widthSetter+layout_event.maxRange,
+ content = meta.getAttribute("content");
+
+ if(content.indexOf(widthSetter) > -1) {
+ content = content.replace(/width=[^,$]+/, width);
+ } else {
+ content = width;
+ }
+ meta.setAttribute("content", content);
+ }
+ }
+
+ function setRenderMode() {
+ var currentViewportWidth = viewport.width();
+ if (viewportWidth == currentViewportWidth) {
+ return;
+ } //trottle noisy event
+ viewportWidth = currentViewportWidth;
+ dispatcher.updateLayout(viewportWidth);
+ }
+ })(jQuery);
+ }
+ //]]>
+</script>
+<link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/article-compressed.css"/>
+<script src="http://community.adobe.com/help/badge/v4/ionLoader.js"></script>
+ <script src="http://community.adobe.com/help/badge/v4/ionSupport.js"></script>
+ <script src="http://community.adobe.com/help/badge/v4/ionBadge.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/jquery.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/utils.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/shared.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/kernel.js"></script>
+<link rel="stylesheet" href="/apps/dotcom/ag-widgets.css" type="text/css">
+<script type="text/javascript">
+ $CQ(function() {
+ CQ_Analytics.SegmentMgr.loadSegments("/etc/segmentation");
+ CQ_Analytics.ClientContextUtils.init("/etc/clientcontext/default","/content/dotcom/en/devnet/flex/articles/flex4_skinning");
+
+
+ });
+</script><script type="text/javascript" src="/etc/clientlibs/granite/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/designs/dotcom/clientlib/stores.js"></script>
+<link rel="stylesheet" href="/etc/clientlibs/granite/jquery-ui.css" type="text/css">
+<link rel="stylesheet" href="/etc/clientlibs/foundation/jquery-ui/themes/default.css" type="text/css">
+<script src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/typekit/yoe7ink.js"></script>
+ <script>try{Typekit.load();}catch(e){}</script>
+ </head>
+<body class="Text TextMedium Link">
+<div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP">
+ <div class="PrintLayoutHide">
+ <!--googleoff: all--><div class="sitenav"><script>
+ //<![CDATA[
+ if (navigator.userAgent.match(/iPad/i) != null){
+ adobe.dom.createStyleSheet($('head').get(0), "/include/style/default/SiteHeader-iPad.css");
+ }
+
+ $(document).ready(adobe.fn.initGlobalNav);
+ //]]>
+</script>
+<!--googleoff: index-->
+<!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/globalnav/en_us/globalnav_ssi.html#1 $ -->
+<form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <div id="SiteHeader" class="SiteHeader Text TextSmall">
+ <span id="globalnav"></span>
+ <a href="/" id="shHome" class="SiteHeaderHome">Adobe</a>
+ <div class="SiteHeaderBar" id="shBar">
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts">
+ <a href="/products/catalog.html?promoid=KAWQI" id="shProductsLink" class="SiteHeaderBarLink">Products</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Full" id="ProductsPanel">
+ <div class="SiteHeaderColumnSingle">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Top destinations</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=JQPEQ" id="Products_Topdestinations_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=KFKQF" id="Products_Topdestinations_CreativeCloudforteams">Creative Cloud for teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/cs6.html?promoid=JOLIS" id="Product_Topdestinationss_CreativeSuite6">Creative Suite 6</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/marketing?promoid=JOLIT" id="Products_Topdestinations_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=JOLIR" id="Products_Topdestinations_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=JOLIW" id="Products_Topdestinations_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAWQH" id="Product_Topdestinationss_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education/students.html?marketSegment=EDU&promoid=KFKQD" id="Product_Topdestinationss_Students">Students</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/elements-family.html?promoid=JOLIV" id="Product_Topdestinationss_Elementsfamily">Elements family</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Creative Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=KAUBZ" id="Products_AdobeCreativeCloud_WhatisAdobeCreativeCloud">What is Adobe Creative Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/design.html?promoid=KFKPZ" id="Products_AdobeCreativeCloud_Design">Design</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/web.html?promoid=KFKQC" id="Products_AdobeCreativeCloud_Web">Web</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/photography.html?promoid=KFKQA" id="Products_AdobeCreativeCloud_Photography">Photography</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KFKQB" id="Products_AdobeCreativeCloud_Video">Video</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/students.html?marketSegment=EDU&promoid=JUTMG" id="Products_AdobeCreativeCloud_Students">Students</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=JZVVU" id="Products_AdobeCreativeCloud_Teams">Teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPX" id="Products_AdobeCreativeCloud_Enterprise">Enterprise</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise/education.html?promoid=KFKQE" id="Products_AdobeCreativeCloud_Educationalinstitutions">Educational institutions</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPY" id="Products_AdobeCreativeCloud_Government">Government</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Design and photography</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=KAUCA" id="Products_DesignandPhotography_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/illustrator.html?promoid=KAUCB" id="Products_DesignandPhotography_Illustrator">Illustrator</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/indesign.html?promoid=KAUCC" id="Products_DesignandPhotography_InDesign">InDesign</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/muse.html?promoid=KAUCE" id="Products_DesignandPhotography_AdobeMuse">Adobe Muse</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop-lightroom.html?promoid=KAUCD" id="Products_DesignandPhotography_Lightroom">Lightroom</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Video</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/premiere.html?promoid=KAUCJ" id="Products_Video_AdobePremiere">Adobe Premiere</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/aftereffects.html?promoid=KAUCK" id="Products_Video_AfterEffects">After Effects</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Web development and HTML5</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com/edge/?promoid=KAGMS" target="_blank" id="Products_WebdevelopmentHTML5_EdgeToolsServices">Edge Tools & <span class="SiteHeaderIconNewWindowNoWrap">Services<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/dreamweaver.html?promoid=KAUCF" id="Products_WebdevelopmentHTML5_Dreamweaver">Dreamweaver</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://gaming.adobe.com/?promoid=KAUCG" target="_blank" id="Products_WebdevelopmentHTML5_Gaming"><span class="SiteHeaderIconNewWindowNoWrap">Gaming<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Marketing Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing.html?promoid=KAUCL" id="Products_AdobeMarketingCloud_WhatisAdobeMarketingCloud">What is Adobe Marketing Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=KAVVU" id="Products_AdobeMarketingCloud_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAVVV" id="Products_AdobeMarketingCloud_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=KAVVX" id="Products_AdobeMarketingCloud_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAVVW" id="Products_AdobeMarketingCloud_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=KAVVY" id="Products_AdobeMarketingCloud_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQH" id="Products_AdobeMarketingCloud_Campaignmanagement">Campaign management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Analytics</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAUCM" id="Products_Analytics_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discover.html?promoid=KAUCN" id="Products_Analytics_AdobeDiscover">Adobe Discover</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/insight.html?promoid=KAUCO" id="Products_Analytics_Insight">Insight</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Social</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAUCP" id="Products_Social_AdobeSocial">Adobe Social</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Experience Manager</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/cq.html?promoid=KAUCQ" id="Products_ExperienceManager_CQ">CQ</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/scene7.html?promoid=KAUCR" id="Products_ExperienceManager_Scene7">Scene7</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Target</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/testandtarget.html?promoid=KAUCS" id="Products_Target_TestTarget">Test&Target</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/recommendations.html?promoid=KAUCT" id="Products_Target_Recommendations">Recommendations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/searchandpromote.html?promoid=KAUCU" id="Products_Target_SearchPromote">Search&Promote</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Media Optimizer</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/adlens.html?promoid=KAUCV" id="Products_MediaOptimizer_AdLens">AdLens</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audiencemanager.html?promoid=KAUCW" id="Products_MediaOptimizer_AudienceManager">AudienceManager</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audienceresearch.html?promoid=KAUCX" id="Products_MediaOptimizer_AudienceResearch">AudienceResearch</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Campaign management</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQI" id="Products_Campaignmanagement_AdobeCampaign">Adobe Campaign</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnSingle SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Document services</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAUCY" id="Products_DocumentServices_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.echosign.adobe.com/en/home.html?promoid=KAUDB" target="_blank" class="SiteHeaderLinkNewWindow" id="Products_DocumentServices_EchoSign"><span class="SiteHeaderIconNewWindowNoWrap">EchoSign<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/formscentral/en/home.html?promoid=KAUCZ" target="_blank" id="Products_DocumentServices_FormsCentral"><span class="SiteHeaderIconNewWindowNoWrap">FormsCentral<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/sendnow/en/home.html?promoid=KAUDA" target="_blank" id="Products_DocumentServices_SendNow"><span class="SiteHeaderIconNewWindowNoWrap">SendNow<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/welcome/en/home.html?promoid=KAUDC" target="_blank" id="Products_DocumentServices_Acrobatcom"><span class="SiteHeaderIconNewWindowNoWrap">Acrobat.com<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeader">Publishing</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/digital-publishing-suite-family.html?promoid=JOLIU" id="Products_Publishing_DigitalPublishingSuite">Digital Publishing Suite</a></li>
+ </ul>
+ </div>
+ </div>
+ <br style="clear: both" />
+
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderRightLink">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog.html?promoid=JOOTH" id="Products_Seeallproducts">See all products</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBusinessSolutions">
+ <a href="/solutions.html?promoid=KAWQJ" id="shBusinessSolutionsLink" class="SiteHeaderBarLink">Business solutions</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Double" id="BusinessSolutionsPanel">
+ <div class="SiteHeaderRow">
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">By business need</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=JOLJB" id="BusinessSolutions_Bybusinessneed_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=JOLJA" id="BusinessSolutions_Bybusinessneed_Digitalpublishing">Digital publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAWSC" id="BusinessSolutions_Bybusinessneed_Documentmanagement">Document management</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=JOLIX" id="BusinessSolutions_Bybusinessneed_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=JZPNO" id="BusinessSolutions_Bybusinessneed_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAXLU" id="BusinessSolutions_Bybusinessneed_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KAUDD" id="BusinessSolutions_Bybusinessneed_Videoeditingandserving">Video editing and serving</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com?promoid=JZEFF" target="_blank" class="SiteHeaderLinkNewWindow" id="BusinessSolutions_Bybusinessneed_Webdevelopment">Web <span class="SiteHeaderIconNewWindowNoWrap">development<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=JOOYM" id="BusinessSolutions_Bybusinessneed_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=JOOTI" id="BusinessSolutions_Seeallbusinessneeds">See all business needs</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">By industry</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/broadcasting.html?promoid=JOLIY" id="BusinessSolutions_Byindustry_Broadcast">Broadcast</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education.html?marketSegment=EDU&promoid=JOLIZ" id="BusinessSolutions_Byindustry_Education">Education</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/financial-services.html?promoid=KAUDE" id="BusinessSolutions_Byindustry_Financialservices">Financial services</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/government.html?promoid=KAUDF" id="BusinessSolutions_Byindustry_Government">Government</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=KAUDG" id="BusinessSolutions_Byindustry_Publishing">Publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/retail.html?promoid=KAWSD" id="BusinessSolutions_Byindustry_Retail">Retail</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=KAUDH" id="BusinessSolutions_Seeallindustries">See all industries</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shSupportLearning">
+ <a href="http://helpx.adobe.com/support/?promoid=KAWQK" id="shSupportLearningLink" class="SiteHeaderBarLink">Support & Learning</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="SupportLearningPanel">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeaderSmall">I need help</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/support/?promoid=JZEFP" id="SupportLearning_Ineedhelp_Products">Products</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/creative-cloud/topics/getting-started.html?promoid=JZEFO" id="SupportLearning_Ineedhelp_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/marketing-cloud.html?promoid=KAWSE" id="SupportLearning_Ineedhelp_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://forums.adobe.com/index.jspa?promoid=JZEFM" target="_blank" id="SupportLearning_Ineedhelp_Forums"><span class="SiteHeaderIconNewWindowNoWrap">Forums<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">I want to learn</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/learning.html?promoid=KAUDK" id="SupportLearning_Iwanttolearn_Trainingandtutorials">Training and tutorials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://training.adobe.com/certification.html?promoid=KAUDM" target="_blank" id="SupportLearning_Iwanttolearn_Certification"><span class="SiteHeaderIconNewWindowNoWrap">Certification<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/devnet.html?promoid=KAUDN" id="SupportLearning_Iwanttolearn_AdobeDeveloperConnection">Adobe Developer Connection</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/designcenter.html?promoid=KAUDO" id="SupportLearning_Iwanttolearn_AdobeDesignCenter">Adobe Design Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://tv.adobe.com?promoid=KFELF" target="_blank" id="SupportLearning_Iwanttolearn_AdobeTV">Adobe <span class="SiteHeaderIconNewWindowNoWrap">TV<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing/guides.html?promoid=KAWSF" id="SupportLearning_Iwanttolearn_AdobeMarketingCenter">Adobe Marketing Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://labs.adobe.com/?promoid=JZEFQ" target="_blank" id="SupportLearning_Iwanttolearn_AdobeLabs">Adobe <span class="SiteHeaderIconNewWindowNoWrap">Labs<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shDownload">
+ <a href="/downloads/?promoid=KAWQL" id="shDownloadLink" class="SiteHeaderBarLink">Download</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="DownloadPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFS" id="Download_Producttrials">Product trials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/flashplayer/?promoid=JZEFT" id="Download_AdobeFlashPlayer">Adobe Flash Player</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/reader/?promoid=JZEFU" id="Download_AdobeReader">Adobe Reader</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/air/?promoid=JZEFV" id="Download_AdobeAIR">Adobe AIR</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFW" id="Download_Seealldownloads">See all downloads</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shCompany">
+ <a href="/company.html?promoid=KAWQM" id="shCompanyLink" class="SiteHeaderBarLink">Company</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="CompanyPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/careers.html?promoid=JZEFX" id="Company_CareersatAdobe">Careers at Adobe</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/invrelations/?promoid=JZEFZ" id="Company_InvestorRelations">Investor Relations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/pressroom/?promoid=JZEGA" id="Company_Newsroom">Newsroom</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/privacy.html?promoid=JZEGB" id="Company_Privacy">Privacy</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/corporate-responsibility.html?promoid=JZEFY" id="Company_CorporateResponsibility">Corporate Responsibility</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/customershowcase.html?promoid=KEWBG" id="Company_CustomerShowcase">Customer Showcase</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/company/contact.html?promoid=JZEGC" id="Company_Contactus">Contact us</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/company.html?promoid=JZPLK" id="Company_Morecompanyinfo">More company info</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBuy">
+ <a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_software_sl_mostpopular.html?promoid=KAWQN" id="shBuyLink" class="SiteHeaderBarLink">Buy</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="BuyPanel">
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software.html?marketSegment=COM&promoid=KAWQO" id="Buy_Forpersonalandprofessionaluse">For personal and professional use</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_education_sl_alledu.html?marketSegment=EDU&promoid=KAWQP" id="Buy_Forstudentseducatorsandstaff">For students, educators, and staff</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOLJE" id="Buy_Forsmallandmediumbusinesses">For small and medium businesses</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/volume-licensing.html?promoid=KAWQQ" id="Buy_VolumeLicensing">Volume Licensing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discount-software-coupons.html?promoid=KAWQR" id="Buy_Specialoffers">Special offers</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://success.adobe.com/en/na/programs/rfi/dm_sales_inquiries.html?promoid=KAWSG" target="_blank" id="Buy_AdobeMarketingCloudsales">Adobe Marketing Cloud <span class="SiteHeaderIconNewWindowNoWrap">sales<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!--
+ <div id="tooltipStrings" class="SiteHeaderTooltipStrings LayoutHidden">
+ <span id="tooltipStringExpandMenu">Expand menu</span>
+ <span id="tooltipStringOpenLink">Open link</span>
+ </div>
+ -->
+
+ <a href="/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a>
+ <div class="SiteHeaderBarItem SiteHeaderBarItemLast"> </div>
+ <div id="site-search" class="SiteHeaderSearch">
+ <input title="Search" type="text" id="search-input" name="term" maxlength="1000" />
+ <input type="hidden" id="searchbuddy-loc" name="loc" value="en_us" />
+ <button type="submit" id="search-submit" class="icon-replace search">Search</button>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <div id="shSignInBlock">
+ <a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a>
+ <a href="/account/sign-in.adobedotcom.html" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a>
+ <div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;">
+ <div class="SiteHeaderPanelRow">
+ <span class="SiteHeaderPanelHeader">Why sign in?</span>
+ Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
+ </div>
+ </div>
+ </div>
+
+ <a href="/account.html" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a>
+
+ <div class="SiteHeaderPopPanelShadow" id="WelcomePanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel" id="WelcomePanel" style="display: none;">
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_en_us">My Adobe</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myorders_en_us">My orders</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myinformation_en_us">My information</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyProductsServices">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myproducts_services_en_us">My products and services</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut">
+ <a class="SiteHeaderPanelHeader" id="shSignOutLink" href="/cfusion/membership/logout.cfm">Sign out</a>
+ </div>
+ </div>
+
+ <div id="MyCartLinkContainer">
+ <a href="/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a>
+ </div>
+
+ <a href="/privacy.html" id="shPrivacy" class="SiteHeaderUserItem">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a>
+ </div>
+ </div>
+</form>
+
+<div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall">
+ <a href="/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a>
+
+ <div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile">
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileBuy"><a href="/go/gnav_store_en_us" id="shBuyMobile" class="SiteHeaderBarLink">Buy</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemMobileNoPadding"> </span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight SiteHeaderBarItemMobileNoPadding"> </span>
+ </div>
+ <div class="SiteHeaderBarMobileExtend" id="shBarExtend">
+ <div id="shBarExtendSections" style="display: none;">
+ <div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a>
+ <a href="/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a>
+ </div>
+ <div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a>
+ <a href="/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a>
+ </div>
+ </div>
+ <div id="shBarExtendSearch" style="display: none;">
+ <form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000" />
+ <button type="submit" id="search-submit-mobile">Search</button>
+ </form>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <a href="/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong">Sign in</a>
+ <a href="/cfusion/membership/logout.cfm" id="shSignOutMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong" style="display: none;">Sign out</a>
+ <a href="/privacy.html" id="shPrivacyMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a>
+ </div>
+</div>
+<!--googleon: index--><div class="hovercart"><div id="HoverCartModal">
+ <div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;">
+ <div class="CartHeaderPopPanel HoverCart" id="CartPanel">
+ <div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none">
+ <div class="LayoutBreakAfter">
+ <div class="HoverCart-1 LayoutHItem">
+ <div style="padding-left:60px;" class=" LayoutBreakAfter LayoutPullout">
+ <div id="HoverCartBoxShotxyz" class="HoverCartBoxShot">
+ <a href="">
+ <img src="" class="LayoutImage" alt=""/>
+ </a>
+ </div>
+ <div style="float:left;width:100%" class="CPodCostCell">
+ <span class="TextStrong ProductName" id="HoverCartHeaderxyz">
+ <a href="#">
+ </a>
+ </span>
+ <div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz">
+ </div>
+ <span id="HoverCartPreOrderHardGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderHardGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.</span>
+ <span id="HoverCartPreOrderSoftGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderSoftGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.</span>
+
+ </div>
+ </div>
+</div>
+ <div class="LayoutHItem HoverCart-2">
+ <div class="HoverCartQty">
+ Qty:
+ <span id="HoverCartQtyxyz">
+ </span>
+ </div>
+ </div>
+ <div class="LayoutRight">
+ <div class="CheckoutCostDark LayoutRight TextRight">
+ <span id="HoverCartPricexyz">
+ </span>
+ <span id="HoverCartSubscriptionxyz" class="CheckoutSubscription">
+ </span>
+ <div id="HoverCartVatPercentageLabelxyz" class="TextEm TextSmall" style="display:none; max-width: 100px;"><span id="HoverCartVatPercentagePreTextxyz"></span>
+ <span id="HoverCartVatPercentagexyz"></span></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="HoverCartEDUMessage LayoutBigCellBottom" style="display:none">Purchase requires verification of academic eligibility</div>
+ </div>
+ <div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div>
+ <a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/cart.html"></a>
+ <div id="HoverCartButtons" class="HoverCart-1-3">
+ <table border="0" align="right" width="70%">
+ <tr>
+ <td>
+ <div class="TextRight HoverCartSubTotal">Subtotal</div>
+ <div id="ExVatLabel" style="display:none" class="TextEm TextSmall TextRight"></div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartSubTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartPromotionsRow">
+ <td>
+ <div class="TextRight HoverCartPromotionsLabel HoverCartSubTotal">Promotions</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartPromotions">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartShippingRow">
+ <td>
+ <div class="TextRight HoverCartShippingLabel HoverCartSubTotal">Estimated shipping</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartShipping">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartVATRow">
+ <td>
+ <div class="TextRight HoverCartVATLabel HoverCartSubTotal">Tax</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartVat">
+ </span>
+ </div>
+ <div id="CartTaxHeader">
+ Calculated at checkout</div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><div class="RuleH"></div></td>
+ <td><div class="RuleH"></div></td>
+ </tr>
+ <tr>
+ <td>
+ <div class="TextRight HoverCartTotalLabel HoverCartSubTotal">Total</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </table>
+ <div class="LayoutBreak"></div>
+
+ <div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter">
+ <a href="/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+<script>
+ /*global jQuery,adobe*/
+ jQuery.createNs("Adobe.Cart.ShoppingCart");
+
+ Adobe.Cart.ShoppingCart.HoverCart = {
+
+ MaxItems: "4",
+
+ DisplayTime: "5000",
+
+ MoreItemsTextSingular: "() more item in your cart",
+
+ MoreItemsTextPlural: "() more items in your cart",
+
+ MonthToMonthText: "per month",
+
+ YearlyText: "per year"
+ };
+
+ Adobe.Cart.TaxLabels = {
+ TaxInclusiveText : "",
+ TaxNotApplicable : "Tax not applicable"
+ };
+
+ Adobe.Cart.ShoppingCart.GlobalVars = {
+
+ CountryCode: "US",
+
+ MarketSegment: "COM",
+
+ AkamaiURLPrefix: "http://wwwimages.adobe.com/www.adobe.com",
+
+ PriceMonthText: "per month",
+
+ PriceYearText: "per year",
+
+ FullSubMonthText: "Month-to-month",
+
+ FullSubYearText: "One-year",
+
+ SubMonthText: "Monthly",
+
+ SubYearText: "Annual",
+
+ SubscriptionItemText: "NONE",
+
+ TermTypeMonth: "MONTH",
+
+ TermTypeYear: "YEAR",
+
+ BackupDVDParent: "_PARENT",
+ /*
+ params: {
+ cart,
+ price,
+ categoryPath,
+ originalPrice,
+ storeName,
+ locale,
+ usePrecision,
+ type,
+ taxCode,
+ delimiter,
+ showCentDelim,
+ distributionMethod
+ }
+ */
+ getPriceLabel: function(params) {
+ var currency = params.cart.currency;
+ var params = {
+ storeName: params.storeName,
+ locale: params.locale,
+ productKey: params.categoryPath,
+ priceObject: {
+ price: {
+ orginalPriceWithoutTax: params.originalPrice,
+ priceWithoutTax: params.price,
+ taxCode: params.taxCode || ""
+ },
+ priceTypeKey: params.distributionMethod
+ },
+ currencyObject: {
+ delimiter: params.delimiter || ",",
+ formatString: currency.FORMATSTRING,
+ iso3Code: currency.CODE,
+ symbol: currency.SYMBOL,
+ usePrecision: params.usePrecision
+ },
+ showCentDelim : params.showCentDelim || false,
+ type: params.type
+ };
+ return params;
+ },
+
+ isSubscription: function(serviceCommitment, termType) {
+ return (serviceCommitment == this.SubscriptionItemText &&
+ (termType == this.TermTypeMonth || termType == this.TermTypeYear));
+ },
+
+ subscriptionItem: function(serviceCommitment, termType) {
+ return (termType == this.TermTypeMonth &&
+ (serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear));
+ },
+
+ getSubscriptionText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.SubMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.SubYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ if (serviceCommitment === this.TermTypeMonth) {
+ return this.FullSubMonthText;
+ } else if (serviceCommitment === this.TermTypeYear) {
+ return this.FullSubYearText;
+ }
+ }
+ return "";
+ },
+
+ getSubscriptionPriceText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.PriceMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.PriceYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ return this.PriceMonthText;
+ }
+ return "";
+ }
+
+ };
+</script>
+</div>
+<div id="modalContent" style="display:none;"></div>
+</div>
+<!--googleon: all--></div>
+ <div class="Link" id="top">
+ <div class="Link LayoutBreakAfter">
+ <div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link">
+ <div class="LayoutHeaderPath">
+ <div class="LayoutCellSides LinkStrong LayoutH IconAlign">
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet.html">
+ Adobe Developer Connection</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet/flex.html">
+ Flex Developer Center</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ </div>
+ </div>
+</div>
+</div>
+<div class="LayoutGrid-1-3 LayoutSlimGrid-1-2">
+ <h1 class="LayoutCellSides LayoutSmallRow TextH1">
+ Introducing skinning in Flex 4</h1>
+ </div>
+ </div>
+</div>
+<div class="LayoutRow Link RuleH">
+ <div class="LayoutBreakAfter">
+ <!-- Article Leaf -->
+ <div class="ArticleGrid-1 LayoutSlimGrid-1-2 ArticleWideGrid-1 TextSmall">
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleAuthorDisplay authordisplay"><h2 class="TextH5 LayoutRow">
+ by <a href="/devnet/author_bios/ryan_frishberg.html">Ryan Frishberg</a></h2>
+ <div class="LayoutRow">
+ <img title="" alt="Ryan Frishberg" class="ImageShadow LayoutImage" src="/content/dotcom/en/devnet/author_bios/ryan_frishberg/_jcr_content/image.adimg.mw.160.jpg/1296456393374.jpg"/></div>
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="parbase compbase articleTOC singlepagetoc"><div class="LayoutRow">
+ <h2 class="TextH5 LayoutSmallRow">Content</h2>
+ <ul class="LayoutSmallRow">
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader">
+ Writing a simple button skin</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_0">
+ Introducing the skinning contract</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_1">
+ Skinning contract continued: skin parts</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_2">
+ Creating a skinnable component</a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides">
+ <h2 class="TextH5 LayoutSmallRow">Modified</h2>
+ <p>6 July 2009</p>
+ </div>
+ <ul class="LayoutRow">
+ </ul>
+ </div>
+</div>
+ <div class="LayoutRow">
+ <div class="articleCommentSummary commentsummary"><div class="LayoutRow LayoutCellSides">
+ <div id="articleRankAndCommentSummary"></div>
+</div>
+</div>
+</div>
+ <div class="LayoutRow">
+ <!-- Page Tools -->
+ <div class="pagetools pageTools"><div class="LayoutBreakAfter">
+ <div class="LayoutRow LayoutBreakAfter TextH5">
+ <table class="LayoutMaxH">
+ <tbody>
+ <tr>
+ <td class="PanelFillDark">
+ <h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides">
+ Page tools</h2>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="LayoutCellSides">
+ <div class="LayoutRow">
+ <div id="PageTools" style="padding-left:23px;" class=" LayoutBreakAfter LayoutPullout">
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Facebook-button Icon IconFacebook" href="http://www.facebook.com/sharer.php"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://www.facebook.com/sharer.php" class="Facebook-button" title="Share on Facebook" target="_blank">Share on Facebook</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Twitter-button Icon IconTwitter" href="http://twitter.com/"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://twitter.com/" class="Twitter-button" title="Share on Twitter" target="_blank">Share on Twitter</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="LinkedIn-button Icon IconLinkedIn" href="http://www.linkedin.com/"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://www.linkedin.com/" class="LinkedIn-button" title="Share on LinkedIn" target="_blank">Share on LinkedIn</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Bookmark-button Icon IconBookmark" href="#"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a class="Bookmark-button" href="#">Bookmark</a>
+ </div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Print-button Icon IconPrint" href="#"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a class="Print-button" href="#">Print</a>
+ </div>
+ </div>
+ </div>
+</div>
+ </div>
+ </div>
+</div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <!-- Article Community -->
+ <div class="articletags articleTags"><div class="LayoutRow">
+ <div class="LayoutH LinkWeak TextTag">
+ <a href="/devnet/tagsearch.tsb.prod-_sl_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_fxg.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="FXG">FXG</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_skinning.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="skinning">skinning</a></div>
+ </div>
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="parbase adcFeedBack compbase adcfeedback"><script type="javascript">
+ //<![CDATA[
+ s_tagEnv = 'dev';
+ //]]>
+ </script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/script/article-compressed.js"></script>
+
+ <div id="helpful-pod">
+ <div id="helpful" class="collapsed">
+ <div id="helpfulspan">Was this helpful?</div>
+ <input type="radio" name="feedback" id="radioyes" onClick="showForm();"/><span id="yesspan" class="radio-option">Yes</span>  
+ <input type="radio" name="feedback" id="radiono" onClick="showForm();"/><span id="nospan" class="radio-option">No</span>
+ <textarea title="(Optional) Please let us know how we can improve this page. " id="feedbacktext" placeholder="" rows="5" cols="25" style="font-family:sans-serif;display:none"></textarea>
+ <button id="submitButton" onClick="submitForm();" style="display:none">Submit</button>
+ <button id="noCommentButton" onClick="hideForm();" style="display:none">No comment</button>
+ <br clear="both">
+ <div id="termsofuse"><p>By clicking Submit, you accept the <a href="/misc/terms.html">Adobe Terms of Use</a>.</p>
+</div>
+ </div>
+ <div id="fold"> </div>
+ </div>
+ <div id="helpful-thankyou" class="thankyou">Thanks for your feedback.</div>
+
+ <script>
+ //<![CDATA[
+ // Send CHL-specific data to SiteCatalyst
+ var s_chl = s_gi("mxchlprod");
+ var urlMatch = /(https?:\/\/)([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*))(index.html)?(\?\S+)?(#\S+)?/;
+ var adobeMatch = /(https?:\/\/)([-\w\.]+)+(\.adobe\.com)/;
+ var adobeLocaleMatch = /^\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var cqLocaleMatch = /^\/content\/help\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var ua = navigator.userAgent.toLowerCase();
+ s_chl.channel = "helpx";
+ s_chl.eVar3 = window.location.toString().replace(/[\?,#](.*)/, "");
+ s_chl.pageName = s_chl.eVar11 = document.title;
+ if ( typeof(omtrPageName) != 'undefined' && omtrPageName.length > 0 ) {
+ s_chl.pageName = s_chl.eVar11 = omtrPageName;
+ }
+ // s_chl.list1 = omtrProductList.replace(/,/g,":");
+ var omtrLocale = "en";
+ if (adobeLocaleMatch.test(location.pathname)) {
+ var matchArray = adobeLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+ else if (cqLocaleMatch.test(location.pathname)) {
+ var matchArray = cqLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+
+ s_chl.eVar8 = omtrLocale;
+ if (omtrLocale != "en") {
+ s_chl.eVar9 = document.title;
+ }
+ // Transmit
+ // The s_gs() call in compressed.js causes problems with any .t() call in any report suite
+ function s_gs(){}
+ s_chl.t();
+
+ function showForm(){
+ if (ua.indexOf('msie 6') == -1 ){
+ $('#helpfulspan').hide();
+ $('#radioyes').hide();
+ $('#radiono').hide();
+ $('#yesspan').hide();
+ $('#nospan').hide();
+ $('#feedbacktext').autofill();
+ $('#helpful').animate({width:'420px', height: '185px'});
+ $('#helpful').removeClass('collapsed');
+ $('#helpful').addClass('expanded');
+ $('#fold').css('background-position', '-12px 0');
+ displayTextField();
+ }else{
+ submitForm();
+ }
+ }
+
+
+
+ $(document).ready(function() {
+ var feedbackLocales = "en, jp, fr, de, it, se, es, nl , dk, br, no, fi";
+ if ( feedbackLocales.indexOf( omtrLocale ) > -1 ){
+ $('#helpful-pod').fadeIn();
+ $('#helpful-pod').animate({
+ opacity: 1,
+ top: '+=20'},
+ 1500);
+ }
+ });
+
+ // ]]>
+ </script>
+ </div>
+</div>
+ <div class="LayoutBreak"></div>
+ </div>
+ <!-- Main Content -->
+ <div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6">
+ <div class="ArticleWideGrid-2-4">
+ <div class="articlerequirements articlePrerequistes"><div class="PanelFillMedium PanelBorder LayoutRow TextSmall">
+ <div id="requirements-title" class="LayoutCell Link">
+ <h2 class="TextH5">
+ <span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span>
+ Requirements</h2>
+ </div>
+ <div id="requirements-content" class="LayoutBreakAfter">
+ <div class="ArticleGrid-2">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Prerequisite knowledge</h3>
+ <div class="LayoutRowBottom">
+ <p>This article assumes knowledge of the Flex 3 Framework.</p>
+</div>
+ <h3 class="TextH5 LayoutSmallRowTop">
+ User level</h3>
+ <p class="LayoutRowBottom">Intermediate</p>
+ </div>
+ </div>
+ <div class="ArticleGrid-3">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Required products</h3>
+ <ul class="LayoutSmallRowTop LayoutRowBottom">
+ <li class="LayoutSmallRow">
+ <span class="IconLeft IconSmallDownload"></span>Flex 4<a href="/go/tryflex/"> (Download trial)</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="ArticleGrid-4">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Sample files</h3>
+ <ul class="LayoutSmallRowTop LayoutRowBottom">
+ <li class="LayoutSmallRow"><a href="/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlePrerequistes/multiplefiles/node_1275452990789/file.res/flex4_skinning_sample2[1].zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>flex4_skinning_sample2.zip </a>
+ (4642 KB)</li>
+ <ul class="LayoutGutterLeft"><li class="LayoutGutterLeft">
+ </li></ul>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script>
+ adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+<script>
+ adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+</div>
+<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
+ <div class="parsys articlecontentAdobe"><div id="articlecontentAdobe">
+<a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>One of the main themes for the Flex 4 (codename: Gumbo) release is "Design in Mind", and skinning is a big part of that theme. Flash Player is the delivery mechanism for some of the most creative work to be found on the web today. However, Flex applications have gained a reputation for looking too similar to each other, as many developers choose to use the Flex default look and feel (known as Halo) as opposed to applying extensive styling or skinning.</p>
+<p>Flex 4 makes it easier to completely change the look and feel of an application. The new skinning architecture builds on top of other changes in Flex 4 and provides a clean separation between the logic and visual elements of a component. Because of this, none of the components in Flex 4 contains any information about their visual appearance. All of that information is contained in the skin file, and thanks to FXG and the new states syntax, the new skin files can be completely written in MXML, making them easier to read and write, as well as easier to access with tools.</p>
+<p>In this article, you'll learn about the improvements to the skinning architecture in Flex 4. By writing a basic skin for a button, you'll learn a little bit about FXG and the new states syntax. Next, you'll learn about the contract a component and a skin use to interact with each other through the process of skinning a slider. Lastly, you'll delve into skinnable components as you create a new component ripe for skinning.</p>
+<p>Note: Throughout this document, the term Halo components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in Flex 4.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_numberedheader" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
+ <a id="articlecontentAdobe_numberedheader"></a>
+ Writing a simple button skin</h3>
+</div>
+<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>FXG is a declarative markup language for vector graphics built to take advantage of Flash Player. With the new markup, it is easy to create a custom button. For this button, start with a simple rectangle with text inside of it (see Figure 1).</p>
+<p><b>Sample1.mxml</b></p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+xmlns:s="library://ns.adobe.com/flex/spark">
+ <s:Group verticalCenter="0" horizontalCenter="0">
+ <s:Rect id="rect" radiusX="4" radiusY="4" top="0"
+ right="0" bottom="0" left="0">
+ <s:fill>
+ <s:SolidColor color="0x77CC22" />
+ </s:fill>
+ <s:stroke>
+ <s:SolidColorStroke color="0x131313" weight="2"/>
+ </s:stroke>
+ </s:Rect>
+
+ <s:Label text="Button!" color="0x131313"
+ textAlign="center" verticalAlign="middle"
+ horizontalCenter="0" verticalCenter="1"
+ left="12" right="12" top="6" bottom="6"
+ />
+ </s:Group>
+</s:Application></code>
+ </div>
+</div>
+<a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="The sample1 button " alt="The sample1 button " class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image.adimg.mw.81.jpg/1279877233559.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 1. The sample1 button</div>
+</div>
+<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>If you're familiar with Flex 3, you'll be familiar with the syntax above, though you might not be familiar with the specific components used. The Group container is the basic, chromeless container in Spark. <code>Rect</code> is a new FXG graphic primitive, and it's what you'd expect—a rectangle. The last component in the document, Label, is a new text component in Spark. The MXML reads just like a description of the component—it's a rectangle with rounded corners that has a 1-pixel dark-gray stroke and a green fill with some text in the center.</p>
+<p>One of the great things about FXG is that not only is it much easier to understand than programmatic drawing instructions, it is also much more toolable because of the structure of XML. For more info about FXG, see the <a href="http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification" target="_blank">FXG specification</a>.</p>
+<h3>Converting your Button graphic to a Button skin</h3>
+<p>So far, the MXML document is just static artwork with no interactivity. It doesn't yet take advantage of the new skinning features in Flex 4. For that, you need to hook it up to the Button component and use it as a skin. To create a skin file for Spark, create a new MXML file with <code>Skin</code> as the root tag. Then, copy in the graphics code from above:</p>
+<p><b>ButtonSkin1.mxml</b></p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock_0" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- border and fill -->
+ <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
+ <s:fill>
+ <s:SolidColor color="0x77CC22" />
+ </s:fill>
+ <s:stroke>
+ <s:SolidColorStroke color="0x131313" weight="2"/>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- text -->
+ <s:Label text="Button!" color="0x131313"
+ textAlign="center" verticalAlign="middle"
+ horizontalCenter="0" verticalCenter="1"
+ left="12" right="12" top="6" bottom="6"
+ />
+</s:Skin></code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>You'll notice there is one more addition in the file states. I will discuss them a little later.</p>
+<p>With your skin file complete, you need to associate it with a Button component. Every skinnable component in the Spark architecture is associated with a skin via the <code>skinClass</code> CSS style that can be set either through style sheets or inline via MXML. In this case, I'll use the latter:</p>
+<p><b>Sample2.mxml</b></p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock_1" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+ <s:Button verticalCenter="0" horizontalCenter="0" skinClass="ButtonSkin1"
+ click="trace('I\'ve been clicked!')" focusIn="trace('focus...on me?')" />
+</s:Application></code>
+ </div>
+</div>
+<a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="The sample2 button" alt="The sample2 button" class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_0.adimg.mw.81.jpg/1279877250694.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 2. The sample2 button</div>
+</div>
+<a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>You've now hooked up the button to a new skin file. The Button component contains all the behavioral logic for the button. It adds the event listeners, dispatches new events, figures out what state the component is in, and so on. The skin doesn't have to deal with any of that and just defines the visuals of the component.</p>
+<p>However, the Button doesn't look any different than the static graphic you first created. The button is interactive, but it doesn't appear that way. This is because you haven't yet defined how the button looks in different states.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_numberedheader_0" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
+ <a id="articlecontentAdobe_numberedheader_0"></a>
+ Introducing the skinning contract</h3>
+</div>
+<a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>A static skin is pretty boring. For something interesting, the skin must be able to interact with the component and vice versa. These two elements interact with each other through the skinning contract. There are three pieces to this: skin states, data, and parts (see Figure 3). On one side, the component defines these three different pieces, and on the other side, the skin reacts to them.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="The skinning contract comprises data, parts, and states." alt="The skinning contract comprises data, parts, and states." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_1.adimg.mw.650.jpg/1279877280614.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 3. The skinning contract comprises data, parts, and states.</div>
+</div>
+<a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <h3>Defining skin states</h3>
+<p>Each skinnable component in Spark has a set of skin states. You can change the appearance of your skin based on what skin state the component is in. For a Button, there are four basic skin states: <code>up</code>, <code>over</code>, <code>down</code>, and <code>disabled</code>. You can modify the skin to have a different appearance in each of these states (see Figure 4).</p>
+<p><b>ButtonSkin2.mxml</b></p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock_2" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
+xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- dropshadow for the down state only -->
+ <s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0"
+ left="0" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0"/>
+ </s:fill>
+ <s:filters>
+ <s:DropShadowFilter knockout="true" blurX=�
<TRUNCATED>