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:12 UTC
[27/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/itemeditors_pt3.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/itemeditors_pt3.html b/ADC/devnet/flex/articles/itemeditors_pt3.html
new file mode 100644
index 0000000..16c14fe
--- /dev/null
+++ b/ADC/devnet/flex/articles/itemeditors_pt3.html
@@ -0,0 +1,1608 @@
+<!--
+ 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 itemEditors – Part 3: Using itemRenderers as itemEditors | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="robots" content="noodp" />
+ <meta name="keywords" content="" />
+ <meta name="description" content="Use one class to display and edit the data by employing itemRenderers as itemEditors." /><meta name="creationDate" content="2010-11-11 @ 18:33:00" />
+ <meta name="lastModifiedDate" content="2010-11-11 @ 18:33:00" />
+ <meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Understanding Flex itemEditors – Part 3: Using itemRenderers as itemEditors"/>
+<meta name="blurb" content="Use one class to display and edit the data by employing itemRenderers as itemEditors." />
+<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/itemeditors_pt3.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/itemeditors_pt3");
+
+
+ });
+</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 itemEditors – Part 3: Using itemRenderers as itemEditors</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>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides">
+ <h2 class="TextH5 LayoutSmallRow">Created</h2>
+ <p>30 March 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></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>Prior experience working with Flex Builder to create applications is needed.</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 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>In <a href="/devnet/flex/articles/itemeditors_pt1.html">Part 1</a> and <a href="/devnet/flex/articles/itemeditors_pt2.html">Part 2</a> of this series I covered how to make simple inline itemEditors as well as how to use events to make more complex itemEditors that can respond to what the user enters and help the user make fewer mistakes.</p>
+<p>This article is about using one class to display and edit the data by employing itemRenderers as itemEditors. I tend to think of it more as an itemEditor used as an itemRenderer, but that's just me.</p>
+<p>I have to be honest and say I am not a big fan of the renderer-as-editor; I think renderers should present data and editors should edit it. There are, however, a few occasions when I think it is a good idea to use a single class for both, but those instances are very rare in my opinion.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <h3>Examples, good and bad</h3>
+ <p>Figure 1 shows an example of overusing the itemRenderer-as-editor. On the left is a nice, clean DataGrid. All of the cells are editable and when you click or tab into a cell its editor appears. In contrast, the DataGrid on the right uses itemEditors to render the cells and edit them. All you see are the editors: TextInput controls for some columns, a ComboBox for another, and a NumericStepper for the last. There is too much going on, and it is very busy to look at.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="A DataGrid using itemEditors only (left), and a DataGrid using itemRenderers as itemEditors (right) " alt="A DataGrid using itemEditors only (left), and a DataGrid using itemRenderers as itemEditors (right) " class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/itemeditors_pt3/_jcr_content/articlecontentAdobe/image.adimg.mw.598.jpg/1282809726143.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 1. A DataGrid using itemEditors only (left), and a DataGrid using itemRenderers as itemEditors (right) </div>
+</div>
+<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>Figure 2 shows an example of using the CheckBox as both an itemRenderer and an itemEditor. I think the CheckBox works really well for this. It is a clean, simple control and you can readily see whether a value is true or false. Plus you can just click it to change it. This provides both a straightforward implementation and a good user experience.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="Using a CheckBox as both an itemRenderer and an itemEditor" alt="Using a CheckBox as both an itemRenderer and an itemEditor" class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/itemeditors_pt3/_jcr_content/articlecontentAdobe/image_0.adimg.mw.281.jpg/1282809776405.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 2. Using a CheckBox as both an itemRenderer and an itemEditor</div>
+</div>
+<a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <h3>Implementing a shopping cart </h3>
+ <p>Another example of using an itemEditor as a renderer is shown in Figure 3. This List control represents a shopping cart, which contains items added to your cart while shopping online at your favorite grocery store. </p>
+</div>
+ </div>
+<a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="A list control with NumericSteppers " alt="A list control with NumericSteppers " class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/articles/itemeditors_pt3/_jcr_content/articlecontentAdobe/image_1.adimg.mw.278.jpg/1282809831728.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 3. A list control with NumericSteppers </div>
+</div>
+<a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>As you can see, the quantity of each item in the cart is represented by a NumericStepper. This is another appropriate use of an itemRenderer as editor. All the user has to do is change the quantity and the cart is updated. A delete button would also be a good idea here, too.</p>
+ <p>The complex editor/renderer class shown in Figure 3 works as follows:</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="http://www.adobe.com/2006/mxml" verticalAlign="middle" paddingRight="4" paddingLeft="4" >
+
+ <mx:Script>
+ <![CDATA[
+ public function get quantity() : Number
+ {
+ return itemQuantity.value;
+ }
+ ]]>
+ </mx:Script>
+
+ <mx:CurrencyFormatter id="cfmt" precision="2" />
+
+ <mx:Label text="{data.name}" fontWeight="bold" fontSize="12"/>
+ <mx:Spacer width="100%"/>
+ <mx:NumericStepper id="itemQuantity" value="{data.quantity}" minimum="0" maximum="100"/>
+ <mx:Label text="{cfmt.format(data.price*itemQuantity.value)}" width="66"/>
+</mx:HBox></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>As with every itemEditor, this one has a property used as the <code>editorDataField</code>. In this case it is the <code>quantity</code> property getter function. The function retrieves the value setting of the NumericStepper (specifically, the one with the id <code>itemQuantity</code>).</p>
+<p>As an itemRenderer, this component must also display the current quantity (as well as the product name, price, and subtotal). These values are displayed through data binding. The subtotal is actually an ActionScript expression, multiplying the price by the value of the NumericStepper. As the NumericStepper changes so does the subtotal.</p>
+<p>Now you are probably wondering how to update the grand total below the shopping cart as the NumericSteppers are changed. Simply changing the subtotal and the quantity field of the itemRenderer/editor will not update the grand total. Remember that the editor does not commit the new value into the data provider until after the edit completes. In other words, if you increase the value of the NumericStepper for the Snow Peas row, the grand total will not update until focus leaves the Snow Peas row. This is so you can validate the information as shown in <a href="/devnet/flex/articles/itemeditors_pt2.html">Part 2</a> of this series.</p>
+<p>For a shopping cart like this, you want the grand total to update as the user changes the NumericSteppers—so you have to force the situation a little.</p>
+<p>The first thing you do is have the itemRenderer class implement the IDropInListItemRenderer interface. This gives you access to the listData, which contains a reference to the list itself and, through that, a reference to the dataProvider.</p>
+<p class="note"><b>Note:</b> The code demonstrating this is available in the sample files for this article. Look for the ShoppingCartRendererExtra.mxml file.</p>
+<p>Once you have the listData you can have the <code>change</code> event on the NumericStepper force an update on the dataProvider:</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">private function forceUpdate() : void
+{
+ // Access the collection - listData.owner is the List and from there you have its dataProvider.
+ var ac:ArrayCollection = (listData.owner as List).dataProvider as ArrayCollection;
+
+ // update the quantity field from the numeric stepper. This is what the List will automatically
+ // do when editing completes, but since you want to see the grand total change as the NumericStepper
+ // changes, you have to force things a bit.
+ data.quantity = itemQuantity.value;
+
+ // finally, tell the collection the data changed. this will cause the collection to
+ // dispatch its own change event which is then picked up by the main application.
+ ac.itemUpdated(data);
+}</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>When the NumericStepper's <code>change</code> event triggers this event handler, the ArrayCollection has the item updated immediately, rather than waiting for the List to complete editing the cell. If the main application is listening for a <code>COLLECTION_CHANGE</code> event on the collection, the grand total can be calculated:</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"> <mx:ArrayCollection id="shoppingCartDB"
+ source="{shoppingCartArray}"
+ collectionChange="updateCartTotal()" />
+...
+private function updateCartTotal() : void
+{
+ if( cartTotal ) {
+ var total:Number = 0;
+ for(var i:int=0; i < shoppingCartDB.length; i++)
+ {
+ var record:Object = shoppingCartDB.getItemAt(i);
+ total += record.price * record.quantity;
+ }
+
+ cartTotal.text = cfmt.format(total);
+ }
+} </code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <h3>Where to go from here</h3>
+ <p>Take care when turning an itemRenderer into an itemEditor. The user should have a straightforward interface with a single purpose when editing a cell or record. I personally prefer to separate the functions, but there are times when using an itemRenderer as an itemEditor can make sense, even if you have to go the extra mile as with the shopping cart grand total example.</p>
+ <p>There are plenty of examples of item renderers and editors on the Internet these days. If you have an idea you want to try out, see if others have tried something similar. The Adobe Flex forums are also another good resource where developers can discuss their challenges and provide solutions.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_reference" style="visibility:hidden"></a><div class="parbase section reference"><div style="display:inline;" class="cq-dd-paragraph"><div class="text parbase"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank"><img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"></a><br>
+This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license" target="_blank">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a></p>
+</div>
+ </div>
+</div>
+</div>
+</div></div>
+<div class="LayoutRow">
+ <div class="articlePaging paging"></div>
+</div>
+ </div>
+ </div>
+ <div class="ArticleWideGrid-5-6 ArticleWideRight">
+ <div class="LayoutBreakAfter RuleH ArticleWideRuleHide TextSmall LayoutBreak">
+ <div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
+ <div class="LayoutRow">
+ <div class="parbase compbase inheritedpromo"></div>
+</div>
+ </div>
+ </div>
+ <div class="LayoutBreakAfter TextSmall">
+ <div class="ArticleGrid-2 LayoutSlimGrid-1-2 ArticleWideGridColReset">
+ <div class="parsys inheritedresources inheritedResources"><div class="parsys"><div id="inheritedResources">
+<div class="parbase xdheading compbase section"><div pathToMoreText="" class="LayoutRow LayoutBreakAfter TextH5" linkboxcolor="RouterMore">
+ <table class="LayoutMaxH">
+ <tbody>
+ <tr>
+ <td class="PanelFillDark">
+ <h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides">
+ Tutorials & Samples</h2>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+</div>
+<div class="whatsnew section"><div>
+ <div class="LayoutCell">
+ <h3 class="HeadingSmaller">
+ Tutorials</h3>
+ <ul>
+ <li>
+ <a href="/devnet/flex/articles/flex-mobile-performance-checklist.html" title="Flex mobile performance checklist">Flex mobile performance checklist</a></li>
+ <li>
+ <a href="/devnet/flex/articles/flex-maven-flexmojos-pt3.html" title="Flex and Maven with Flexmojos – Part 3: Journeyman">Flex and Maven with Flexmojos – Part 3: Journeyman</a></li>
+ <li>
+ <a href="/devnet/flex/articles/migrating-flex-apps-part4.html" title="Migrating Flex 3 applications to Flex 4.5 – Part 4">Migrating Flex 3 applications to Flex 4.5 – Part 4</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+<div class="whatsnew section"><div>
+ <div class="LayoutCell">
+ <h3 class="HeadingSmaller">
+ Samples</h3>
+ <ul>
+ <li>
+ <a href="/devnet/flex/articles/twitter-trends.html" title="Twitter Trends">Twitter Trends</a></li>
+ <li>
+ <a href="/devnet/flex/samples.html" title="Flex 4.5 reference applications">Flex 4.5 reference applications</a></li>
+ <li>
+
<TRUNCATED>