flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [28/51] [partial] ADC articles donated by Adobe Systems Inc
Date Fri, 25 Apr 2014 23:35:13 GMT
http://git-wip-us.apache.org/repos/asf/flex-external/blob/1bcc0e18/ADC/devnet/flex/articles/itemeditors_pt2.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/itemeditors_pt2.html b/ADC/devnet/flex/articles/itemeditors_pt2.html
new file mode 100644
index 0000000..b1a95e5
--- /dev/null
+++ b/ADC/devnet/flex/articles/itemeditors_pt2.html
@@ -0,0 +1,1625 @@
+<!--
+  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>Adobe - Developer Center : Understanding Flex itemEditors – Part 2: Editing events and complex editors | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta name="robots" content="noodp" />
+	<meta name="keywords" content="events" />
+	<meta name="description" content="Use events to make more complex itemEditors that do some simple data validation." /><meta name="creationDate" content="2010-11-11 @ 18:34:18" />
+	<meta name="lastModifiedDate" content="2010-11-11 @ 18:34:18" />
+	<meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Understanding Flex itemEditors – Part 2: Editing events and complex editors"/>
+<meta name="blurb" content="Use events to make more complex itemEditors that do some simple data validation." />
+<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_pt2.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_pt2");
+
+        
+    });
+</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 &amp; <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&amp;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&amp;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 &amp; 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">&nbsp;</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">&nbsp;</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">&nbsp;</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&amp;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 2: Editing events and complex editors</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&nbsp;<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>9 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.tag-ADC%2BKeywords_c_events.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="events">events</a><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> &#160;
+              <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">&nbsp;</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">
+							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 class="ArticleGrid-4">
+							<div class="LayoutCellSides">
+								<h3 class="TextH5 LayoutSmallRowTop">
+									Sample files</h3>
+								<ul class="LayoutSmallRowTop LayoutRowBottom">
+									<li class="LayoutSmallRow"><a href="/content/dotcom/en/devnet/flex/articles/itemeditors_pt2/_jcr_content/articlePrerequistes/multiplefiles/node_1282809178760/file.res/itemeditors_pt2.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>itemeditors_pt2.zip  </a>
+														  (4 KB)</li>
+														  <ul class="LayoutGutterLeft"><li class="LayoutGutterLeft">
+														  </li></ul>
+														</ul>
+							</div>
+						</div>
+					</div>
+        </div>
+    <script>
+    adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+<script>
+    adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+</div>
+<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
+                    <div class="parsys articlecontentAdobe"><div id="articlecontentAdobe">
+<a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+						<p>In <a href="/devnet/flex/articles/itemeditors_pt1.html">Part 1</a> of this series you saw how to make some simple inline itemEditors. If you have read <a href="/devnet/flex/articles/itemrenderers_pt1.html">the series on itemRenderers</a>, then you probably noticed how similar the two are.</p>
+<p>There are two keys to making an itemEditor work. First, name the class using the <code>itemEditor</code> property. Then, name the value property of the itemEditor using the <code>editorDataField</code> property.</p>
+<p>In this article I'll show you how to use events to make more complex itemEditors that do some simple data validation and that can prevent certain cells from being edited.</p>
+<p>A word of caution here: by &quot;complex&quot; I do not mean editors with many controls and layouts. I really mean slightly more complex than inline itemEditors. I think it is unfair to ask users to make complex edits within a list or cell of a DataGrid. An editor should be focused only on one thing: the contents of a cell. For example, if you are using a List control and presenting a shopping cart, it is not unreasonable to allow the user to change the quantity of the items in the cart by letting them edit that value right in the cell. What would be unreasonable is allowing them to change the item itself, the colors, special instructions, and so forth. In other words, it doesn't make sense to allow them to shop for items right from the cart when you have a whole site that does that. The cart is just a checkout convenience. Sure, let them add an extra tub of ice cream or delete a bag of chips, but don't have them turn the bag of chips into two boxes of whole wheat pasta.</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>The itemEditEnd event</h3>
+  <p>Let's    say your application has a DataGrid to help manage inventory. With it, users    can change part numbers, but you don't want to allow them to leave the part    number empty. If you use the default itemEditor, the TextInput control, a user    can click on a cell in the &quot;Part #&quot; column, press the delete key and    erase the part number. Here is some code that implements one technique to    prevent that.</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">         &lt;mx:DataGrid x=&#034;10&#034; y=&#034;64&#034; editable=&#034;true&#034; dataProvider=&#034;{inventoryDB}&#034; 
+                 itemEditEnd=&#034;verifyInput(event)&#034;&gt;
+                 &lt;mx:columns&gt;
+                          &lt;mx:DataGridColumn headerText=&#034;Product&#034; dataField=&#034;product&#034;/&gt;
+                          &lt;mx:DataGridColumn headerText=&#034;Part #&#034; dataField=&#034;part&#034;/&gt;
+                          &lt;mx:DataGridColumn headerText=&#034;Type&#034; dataField=&#034;type&#034;
+                                   itemEditor=&#034;editors.ProductTypeEditor&#034; editorDataField=&#034;type&#034;/&gt;
+                          &lt;mx:DataGridColumn headerText=&#034;Quantity&#034; dataField=&#034;quantity&#034;/&gt;
+                 &lt;/mx:columns&gt;
+         &lt;/mx:DataGrid&gt;</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>List            controls dispatch an <code>itemEditEnd</code> event whenever editing is <i><span>about</span></i><span> to be completed. The event happens              before the data is committed back to the dataProvider. By handling this event              you can change the data, or you can validate the data and stop the commit if              necessary. In this example, the </span><code>verifyInput()</code> function makes sure the product part number is not empty.</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 verifyInput( event:DataGridEvent ) : void
+                 {
+                          // it is OK if the user cancels the edit
+                          if( event.reason == DataGridEventReason.CANCELLED ) return;
+                          
+                          // grab the instance of the itemEditor. For this DataGrid, only the
+                          // TextInput control is used as the editor, so it is safe to get the
+                          // editor no matter what column has been edited.
+                          var editor:TextInput = (event.currentTarget as DataGrid).itemEditorInstance as TextInput;
+                          
+                          // if  the edit is on the part number column, make sure it is not blank
+                          if( event.dataField == &#034;part&#034; )
+                          {
+                                   if( editor.text.length == 0 ) {
+                                            // call event.preventDefault() so the edit will not continue and store the
+                                            // blank value
+                                            event.preventDefault();
+                                            // give the editor an error to display to the user
+                                            editor.errorString = &#034;You must enter a part number&#034;;
+                                            return;
+                                   }
+                          }
+                          
+                          // handle other columns here
+                 }</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>The            event is an instance of the DataGridEvent class and contains some very useful            properties. The <code>reason</code> property tells you why the event was dispatched. If            the user pressed the ESCAPE key or clicked outside of the DataGrid the reason            will be DataGridEventReason.CANCELLED. You may want to ignore this event as I            have done and just let the DataGrid perform its default action, which is to            cancel the edit and restore the previous value. </p>
+          <p>If            you decide to handle the event then you will need the itemEditor to access its            properties. The event's <code>currentTarget</code> property contains the control, which I have cast to            DataGrid. The DataGrid has an <code>itemEditorInstance</code> property which I cast to TextInput which is the type            of itemEditor for this example. </p>
+          <p>Because            this event handler is called for any cell, you must determine if the edit is            something you are interested in verifying. I check the event's <code>dataField</code> property to make sure the cell is in the            &quot;part&quot; column. If so, I test the editor's <code>text</code> property to see if there are any characters in it. If            there are no characters, two things happen.</p>
+          <p>First, <code>event.preventDefault()</code> is called. This is how I prevent the edit from            happening and prevent the DataGrid from storing the new value back into the            dataProvider.  From the user's perspective, nothing will appear to have            happened after they press TAB or ENTER. The <code>preventDefault()</code> function will keep the itemEditor in place. </p>
+          <p>Second,            I put an errorString onto the TextInput control. This is optional, but it does            signal the user that there is something wrong. After all, nothing happened when            they pressed the TAB or ENTER key and it is a good practice to provide a            reason.</p>
+          <h3>The itemEditBeginning event</h3>
+          <p>There            are times when you might want to prevent a cell from being edited. You could            set the DataGridColumn's editable property to false, but that prevents every            cell from being edited. Suppose you just want to make <i><span>some</span></i><span> of the cells in the              column uneditable? You can specify whether a cell is editable or not using the </span><code>itemEditBeginning</code> event.</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">    &lt;mx:DataGrid x=&#034;10&#034; y=&#034;64&#034; editable=&#034;true&#034; dataProvider=&#034;{inventoryDB}&#034; 
+        itemEditEnd=&#034;verifyInput(event)&#034; 
+        itemEditBeginning=&#034;allowForEdit(event)&#034;&gt;
+        &lt;mx:columns&gt;
+            &lt;mx:DataGridColumn headerText=&#034;Product&#034; dataField=&#034;product&#034;/&gt;
+            &lt;mx:DataGridColumn headerText=&#034;Part #&#034; dataField=&#034;part&#034;/&gt;
+            &lt;mx:DataGridColumn headerText=&#034;Type&#034; dataField=&#034;type&#034;
+                itemEditor=&#034;editors.ProductTypeEditor&#034; editorDataField=&#034;type&#034;/&gt;
+            &lt;mx:DataGridColumn headerText=&#034;Quantity&#034; dataField=&#034;quantity&#034;/&gt;
+        &lt;/mx:columns&gt;
+    &lt;/mx:DataGrid&gt;</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>By            handling the <code>itemEditBeginning</code> event you can dynamically decide the            editability of a cell. In this example, the data has a field called <code>permanent</code> on each record. The idea is that <code>permanent=true</code> means the product name is an unchangeable value so            the product cell for that row cannot be edited. This is handled by the <code>allowForEdit()</code> function:</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">      private function allowForEdit(event:DataGridEvent) : void
+        {
+            // if the field to be edited is a product, prevent the user from making
+            // changes if the permanent flag is true&lt;. You can use more complex logic, 
+            // of course.
+            if( event.dataField == &#034;product&#034; ) {
+                
+                var item:Object = ((event.currentTarget as DataGrid).dataProvider as ArrayCollection)[event.rowIndex];
+                if( item.permanent ) {
+                    event.preventDefault();
+                }
+            }
+            
+            // handle other columns here
+        }</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>Again, the event is an instance of the DataGridEvent class and here I have checked the <code>dataField</code> property of the event to make sure it is the &quot;product&quot; field I am dealing with. I can then get the record from the dataProvider of the DataGrid using the <code>currentTarget</code> property of the event and cast that to DataGrid. I then cast the DataGrid's dataProvider to ArrayCollection and get the <code>event.rowIndex</code> value. I could also have accessed the <code>inventoryDB</code> ArrayCollection directly in this function since they are in the same file, but this is a more generic approach.</p>
+<p>Once I have the record I can query its permanent property and if it is true, call the <code>event.preventDefault()</code> function to disable editing of that cell. In this case, the default behavior of <code>itemEditBeginning</code> is to present the itemEditor; preventing the default behavior makes the cell uneditable.</p>
+<h3>Editing limitations</h3>
+<p>It is important to realize that there are some limitations to consider when handling edit events. When you are using edit events to determine if the event should proceed, you may be tempted to make a call to a backend or server process. For example, you may have a web service that can validate a part number. In this case you may try, while inside of the <code>itemEditEnd</code> event, to make a web service call and validate what the user just entered. Seems logical, right?</p>
+<p>Logical maybe, but it won't work because service calls are asynchronous. You can certainly make the call, but the result will be returned some time later—well after your event handler has exited. In fact, your call won't actually be made until your function exits. Your call is queued and when the Flex framework exits the function, the request will be made and then the result will be returned by your web service's result handler.</p>
+<p>So there is no way to do this type of server-side validation while editing cells. If you want to perform this kind of validation, then when your application starts you should query the server for the data to validate against, and use that while the cells are being edited.</p>
+<h3>Where to go from here</h3>
+<p>The ability to dynamically allow editing and to validate the change is an excellent way to improve your application's user experience. You can help your users make fewer mistakes and give feedback during the editing process. You can prevent them from editing certain data and simplify application development since you do not have to validate what the user cannot change.</p>
+<p>In <a href="/devnet/flex/articles/itemeditors_pt3.html">Part 3</a> of this series I'll cover itemRenderers used as itemEditors.</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/

<TRUNCATED>

Mime
View raw message