| <!-- |
| 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>Build the user interface - Flex Test Drive | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <meta name="robots" content="noodp" /> |
| <meta name="keywords" content="RIA" /> |
| <meta name="description" content="See how quickly you can build a simple Flex application user interface using Flash Builder." /><meta name="creationDate" content="2011-07-01 @ 10:52:38" /> |
| <meta name="lastModifiedDate" content="2011-07-01 @ 10:52:38" /> |
| <meta name="viewport" content="width=device-width" /> |
| <meta name="page" content="main" /> |
| <meta name="shortTitle" content="Flex Test Drive: Build an application in an hour"/> |
| <meta name="blurb" content="See how quickly you can build a simple Flex application user interface using Flash Builder." /> |
| <meta name="author" content="Adobe" /> |
| <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/testdrive/articles/1_build_a_flex_app.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 = "8"; |
| </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/testdrive/articles/1_build_a_flex_app"); |
| |
| |
| }); |
| </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> |
| <span class="LayoutHItem LayoutSmallGutterRight"> |
| <a href="/devnet/flex/testdrive.html"> |
| Flex Test Drive</a> |
| </span> |
| <span class="LayoutSmallGutterRight LayoutHItem">/</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutGrid-1-3 LayoutSlimGrid-1-2"> |
| <h1 class="LayoutCellSides LayoutSmallRow TextH1"> |
| Flex Test Drive: Build an application in an hour</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/adobe_logo.html">Adobe</a></h2> |
| <div class="LayoutRow"> |
| <img title="adobe_logo_bio" alt="Adobe logo" class="ImageShadow LayoutImage" src="devnet/authors/bio/a/adobe_logo_bio.jpg.adimg.mw.160.png"/></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">Modified</h2> |
| <p>2 May 2011</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_flash_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Builder">Flash Builder</a><a href="/devnet/tagsearch.tsb.prod-_sl_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_ria.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="RIA">RIA</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="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><a href="#video">Video</a> | <a href="#code">Code</a> | <a href="#tutorial">Tutorial</a> | <a href="#links">Links</a></p> |
| <p><b>Note: </b>Flex Test Drive requires Flex 4.5 SDK and Flash Builder 4.5; <a target="_blank" href="http://www.adobe.com/go/try_flashbuilder/">download a 60-day trial version</a> of Flash Builder 4.5 before continuing if you haven't already.</p> |
| <h2><a name="video"></a>Build the user interface</h2> |
| <h3> </h3> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_neroliplayer" style="visibility:hidden"></a><div class="flash parbase compbase neroliplayer section"><div class="LayoutRow"> |
| <script> |
| if(deepLinkMap != null) { |
| deepLinkMap['#articlecontentAdobe_neroliplayer_split_articlecontentAdobe_neroliplayer'] = 'articlecontentAdobe_neroliplayer_split_articlecontentAdobe_neroliplayer'; |
| } |
| </script> |
| <a name="articlecontentAdobe_neroliplayer_split_articlecontentAdobe_neroliplayer"></a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <div id="articlecontentAdobe_neroliplayer" class="LayoutImage"> |
| <span style="width:650px;height:366px;" class="FlashAltCanvas"> |
| <span class="FlashAltLayoutOverlay FlashAltLayoutBody FlashAltText"> |
| <span class="FlashAltLayoutRow FlashAltTextLarge"> |
| This content requires Flash</span> |
| <span class="FlashAltLayoutRow FlashAltRequires"> |
| To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.</span> |
| <span class="FlashAltLayoutRow FlashAltButton"> |
| <a href="/go/getflashplayer/" class="FlashAltButton">To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.</a></span> |
| </span> |
| </span> |
| </div> |
| <script> |
| //<![CDATA[ |
| var attributes = { |
| 'id':'articlecontentAdobe_neroliplayer','name':'articlecontentAdobe_neroliplayer','class':'LayoutImage' |
| }; |
| |
| var params = {play: "true", |
| loop: "true", |
| menu: "true", |
| scale: "noscale", |
| salign: "tl", |
| wmode: "opaque", |
| swliveconnect: "false", |
| devicefont: "false", |
| allowscriptaccess: "always", |
| seamlesstabbing: "true", |
| allowfullscreen: "true", |
| allownetworking: "all" |
| }; |
| |
| var flashvars = { |
| locale: "",expandFunction: "",account: "",debug: "false",live: "",configPath: "/content/dotcom/en/devnet/flex/testdrive/articles/1_build_a_flex_app/_jcr_content/articlecontentAdobe/neroliplayer.config.__autoinvalidate.xml" |
| }; |
| |
| if (swfobject.getQueryParamValue( 'autoPlay').length) flashvars.autoPlay = swfobject.getQueryParamValue( 'autoPlay' ); |
| if (swfobject.getQueryParamValue( 'allowFullScreen').length) flashvars.allowFullScreen = swfobject.getQueryParamValue( 'allowFullScreen' ); |
| |
| var hash = location.hash; |
| var chapterIdDeepLink = ''; |
| if(hash != null && hash != '') { |
| var hashArray = hash.split("_split_"); |
| if(hashArray != null && hashArray.length >= 2) { |
| if(hashArray[0] == '#articlecontentAdobe_neroliplayer') { |
| chapterIdDeepLink = hashArray[hashArray.length-1]; |
| flashvars.chapterID = chapterIdDeepLink; |
| } |
| } |
| } |
| |
| swfobject.embedSWF("/include/flash/neroli/neroli.swf", |
| "articlecontentAdobe_neroliplayer", |
| "650", |
| "366", |
| "10", |
| "/include/flash/expressInstall.swf", |
| flashvars, params, attributes); |
| //]]> |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ul> |
| <li><a target="_blank" href="http://www.adobe.com/go/try_flashbuilder/">Download Flash Builder 4.5 Trial</a></li> |
| <li><a href="testdrive/testdrive_files.zip">Download the Test Drive solution files</a> <span class="stamp-fileinfo">(ZIP, 14 MB)</span></li> |
| </ul> |
| <h2><a name="code"></a>Code</h2> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> |
| <s:Label x="50" y="50" color="maroon" fontSize="20" fontWeight="bold" text="XYZ Corporation Directory"/> |
| <s:Button id="empBtn" x="50" y="100" label="Employees"/> |
| <s:Button id="deptBtn" x="140" y="100" label="Departments"/> |
| <s:DataGrid id="empDg" x="50" y="130" requestedRowCount="4"> |
| <s:columns> |
| <s:ArrayList> |
| <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn> |
| <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn> |
| <s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn> |
| </s:ArrayList> |
| </s:columns> |
| <s:typicalItem> |
| <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object> |
| </s:typicalItem> |
| <s:ArrayList> |
| <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object> |
| <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object> |
| <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object> |
| <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object> |
| </s:ArrayList> |
| </s:DataGrid> |
| </s:Application></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <h2><a name="tutorial"></a>Tutorial</h2> |
| <p>In this Test Drive, you are going to create a Flex application that retrieves, displays, and modifies database records (see Figure 1). A Flex application does not connect directly to a remote database. Instead, you connect it to a data service written in your favorite web language (PHP, ColdFusion, Java, or any other server-side web technology). You will build the front-end Flex application; the database and the server-side code to read, add, edit, and delete database records is provided for you as a PHP class, a ColdFusion component, or Java classes.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="The completed Test Drive application." alt="The completed Test Drive application." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/2011-05/fig_01.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 1. The completed Test Drive application.</div> |
| </div> |
| <a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this module, you are going to build a Flex project and a Flex application that retrieves data from the database and displays it. Employee data will be displayed on one "page" in the application and Department data on another.</p> |
| <p>The first task is to create a new Flex project for your application server and create the user interface. You'll retrieve data from the server and display it in the next tutorial.</p> |
| <h3>Step 1: Install the server files on a local application server.</h3> |
| <p><i>Follow the instructions in one of the sections below.</i></p> |
| <ul> |
| <li><a href="#setupphp">Setup for PHP</a></li> |
| <li><a href="#setupcf">Setup for ColdFusion</a></li> |
| <li><a href="#setupjava">Setup for Java</a></li> |
| </ul> |
| <p>The setup files include a database and server-side files to manipulate data in the database. Your Flex application will call methods of one of these server-side files, EmployeeService.</p> |
| <p><span class="note"><b>Note:</b> If you installed the server files for the Flex 4.5 Test Drive for Mobile (add link) or the Flex 4.5 trial email sample applications, you can skip this step. The same server-side files are used for all three.</span></p> |
| <h4><a name="setupphp"></a>Setup for PHP</h4> |
| <ol> |
| <li>Download the <a href="testdrive/testdrive_setup.zip">Test Drive setup archive</a> <span class="stamp-fileinfo">(ZIP; 15.7 MB)</span> archive and unzip testdrive_setup_PHP file. It contains a Database and a Test Drive folder.</li> |
| <li>Create a testdrive_db database on your MySQL installation using the testdrive_db.sql file located in the Database folder. If you do not have permissions to create a database, use the testdrive_table.sql file instead to create two tables in an existing database. After the database is created, set user privileges for it.</li> |
| <li>Move the TestDrive folder, which contains the PHP service file, to your PHP server.</li> |
| <li>Open <span class="Path"><kbd>/TestDrive/test/test.php</kbd></span> in an editor and change the username, password, server, and database name properties to the correct values for your server setup. Test the setup by browsing to <span class="Path"><kbd>http://{<i>your server:your port</i>}/TestDrive/test/test.html</kbd></span>. For example, browse to http://localhost/TestDrive/test/test.html. You should see a list of the names of the employees in the database successfully displayed.</li> |
| <li>Open <span class="Path"><kbd>/TestDrive/services/EmployeeService.php</kbd></span> in an editor and change the <code>username</code>, <code>password</code>, <code>server</code>, <code>port</code>, and <code>databasename</code> properties to the correct values for your server setup. This class file contains the methods you will call from your Flex application.</li> |
| </ol> |
| <h4><a name="setupcf"></a>Setup for ColdFusion</h4> |
| <ol> |
| <li>Download the <a href="testdrive/testdrive_setup.zip">Test Drive setup archive</a> <span class="stamp-fileinfo">(ZIP; 15.7 MB)</span> archive and unzip the testdrive_setup_CF file. It contains two CAR files (testdrive_mac.car and testdrive_win.car) and a ZIP file (testdrive.zip).</li> |
| <li>If you have ColdFusion Enterprise or ColdFusion Developer, deploy one of the CAR files.<br> |
| o In the ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ for the default standalone installation), navigate to Packaging & Deployment > ColdFusion Archives and browse to and deploy one of the CAR files. <br> |
| o In the Deploy Wizard, change the deploy locations to reflect the locations of the db and wwwroot folders on your server. For example, on a Mac: <span class="Path"><kbd>/Applications/ColdFusion9/wwwroot/TestDrive</kbd></span> and <span class="Path"><kbd>/Applications/ColdFusion9/db/testdrive</kbd></span> or on Windows: <span class="Path"><kbd>C:\ColdFusion9\wwwroot\TestDrive</kbd></span> and <span class="Path"><kbd>C:\ColdFusion 9\db\testdrive</kbd></span>.<br> |
| o After deploying, check that you have a new data source called testdrive_db and a new folder in wwwroot called TestDrive. If your datasource verification fails, delete the datasource and recreate it: testdrive_db, Apache Derby Embedded, and point to the <span class="Path"><kbd>/ColdFusion/db/testdrive</kbd></span> database just installed. </li> |
| <li>If you have ColdFusion Standard, you need to manually place the server files and create a datasource. <br> |
| o Unzip testdrive.zip. It contains TestDrive and db folders.<br> |
| o Place the TestDrive folder in the ColdFusion webroot, /ColdFusion/wwwroot/.<br> |
| o Open the db folder. It contains a folder called testdrive.<br> |
| o Place this testdrive folder in the ColdFusion db folder, /ColdFusion/db/. <br> |
| o In the ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ for the default standalone installation), navigate to Data & Services > Data Sources and create a new data source called testdrive_db with an Apache Derby Embedded driver and the database folder set to the testdrive folder you just placed in the /ColdFusion/db/ folder.<br> |
| </li> |
| <li>Open <span class="Path"><kbd>/ColdFusion/wwwroot/TestDrive/services/EmployeeService.cfc</kbd></span> in an editor and examine the code. This class file contains the methods you will call from your Flex application. Note that the methods have the access argument set to remote so that they can be called from a Flex application.</li> |
| <li>Open <kbd>/ColdFusion9/wwwroot/WEB-INF/flex/services-config.xml</kbd> in an editor. This file is used when calls are made to the server from your application. Locate the <code><property-case></code> tag and change all three values to <code>true</code> as shown below:</li> |
| </ol> |
| </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"><property-case> |
| <!-- cfc property names --> |
| <force-cfc-lowercase>true</force-cfc-lowercase> |
| <!-- Query column names --> |
| <force-query-lowercase>true</force-query-lowercase> |
| <!-- struct keys --> |
| <force-struct-lowercase>true</force-struct-lowercase> |
| </property-case> </code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_11" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="6"> |
| <p class="note"><span class="note"><b>Note: </b>If you are using an earlier version of ColdFusion, your configuration file may not have these tags and you will need to add them. For details, refer to the documentation on using Flash Remoting with your particular server.</span></p> |
| <li>Restart the ColdFusion server.</li> |
| <li>Test the setup by browsing to:<p>http://{<i>your server:your port</i>}/TestDrive/test/test.html</p> |
| <p>For a default standalone ColdFusion installation, browse to:</p> |
| <p>http://localhost:8500/TestDrive/test/test.html</p> |
| <p>You should see employee data from the database successfully displayed in a datagrid.</p> |
| </li> |
| </ol> |
| <h4><a name="setupjava"></a>Setup for Java</h4> |
| <ol> |
| <li>Download the <a href="testdrive/testdrive_setup.zip">Test Drive setup archive</a> <span class="stamp-fileinfo">(ZIP; 15.7 MB)</span> archive and unzip the testdrive_setup_JAVA file. It contains a WAR file for a web application called testdrive.</li> |
| <li>Deploy the WAR file to your web server. It contains the Java classes, an Apache Derby embedded database, and BlazeDS 4 files.</li> |
| <li>Open <kbd>/{<i>your server wepapps folder</i>}/testdrive/WEB-INF/src/services/EmployeeService.java</kbd> in an editor. This class file contains the methods you will call from your Flex application. It must have a no argument constructor.<p><b>Note: </b>For Windows, the ConnectionHelper.java file assumes the testdrive web app is deployed on the C drive. If it is not deployed on the C drive, you need to modify this file appropriately and recompile it, replacing <kbd>/{your server webapps folder}/testdrive/WEB-INF/classes/services/ConnectionHelper.class</kbd>.</p> |
| </li> |
| <li>Open <kbd>/WEB-INF/flex/remoting-config.xml</kbd> in an editor and examine the code. This file is used when calls are made to the server from your application. Note the definition for the destination called employeeService which points to the services.EmployeeService class.</li> |
| <li>Test the setup by browsing to:<p>http://{<i>your server:your port</i>}/testdrive/test/test.html</p> |
| <p>For example, for the BlazeDS turnkey server, browse to:</p> |
| <p>http://localhost:8400/testdrive/test/test.html</p> |
| <p>You should see employee data from the database successfully displayed in a datagrid.</p> |
| </li> |
| </ol> |
| <h3>Step 2: Create a new Flex project.</h3> |
| <p><i>Follow the instructions in one of the sections below.</i></p> |
| <ul> |
| <li><a href="#settingsfbphp">Project settings for PHP with Flash Builder 4.5 for PHP<br> |
| </a></li> |
| <li><a href="#settingsfb">Project settings for Java, ColdFusion, or PHP with Flash Builder 4.5<br> |
| </a></li> |
| </ul> |
| <h4><a name="settingsfbphp"></a>Project settings for PHP with Flash Builder 4.5 for PHP</h4> |
| <ol> |
| <li>In Flash Builder 4.5 for PHP, select File > New > Flex and PHP Project and create a PHP project called TestDrive at an existing location (see Figure 2). Be sure to set the location to where you saved the TestDrive folder on your PHP server in step 1.</li> |
| <li>Set the appropriate server location settings (see Figure 2) and validate the configuration. Example settings for a Zend server on a Mac are shown in the figure; be sure to use the correct values for your specific PHP server (it doesn't have to be Zend), including the correct web root and url for it!<br> |
| </li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Create a new PHP project with Flash Builder 4.5 for PHP." alt="Create a new PHP project with Flash Builder 4.5 for PHP." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig02.jpeg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 2. Create a new PHP project with Flash Builder 4.5 for PHP.</div> |
| </div> |
| <a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="3"> |
| <li>Click the Next button and create a Flex project called FlexWebTestDrive and store the project files locally (see Figure 3). You can usually use the default value for the output folder, which is where the compiled application and associated files will be stored on your application server.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Create a new Flex project with Flash Builder 4.5 for PHP." alt="Create a new Flex project with Flash Builder 4.5 for PHP." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig03.jpeg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 3. Create a new Flex project with Flash Builder 4.5 for PHP.</div> |
| </div> |
| <a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <h4><a name="settingsfb"></a>Project settings for Java, ColdFusion, or PHP with Flash Builder 4.5</h4> |
| <ol> |
| <li>In Flash Builder 4.5, select File > New > Flex Project and create a Flex project called FlexWebTestDrive and store the project files locally (see Figure 4).</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_7" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Create a new Flex project with Flash Builder 4.5." alt="Create a new Flex project with Flash Builder 4.5." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig_04.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 4. Create a new Flex project with Flash Builder 4.5.</div> |
| </div> |
| <a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="2"> |
| <li>Click the Next button and select your application server, set the appropriate server location settings (see Figures 5 and 6), and validate the configuration. Example settings for Java with BlazeDS and ColdFusion servers are shown in the figures; <i>be sure to use the correct values for your server setup!</i> You can usually use the default value for the output folder, which is where the compiled application and associated files will be stored on your application server.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_8" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Specify Java server settings." alt="Specify Java server settings." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig_05.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 5. Specify Java server settings.</div> |
| </div> |
| <a name="articlecontentAdobe_image_9" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Specify ColdFusion server settings." alt="Specify ColdFusion server settings." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig_06.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 6. Specify ColdFusion server settings.</div> |
| </div> |
| <a name="articlecontentAdobe_text_13" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <h3>Step 3: Examine the generated project(s) and files.</h3> |
| <p><i>Use the Package Explorer to explore the generated project(s) and files.</i><br> |
| </p> |
| <p>When you create a new Flex project, Flash Builder creates an MXML file with the same name as the project (see Figure 7). This is the main application file where you add your code. You create Flex applications using two languages: ActionScript and MXML. Typically, you use MXML and Flex components to create application interfaces and ActionScript and events to program application logic. MXML tags and ActionScript code can reference each other, similar to HTML tags and JavaScript code.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_2" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title=" Explore the FlexWebTestDrive." alt=" Explore the FlexWebTestDrive." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig_07.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 7. Explore the FlexWebTestDrive.</div> |
| </div> |
| <a name="articlecontentAdobe_text_12" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In FlexWebTestDrive.mxml, the first line of code is the XML declaration for the parser. The next line is the <s:Application> tag, which defines the Application container that must be the root tag for a Flex application. When the application is compiled, a SWF file, an HTML wrapper page that references the SWF file, and other files are created and placed in the bin-debug folder on your application server so you can browse to the application. When you browse to the HTML file that references the application SWF, the SWF file is downloaded and rendered by Flash Player (available as a browser plugin or ActiveX control).<br> |
| </p> |
| <p>If you created a Flex and PHP project with Flash Builder 4.5 for PHP, you will also have a PHP project (see Figure 8) for viewing and modifying your PHP code.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_10" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Explore the PHP TestDrive project." alt="Explore the PHP TestDrive project." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/fig_08.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 8. Explore the PHP TestDrive project.</div> |
| </div> |
| <a name="articlecontentAdobe_text_14" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <h3>Step 4: Use Design mode to add components and set properties.</h3> |
| <p><i>Switch to Design mode and drag out Label, DataGrid, and Button components from the Components view to create the interface shown in Figure 9. Use the Properties view to assign component ids of <b>empBtn</b>, <b>deptBtn</b>, and <b>empDg</b> and set other properties.</i></p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_3" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Arrange components as shown here." alt="Arrange components as shown here." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/2011-05/fig_09.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 9. Arrange components as shown here.</div> |
| </div> |
| <a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>HTML applications are built from document elements such as headings, paragraphs, and tables. Flex applications are built from components such as Buttons, CheckBoxes, and DataGrids. The Flex 4.5 framework includes over 100 components, including user interface controls to display content and provide user interaction and containers to manage the layout.</p> |
| <p>Switch to Source mode and take a look at the generated code. You will see a new tag for each of the components you added. The order of the tags does not matter because the Application container uses absolute positioning by default so component positions are set by their x and y properties.</p> |
| <p>The <code><s:Label></code> tag represents a Label control, a very simple user interface component that displays text. Its <code>text</code> property is set to "XYZ Corporation Directory" and its <code>x</code> and <code>y</code> properties are set to where it will appear in the interface. The <code>color</code>, <code>fontSize</code>, and , and <code>fontWeight</code> attributes change the style of the font used. In Flex, you can set color styles to a string for any of the 16 colors in the VGA color set (for example, red or blue) or an RGB triplet in hexadecimal format (for example, #FF0000 or #0000FF).</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"><s:Label x="50" y="50" text="XYZ |
| Corporation Directory" color="maroon" |
| fontSize="20" fontWeight="bold"/></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>For each component, you can specify properties and styles. Properties apply only to that particular component instance. Styles can be set inline as done here or using CSS to create style rules to apply to your components.</p> |
| <h3>Step 5: Change component attributes in MXML.</h3> |
| <p><i>Use the Flash Builder Content Assist to select and set values for various properties and styles.</i></p> |
| <p>When you place your cursor inside a tag and press the spacebar or Ctrl+spacebar, you get code hinting with the Flash Builder Content Assist (see Figure 10). It shows a list of all the attributes you can set for that tag, including properties, styles, events, and more. Different symbols are used for each different type of attribute. This is the same list you see in the Alphabetical view of the Design mode Properties view.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_4" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Use Content Assist to see a list of all possible tag attributes." alt="Use Content Assist to see a list of all possible tag attributes." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/2011-05/fig_10.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 10. Use Content Assist to see a list of all possible tag attributes.</div> |
| </div> |
| <a name="articlecontentAdobe_text_8" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You can get more complete descriptions for each of the attributes in the component's API, its application programming interface. To navigate to a component's API, select Help > Dynamic Help and then click a component tag in your code. You will see a link to that component's API in the Help view, which you click to open the API (see Figure 11).<br> |
| </p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_5" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="View a component's API." alt="View a component's API." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/2011-05/fig_11.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 11. View a component's API.</div> |
| </div> |
| <a name="articlecontentAdobe_text_9" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <h3>Step 6: Browse the application.</h3> |
| <p><i>Use the Run button or the Run menu to compile the application and view it in an HTML page in a browser window.</i></p> |
| <p>Your application appears in the browser inside a generated HTML wrapper page (see Figure 12).</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_6" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="View the application in a browser." alt="View the application in a browser." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/testdrive/articles/1_build_a_flex_app/2011-05/fig_12.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 12. View the application in a browser.</div> |
| </div> |
| <a name="articlecontentAdobe_text_10" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p><b>PHP developers using Flash Builder for PHP:</b> The first time you run an application, you get a Run As dialog box. If you select Web Application, an HTML wrapper file is run. If you select Web (PHP) Application, a PHP wrapper file is run. The code for both files is the same so you can choose either option. If you want to debug your PHP service code when running this application (debugging is covered in <a href="/devnet/flex/testdrive/articles/3_test_debug_code3.html">Debug client-side code</a>), you need to launch a PHP wrapper page, so choose Web (PHP) application. You can change which file is run at any time by selecting Run > Run As > Web (PHP) Application or Web Application or creating run configurations.</p> |
| <p>You will retrieve and <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app2.html">display data in the DataGrid</a> in the next tutorial and <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app3.html">add application "pages"</a> and <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app4.html">wire up the buttons</a> later.</p> |
| <h3><a name="links"></a>Learn more</h3> |
| <p>Refer to the following resources to learn more about this topic:</p> |
| <h4>Documentation: Using Flash Builder 4.5</h4> |
| <ul class="link-list"> |
| <li><a target="_blank" href="http://help.adobe.com/en_US/flashbuilder/using/WSe4e4b720da9dedb5-6f0dd08a12e51bbb7fa-8000.html">Working with projects</a></li> |
| <li><a target="_blank" href="http://help.adobe.com/en_US/flashbuilder/using/WSe4e4b720da9dedb5-1a92eab212e75b9d8b2-7fe7.html">Building a user interface with Flash Builder</a></li> |
| </ul> |
| <h4>Documentation: Using Flex 4.5</h4> |
| <ul class="link-list"> |
| <li><a target="_blank" href="http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-79b5.html">Developing applications in MXML</a></li> |
| <li><a target="_blank" href="http://help.adobe.com/en_US/flex/using/WSc3ff6d0ea7785946679bc22e1208826805f-8000.html">Building the user interface</a></li> |
| </ul> |
| <h4>ActionScript 3 Reference</h4> |
| <ul class="link-list"> |
| <li><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Label.html" target="_blank">Label</a></li> |
| <li><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html" target="_blank">Button</a></li> |
| </ul> |
| <h4>Flex Developer Center</h4> |
| <ul class="link-list"> |
| <li><a href="/devnet/flex/quickstarts.html">Flex Quick Starts</a></li> |
| </ul> |
| </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 target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img src="http://cookbooks.adobe.com/resources/images/license_creative_commons.png" alt="Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License"></a>+<a target="_blank" href="/communities/guidelines/ccplus/commercialcode_plus_permission.html"><img src="http://cookbooks.adobe.com/resources/images/license_adobe.jpg" alt="Adobe Commercial Rights"></a></p> |
| <p>This work is licensed under a <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at <a target="_blank" href="/communities/guidelines/ccplus/commercialcode_plus_permission.html">Adobe</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="ArticleGrid-2-3 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="morelikethis"><div class="LayoutCellSides"> |
| <h2 class="TextH5 LayoutRow">More Like This</h2> |
| |
| <ul class="LayoutRow"> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/2_modify_the_database.html" title="Flex Test Drive: Modify the database">Flex Test Drive: Modify the database</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app3.html" title="Flex Test Drive: Build an application in an hour">Flex Test Drive: Build an application in an hour</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/5_customize_app3.html" title="Flex Test Drive: Change the appearance of your application">Flex Test Drive: Change the appearance of your application</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app2.html" title="Flex Test Drive: Build an application in an hour">Flex Test Drive: Build an application in an hour</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/4_deploy_app2.html" title="Flex Test Drive: Deploy your application to a web server">Flex Test Drive: Deploy your application to a web server</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/6_add_charts.html" title="Flex Test Drive: Add charts and graphs">Flex Test Drive: Add charts and graphs</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/newcontent/4_deploy_app2.html" title="Test Drive: Deploy your application to a web server">Test Drive: Deploy your application to a web server</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/6_add_charts2.html" title="Flex Test Drive: Add charts and graphs">Flex Test Drive: Add charts and graphs</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/1_build_a_flex_app4.html" title="Flex Test Drive: Build an application in an hour">Flex Test Drive: Build an application in an hour</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/testdrive/articles/2_modify_the_database2.html" title="Flex Test Drive: Modify the database">Flex Test Drive: Modify the database</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <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 and 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> |
| <a href="http://coenraets.org/blog/2011/04/flex-based-ipad-trader-app-now-on-android-market/" title="Mobile Trader Flex app on Android Market">Mobile Trader Flex app on Android Market</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| <div class="ArticleGrid-3 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="parsys inheritedresources inheritedResources2"><div class="parsys"><div id="inheritedResources2"> |
| <div class="rss section"><div id="rss-feed-1283313561183" class="RSSFeed "> |
| <div pathToMoreText="moreText" class="LayoutRow LayoutBreakAfter TextH5"> |
| <table class="LayoutMaxH"> |
| <tbody> |
| <tr> |
| <td class="PanelFillDark"> |
| <a href="http://forums.adobe.com/community/flex" class="RouterBarLink"><h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides"> |
| Flex user forum</h2> |
| </a></td> |
| <td class="LayoutCellSides LayoutSmallCellVSides RouterButton RouterMore" style="width: 40px"> |
| <a href="http://forums.adobe.com/community/flex" class="RouterLink" title="More" target="_self">More</a></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="LayoutRowBottom LayoutCellSides TextSmall"> |
| <table> |
| <tr> |
| <th class="TableCell TableNumber shortDateFormat"> |
| 11/11/2013</th> |
| <td> |
| <a class="" href="http://forums.adobe.com/thread/1333105" target="_self">Redirect AIR app http traffic to SOCKS server</a> |
| </td> |
| </tr> |
| <tr> |
| <th class="TableCell TableNumber shortDateFormat"> |
| 11/01/2013</th> |
| <td> |
| <a class="" href="http://forums.adobe.com/thread/1326382" target="_self">Are Flash builder and command line compiler different?</a> |
| </td> |
| </tr> |
| <tr> |
| <th class="TableCell TableNumber shortDateFormat"> |
| 11/11/2013</th> |
| <td> |
| <a class="" href="http://forums.adobe.com/thread/1332613" target="_self">Re: TLF2.0 underline applied with ListElement bullet symbol</a> |
| </td> |
| </tr> |
| <tr> |
| <th class="TableCell TableNumber shortDateFormat"> |
| 03/27/2012</th> |
| <td> |
| <a class="" href="http://forums.adobe.com/thread/981440" target="_self">Adobe air mobile - softKeyboardType is not working when using skinClass to allow scrolling?</a> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| <div class="ArticleGrid-4 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="parsys inheritedResources3 inheritedresources"><div class="parsys"><div id="inheritedResources3"> |
| <div class="rss section"><div id="rss-feed-1283284018001" class="RSSFeed "> |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- Main Content Comments --> |
| |
| <div class="LayoutRow LayoutGridBreak LayoutBreakAfter"> |
| <div class="parbase compbase jivecomments jiveComments"></div> |
| </div> |
| |
| </div> |
| |
| </div> |
| </div> |
| <div class="PrintLayoutHide"> |
| <!--googleoff: all--><script> |
| //<![CDATA[ |
| var hideEvidon = false; |
| |
| $(document).ready(function() { |
| adobe.fn.initGlobalFooter(); |
| adobe.fn.evidon('_bapw-link'); |
| |
| adobe.fn.initGeorouting(); |
| }); |
| changeRegion = adobe.fn.changeRegionFooter; |
| //]]> |
| </script> |
| |
| <!--googleoff: index--> |
| <!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/footer/en_us/globalfooter_ssi.html#1 $ --> |
| <div id="SiteFooter" class="SiteFooter Text TextSmall TextInvert Link LayoutBreak"> |
| <span id="Georouting"></span> |
| <div class="LayoutBreakAfter"> |
| <div class="LayoutGrid-1 LayoutSlimGrid-1 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/products/catalog.html?promoid=JOPBT">Products</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconCloud" href="/products/creativecloud.html?promoid=JQPER">Adobe Creative Cloud</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconCS" href="/products/cs6.html?promoid=KFHNH">Creative Suite 6</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconOMS" href="/solutions/digital-marketing.html?promoid=JOPBY">Adobe Marketing Cloud</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconAcrobat" href="/products/acrobat.html?promoid=JOPBV">Acrobat</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconPS" href="/products/photoshop.html?promoid=JOPCB">Photoshop</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconDPS" href="/products/digital-publishing-suite-family.html?promoid=JOPBZ">Digital Publishing Suite</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconElements" href="/products/elements-family.html?promoid=JOPBX">Elements family</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconSC" href="/products/sitecatalyst.html?promoid=KFGCH">SiteCatalyst</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts" href="/education.html?marketSegment=EDU&promoid=JUTMH">For education</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-2 LayoutSlimGrid-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/downloads/?promoid=JOPDB">Download</a></h4> |
| <ul class="SiteFooterLinkList SiteFooterLinkListBottom"> |
| <li><a href="/downloads/?promoid=KEWBH">Product trials</a></li> |
| <li><a href="/go/gffooter_adobe_reader">Adobe Reader</a></li> |
| <li><a href="http://get2.adobe.com/flashplayer/?promoid=KFHNI">Adobe Flash Player</a></li> |
| <li><a href="/go/gffooter_adobe_air">Adobe AIR</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-3 LayoutSlimGrid-1 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/go/gffooter_help">Support & Learning</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="http://helpx.adobe.com/support.html?promoid=KFKQG">Product help</a></li> |
| <li><a href="http://forums.adobe.com/index.jspa?promoid=JOPCT" target="_blank">Forums</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-4 LayoutSlimGrid-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/buy.html?promoid=JOPCV">Buy</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="/go/gffooter_homeuse">For personal and professional use</a></li> |
| <li><a href="/go/gffooter_students_store">For students, educators, and staff</a></li> |
| <li><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOPCY">For small and medium businesses</a></li> |
| <li><a href="/go/gffooter_licensingprograms">Volume Licensing</a></li> |
| <li><a href="/go/gffooter_special_offers">Special offers</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-5 LayoutSlimGrid-1-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/company.html?promoid=JOPDG">Company</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="/go/gffooter_news_room">News room</a></li> |
| <li><a href="/go/gffooter_partner_programs">Partner programs</a></li> |
| <li><a href="/go/gffooter_corporate_social_responsibility">Corporate responsibility</a></li> |
| <li><a href="/go/gffooter_career_opportunities">Career opportunities</a></li> |
| <li><a href="/go/gffooter_investor_relation">Investor Relations</a></li> |
| <li><a href="/go/gffooter_events">Events</a></li> |
| <li><a href="/go/gffooter_legal">Legal</a></li> |
| <li><a href="/go/gffooter_security">Security</a></li> |
| <li><a href="/company/contact.html?promoid=JOPDO">Contact Adobe</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="LayoutGridBreak"> |
| <div class="LayoutCellSides LayoutCellBottom"> |
| <div class="SiteFooterRegionSelector TextInvert LinkInvert LinkStrong"> |
| <a href="/go/gffooter_choose_region" id="sfRegion" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlue">Choose your region</a> |
| <span id="sfRegionSet" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack" style="display: none;">United States <a href="/go/gffooter_choose_region" id="sfRegionChange">(Change)</a></span> |
| </div> |
| <div class="SiteFooterRegionPanel SiteFooterRegionPanelEvidon" id="RegionPanel" style="display: none;"> |
| <div class="SiteFooterRegionPanelHeader"> |
| <span class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack">Choose your region</span> |
| <a id="sfRegionClose" class="SiteFooterRegionPanelHeaderClose">Close</a> |
| </div> |
| <div class="Column"> |
| <div class="Column-1"> |
| <p class="SiteFooterRegionPanelRegionHeader">North America</p> |
| </div> |
| <div class="Column-2-3"> |
| <p class="SiteFooterRegionPanelRegionHeader">Europe, Middle East and Africa</p> |
| </div> |
| <div class="Column-4"> |
| <p class="SiteFooterRegionPanelRegionHeader">Asia Pacific</p> |
| </div> |
| <div class="Column-1"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('ca');">Canada - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('ca_fr');">Canada - Français</a></li> |
| <li lang="es"><a onClick="changeRegion('la');">Latinoamérica</a></li> |
| <li lang="es"><a onClick="changeRegion('mx');">México</a></li> |
| <li lang="en"><a onClick="changeRegion('us');">United States</a></li> |
| </ul> |
| |
| <p class="SiteFooterRegionPanelRegionHeader">South America</p> |
| <ul> |
| <li lang="pt"><a onClick="changeRegion('br');">Brasil</a></li> |
| </ul> |
| </div> |
| <div class="Column-2"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('africa');">Africa - English</a></li> |
| <li lang="de"><a onClick="changeRegion('at');">Österreich - Deutsch</a></li> |
| <li lang="en"><a onClick="changeRegion('be_en');">Belgium - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('be_fr');">Belgique - Français</a></li> |
| <li lang="nl"><a onClick="changeRegion('be_nl');">België - Nederlands</a></li> |
| <li lang="bg"><a onClick="changeRegion('bg');">България</a></li> |
| <li lang="hr"><a onClick="changeRegion('hr');">Hrvatska</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Cyprus - English</a></li> |
| <li lang="cs"><a onClick="changeRegion('cz');">Česká republika</a></li> |
| <li lang="da"><a onClick="changeRegion('dk');">Danmark</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Eastern Europe - English</a></li> |
| <li lang="et"><a onClick="changeRegion('ee');">Eesti</a></li> |
| <li lang="fi"><a onClick="changeRegion('fi');">Suomi</a></li> |
| <li lang="fr"><a onClick="changeRegion('fr');">France</a></li> |
| <li lang="de"><a onClick="changeRegion('de');">Deutschland</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Greece - English</a></li> |
| <li lang="hu"><a onClick="changeRegion('hu');">Magyarország</a></li> |
| <li lang="en"><a onClick="changeRegion('ie');">Ireland</a></li> |
| <li lang="en"><a onClick="changeRegion('il_en');">Israel - English</a></li> |
| <li lang="he"><a onClick="changeRegion('il_he');">ישראל - עברית</a></li> |
| <li lang="it"><a onClick="changeRegion('it');">Italia</a></li> |
| <li lang="lv"><a onClick="changeRegion('lv');">Latvija</a></li> |
| <li lang="lt"><a onClick="changeRegion('lt');">Lietuva</a></li> |
| <li lang="de"><a onClick="changeRegion('lu_de');">Luxembourg - Deutsch</a></li> |
| <li lang="en"><a onClick="changeRegion('lu_en');">Luxembourg - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('lu_fr');">Luxembourg - Français</a></li> |
| </ul> |
| </div> |
| <div class="Column-3"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Malta - English</a></li> |
| <li lang="ar"><a onClick="changeRegion('mena_ar');">الشرق الأوسط وشمال أفريقيا - اللغة العربية</a></li> <li lang="en"><a onClick="changeRegion('mena_en');">Middle East and North Africa - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('mena_fr');">Moyen-Orient et Afrique du Nord - Français</a></li> |
| <li lang="nl"><a onClick="changeRegion('nl');">Nederland</a></li> |
| <li lang="no"><a onClick="changeRegion('no');">Norge</a></li> |
| <li lang="pl"><a onClick="changeRegion('pl');">Polska</a></li> |
| <li lang="pt"><a onClick="changeRegion('pt');">Portugal</a></li> |
| <li lang="ro"><a onClick="changeRegion('ro');">România</a></li> |
| <li lang="ru"><a onClick="changeRegion('ru');">Россия</a></li> |
| <li lang="sr"><a onClick="changeRegion('rs');">Srbija</a></li> |
| <li lang="sk"><a onClick="changeRegion('sk');">Slovensko</a></li> |
| <li lang="sl"><a onClick="changeRegion('si');">Slovenija</a></li> |
| <li lang="es"><a onClick="changeRegion('es');">España</a></li> |
| <li lang="sv"><a onClick="changeRegion('se');">Sverige</a></li> |
| <li lang="de"><a onClick="changeRegion('ch_de');">Schweiz - Deutsch</a></li> |
| <li lang="fr"><a onClick="changeRegion('ch_fr');">Suisse - Français</a></li> |
| <li lang="it"><a onClick="changeRegion('ch_it');">Svizzera - Italiano</a></li> |
| <li lang="tr"><a onClick="changeRegion('tr');">Türkiye</a></li> |
| <li lang="uk"><a onClick="changeRegion('ua');">Україна</a></li> |
| <li lang="en"><a onClick="changeRegion('uk');">United Kingdom</a></li> |
| </ul> |
| </div> |
| <div class="Column-4"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('au');">Australia</a></li> |
| <li lang="zh"><a onClick="changeRegion('cn');">中国</a></li> |
| <li lang="zh"><a onClick="changeRegion('hk_zh');">中國香港特別行政區</a></li> |
| <li lang="en"><a onClick="changeRegion('hk_en');">Hong Kong S.A.R. of China</a></li> |
| <li lang="en"><a onClick="changeRegion('in');">India - English</a></li> |
| <li lang="ja"><a onClick="changeRegion('jp');">日本</a></li> |
| <li lang="ko"><a onClick="changeRegion('kr');">한국</a></li> |
| <li lang="en"><a onClick="changeRegion('nz');">New Zealand</a></li> |
| <li lang="zh"><a onClick="changeRegion('tw');">台灣</a></li> |
| </ul> |
| |
| <p class="SiteFooterRegionPanelRegionHeader">Southeast Asia</p> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('sea');">Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="LayoutGridBreak"> |
| <div class="LayoutCellSides"> |
| <hr /> |
| </div> |
| </div> |
| |
| <div class="LayoutGrid-1-5 LayoutSlimGrid-1-2 LinkInvert LinkStrong"> |
| <div class="LayoutCellSides LayoutCellBottom LinkInvert"> |
| <p class="SiteFooterRow TextSmall">Copyright © 2013 Adobe Systems Incorporated. All rights reserved.</p> |
| <p class="SiteFooterRow TextSmall"><a href="/go/gffooter_terms_of_use">Terms of Use</a> | <a href="/privacy.html">Privacy</a> | <a href="/privacy/cookies.html">Cookies</a></p> |
| <p class="SiteFooterRow SiteFooterRowTop"><a href="#" id="_bapw-link" class="TextSmall icon Icon SiteFooterMenuItemIconEvidon" style="display:none;">Ad Choices</a></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!--googleon: index--><!--googleon: all--></div> |
| <div class="parsys templatembox bottomofbodymbox"><div class="mboxDefault"> |
| </div> |
| <script> |
| mboxCreate('defaultmboxname'); |
| </script> |
| </div> |
| <div class="parsys doubleclickfloodlight"><!-- Fetch either EDU or COM snippet based on the Mode selection--> |
| </div> |
| |
| <!-- Invoking faas form engine tracking Script !! ---> |
| </div> |
| </body> |
| </html> |
