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:08 UTC
[23/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/itemrenderers_pt4.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/itemrenderers_pt4.html b/ADC/devnet/flex/articles/itemrenderers_pt4.html
new file mode 100644
index 0000000..f2ad065
--- /dev/null
+++ b/ADC/devnet/flex/articles/itemrenderers_pt4.html
@@ -0,0 +1,1722 @@
+<!--
+ 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>Understanding Flex itemRenderers – Part 4: States and transitions | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="robots" content="noodp" />
+ <meta name="keywords" content="states" />
+ <meta name="description" content="Learn how itemRenderers can change their visual appearance based on either the data itself or the user's actions." /><meta name="creationDate" content="2010-09-07 @ 11:30:11" />
+ <meta name="lastModifiedDate" content="2010-09-07 @ 11:30:11" />
+ <meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Understanding Flex itemRenderers – Part 4: States and transitions"/>
+<meta name="blurb" content="Learn how itemRenderers can change their visual appearance based on either the data itself or the user's actions." />
+<meta name="author" content="Peter Ent" />
+<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/itemrenderers_pt4.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};
+ 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/itemrenderers_pt4");
+
+
+ });
+</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">
+ Understanding Flex itemRenderers – Part 4: States and transitions</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/peter_ent.html">Peter Ent</a></h2>
+ <div class="LayoutRow">
+ <img title="peter_ent_bio" alt="Peter Ent" class="ImageShadow LayoutImage" src="devnet/authors/bio/p/peter_ent_bio.jpg.adimg.mw.160.png"/></div>
+ <div class="LayoutRow">
+ <ul>
+ <li><a href="http://www.adobe.com/" title="Adobe" target="_blank">Adobe</a></li>
+ </ul>
+ </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">
+ States</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_0">
+ Adding elements</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_1">
+ Expanding list items</a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides">
+ <h2 class="TextH5 LayoutSmallRow">Created</h2>
+ <p>14 October 2008</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_states.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="states">states</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>To benefit most from this article, it is best if you are familiar with Flex Builder and ActionScript 3.0.</p>
+</div>
+ <h3 class="TextH5 LayoutSmallRowTop">
+ User level</h3>
+ <p class="LayoutRowBottom">Beginning</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 Builder 3<a href="/go/tryflashbuilder/"> (Download trial)</a></li>
+ </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>Communicating with the user of your application is what your itemRenderer does best. Sometimes that communication is as simple as presenting a name; sometimes more elaborately using colors; and sometimes with interactivity.</p>
+<p>itemEditors are truely interactive controls, but they are not the focus of this article. In these examples I'll demonstrate itemRenderers that change their visual appearance based on either the data itself or the user's actions.</p>
+<p>This series includes the following articles:</p>
+<ul>
+<li>Part 1: <a href="/devnet/flex/articles/itemrenderers_pt1.html">Inline renderers</a></li>
+<li>Part 2: <a href="/devnet/flex/articles/itemrenderers_pt2.html">External renderers</a></li>
+<li>Part 3: <a href="/devnet/flex/articles/itemrenderers_pt3.html">Communication</a></li>
+<li>Part 4: <a href="/devnet/flex/articles/itemrenderers_pt4.html">States and transitions</a></li>
+<li>Part 5: <a href="/devnet/flex/articles/itemrenderers_pt5.html">Efficiency</a></li>
+</ul>
+</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>
+ States</h3>
+</div>
+<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>The Flex <code><mx:State></code> is a very good way to change the appearance of an itemRenderer. States are easy to use, and when combined with transitions, give the user feedback and pleasent experience.</p>
+ <p>In this example, you'll create a new MXML itemRenderer (and remember, you can do this completely in ActionScript if you prefer) for the list. All this itemRenderer shows is the image, title, author, price, and a Button to purchase the book.</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"?>
+<mx:HBox xmlns:mx="/2006/mxml">
+
+ <mx:Image id="bookImage" source="{data.image}" />
+ <mx:VBox height="115" width="100%" verticalAlign="top" verticalGap="0" paddingRight="10">
+ <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
+ <mx:Label text="{data.author}" />
+ <mx:HBox id="priceBox" width="100%">
+ <mx:Label text="{data.price}" width="100%"/>
+ <mx:Button label="Buy" />
+ </mx:HBox>
+ </mx:VBox>
+</mx:HBox>
+ </code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>What you want, however, is, if the book is not in stock (the data has <code><instock></code> nodes that are either <code>yes</code> or <code>no</code>) the price and "Buy" Button will be invisible. I've made things a bit convenient for coding here by giving the HBox parent of the price and Button an <code>id</code> property. This allows me to change the visibility of both of those items by changing the visibility of the HBox, <code>priceBox</code>.</p>
+ <p>You can do this by overridding the <code><span>set data</span></code> function, which you'll do, but instead of directly changing the visibility of <code><span>priceBox</span></code>, you'll use this state defintion:</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"> <mx:states>
+ <mx:State name="NoStockState">
+ <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
+ </mx:State>
+ </mx:states></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>Place this just below the root <code><mx:HBox> </code>tag. </p>
+ <p>This example is a bit far-fetched in that it is overly complicated to do a simple task, but it shows how to use states. There are two states:</p>
+ <ul>
+ <li> The base state: this is the normal state of a component. Components that do not use states simply have this base state. In this example, the base state has the <code><span>priceBox</span></code> <code>visible</code> property as <code>true</code> (the default). This is the case when <code>instock</code> is <code>yes</code>. </li>
+ <li> The <code><span>NoStockState</span></code>: this is the state when the value of <code>instock</code> is <code>no</code>. When this state is active, the <code><span>SetProperty</span></code> instructions are carried out. The <code>target</code> property determines which member of the class is in question, the <code>name</code> property is the name of the property to change on the target, and <code>value</code> is the new value for the property. </li>
+ </ul>
+ <p>The <code>set data</code> function determines which state to use by looking at the value of <code>instock</code>:</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"> override public function set data( value:Object ) : void
+ {
+ super.data = value;
+
+ if( data )
+ {
+ if( data.instock == "yes" )
+ currentState = "";
+ else
+ currentState = "NoStockState";
+ }
+ }</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>The <code>currentState</code> is a property of all UIComponent controls. It determines which state is the active one. When switching between states, the Flex framework begins with the base state and then applies the rules for the given state. </p>
+ <p class="note"><b>Note: </b>Remember that itemRenderers are recycled, so you must always restore values; never leave an <code>if</code> without an <code>else</code> in an itemRenderer.</p>
+ <p>If you are feeling adventurous, you can do away with the <code>set data</code> override in this example. Instead, set <code><span>currentState</span></code> directly in the root tag by using a data binding expression: </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"><mx:HBox xmlns:mx="/2006/mxml" width="400" currentState="{data.instock == 'yes' ? '' : 'NoStockState'}" ></code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>The <code>currentState</code>'s value is set by examining <code><span>data.instock</span></code> right inline with the root tag–a nice trick, but it might be harder to maintain. </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>
+ Adding elements</h3>
+</div>
+<a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>In this itemRenderer, the price and Buy button appears only if the <code>instack</code> value is <code>yes</code>. You could do this without a state, of course, but if your itemRenderer has more controls to be added or removed, a state will make more sense as the controls' appearance can be controlled simply by setting the itemRenderer's <code>currentState</code> property. </p>
+ <p>Instead of just removing the price and Button, you'll have the state add a label telling the user the item is out of stock. Here's the modified state:</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock_3" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"> <mx:states>
+ <mx:State name="NoStockState">
+ <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
+ <mx:AddChild relativeTo="{priceBox}" position="before">
+ <mx:Label text="-- currently not in stock --" color="#73DAF0"/>
+ </mx:AddChild>
+ </mx:State>
+ </mx:states></code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>The <code><mx:AddChild></code> tag says to add the Label into the <code><span>priceBox</span></code>. In addition to setting the <code>priceBox</code>'s <code>visible</code> property to <code><span>false</span></code>, a friendly message replaces it.</p>
+ <p>Again, you could add this label in the <code><span>set data</span></code> function–or add it initially and just set its visibility to <code><span>false</span></code> and change it to <code>true</code> in the <code>set data</code> function. But I think you can see the value of the state: if the requirement for the <code>instock</code> being <code>no</code> condition gets more complex, all you need to do is adjust the <code>NoStockState</code>; the ActionScript code which switches the state remains the same.</p>
+ <p class="note"><b>Note:</b> You can modify states in Flex Builder's Design View. </p>
+</div>
+ </div>
+<a name="articlecontentAdobe_numberedheader_1" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
+ <a id="articlecontentAdobe_numberedheader_1"></a>
+ Expanding list items</h3>
+</div>
+<a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>This example does not work well for List controls, but does perform nicely for a VBox and Repeater. This question of expanding an item in place becomes dicey when the list has to be scrolled. Imagine this: you've got a list of items with all the same height. Now you expand the height of item 2. So far so good: item 2 is taller than the other visible items. And there's the catch: the <i>visible</i> items. Now scroll the list. Remember that itemRenderers are recycled. So when item 2 scrolls out of view, its itemRenderer will be moved to the bottom of the list. You've got to reset its height. OK, that can work pretty simply. Now scroll the list so item 2 is back in view. You would expect it to be the expanded height. How does the itemRenderer know to do that? From previous articles, you know that information either comes from the data itself or from some external source. </p>
+ <p>I think a resizing itemRenderer is too complex and not really worth the effort. I believe there is a better way to do this using VBox and Repeater. However, the catch with Repeater is that <b>every</b> child will be created. If you have 1000 records and use a Repeater, you will get 1000 instances of your itemRenderer. </p>
+ <p>For this example you'll still write an itemRenderer, but will use it as the child of a VBox. The elements of a list look pretty simple: the name of a book and its author. But click the itemRenderer and it expands in place. This is accomplished using two tactics:</p>
+ <ul>
+ <li> The itemRenderer has a state that includes the additional information. </li>
+ <li> The itemRenderer uses a Resize transition to give a smoother expansion and contraction of the itemRenderer. </li>
+ </ul>
+ <p>The base state of the itemRenderer is pretty simple: </p>
+</div>
+ </div>
+<a name="articlecontentAdobe_codeblock_4" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"> <mx:HBox width="100%">
+ <mx:Label text="{data.author}" fontWeight="bold"/>
+ <mx:Text text="{data.title}" width="100%" fontSize="12" selectable="fals
<TRUNCATED>