blob: adf0213a20f1420b1cbe7bb5e1d97d6373c45aff [file] [log] [blame]
<!--
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>Flex in a Week – Creating MXML custom components with ActionScript properties | 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="Learn to use Flash Builder to create an MXML class and reuse the class to display employee information." /><meta name="creationDate" content="2011-05-03 @ 17:51:48" />
<meta name="lastModifiedDate" content="2011-05-03 @ 17:51:48" />
<meta name="viewport" content="width=device-width" />
<meta name="page" content="main" />
<meta name="shortTitle" content="Exercise 1.6: Creating MXML custom components with ActionScript properties"/>
<meta name="blurb" content="Learn to use Flash Builder to create an MXML class and reuse the class to display employee information." />
<meta name="author" content="Trilemetry" />
<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/newcontent/videotraining/exercises/ex1_06.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 = "9";
</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/newcontent/videotraining/exercises/ex1_06");
});
</script><script type="text/javascript" src="/etc/clientlibs/granite/jquery-ui.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery-ui.js"></script>
<script type="text/javascript" src="/etc/designs/dotcom/clientlib/stores.js"></script>
<link rel="stylesheet" href="/etc/clientlibs/granite/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="/etc/clientlibs/foundation/jquery-ui/themes/default.css" type="text/css">
<script src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/typekit/yoe7ink.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body class="Text TextMedium Link">
<div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP">
<div class="PrintLayoutHide">
<!--googleoff: all--><div class="sitenav"><script>
//<![CDATA[
if (navigator.userAgent.match(/iPad/i) != null){
adobe.dom.createStyleSheet($('head').get(0), "/include/style/default/SiteHeader-iPad.css");
}
$(document).ready(adobe.fn.initGlobalNav);
//]]>
</script>
<!--googleoff: index-->
<!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/globalnav/en_us/globalnav_ssi.html#1 $ -->
<form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/go/gnav_search" accept-charset="utf-8">
<div id="SiteHeader" class="SiteHeader Text TextSmall">
<span id="globalnav"></span>
<a href="/" id="shHome" class="SiteHeaderHome">Adobe</a>
<div class="SiteHeaderBar" id="shBar">
<div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts">
<a href="/products/catalog.html?promoid=KAWQI" id="shProductsLink" class="SiteHeaderBarLink">Products</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Full" id="ProductsPanel">
<div class="SiteHeaderColumnSingle">
<div class="SiteHeaderRow">
<p class="SiteHeaderPanelHeader">Top destinations</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=JQPEQ" id="Products_Topdestinations_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=KFKQF" id="Products_Topdestinations_CreativeCloudforteams">Creative Cloud for teams</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/cs6.html?promoid=JOLIS" id="Product_Topdestinationss_CreativeSuite6">Creative Suite 6</a></li>
<li class="SiteHeaderPanelLink"><a href="/marketing?promoid=JOLIT" id="Products_Topdestinations_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=JOLIR" id="Products_Topdestinations_Acrobat">Acrobat</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=JOLIW" id="Products_Topdestinations_Photoshop">Photoshop</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAWQH" id="Product_Topdestinationss_SiteCatalyst">SiteCatalyst</a></li>
<li class="SiteHeaderPanelLink"><a href="/education/students.html?marketSegment=EDU&promoid=KFKQD" id="Product_Topdestinationss_Students">Students</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/elements-family.html?promoid=JOLIV" id="Product_Topdestinationss_Elementsfamily">Elements family</a></li>
</ul>
</div>
</div>
<div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
<div class="SiteHeaderRow">
<p class="SiteHeaderPanelHeader">Adobe Creative Cloud</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=KAUBZ" id="Products_AdobeCreativeCloud_WhatisAdobeCreativeCloud">What is Adobe Creative Cloud?</a></li>
</ul>
<div class="SiteHeaderColumn-1">
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/design.html?promoid=KFKPZ" id="Products_AdobeCreativeCloud_Design">Design</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/web.html?promoid=KFKQC" id="Products_AdobeCreativeCloud_Web">Web</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/photography.html?promoid=KFKQA" id="Products_AdobeCreativeCloud_Photography">Photography</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KFKQB" id="Products_AdobeCreativeCloud_Video">Video</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/students.html?marketSegment=EDU&promoid=JUTMG" id="Products_AdobeCreativeCloud_Students">Students</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-2">
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=JZVVU" id="Products_AdobeCreativeCloud_Teams">Teams</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPX" id="Products_AdobeCreativeCloud_Enterprise">Enterprise</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise/education.html?promoid=KFKQE" id="Products_AdobeCreativeCloud_Educationalinstitutions">Educational institutions</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPY" id="Products_AdobeCreativeCloud_Government">Government</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-1">
<p class="SiteHeaderPanelHeaderSmall">Design and photography</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=KAUCA" id="Products_DesignandPhotography_Photoshop">Photoshop</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/illustrator.html?promoid=KAUCB" id="Products_DesignandPhotography_Illustrator">Illustrator</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/indesign.html?promoid=KAUCC" id="Products_DesignandPhotography_InDesign">InDesign</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/muse.html?promoid=KAUCE" id="Products_DesignandPhotography_AdobeMuse">Adobe Muse</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/photoshop-lightroom.html?promoid=KAUCD" id="Products_DesignandPhotography_Lightroom">Lightroom</a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">Video</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/products/premiere.html?promoid=KAUCJ" id="Products_Video_AdobePremiere">Adobe Premiere</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/aftereffects.html?promoid=KAUCK" id="Products_Video_AfterEffects">After Effects</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-2">
<p class="SiteHeaderPanelHeaderSmall">Web development and HTML5</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="http://html.adobe.com/edge/?promoid=KAGMS" target="_blank" id="Products_WebdevelopmentHTML5_EdgeToolsServices">Edge Tools &amp; <span class="SiteHeaderIconNewWindowNoWrap">Services<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="/products/dreamweaver.html?promoid=KAUCF" id="Products_WebdevelopmentHTML5_Dreamweaver">Dreamweaver</a></li>
<li class="SiteHeaderPanelLink"><a href="http://gaming.adobe.com/?promoid=KAUCG" target="_blank" id="Products_WebdevelopmentHTML5_Gaming"><span class="SiteHeaderIconNewWindowNoWrap">Gaming<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
<div class="SiteHeaderRow">
<p class="SiteHeaderPanelHeader">Adobe Marketing Cloud</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing.html?promoid=KAUCL" id="Products_AdobeMarketingCloud_WhatisAdobeMarketingCloud">What is Adobe Marketing Cloud?</a></li>
</ul>
<div class="SiteHeaderColumn-1">
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=KAVVU" id="Products_AdobeMarketingCloud_Digitalanalytics">Digital analytics</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAVVV" id="Products_AdobeMarketingCloud_Socialmarketing">Social marketing</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=KAVVX" id="Products_AdobeMarketingCloud_Webexperiencemanagement">Web experience management</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-2">
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAVVW" id="Products_AdobeMarketingCloud_Testingandtargeting">Testing and targeting</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=KAVVY" id="Products_AdobeMarketingCloud_Mediaoptimization">Media optimization</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQH" id="Products_AdobeMarketingCloud_Campaignmanagement">Campaign management</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-1">
<p class="SiteHeaderPanelHeaderSmall">Analytics</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAUCM" id="Products_Analytics_SiteCatalyst">SiteCatalyst</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/discover.html?promoid=KAUCN" id="Products_Analytics_AdobeDiscover">Adobe Discover</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/insight.html?promoid=KAUCO" id="Products_Analytics_Insight">Insight</a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">Social</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAUCP" id="Products_Social_AdobeSocial">Adobe Social</a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">Experience Manager</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/products/cq.html?promoid=KAUCQ" id="Products_ExperienceManager_CQ">CQ</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/scene7.html?promoid=KAUCR" id="Products_ExperienceManager_Scene7">Scene7</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-2">
<p class="SiteHeaderPanelHeaderSmall">Target</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/testandtarget.html?promoid=KAUCS" id="Products_Target_TestTarget">Test&amp;Target</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/recommendations.html?promoid=KAUCT" id="Products_Target_Recommendations">Recommendations</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/searchandpromote.html?promoid=KAUCU" id="Products_Target_SearchPromote">Search&amp;Promote</a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">Media Optimizer</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/adlens.html?promoid=KAUCV" id="Products_MediaOptimizer_AdLens">AdLens</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/audiencemanager.html?promoid=KAUCW" id="Products_MediaOptimizer_AudienceManager">AudienceManager</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/audienceresearch.html?promoid=KAUCX" id="Products_MediaOptimizer_AudienceResearch">AudienceResearch</a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">Campaign management</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQI" id="Products_Campaignmanagement_AdobeCampaign">Adobe Campaign</a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderColumnSingle SiteHeaderShadowLeft">
<div class="SiteHeaderRow">
<p class="SiteHeaderPanelHeader">Document services</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAUCY" id="Products_DocumentServices_Acrobat">Acrobat</a></li>
<li class="SiteHeaderPanelLink"><a href="https://www.echosign.adobe.com/en/home.html?promoid=KAUDB" target="_blank" class="SiteHeaderLinkNewWindow" id="Products_DocumentServices_EchoSign"><span class="SiteHeaderIconNewWindowNoWrap">EchoSign<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/formscentral/en/home.html?promoid=KAUCZ" target="_blank" id="Products_DocumentServices_FormsCentral"><span class="SiteHeaderIconNewWindowNoWrap">FormsCentral<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/sendnow/en/home.html?promoid=KAUDA" target="_blank" id="Products_DocumentServices_SendNow"><span class="SiteHeaderIconNewWindowNoWrap">SendNow<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/welcome/en/home.html?promoid=KAUDC" target="_blank" id="Products_DocumentServices_Acrobatcom"><span class="SiteHeaderIconNewWindowNoWrap">Acrobat.com<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
</ul>
<p class="SiteHeaderPanelHeader">Publishing</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/products/digital-publishing-suite-family.html?promoid=JOLIU" id="Products_Publishing_DigitalPublishingSuite">Digital Publishing Suite</a></li>
</ul>
</div>
</div>
<br style="clear: both" />
<div class="SiteHeaderRow">
<ul class="SiteHeaderRightLink">
<li class="SiteHeaderPanelLink"><a href="/products/catalog.html?promoid=JOOTH" id="Products_Seeallproducts">See all products</a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBusinessSolutions">
<a href="/solutions.html?promoid=KAWQJ" id="shBusinessSolutionsLink" class="SiteHeaderBarLink">Business solutions</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Double" id="BusinessSolutionsPanel">
<div class="SiteHeaderRow">
<div class="SiteHeaderColumn-1">
<p class="SiteHeaderPanelHeaderSmall">By business need</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=JOLJB" id="BusinessSolutions_Bybusinessneed_Digitalanalytics">Digital analytics</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=JOLJA" id="BusinessSolutions_Bybusinessneed_Digitalpublishing">Digital publishing</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAWSC" id="BusinessSolutions_Bybusinessneed_Documentmanagement">Document management</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=JOLIX" id="BusinessSolutions_Bybusinessneed_Mediaoptimization">Media optimization</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=JZPNO" id="BusinessSolutions_Bybusinessneed_Socialmarketing">Social marketing</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAXLU" id="BusinessSolutions_Bybusinessneed_Testingandtargeting">Testing and targeting</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KAUDD" id="BusinessSolutions_Bybusinessneed_Videoeditingandserving">Video editing and serving</a></li>
<li class="SiteHeaderPanelLink"><a href="http://html.adobe.com?promoid=JZEFF" target="_blank" class="SiteHeaderLinkNewWindow" id="BusinessSolutions_Bybusinessneed_Webdevelopment">Web <span class="SiteHeaderIconNewWindowNoWrap">development<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=JOOYM" id="BusinessSolutions_Bybusinessneed_Webexperiencemanagement">Web experience management</a></li>
</ul>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=JOOTI" id="BusinessSolutions_Seeallbusinessneeds">See all business needs</a></li>
</ul>
</div>
<div class="SiteHeaderColumn-2">
<p class="SiteHeaderPanelHeaderSmall">By industry</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="/solutions/broadcasting.html?promoid=JOLIY" id="BusinessSolutions_Byindustry_Broadcast">Broadcast</a></li>
<li class="SiteHeaderPanelLink"><a href="/education.html?marketSegment=EDU&promoid=JOLIZ" id="BusinessSolutions_Byindustry_Education">Education</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/financial-services.html?promoid=KAUDE" id="BusinessSolutions_Byindustry_Financialservices">Financial services</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/government.html?promoid=KAUDF" id="BusinessSolutions_Byindustry_Government">Government</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=KAUDG" id="BusinessSolutions_Byindustry_Publishing">Publishing</a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/retail.html?promoid=KAWSD" id="BusinessSolutions_Byindustry_Retail">Retail</a></li>
</ul>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=KAUDH" id="BusinessSolutions_Seeallindustries">See all industries</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shSupportLearning">
<a href="http://helpx.adobe.com/support/?promoid=KAWQK" id="shSupportLearningLink" class="SiteHeaderBarLink">Support &amp; Learning</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="SupportLearningPanel">
<div class="SiteHeaderRow">
<p class="SiteHeaderPanelHeaderSmall">I need help</p>
<ul>
<li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/support/?promoid=JZEFP" id="SupportLearning_Ineedhelp_Products">Products</a></li>
<li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/creative-cloud/topics/getting-started.html?promoid=JZEFO" id="SupportLearning_Ineedhelp_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
<li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/marketing-cloud.html?promoid=KAWSE" id="SupportLearning_Ineedhelp_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
<li class="SiteHeaderPanelLink"><a href="http://forums.adobe.com/index.jspa?promoid=JZEFM" target="_blank" id="SupportLearning_Ineedhelp_Forums"><span class="SiteHeaderIconNewWindowNoWrap">Forums<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
</ul>
<p class="SiteHeaderPanelHeaderSmall">I want to learn</p>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/learning.html?promoid=KAUDK" id="SupportLearning_Iwanttolearn_Trainingandtutorials">Training and tutorials</a></li>
<li class="SiteHeaderPanelLink"><a href="http://training.adobe.com/certification.html?promoid=KAUDM" target="_blank" id="SupportLearning_Iwanttolearn_Certification"><span class="SiteHeaderIconNewWindowNoWrap">Certification<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="/devnet.html?promoid=KAUDN" id="SupportLearning_Iwanttolearn_AdobeDeveloperConnection">Adobe Developer Connection</a></li>
<li class="SiteHeaderPanelLink"><a href="/designcenter.html?promoid=KAUDO" id="SupportLearning_Iwanttolearn_AdobeDesignCenter">Adobe Design Center</a></li>
<li class="SiteHeaderPanelLink"><a href="http://tv.adobe.com?promoid=KFELF" target="_blank" id="SupportLearning_Iwanttolearn_AdobeTV">Adobe <span class="SiteHeaderIconNewWindowNoWrap">TV<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
<li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing/guides.html?promoid=KAWSF" id="SupportLearning_Iwanttolearn_AdobeMarketingCenter">Adobe Marketing Center</a></li>
<li class="SiteHeaderPanelLink"><a href="http://labs.adobe.com/?promoid=JZEFQ" target="_blank" id="SupportLearning_Iwanttolearn_AdobeLabs">Adobe <span class="SiteHeaderIconNewWindowNoWrap">Labs<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shDownload">
<a href="/downloads/?promoid=KAWQL" id="shDownloadLink" class="SiteHeaderBarLink">Download</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="DownloadPanel">
<div class="SiteHeaderRow">
<ul>
<li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFS" id="Download_Producttrials">Product trials</a></li>
<li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/flashplayer/?promoid=JZEFT" id="Download_AdobeFlashPlayer">Adobe Flash Player</a></li>
<li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/reader/?promoid=JZEFU" id="Download_AdobeReader">Adobe Reader</a></li>
<li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/air/?promoid=JZEFV" id="Download_AdobeAIR">Adobe AIR</a></li>
</ul>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFW" id="Download_Seealldownloads">See all downloads</a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shCompany">
<a href="/company.html?promoid=KAWQM" id="shCompanyLink" class="SiteHeaderBarLink">Company</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="CompanyPanel">
<div class="SiteHeaderRow">
<ul>
<li class="SiteHeaderPanelLink"><a href="/careers.html?promoid=JZEFX" id="Company_CareersatAdobe">Careers at Adobe</a></li>
<li class="SiteHeaderPanelLink"><a href="/aboutadobe/invrelations/?promoid=JZEFZ" id="Company_InvestorRelations">Investor Relations</a></li>
<li class="SiteHeaderPanelLink"><a href="/aboutadobe/pressroom/?promoid=JZEGA" id="Company_Newsroom">Newsroom</a></li>
<li class="SiteHeaderPanelLink"><a href="/privacy.html?promoid=JZEGB" id="Company_Privacy">Privacy</a></li>
<li class="SiteHeaderPanelLink"><a href="/corporate-responsibility.html?promoid=JZEFY" id="Company_CorporateResponsibility">Corporate Responsibility</a></li>
<li class="SiteHeaderPanelLink"><a href="/customershowcase.html?promoid=KEWBG" id="Company_CustomerShowcase">Customer Showcase</a></li>
<li class="SiteHeaderPanelLink"><a href="/company/contact.html?promoid=JZEGC" id="Company_Contactus">Contact us</a></li>
</ul>
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/company.html?promoid=JZPLK" id="Company_Morecompanyinfo">More company info</a></li>
</ul>
</div>
</div>
</div>
<div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBuy">
<a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_software_sl_mostpopular.html?promoid=KAWQN" id="shBuyLink" class="SiteHeaderBarLink">Buy</a>
<div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="BuyPanel">
<div class="SiteHeaderRow">
<ul class="SiteHeaderPanelLinkNoBottom">
<li class="SiteHeaderPanelLink"><a href="/products/catalog/software.html?marketSegment=COM&promoid=KAWQO" id="Buy_Forpersonalandprofessionaluse">For personal and professional use</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_education_sl_alledu.html?marketSegment=EDU&promoid=KAWQP" id="Buy_Forstudentseducatorsandstaff">For students, educators, and staff</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOLJE" id="Buy_Forsmallandmediumbusinesses">For small and medium businesses</a></li>
<li class="SiteHeaderPanelLink"><a href="/volume-licensing.html?promoid=KAWQQ" id="Buy_VolumeLicensing">Volume Licensing</a></li>
<li class="SiteHeaderPanelLink"><a href="/products/discount-software-coupons.html?promoid=KAWQR" id="Buy_Specialoffers">Special offers</a></li>
<li class="SiteHeaderPanelLink"><a href="http://success.adobe.com/en/na/programs/rfi/dm_sales_inquiries.html?promoid=KAWSG" target="_blank" id="Buy_AdobeMarketingCloudsales">Adobe Marketing Cloud <span class="SiteHeaderIconNewWindowNoWrap">sales<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
</ul>
</div>
</div>
</div>
<!--
<div id="tooltipStrings" class="SiteHeaderTooltipStrings LayoutHidden">
<span id="tooltipStringExpandMenu">Expand menu</span>
<span id="tooltipStringOpenLink">Open link</span>
</div>
-->
<a href="/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a>
<div class="SiteHeaderBarItem SiteHeaderBarItemLast">&nbsp;</div>
<div id="site-search" class="SiteHeaderSearch">
<input title="Search" type="text" id="search-input" name="term" maxlength="1000" />
<input type="hidden" id="searchbuddy-loc" name="loc" value="en_us" />
<button type="submit" id="search-submit" class="icon-replace search">Search</button>
</div>
</div>
<div class="SiteHeaderUser">
<div id="shSignInBlock">
<a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a>
<a href="/account/sign-in.adobedotcom.html" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a>
<div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div>
<div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;">
<div class="SiteHeaderPanelRow">
<span class="SiteHeaderPanelHeader">Why sign in?</span>
Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
</div>
</div>
</div>
<a href="/account.html" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a>
<div class="SiteHeaderPopPanelShadow" id="WelcomePanelShadow" style="display: none;"></div>
<div class="SiteHeaderPopPanel" id="WelcomePanel" style="display: none;">
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount">
<a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_en_us">My Adobe</a>
</div>
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders">
<a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myorders_en_us">My orders</a>
</div>
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation">
<a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myinformation_en_us">My information</a>
</div>
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences">
<a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a>
</div>
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyProductsServices">
<a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myproducts_services_en_us">My products and services</a>
</div>
<div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut">
<a class="SiteHeaderPanelHeader" id="shSignOutLink" href="/cfusion/membership/logout.cfm">Sign out</a>
</div>
</div>
<div id="MyCartLinkContainer">
<a href="/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a>
</div>
<a href="/privacy.html" id="shPrivacy" class="SiteHeaderUserItem">Privacy</a>
<a href="/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a>
</div>
</div>
</form>
<div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall">
<a href="/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a>
<div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile">
<span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span>
<span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span>
<span class="SiteHeaderBarItemMobile" id="shSectionsMobileBuy"><a href="/go/gnav_store_en_us" id="shBuyMobile" class="SiteHeaderBarLink">Buy</a></span>
<span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemMobileNoPadding">&nbsp;</span>
<span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span>
<span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight SiteHeaderBarItemMobileNoPadding">&nbsp;</span>
</div>
<div class="SiteHeaderBarMobileExtend" id="shBarExtend">
<div id="shBarExtendSections" style="display: none;">
<div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections">
<a href="/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a>
<a href="/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a>
</div>
<div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections">
<a href="/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a>
<a href="/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a>
</div>
</div>
<div id="shBarExtendSearch" style="display: none;">
<form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/go/gnav_search" accept-charset="utf-8">
<input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000" />
<button type="submit" id="search-submit-mobile">Search</button>
</form>
</div>
</div>
<div class="SiteHeaderUser">
<a href="/cfusion/membership/index.cfm?loc=en_us&amp;nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong">Sign in</a>
<a href="/cfusion/membership/logout.cfm" id="shSignOutMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong" style="display: none;">Sign out</a>
<a href="/privacy.html" id="shPrivacyMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">Privacy</a>
<a href="/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a>
</div>
</div>
<!--googleon: index--><div class="hovercart"><div id="HoverCartModal">
<div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;">
<div class="CartHeaderPopPanel HoverCart" id="CartPanel">
<div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none">
<div class="LayoutBreakAfter">
<div class="HoverCart-1 LayoutHItem">
<div style="padding-left:60px;" class=" LayoutBreakAfter LayoutPullout">
<div id="HoverCartBoxShotxyz" class="HoverCartBoxShot">
<a href="">
<img src="" class="LayoutImage" alt=""/>
</a>
</div>
<div style="float:left;width:100%" class="CPodCostCell">
<span class="TextStrong ProductName" id="HoverCartHeaderxyz">
<a href="#">
</a>
</span>
<div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz">
</div>
<span id="HoverCartPreOrderHardGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderHardGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.</span>
<span id="HoverCartPreOrderSoftGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderSoftGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.</span>
</div>
</div>
</div>
<div class="LayoutHItem HoverCart-2">
<div class="HoverCartQty">
Qty:
<span id="HoverCartQtyxyz">
</span>
</div>
</div>
<div class="LayoutRight">
<div class="CheckoutCostDark LayoutRight TextRight">
<span id="HoverCartPricexyz">
</span>
<span id="HoverCartSubscriptionxyz" class="CheckoutSubscription">
</span>
<div id="HoverCartVatPercentageLabelxyz" class="TextEm TextSmall" style="display:none; max-width: 100px;"><span id="HoverCartVatPercentagePreTextxyz"></span>
<span id="HoverCartVatPercentagexyz"></span></div>
</div>
</div>
</div>
<div class="HoverCartEDUMessage LayoutBigCellBottom" style="display:none">Purchase requires verification of academic eligibility</div>
</div>
<div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div>
<a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/cart.html"></a>
<div id="HoverCartButtons" class="HoverCart-1-3">
<table border="0" align="right" width="70%">
<tr>
<td>
<div class="TextRight HoverCartSubTotal">Subtotal</div>
<div id="ExVatLabel" style="display:none" class="TextEm TextSmall TextRight"></div>
</td>
<td>
<div class="LayoutRight TextRight">
<div class="CheckoutCostDark">
<span id="HoverCartSubTotal">
</span>
</div>
</div>
</td>
</tr>
<tr id="HoverCartPromotionsRow">
<td>
<div class="TextRight HoverCartPromotionsLabel HoverCartSubTotal">Promotions</div>
</td>
<td>
<div class="LayoutRight TextRight">
<div class="CheckoutCostDark">
<span id="HoverCartPromotions">
</span>
</div>
</div>
</td>
</tr>
<tr id="HoverCartShippingRow">
<td>
<div class="TextRight HoverCartShippingLabel HoverCartSubTotal">Estimated shipping</div>
</td>
<td>
<div class="LayoutRight TextRight">
<div class="CheckoutCostDark">
<span id="HoverCartShipping">
</span>
</div>
</div>
</td>
</tr>
<tr id="HoverCartVATRow">
<td>
<div class="TextRight HoverCartVATLabel HoverCartSubTotal">Tax</div>
</td>
<td>
<div class="LayoutRight TextRight">
<div class="CheckoutCostDark">
<span id="HoverCartVat">
</span>
</div>
<div id="CartTaxHeader">
Calculated at checkout</div>
</div>
</td>
</tr>
<tr>
<td><div class="RuleH"></div></td>
<td><div class="RuleH"></div></td>
</tr>
<tr>
<td>
<div class="TextRight HoverCartTotalLabel HoverCartSubTotal">Total</div>
</td>
<td>
<div class="LayoutRight TextRight">
<div class="CheckoutCostDark">
<span id="HoverCartTotal">
</span>
</div>
</div>
</td>
</tr>
</table>
<div class="LayoutBreak"></div>
<div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter">
<a href="/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a>
</div>
</div>
</div>
</div>
</div>
<script>
/*global jQuery,adobe*/
jQuery.createNs("Adobe.Cart.ShoppingCart");
Adobe.Cart.ShoppingCart.HoverCart = {
MaxItems: "4",
DisplayTime: "5000",
MoreItemsTextSingular: "() more item in your cart",
MoreItemsTextPlural: "() more items in your cart",
MonthToMonthText: "per month",
YearlyText: "per year"
};
Adobe.Cart.TaxLabels = {
TaxInclusiveText : "",
TaxNotApplicable : "Tax not applicable"
};
Adobe.Cart.ShoppingCart.GlobalVars = {
CountryCode: "US",
MarketSegment: "COM",
AkamaiURLPrefix: "http://wwwimages.adobe.com/www.adobe.com",
PriceMonthText: "per month",
PriceYearText: "per year",
FullSubMonthText: "Month-to-month",
FullSubYearText: "One-year",
SubMonthText: "Monthly",
SubYearText: "Annual",
SubscriptionItemText: "NONE",
TermTypeMonth: "MONTH",
TermTypeYear: "YEAR",
BackupDVDParent: "_PARENT",
/*
params: {
cart,
price,
categoryPath,
originalPrice,
storeName,
locale,
usePrecision,
type,
taxCode,
delimiter,
showCentDelim,
distributionMethod
}
*/
getPriceLabel: function(params) {
var currency = params.cart.currency;
var params = {
storeName: params.storeName,
locale: params.locale,
productKey: params.categoryPath,
priceObject: {
price: {
orginalPriceWithoutTax: params.originalPrice,
priceWithoutTax: params.price,
taxCode: params.taxCode || ""
},
priceTypeKey: params.distributionMethod
},
currencyObject: {
delimiter: params.delimiter || ",",
formatString: currency.FORMATSTRING,
iso3Code: currency.CODE,
symbol: currency.SYMBOL,
usePrecision: params.usePrecision
},
showCentDelim : params.showCentDelim || false,
type: params.type
};
return params;
},
isSubscription: function(serviceCommitment, termType) {
return (serviceCommitment == this.SubscriptionItemText &&
(termType == this.TermTypeMonth || termType == this.TermTypeYear));
},
subscriptionItem: function(serviceCommitment, termType) {
return (termType == this.TermTypeMonth &&
(serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear));
},
getSubscriptionText: function(serviceCommitment, termType) {
if (this.isSubscription(serviceCommitment, termType)) {
if (termType === this.TermTypeMonth) {
return this.SubMonthText;
} else if (termType === this.TermTypeYear) {
return this.SubYearText;
}
} else if (this.subscriptionItem(serviceCommitment, termType)) {
if (serviceCommitment === this.TermTypeMonth) {
return this.FullSubMonthText;
} else if (serviceCommitment === this.TermTypeYear) {
return this.FullSubYearText;
}
}
return "";
},
getSubscriptionPriceText: function(serviceCommitment, termType) {
if (this.isSubscription(serviceCommitment, termType)) {
if (termType === this.TermTypeMonth) {
return this.PriceMonthText;
} else if (termType === this.TermTypeYear) {
return this.PriceYearText;
}
} else if (this.subscriptionItem(serviceCommitment, termType)) {
return this.PriceMonthText;
}
return "";
}
};
</script>
</div>
<div id="modalContent" style="display:none;"></div>
</div>
<!--googleon: all--></div>
<div class="Link" id="top">
<div class="Link LayoutBreakAfter">
<div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link">
<div class="LayoutHeaderPath">
<div class="LayoutCellSides LinkStrong LayoutH IconAlign">
<span class="LayoutHItem LayoutSmallGutterRight">
<a href="/devnet.html">
Adobe Developer Connection</a>
</span>
<span class="LayoutSmallGutterRight LayoutHItem">/</span>
<span class="LayoutHItem LayoutSmallGutterRight">
<a href="/devnet/flex.html">
Flex Developer Center</a>
</span>
<span class="LayoutSmallGutterRight LayoutHItem">/</span>
</div>
</div>
</div>
</div>
<div class="LayoutGrid-1-3 LayoutSlimGrid-1-2">
<h1 class="LayoutCellSides LayoutSmallRow TextH1">
Exercise 1.6: Creating MXML custom components with ActionScript properties</h1>
</div>
</div>
</div>
<div class="LayoutRow Link RuleH">
<div class="LayoutBreakAfter">
<!-- Article Leaf -->
<div class="ArticleGrid-1 LayoutSlimGrid-1-2 ArticleWideGrid-1 TextSmall">
<div class="LayoutCellSides LayoutRow">
<div class="articleAuthorDisplay authordisplay"><h2 class="TextH5 LayoutRow">
by&nbsp;<a href="/devnet/author_bios/trilemetry.html">Trilemetry</a></h2>
<div class="LayoutRow">
<img title="trilemetry_bio" alt="Trilemetry" class="ImageShadow LayoutImage" src="devnet/authors/bio/t/trilemetry_bio.gif.adimg.mw.160.png"/></div>
<div class="LayoutRow">
<ul>
<li><a href="http://www.trilemetry.com" title="Trilemetry, Inc." target="_blank">Trilemetry, Inc.</a></li>
</ul>
</div>
</div>
</div>
<div class="LayoutCellSides LayoutRow">
<div class="parbase compbase articleTOC singlepagetoc"><div class="LayoutRow">
<h2 class="TextH5 LayoutSmallRow">Content</h2>
<ul class="LayoutSmallRow">
<li class="LayoutSmallRow ListItemIndent">
<a href="#articlecontentAdobe_numberedheader_1">
Design an application</a>
</li>
<li class="LayoutSmallRow ListItemIndent">
<a href="#articlecontentAdobe_numberedheader_0">
Creating and using an MXML component</a>
</li>
<li class="LayoutSmallRow ListItemIndent">
<a href="#articlecontentAdobe_numberedheader">
Create a class property</a>
</li>
</ul>
</div>
</div>
</div>
<div class="LayoutCellSides LayoutRow">
<div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides">
<h2 class="TextH5 LayoutSmallRow">Modified</h2>
<p>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_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.prod-_sl_flex_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex&nbsp;Builder">Flex&nbsp;Builder</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> &#160;
<input type="radio" name="feedback" id="radiono" onClick="showForm();"/><span id="nospan" class="radio-option">No</span>
<textarea title="(Optional) Please let us know how we can improve this page. " id="feedbacktext" placeholder="" rows="5" cols="25" style="font-family:sans-serif;display:none"></textarea>
<button id="submitButton" onClick="submitForm();" style="display:none">Submit</button>
<button id="noCommentButton" onClick="hideForm();" style="display:none">No comment</button>
<br clear="both">
<div id="termsofuse"><p>By clicking Submit, you accept the <a href="/misc/terms.html">Adobe Terms of Use</a>.</p>
</div>
</div>
<div id="fold">&nbsp;</div>
</div>
<div id="helpful-thankyou" class="thankyou">Thanks for your feedback.</div>
<script>
//<![CDATA[
// Send CHL-specific data to SiteCatalyst
var s_chl = s_gi("mxchlprod");
var urlMatch = /(https?:\/\/)([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*))(index.html)?(\?\S+)?(#\S+)?/;
var adobeMatch = /(https?:\/\/)([-\w\.]+)+(\.adobe\.com)/;
var adobeLocaleMatch = /^\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
var cqLocaleMatch = /^\/content\/help\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
var ua = navigator.userAgent.toLowerCase();
s_chl.channel = "helpx";
s_chl.eVar3 = window.location.toString().replace(/[\?,#](.*)/, "");
s_chl.pageName = s_chl.eVar11 = document.title;
if ( typeof(omtrPageName) != 'undefined' && omtrPageName.length > 0 ) {
s_chl.pageName = s_chl.eVar11 = omtrPageName;
}
// s_chl.list1 = omtrProductList.replace(/,/g,":");
var omtrLocale = "en";
if (adobeLocaleMatch.test(location.pathname)) {
var matchArray = adobeLocaleMatch.exec(location.pathname).slice();
omtrLocale = matchArray[1];
if ( typeof(matchArray[1]) != 'undefined') {
omtrLocale = matchArray[1];
}
}
else if (cqLocaleMatch.test(location.pathname)) {
var matchArray = cqLocaleMatch.exec(location.pathname).slice();
omtrLocale = matchArray[1];
if ( typeof(matchArray[1]) != 'undefined') {
omtrLocale = matchArray[1];
}
}
s_chl.eVar8 = omtrLocale;
if (omtrLocale != "en") {
s_chl.eVar9 = document.title;
}
// Transmit
// The s_gs() call in compressed.js causes problems with any .t() call in any report suite
function s_gs(){}
s_chl.t();
function showForm(){
if (ua.indexOf('msie 6') == -1 ){
$('#helpfulspan').hide();
$('#radioyes').hide();
$('#radiono').hide();
$('#yesspan').hide();
$('#nospan').hide();
$('#feedbacktext').autofill();
$('#helpful').animate({width:'420px', height: '185px'});
$('#helpful').removeClass('collapsed');
$('#helpful').addClass('expanded');
$('#fold').css('background-position', '-12px 0');
displayTextField();
}else{
submitForm();
}
}
$(document).ready(function() {
var feedbackLocales = "en, jp, fr, de, it, se, es, nl , dk, br, no, fi";
if ( feedbackLocales.indexOf( omtrLocale ) > -1 ){
$('#helpful-pod').fadeIn();
$('#helpful-pod').animate({
opacity: 1,
top: '+=20'},
1500);
}
});
// ]]>
</script>
</div>
</div>
<div class="LayoutBreak"></div>
</div>
<!-- Main Content -->
<div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6">
<div class="ArticleWideGrid-2-4">
<div class="articlerequirements articlePrerequistes"><div class="PanelFillMedium PanelBorder LayoutRow TextSmall">
<div id="requirements-title" class="LayoutCell Link">
<h2 class="TextH5">
<span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span>
Requirements</h2>
</div>
<div id="requirements-content" class="LayoutBreakAfter">
<div class="ArticleGrid-2">
<div class="LayoutCellSides">
<h3 class="TextH5 LayoutSmallRowTop">
Prerequisite knowledge</h3>
<div class="LayoutRowBottom">
<ul class="link-list">
<li>Exercise 1.1: <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_01.html">Setting up your project files</a></li>
<li>Exercise 1.5: <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_05.html">Experimenting with container layouts</a></li>
</ul>
</div>
<h3 class="TextH5 LayoutSmallRowTop">
User level</h3>
<p class="LayoutRowBottom">Beginning</p>
</div>
</div>
<div class="ArticleGrid-3">
<div class="LayoutCellSides">
<h3 class="TextH5 LayoutSmallRowTop">
Required products</h3>
<ul class="LayoutSmallRowTop LayoutRowBottom">
<li class="LayoutSmallRow">
<span class="IconLeft IconSmallDownload"></span>Flash Builder 4.7 Premium<a href="/go/try_flashbuilder/"> (Download trial)</a></li>
</ul>
</div>
</div>
<div class="ArticleGrid-4">
<div class="LayoutCellSides">
<h3 class="TextH5 LayoutSmallRowTop">
Exercise files</h3>
<ul class="LayoutSmallRowTop LayoutRowBottom">
<li class="LayoutSmallRow"><a href="fiaw/ex1_06_starter.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>ex1_06_starter.zip</a></li>
<li class="LayoutSmallRow"><a href="fiaw/ex1_06_solution.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>ex1_06_solution.zip</a></li>
</ul>
</div>
</div>
</div>
</div>
<script>
adobe.fn.panelToggle("requirements-title", "requirements-content", true);
</script>
<script>
adobe.fn.panelToggle("requirements-title", "requirements-content", true);
</script>
</div>
<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
<div class="parsys articlecontentAdobe"><div id="articlecontentAdobe">
<a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>In this exercise you will use Flash Builder to create an MXML class and reuse the class to display employee information (see Figure 1).</p>
</div>
</div>
<a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Review your task." alt="Review your task." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image.adimg.mw.325.jpg/1303180106191.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 1. Review your task.</div>
</div>
<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>In this exercise you will learn how to:</p>
<ul>
<li><a href="#articlecontentAdobe_numberedheader_1">Design an application </a></li>
<li><a href="#articlecontentAdobe_numberedheader_0">Create and use an MXML component</a></li>
<li><a href="#articlecontentAdobe_numberedheader">Create a class property</a></li>
</ul>
</div>
</div>
<a name="articlecontentAdobe_numberedheader_1" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
<a id="articlecontentAdobe_numberedheader_1"></a>
Design an application</h3>
</div>
<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p id="a">In this section you will add Flex controls to the application.</p>
<ol>
<li>Download the <a href="fiaw/ex1_06_starter.zip">ex1_06_starter.zip</a> file if you haven't already, and extract the file ex1_06_starter.fxp to your computer.</li>
<li>Return to Flash Builder and import the file ex1_06_starter.fxp.</li>
<li>Open the ex1_06_starter.mxml file.</li>
<li>Switch to Design mode.</li>
<li>From the Components view Controls branch, drag a Label control and drop it into the Design area (see Figure 2).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title=" Add a Label control to the application." alt=" Add a Label control to the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_0.adimg.mw.457.jpg/1303181566421.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 2. Add a Label control to the application.</div>
</div>
<a name="articlecontentAdobe_text_26" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="6">
<li>Use the Properties view to assign the Label control a <code>text</code> property with a value of <b>Employee</b> Portal.</li>
<li>Return to Source mode.</li>
<li>Locate the Styles comment and add a <code>Style</code> tag to your code.</li>
<li>Set the source property's value to Styles.css.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_11" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;fx:Style source=&#034;Styles.css&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_27" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="10">
<li>To the Employee Portal<code> Label </code>control, add a<code> height </code>property with a value of <code>40</code>, a <code>width</code> property with a value of <code>300</code>, and a <code>styleName </code>property with a value of <code>titleHeader</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_12" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;s:Label x=&#034;10&#034; y=&#034;10&#034;
height=&#034;40&#034; width=&#034;300&#034;
text=&#034;Employee Portal&#034;
styleName=&#034;titleHeader&#034;/&gt;
</code>
</div>
</div>
<a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="11">
<li>Save the file and run the application.<p>You should see the style applied to the Label control (see Figure 3).</p>
</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="The titleHeader style applied to the Label control" alt="The titleHeader style applied to the Label control" class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_1.adimg.mw.321.jpg/1303184297153.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 3. The titleHeader style applied to the Label control</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="12">
<li>Return to Flash Builder and switch to Design mode.</li>
<li>From the Controls branch, drag an Image control and drop it into the editor (see Figure 4).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_2" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Add an Image control to the application." alt="Add an Image control to the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_2.adimg.mw.470.jpg/1303189103637.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 4. Add an Image control to the application.</div>
</div>
<a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="14">
<li>Use the Properties view to assign the Image control Source property a value of <b>images/aparker.jpg</b> (see Figure 5).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_3" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title=" Assign a source property of images/aparker.jpg." alt=" Assign a source property of images/aparker.jpg." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_3.adimg.mw.291.jpg/1303189120521.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 5. Assign a source property of images/aparker.jpg.</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="15">
<li>From the Components view Controls branch, drag a Label control and drop it below the Image control (see Figure 6).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_4" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Place a Label control below the Image control." alt="Place a Label control below the Image control." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_4.adimg.mw.489.jpg/1303189140922.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 6. Place a Label control below the Image control.</div>
</div>
<a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="16">
<li>Use the Properties view to assign the Text property a value of <b>Athena Parker</b>.</li>
<li>Save the file.</li>
<li>Run the application.<p>The application should look as shown in Figure 7.</p>
</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_5" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title=" Run the application." alt=" Run the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_5.adimg.mw.325.jpg/1303189164659.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 7. Run the application.</div>
</div>
<a name="articlecontentAdobe_text_28" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="19">
<li>Return to Flash Builder and switch to Source mode.</li>
<li>Locate the<code> Image</code> control and change it from<code style="font-weight: bold;"> Image</code> to<code> BitmapImage</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_13" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;s:BitmapImage x=&#034;10&#034; y=&#034;58&#034;
source=&#034;images/aparker.jpg&#034;/&gt;
</code>
</div>
</div>
<a name="articlecontentAdobe_text_29" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol>
<p><span class="note"><b>Note:</b> It is a best practice to only use the<code> Image</code> control if you need to skin an image (for instance, with a background or border).To just display an image, use<code> BitmapImage</code>.</span></p>
</ol>
</div>
</div>
<a name="articlecontentAdobe_text_30" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="21">
<li>Save the file and run the application.</li>
<p id="b">Note that your application has not changed.</p>
</ol>
</div>
</div>
<a name="articlecontentAdobe_numberedheader_0" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
<a id="articlecontentAdobe_numberedheader_0"></a>
Creating and using an MXML component</h3>
</div>
<a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>In this section you create a custom component to use in place of the controls added to the application in the last section.</p>
<ol>
<li>Return to Flash Builder.</li>
<li>In the Package Explorer, select the src folder then select File &gt; New &gt; Folder.</li>
<li>Name the Folder <b>components</b> (see Figure 8).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_6" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Name the folder components." alt="Name the folder components." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_6.adimg.mw.500.jpg/1303190631069.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 8. Name the folder components.</div>
</div>
<a name="articlecontentAdobe_text_8" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="4">
<li>Click Finish.</li>
<li>In the Package Explorer, select the components folder and then select File &gt; New &gt; MXML Component.</li>
<li>Name the component <b>EmployeeDisplay</b>.</li>
<li>Base the component on the Spark Group container.</li>
<li>Delete the Width and Height values.<p>The New MXML Component dialog box should look as shown in Figure 9.</p>
</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 MXML component." alt="Create a new MXML component." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_7.adimg.mw.500.jpg/1303190770194.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 9. Create a new MXML component.</div>
</div>
<a name="articlecontentAdobe_text_9" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="9">
<li>Click Finish.</li>
<li>Open ex1_06_starter.mxml and switch to Source mode.</li>
<li>Cut the<code> BitmapImage</code> and<code> Label </code>controls that are used for the employee's name and paste them into the EmployeeDisplay.mxml below the <code>Declarations</code> block.</li>
<p><span class="note"><b>Note:</b> You are only cutting the <code>BitmapImage</code> and <code>Label</code> controls that are specific to the employee. Do not cut the Employee Portal <code>Label</code> control.</span></p>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;?xml version=&#034;1.0&#034; encoding=&#034;utf-8&#034;?&gt;
&lt;s:Group xmlns:fx=&#034;http://ns.adobe.com/mxml/2009&#034;
xmlns:s=&#034;library://ns.adobe.com/flex/spark&#034;
xmlns:mx=&#034;library://ns.adobe.com/flex/mx&#034;&gt;
&lt;fx:Declarations&gt;
&lt;/fx:Declarations&gt;
&lt;s:BitmapImage x=&#034;10&#034; y=&#034;58&#034; source=&#034;images/aparker.jpg&#034;/&gt;
&lt;s:Label x=&#034;10&#034; y=&#034;140&#034; text=&#034;Athena Parker&#034;/&gt;
&lt;/s:Group&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_10" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="12">
<li>From the <code>BitmapImage</code> control, delete the <code>x</code> and <code>y</code> properties:</li>
</ol>
</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">&lt;s:BitmapImage source=&#034;images/aparker.jpg&#034;/&gt;</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="13">
<li>Change the value of the<code> Label </code>control's <code>x</code> property to <b>0</b> and <code>y</code> property to <b>80</b>:</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">&lt;s:Label x=&#034;0&#034; y=&#034;80&#034;
text=&#034;Athena Parker&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_12" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="14">
<li>Save the file.</li>
<li>Return to ex1_06_starter.mxml.</li>
<li>Below the <code>UI components</code> comment, add an instance of the custom component by typing the characters <b>&lt;Empl</b> and then pressing Enter when the content assist tool displays the custom component (see Figure 10).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_8" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Use content assist to add an instance of the EmployeeDisplay component." alt="Use content assist to add an instance of the EmployeeDisplay component." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_8.adimg.mw.600.jpg/1303191439537.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 10. Use content assist to add an instance of the EmployeeDisplay component.</div>
</div>
<a name="articlecontentAdobe_text_13" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="17">
<li> Within the opening <code>Application</code> tag, ensure the xml namespace <code>components</code> has been generated. If not, add the namespace assigned to the contents of the components directory.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_2" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;s:Application xmlns:fx=&#034;http://ns.adobe.com/mxml/2009&#034;
xmlns:s=&#034;library://ns.adobe.com/flex/spark&#034;
xmlns:mx=&#034;library://ns.adobe.com/flex/mx&#034;
minWidth=&#034;955&#034;
minHeight=&#034;600&#034;
xmlns:components=&#034;components.*&#034;&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_31" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="18">
<li>To the <code>EmployeeDisplay</code> component, add the <code>x</code> property with a value of <code>10</code> and the <code>y</code> property with a value of <code>60</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_14" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;components:EmployeeDisplay x=&#034;10&#034; y=&#034;60&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_14" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="18">
<li>Switch to Design mode.</li>
<li>From the Components view Custom branch, drag another EmployeeDisplay component and drop it into the Design area next to the first (see Figure 11).</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_9" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Use the Components view to add another EmployeeDisplay component to the application." alt="Use the Components view to add another EmployeeDisplay component to the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_9.adimg.mw.472.jpg/1303191880245.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 11. Use the Components view to add another EmployeeDisplay component to the application.</div>
</div>
<a name="articlecontentAdobe_text_15" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="21">
<li>In the properties view, go to the Size and Position segment and change the <code>x</code> property value to <code><b>105</b></code> and make sure the <code>y</code> property value is <code><b>60</b></code>.</li>
<li>Save the file and run the application.<p>You should see that the application contains two <code>EmployeeDisplay</code> components, as shown in Figure 12.</p>
</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_10" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Run the application." alt="Run the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_10.adimg.mw.322.jpg/1303191886918.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 12. Run the application.</div>
</div>
<a name="articlecontentAdobe_text_32" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="23">
<li>Return to Flash Builder and switch to Source mode.</li>
<li>Locate the second <code>EmployeeDisplay</code> component and notice that it is presented as a tag block.</li>
<li>Remove the closing<code> EmployeeDisplay</code> tag and modify the opening tag so that it becomes a single instance of the component.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_15" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;components:EmployeeDisplay x=&#034;10&#034; y=&#034;60&#034;/&gt;
&lt;components:EmployeeDisplay x=&#034;105&#034; y=&#034;60&#034;/&gt;
</code>
</div>
</div>
<a name="articlecontentAdobe_text_33" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol id="c" start="26">
<li>Save the file.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_numberedheader" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
<a id="articlecontentAdobe_numberedheader"></a>
Create a class property</h3>
</div>
<a name="articlecontentAdobe_text_16" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>In this section, you will create two class properties and use them to display data.</p>
<ol>
<li>Open the EmployeeDisplay.mxml file.</li>
<li>Below the opening <code>Group</code> container tag, create a <code>Script</code> block.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_3" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">...
xmlns:mx=&#034;library://ns.adobe.com/flex/mx&#034;&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
]]&gt;
&lt;/fx:Script&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_17" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="3">
<li>In the <code>Script</code> block, type imageFile and use the quick assist tool, by pressing CTRL+1, to create a variable. Make the variable public and data typed to the String class. </li>
<li>Make the new imageFile variable Bindable by typing <b>[B</b> above the variable to invoke the content assist tool and click enter when Bindable is displayed.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_4" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;![CDATA[
[Bindable]
public var imageFile:String;
]]&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_18" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="5">
<li>Declare another <code>Bindable public</code> variable named <code>fullName</code> data typed to the String class by using the content assist and quick assist tools.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_5" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">[Bindable]
public var imageFile:String;
[Bindable]
public var fullName:String; </code>
</div>
</div>
<a name="articlecontentAdobe_text_19" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="6">
<li>In the <code>source</code> property of the <code>BitmapImage</code> control, replace the hard-coded employee image file name with the value of the <code>imageFile</code> variable.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_6" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;s:BitmapImage source=&#034;images/{imageFile}&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_20" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="7">
<li> To the Label control, bind the value of the <code>text</code> property to the value of the <code>fullName</code> variable.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_7" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;s:Label x=&#034;0&#034; y=&#034;80&#034; text=&#034;{fullName}&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_21" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="8">
<li>Save the file.</li>
<li>Open ex1_06_starter.mxml.</li>
<li>In Source mode, to the first custom component tag, add the <code>imageFile</code> property with a value of <code>aparker.jpg</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_8" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;components:EmployeeDisplay x=&#034;10&#034; y=&#034;60&#034; imageFile=&#034;aparker.jpg&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_22" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="11">
<li>To the same component, add the <code>fullName</code> variable set to the value of <code>Athena Parker</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_9" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;components:EmployeeDisplay x=&#034;10&#034; y=&#034;60&#034; imageFile=&#034;aparker.jpg&#034;
fullName=&#034;Athena Parker&#034; /&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_23" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="12">
<li>To the other custom component tag, add the <code>imageFile</code> property set to <code>stucker.jpg</code> and the <code>fullName</code> property set to <code>Saul Tucker</code>.</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_codeblock_10" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
<code class="CodeBlock">&lt;components:EmployeeDisplay x=&#034;105&#034; y=&#034;60&#034;
imageFile=&#034;stucker.jpg&#034;
fullName=&#034;Saul Tucker&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_24" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<ol start="13">
<li>Save the file.</li>
<li>Run the application. <p>The custom component now displays two different employees (see Figure 13).</p>
</li>
</ol>
</div>
</div>
<a name="articlecontentAdobe_image_11" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
<img title="Run the application." alt="Run the application." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex1_06/_jcr_content/articlecontentAdobe/image_11.adimg.mw.324.jpg/1303192877567.jpg"/></div>
<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
Figure 13. Run the application.</div>
</div>
<a name="articlecontentAdobe_text_25" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>In this exercise you learned to use Flash Builder to create an MXML class and reuse the class to display data. In the next exercise, you will use inline ActionScript to display the date selected from a DateChooser control. You will then use a function to achieve the same result as the inline ActionScript.<br>
</p>
</div>
</div>
<a name="articlecontentAdobe_reference" style="visibility:hidden"></a><div class="parbase section reference"><div style="display:inline;" class="cq-dd-paragraph"><div class="text parbase"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p><a 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/newcontent/videotraining/exercises/ex1_01.html" title="Exercise 1.1: Setting up your project files">Exercise 1.1: Setting up your project files</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex1_04.html" title="Exercise 1.4: Adding data to your application">Exercise 1.4: Adding data to your application</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex1_03.html" title="Exercise 1.3: Generating an email address using data binding">Exercise 1.3: Generating an email address using data binding</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex1_05.html" title="Exercise 1.5: Experimenting with container layouts">Exercise 1.5: Experimenting with container layouts</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex5_03.html" title="Exercise 5.2: Defining selector styles">Exercise 5.2: Defining selector styles</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex1_02.html" title="Exercise 1.2: Creating an application user interface">Exercise 1.2: Creating an application user interface</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex4_02.html" title="Exercise 4.2: Displaying dynamic data in a custom item renderer">Exercise 4.2: Displaying dynamic data in a custom item renderer</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex3_05.html" title="Exercise 3.5: Using formatters">Exercise 3.5: Using formatters</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex3_08.html" title="Exercise 3.8: Creating a master/detail interface with a wizard">Exercise 3.8: Creating a master/detail interface with a wizard</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/newcontent/videotraining/exercises/ex3_06.html" title="Exercise 3.6: Validating form data">Exercise 3.6: Validating form data</a></li>
</ul>
</div>
</div>
</div>
<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
<div class="LayoutRow">
<div class="parbase compbase inheritedpromo">
<div class="LayoutRow"></div></div>
</div>
</div>
</div>
<div class="LayoutBreakAfter TextSmall">
<div class="ArticleGrid-2 LayoutSlimGrid-1-2 ArticleWideGridColReset">
<div class="parsys inheritedresources inheritedResources"></div>
</div>
<div class="ArticleGrid-3 LayoutSlimGrid-1-2 ArticleWideGridColReset">
<div class="parsys inheritedresources inheritedResources2"></div>
</div>
<div class="ArticleGrid-4 LayoutSlimGrid-1-2 ArticleWideGridColReset">
<div class="parsys inheritedResources3 inheritedresources"></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 &amp; 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&ccedil;ais</a></li>
<li lang="es"><a onClick="changeRegion('la');">Latinoam&eacute;rica</a></li>
<li lang="es"><a onClick="changeRegion('mx');">M&eacute;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');">&Ouml;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&ccedil;ais</a></li>
<li lang="nl"><a onClick="changeRegion('be_nl');">Belgi&euml; - 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&aacute; 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&aacute;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');">&#1497;&#1513;&#1512;&#1488;&#1500; - &#1506;&#1489;&#1512;&#1497;&#1514;</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&ccedil;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');">&#1575;&#1604;&#1588;&#1585;&#1602; &#1575;&#1604;&#1571;&#1608;&#1587;&#1591; &#1608;&#1588;&#1605;&#1575;&#1604; &#1571;&#1601;&#1585;&#1610;&#1602;&#1610;&#1575; - &#1575;&#1604;&#1604;&#1594;&#1577; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</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&ccedil;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&acirc;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&ntilde;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&ccedil;ais</a></li>
<li lang="it"><a onClick="changeRegion('ch_it');">Svizzera - Italiano</a></li>
<li lang="tr"><a onClick="changeRegion('tr');">T&uuml;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 &copy; 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>