You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/04/26 01:35:03 UTC
[18/51] [partial] ADC articles donated by Adobe Systems Inc
http://git-wip-us.apache.org/repos/asf/flex-external/blob/1bcc0e18/ADC/devnet/flex/articles/mobile-skinning-part3.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/mobile-skinning-part3.html b/ADC/devnet/flex/articles/mobile-skinning-part3.html
new file mode 100644
index 0000000..6910552
--- /dev/null
+++ b/ADC/devnet/flex/articles/mobile-skinning-part3.html
@@ -0,0 +1,2026 @@
+<!--
+ 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 mobile skins – Part 3: Multiplatform development | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="robots" content="noodp" />
+ <meta name="keywords" content="mobile,multiscreen,CSS,skinning,RIA" />
+ <meta name="description" content="Learn the basics of theme authoring and platform-specific skinning in Flash Builder." /><meta name="creationDate" content="2011-07-12 @ 09:46:46" />
+ <meta name="lastModifiedDate" content="2011-07-12 @ 09:46:46" />
+ <meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Flex mobile skins – Part 3"/>
+<meta name="blurb" content="Learn the basics of theme authoring and platform-specific skinning in Flash Builder." />
+<meta name="author" content="Jason San Jose" />
+<meta name="area" content="devnet" />
+<link rel="icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/>
+ <link rel="shortcut icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/>
+<link rel="canonical" href="http://www.adobe.com/devnet/flex/articles/mobile-skinning-part3.html"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-compressed.css"/>
+<!--[if !IE]><!-->
+ <link rel="stylesheet" media="screen,print" href="http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css"/>
+ <!--<![endif]-->
+ <!--[if IE]>
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-compressed.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/default/SearchBuddy.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-modes.css" />
+ <![endif]-->
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-configurator-compressed.css"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.css"/>
+ <!--[if lt IE 10]>
+ <link rel="stylesheet" media="screen" href="/include/style/modes/MirrorIE.css" />
+ <![endif]-->
+ <script>
+ function createNs ( ns )
+ {
+ var o, a;
+ a = ns.split(".");
+ o = window[a[0]] = window[a[0]] || {};
+ for(i=1; i < a.length; i++)
+ {
+ o = o[a[i]] = o[a[i]] || {};
+ }
+ return o;
+ }
+
+ createNs("Adobe.PageInfo");
+ createNs("Adobe.Tokens");
+ createNs("Adobe.UserInfo");
+ Adobe.PageInfo.AuthenticatedState = false;
+ Adobe.PageInfo.localeCode = "en";
+ Adobe.PageInfo.accountPageName = "";
+ Adobe.PageInfo.productKey = "";
+ Adobe.PageInfo.catalogName = "";
+ Adobe.PageInfo.countryCode = "US";
+ Adobe.PageInfo.localeString = "en_us";
+ Adobe.PageInfo.marketSegment = "COM";
+ Adobe.PageInfo.sitecatalystMarketSegment = "COM";
+ Adobe.PageInfo.akamaiURLPrefix = "http://wwwimages.adobe.com/www.adobe.com";
+ Adobe.PageInfo.pageLevel = "7";
+</script>
+<script src="http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-store-compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/VisitorAPI.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></script>
+ <!--[if IE 6]>
+ <script>
+ try{void(document.execCommand("BackgroundImageCache",false,true));} catch(e) {}
+ </script>
+ <![endif]-->
+ <script>
+ //<![CDATA[
+ $(window).bind("hashchange load", adobe.fn.focusHashElement);
+ cart = new adobe.ui.CartFacade("cart-dialog", "cart-dialog-flash");
+ cart.setRequiredFlashVersion("9.0.115");
+ cart.setDefaultCountry("");
+ cart.setDomain(".adobe.com"); // set this to ".adobe.com"
+ cart.setContextPath(""); // set this to empty when web context is '/'
+ // Possibly add the .edu selector or override market segment
+ Adobe.Product.Controller.CPod.EduController.processLocation(true);
+ if(cart.isOverlaySupported()) {
+ var PromoIDReport = new Array();
+ var prmid = window.location.search.match(/\bpromoid\=([^&#$]+)/);
+ if(prmid) {
+ prmid[1]=prmid[1].toUpperCase();
+ cart.setEmailTrackingId(prmid[1]);
+ }
+ // if a promo code is pass thru the URL, set the promo in the cart and the cookie
+ prmid = window.location.search.match(/\bpromocode\=([^&#$]+)/) || null;
+ if(prmid) {
+ if (Adobe && Adobe.Cart && Adobe.Cart.Models && Adobe.Cart.Models.Cart) {
+ var cart = Adobe.Cart.Models.Cart;
+ var marketSegment = cart.getMarketSegment() || Adobe.Product.Controller.CPod.EduController.COM;
+ cart.addPromotion({code:prmid[1], marketSegment:marketSegment});
+ cart.savePromoCode(prmid[1]);
+ }
+ }
+ }
+ //]]>
+</script>
+<script>
+ $(document).ready(function()
+ {
+ adobe.dom.param("wcmmode=disabled");
+ adobe.dom.param("compress=false");
+ });
+</script>
+<script>
+ var locales = {"cn":true,"us":true,"en_xx":true,"tw":true};
+ var tokens = document.location.pathname.split('/');
+ var locale = ((tokens.length < 2) || ((locales[tokens[1]] == undefined) && tokens[1]!='content')) ? 'us' : tokens[1];
+ var geoCook = 'international=';
+ var cookies = document.cookie.split(';');
+ for(var i=0;i < cookies.length;i++) {
+ var c = cookies[i];
+ if ((c.indexOf(geoCook) >= 0) && !(locale=='content') ){
+ var preferredLocale = c.substring(c.indexOf(geoCook) + geoCook.length,c.length);
+ if ((preferredLocale != locale)&&(locales[preferredLocale])){
+ var url = document.location.pathname + document.location.search;
+ if (locale == 'us'){
+ url = '/' + preferredLocale + url;
+ } else {
+ var suffix = url.substring(locale.length + 1);
+ if ((suffix == null) || (suffix == ""))
+ {
+ suffix = "/";
+ }
+ if (preferredLocale != 'us'){
+ url = '/' + preferredLocale + suffix;
+ } else {
+ url = suffix;
+ }
+ }
+ window.location.replace(url);
+ }
+ }
+ }
+</script>
+<!--[if (gte IE 9)|(IEMobile)]><!-->
+ <link rel="stylesheet" media="only screen" href="/etc/pagetables/reflowtypes/adobe_adc_article.css"/>
+ <script src="/etc/pagetables/reflowtypes/adobe_adc_article.js"></script>
+ <!--<![endif]-->
+<script>
+ //<![CDATA[
+ if(typeof jQuery != 'undefined'){
+ (function($) {
+ var dispatcher = (adobe.vrbl("reflowDispatcher") || adobe.vrbl("reflowDispatcher", adobe.reflow.createDispatcher("width", window.document))),
+ viewport = $(window),
+ viewportWidth = NaN,
+ meta = window.document.getElementsByName("viewport")[0],
+ metaContent;
+
+ $(window).bind("resize orientationchange", setRenderMode);
+
+ if(meta) {
+ $(window.document).bind("adobe.reflow.LayoutChange", snapViewportToMaxWidth);
+ }
+
+ setRenderMode();
+
+ function snapViewportToMaxWidth(event, layout_event) {
+ if (layout_event.snapView && layout_event.active) {
+ var widthSetter = "width=",
+ width = widthSetter+layout_event.maxRange,
+ content = meta.getAttribute("content");
+
+ if(content.indexOf(widthSetter) > -1) {
+ content = content.replace(/width=[^,$]+/, width);
+ } else {
+ content = width;
+ }
+ meta.setAttribute("content", content);
+ }
+ }
+
+ function setRenderMode() {
+ var currentViewportWidth = viewport.width();
+ if (viewportWidth == currentViewportWidth) {
+ return;
+ } //trottle noisy event
+ viewportWidth = currentViewportWidth;
+ dispatcher.updateLayout(viewportWidth);
+ }
+ })(jQuery);
+ }
+ //]]>
+</script>
+<link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/article-compressed.css"/>
+<script src="http://community.adobe.com/help/badge/v4/ionLoader.js"></script>
+ <script src="http://community.adobe.com/help/badge/v4/ionSupport.js"></script>
+ <script src="http://community.adobe.com/help/badge/v4/ionBadge.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/jquery.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/utils.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/shared.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/kernel.js"></script>
+<link rel="stylesheet" href="/apps/dotcom/ag-widgets.css" type="text/css">
+<script type="text/javascript">
+ $CQ(function() {
+ CQ_Analytics.SegmentMgr.loadSegments("/etc/segmentation");
+ CQ_Analytics.ClientContextUtils.init("/etc/clientcontext/default","/content/dotcom/en/devnet/flex/articles/mobile-skinning-part3");
+
+
+ });
+</script><script type="text/javascript" src="/etc/clientlibs/granite/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/designs/dotcom/clientlib/stores.js"></script>
+<link rel="stylesheet" href="/etc/clientlibs/granite/jquery-ui.css" type="text/css">
+<link rel="stylesheet" href="/etc/clientlibs/foundation/jquery-ui/themes/default.css" type="text/css">
+<script src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/typekit/yoe7ink.js"></script>
+ <script>try{Typekit.load();}catch(e){}</script>
+ </head>
+<body class="Text TextMedium Link">
+<div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP">
+ <div class="PrintLayoutHide">
+ <!--googleoff: all--><div class="sitenav"><script>
+ //<![CDATA[
+ if (navigator.userAgent.match(/iPad/i) != null){
+ adobe.dom.createStyleSheet($('head').get(0), "/include/style/default/SiteHeader-iPad.css");
+ }
+
+ $(document).ready(adobe.fn.initGlobalNav);
+ //]]>
+</script>
+<!--googleoff: index-->
+<!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/globalnav/en_us/globalnav_ssi.html#1 $ -->
+<form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <div id="SiteHeader" class="SiteHeader Text TextSmall">
+ <span id="globalnav"></span>
+ <a href="/" id="shHome" class="SiteHeaderHome">Adobe</a>
+ <div class="SiteHeaderBar" id="shBar">
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts">
+ <a href="/products/catalog.html?promoid=KAWQI" id="shProductsLink" class="SiteHeaderBarLink">Products</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Full" id="ProductsPanel">
+ <div class="SiteHeaderColumnSingle">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Top destinations</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=JQPEQ" id="Products_Topdestinations_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=KFKQF" id="Products_Topdestinations_CreativeCloudforteams">Creative Cloud for teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/cs6.html?promoid=JOLIS" id="Product_Topdestinationss_CreativeSuite6">Creative Suite 6</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/marketing?promoid=JOLIT" id="Products_Topdestinations_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=JOLIR" id="Products_Topdestinations_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=JOLIW" id="Products_Topdestinations_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAWQH" id="Product_Topdestinationss_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education/students.html?marketSegment=EDU&promoid=KFKQD" id="Product_Topdestinationss_Students">Students</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/elements-family.html?promoid=JOLIV" id="Product_Topdestinationss_Elementsfamily">Elements family</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Creative Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=KAUBZ" id="Products_AdobeCreativeCloud_WhatisAdobeCreativeCloud">What is Adobe Creative Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/design.html?promoid=KFKPZ" id="Products_AdobeCreativeCloud_Design">Design</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/web.html?promoid=KFKQC" id="Products_AdobeCreativeCloud_Web">Web</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/photography.html?promoid=KFKQA" id="Products_AdobeCreativeCloud_Photography">Photography</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KFKQB" id="Products_AdobeCreativeCloud_Video">Video</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/students.html?marketSegment=EDU&promoid=JUTMG" id="Products_AdobeCreativeCloud_Students">Students</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=JZVVU" id="Products_AdobeCreativeCloud_Teams">Teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPX" id="Products_AdobeCreativeCloud_Enterprise">Enterprise</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise/education.html?promoid=KFKQE" id="Products_AdobeCreativeCloud_Educationalinstitutions">Educational institutions</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPY" id="Products_AdobeCreativeCloud_Government">Government</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Design and photography</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=KAUCA" id="Products_DesignandPhotography_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/illustrator.html?promoid=KAUCB" id="Products_DesignandPhotography_Illustrator">Illustrator</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/indesign.html?promoid=KAUCC" id="Products_DesignandPhotography_InDesign">InDesign</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/muse.html?promoid=KAUCE" id="Products_DesignandPhotography_AdobeMuse">Adobe Muse</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop-lightroom.html?promoid=KAUCD" id="Products_DesignandPhotography_Lightroom">Lightroom</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Video</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/premiere.html?promoid=KAUCJ" id="Products_Video_AdobePremiere">Adobe Premiere</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/aftereffects.html?promoid=KAUCK" id="Products_Video_AfterEffects">After Effects</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Web development and HTML5</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com/edge/?promoid=KAGMS" target="_blank" id="Products_WebdevelopmentHTML5_EdgeToolsServices">Edge Tools & <span class="SiteHeaderIconNewWindowNoWrap">Services<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/dreamweaver.html?promoid=KAUCF" id="Products_WebdevelopmentHTML5_Dreamweaver">Dreamweaver</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://gaming.adobe.com/?promoid=KAUCG" target="_blank" id="Products_WebdevelopmentHTML5_Gaming"><span class="SiteHeaderIconNewWindowNoWrap">Gaming<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Marketing Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing.html?promoid=KAUCL" id="Products_AdobeMarketingCloud_WhatisAdobeMarketingCloud">What is Adobe Marketing Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=KAVVU" id="Products_AdobeMarketingCloud_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAVVV" id="Products_AdobeMarketingCloud_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=KAVVX" id="Products_AdobeMarketingCloud_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAVVW" id="Products_AdobeMarketingCloud_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=KAVVY" id="Products_AdobeMarketingCloud_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQH" id="Products_AdobeMarketingCloud_Campaignmanagement">Campaign management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Analytics</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAUCM" id="Products_Analytics_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discover.html?promoid=KAUCN" id="Products_Analytics_AdobeDiscover">Adobe Discover</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/insight.html?promoid=KAUCO" id="Products_Analytics_Insight">Insight</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Social</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAUCP" id="Products_Social_AdobeSocial">Adobe Social</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Experience Manager</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/cq.html?promoid=KAUCQ" id="Products_ExperienceManager_CQ">CQ</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/scene7.html?promoid=KAUCR" id="Products_ExperienceManager_Scene7">Scene7</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Target</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/testandtarget.html?promoid=KAUCS" id="Products_Target_TestTarget">Test&Target</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/recommendations.html?promoid=KAUCT" id="Products_Target_Recommendations">Recommendations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/searchandpromote.html?promoid=KAUCU" id="Products_Target_SearchPromote">Search&Promote</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Media Optimizer</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/adlens.html?promoid=KAUCV" id="Products_MediaOptimizer_AdLens">AdLens</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audiencemanager.html?promoid=KAUCW" id="Products_MediaOptimizer_AudienceManager">AudienceManager</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audienceresearch.html?promoid=KAUCX" id="Products_MediaOptimizer_AudienceResearch">AudienceResearch</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Campaign management</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQI" id="Products_Campaignmanagement_AdobeCampaign">Adobe Campaign</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnSingle SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Document services</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAUCY" id="Products_DocumentServices_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.echosign.adobe.com/en/home.html?promoid=KAUDB" target="_blank" class="SiteHeaderLinkNewWindow" id="Products_DocumentServices_EchoSign"><span class="SiteHeaderIconNewWindowNoWrap">EchoSign<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/formscentral/en/home.html?promoid=KAUCZ" target="_blank" id="Products_DocumentServices_FormsCentral"><span class="SiteHeaderIconNewWindowNoWrap">FormsCentral<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/sendnow/en/home.html?promoid=KAUDA" target="_blank" id="Products_DocumentServices_SendNow"><span class="SiteHeaderIconNewWindowNoWrap">SendNow<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/welcome/en/home.html?promoid=KAUDC" target="_blank" id="Products_DocumentServices_Acrobatcom"><span class="SiteHeaderIconNewWindowNoWrap">Acrobat.com<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeader">Publishing</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/digital-publishing-suite-family.html?promoid=JOLIU" id="Products_Publishing_DigitalPublishingSuite">Digital Publishing Suite</a></li>
+ </ul>
+ </div>
+ </div>
+ <br style="clear: both" />
+
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderRightLink">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog.html?promoid=JOOTH" id="Products_Seeallproducts">See all products</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBusinessSolutions">
+ <a href="/solutions.html?promoid=KAWQJ" id="shBusinessSolutionsLink" class="SiteHeaderBarLink">Business solutions</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Double" id="BusinessSolutionsPanel">
+ <div class="SiteHeaderRow">
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">By business need</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=JOLJB" id="BusinessSolutions_Bybusinessneed_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=JOLJA" id="BusinessSolutions_Bybusinessneed_Digitalpublishing">Digital publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAWSC" id="BusinessSolutions_Bybusinessneed_Documentmanagement">Document management</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=JOLIX" id="BusinessSolutions_Bybusinessneed_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=JZPNO" id="BusinessSolutions_Bybusinessneed_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAXLU" id="BusinessSolutions_Bybusinessneed_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KAUDD" id="BusinessSolutions_Bybusinessneed_Videoeditingandserving">Video editing and serving</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com?promoid=JZEFF" target="_blank" class="SiteHeaderLinkNewWindow" id="BusinessSolutions_Bybusinessneed_Webdevelopment">Web <span class="SiteHeaderIconNewWindowNoWrap">development<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=JOOYM" id="BusinessSolutions_Bybusinessneed_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=JOOTI" id="BusinessSolutions_Seeallbusinessneeds">See all business needs</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">By industry</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/broadcasting.html?promoid=JOLIY" id="BusinessSolutions_Byindustry_Broadcast">Broadcast</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education.html?marketSegment=EDU&promoid=JOLIZ" id="BusinessSolutions_Byindustry_Education">Education</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/financial-services.html?promoid=KAUDE" id="BusinessSolutions_Byindustry_Financialservices">Financial services</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/government.html?promoid=KAUDF" id="BusinessSolutions_Byindustry_Government">Government</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=KAUDG" id="BusinessSolutions_Byindustry_Publishing">Publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/retail.html?promoid=KAWSD" id="BusinessSolutions_Byindustry_Retail">Retail</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=KAUDH" id="BusinessSolutions_Seeallindustries">See all industries</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shSupportLearning">
+ <a href="http://helpx.adobe.com/support/?promoid=KAWQK" id="shSupportLearningLink" class="SiteHeaderBarLink">Support & Learning</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="SupportLearningPanel">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeaderSmall">I need help</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/support/?promoid=JZEFP" id="SupportLearning_Ineedhelp_Products">Products</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/creative-cloud/topics/getting-started.html?promoid=JZEFO" id="SupportLearning_Ineedhelp_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/marketing-cloud.html?promoid=KAWSE" id="SupportLearning_Ineedhelp_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://forums.adobe.com/index.jspa?promoid=JZEFM" target="_blank" id="SupportLearning_Ineedhelp_Forums"><span class="SiteHeaderIconNewWindowNoWrap">Forums<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">I want to learn</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/learning.html?promoid=KAUDK" id="SupportLearning_Iwanttolearn_Trainingandtutorials">Training and tutorials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://training.adobe.com/certification.html?promoid=KAUDM" target="_blank" id="SupportLearning_Iwanttolearn_Certification"><span class="SiteHeaderIconNewWindowNoWrap">Certification<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/devnet.html?promoid=KAUDN" id="SupportLearning_Iwanttolearn_AdobeDeveloperConnection">Adobe Developer Connection</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/designcenter.html?promoid=KAUDO" id="SupportLearning_Iwanttolearn_AdobeDesignCenter">Adobe Design Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://tv.adobe.com?promoid=KFELF" target="_blank" id="SupportLearning_Iwanttolearn_AdobeTV">Adobe <span class="SiteHeaderIconNewWindowNoWrap">TV<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing/guides.html?promoid=KAWSF" id="SupportLearning_Iwanttolearn_AdobeMarketingCenter">Adobe Marketing Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://labs.adobe.com/?promoid=JZEFQ" target="_blank" id="SupportLearning_Iwanttolearn_AdobeLabs">Adobe <span class="SiteHeaderIconNewWindowNoWrap">Labs<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shDownload">
+ <a href="/downloads/?promoid=KAWQL" id="shDownloadLink" class="SiteHeaderBarLink">Download</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="DownloadPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFS" id="Download_Producttrials">Product trials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/flashplayer/?promoid=JZEFT" id="Download_AdobeFlashPlayer">Adobe Flash Player</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/reader/?promoid=JZEFU" id="Download_AdobeReader">Adobe Reader</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/air/?promoid=JZEFV" id="Download_AdobeAIR">Adobe AIR</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFW" id="Download_Seealldownloads">See all downloads</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shCompany">
+ <a href="/company.html?promoid=KAWQM" id="shCompanyLink" class="SiteHeaderBarLink">Company</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="CompanyPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/careers.html?promoid=JZEFX" id="Company_CareersatAdobe">Careers at Adobe</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/invrelations/?promoid=JZEFZ" id="Company_InvestorRelations">Investor Relations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/pressroom/?promoid=JZEGA" id="Company_Newsroom">Newsroom</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/privacy.html?promoid=JZEGB" id="Company_Privacy">Privacy</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/corporate-responsibility.html?promoid=JZEFY" id="Company_CorporateResponsibility">Corporate Responsibility</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/customershowcase.html?promoid=KEWBG" id="Company_CustomerShowcase">Customer Showcase</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/company/contact.html?promoid=JZEGC" id="Company_Contactus">Contact us</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/company.html?promoid=JZPLK" id="Company_Morecompanyinfo">More company info</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBuy">
+ <a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_software_sl_mostpopular.html?promoid=KAWQN" id="shBuyLink" class="SiteHeaderBarLink">Buy</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="BuyPanel">
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software.html?marketSegment=COM&promoid=KAWQO" id="Buy_Forpersonalandprofessionaluse">For personal and professional use</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_education_sl_alledu.html?marketSegment=EDU&promoid=KAWQP" id="Buy_Forstudentseducatorsandstaff">For students, educators, and staff</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOLJE" id="Buy_Forsmallandmediumbusinesses">For small and medium businesses</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/volume-licensing.html?promoid=KAWQQ" id="Buy_VolumeLicensing">Volume Licensing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discount-software-coupons.html?promoid=KAWQR" id="Buy_Specialoffers">Special offers</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://success.adobe.com/en/na/programs/rfi/dm_sales_inquiries.html?promoid=KAWSG" target="_blank" id="Buy_AdobeMarketingCloudsales">Adobe Marketing Cloud <span class="SiteHeaderIconNewWindowNoWrap">sales<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!--
+ <div id="tooltipStrings" class="SiteHeaderTooltipStrings LayoutHidden">
+ <span id="tooltipStringExpandMenu">Expand menu</span>
+ <span id="tooltipStringOpenLink">Open link</span>
+ </div>
+ -->
+
+ <a href="/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a>
+ <div class="SiteHeaderBarItem SiteHeaderBarItemLast"> </div>
+ <div id="site-search" class="SiteHeaderSearch">
+ <input title="Search" type="text" id="search-input" name="term" maxlength="1000" />
+ <input type="hidden" id="searchbuddy-loc" name="loc" value="en_us" />
+ <button type="submit" id="search-submit" class="icon-replace search">Search</button>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <div id="shSignInBlock">
+ <a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a>
+ <a href="/account/sign-in.adobedotcom.html" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a>
+ <div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;">
+ <div class="SiteHeaderPanelRow">
+ <span class="SiteHeaderPanelHeader">Why sign in?</span>
+ Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
+ </div>
+ </div>
+ </div>
+
+ <a href="/account.html" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a>
+
+ <div class="SiteHeaderPopPanelShadow" id="WelcomePanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel" id="WelcomePanel" style="display: none;">
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_en_us">My Adobe</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myorders_en_us">My orders</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myinformation_en_us">My information</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyProductsServices">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myproducts_services_en_us">My products and services</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut">
+ <a class="SiteHeaderPanelHeader" id="shSignOutLink" href="/cfusion/membership/logout.cfm">Sign out</a>
+ </div>
+ </div>
+
+ <div id="MyCartLinkContainer">
+ <a href="/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a>
+ </div>
+
+ <a href="/privacy.html" id="shPrivacy" class="SiteHeaderUserItem">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a>
+ </div>
+ </div>
+</form>
+
+<div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall">
+ <a href="/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a>
+
+ <div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile">
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileBuy"><a href="/go/gnav_store_en_us" id="shBuyMobile" class="SiteHeaderBarLink">Buy</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemMobileNoPadding"> </span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight SiteHeaderBarItemMobileNoPadding"> </span>
+ </div>
+ <div class="SiteHeaderBarMobileExtend" id="shBarExtend">
+ <div id="shBarExtendSections" style="display: none;">
+ <div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a>
+ <a href="/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a>
+ </div>
+ <div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a>
+ <a href="/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a>
+ </div>
+ </div>
+ <div id="shBarExtendSearch" style="display: none;">
+ <form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000" />
+ <button type="submit" id="search-submit-mobile">Search</button>
+ </form>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <a href="/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong">Sign in</a>
+ <a href="/cfusion/membership/logout.cfm" id="shSignOutMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong" style="display: none;">Sign out</a>
+ <a href="/privacy.html" id="shPrivacyMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a>
+ </div>
+</div>
+<!--googleon: index--><div class="hovercart"><div id="HoverCartModal">
+ <div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;">
+ <div class="CartHeaderPopPanel HoverCart" id="CartPanel">
+ <div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none">
+ <div class="LayoutBreakAfter">
+ <div class="HoverCart-1 LayoutHItem">
+ <div style="padding-left:60px;" class=" LayoutBreakAfter LayoutPullout">
+ <div id="HoverCartBoxShotxyz" class="HoverCartBoxShot">
+ <a href="">
+ <img src="" class="LayoutImage" alt=""/>
+ </a>
+ </div>
+ <div style="float:left;width:100%" class="CPodCostCell">
+ <span class="TextStrong ProductName" id="HoverCartHeaderxyz">
+ <a href="#">
+ </a>
+ </span>
+ <div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz">
+ </div>
+ <span id="HoverCartPreOrderHardGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderHardGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.</span>
+ <span id="HoverCartPreOrderSoftGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderSoftGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.</span>
+
+ </div>
+ </div>
+</div>
+ <div class="LayoutHItem HoverCart-2">
+ <div class="HoverCartQty">
+ Qty:
+ <span id="HoverCartQtyxyz">
+ </span>
+ </div>
+ </div>
+ <div class="LayoutRight">
+ <div class="CheckoutCostDark LayoutRight TextRight">
+ <span id="HoverCartPricexyz">
+ </span>
+ <span id="HoverCartSubscriptionxyz" class="CheckoutSubscription">
+ </span>
+ <div id="HoverCartVatPercentageLabelxyz" class="TextEm TextSmall" style="display:none; max-width: 100px;"><span id="HoverCartVatPercentagePreTextxyz"></span>
+ <span id="HoverCartVatPercentagexyz"></span></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="HoverCartEDUMessage LayoutBigCellBottom" style="display:none">Purchase requires verification of academic eligibility</div>
+ </div>
+ <div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div>
+ <a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/cart.html"></a>
+ <div id="HoverCartButtons" class="HoverCart-1-3">
+ <table border="0" align="right" width="70%">
+ <tr>
+ <td>
+ <div class="TextRight HoverCartSubTotal">Subtotal</div>
+ <div id="ExVatLabel" style="display:none" class="TextEm TextSmall TextRight"></div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartSubTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartPromotionsRow">
+ <td>
+ <div class="TextRight HoverCartPromotionsLabel HoverCartSubTotal">Promotions</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartPromotions">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartShippingRow">
+ <td>
+ <div class="TextRight HoverCartShippingLabel HoverCartSubTotal">Estimated shipping</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartShipping">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartVATRow">
+ <td>
+ <div class="TextRight HoverCartVATLabel HoverCartSubTotal">Tax</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartVat">
+ </span>
+ </div>
+ <div id="CartTaxHeader">
+ Calculated at checkout</div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><div class="RuleH"></div></td>
+ <td><div class="RuleH"></div></td>
+ </tr>
+ <tr>
+ <td>
+ <div class="TextRight HoverCartTotalLabel HoverCartSubTotal">Total</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </table>
+ <div class="LayoutBreak"></div>
+
+ <div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter">
+ <a href="/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+<script>
+ /*global jQuery,adobe*/
+ jQuery.createNs("Adobe.Cart.ShoppingCart");
+
+ Adobe.Cart.ShoppingCart.HoverCart = {
+
+ MaxItems: "4",
+
+ DisplayTime: "5000",
+
+ MoreItemsTextSingular: "() more item in your cart",
+
+ MoreItemsTextPlural: "() more items in your cart",
+
+ MonthToMonthText: "per month",
+
+ YearlyText: "per year"
+ };
+
+ Adobe.Cart.TaxLabels = {
+ TaxInclusiveText : "",
+ TaxNotApplicable : "Tax not applicable"
+ };
+
+ Adobe.Cart.ShoppingCart.GlobalVars = {
+
+ CountryCode: "US",
+
+ MarketSegment: "COM",
+
+ AkamaiURLPrefix: "http://wwwimages.adobe.com/www.adobe.com",
+
+ PriceMonthText: "per month",
+
+ PriceYearText: "per year",
+
+ FullSubMonthText: "Month-to-month",
+
+ FullSubYearText: "One-year",
+
+ SubMonthText: "Monthly",
+
+ SubYearText: "Annual",
+
+ SubscriptionItemText: "NONE",
+
+ TermTypeMonth: "MONTH",
+
+ TermTypeYear: "YEAR",
+
+ BackupDVDParent: "_PARENT",
+ /*
+ params: {
+ cart,
+ price,
+ categoryPath,
+ originalPrice,
+ storeName,
+ locale,
+ usePrecision,
+ type,
+ taxCode,
+ delimiter,
+ showCentDelim,
+ distributionMethod
+ }
+ */
+ getPriceLabel: function(params) {
+ var currency = params.cart.currency;
+ var params = {
+ storeName: params.storeName,
+ locale: params.locale,
+ productKey: params.categoryPath,
+ priceObject: {
+ price: {
+ orginalPriceWithoutTax: params.originalPrice,
+ priceWithoutTax: params.price,
+ taxCode: params.taxCode || ""
+ },
+ priceTypeKey: params.distributionMethod
+ },
+ currencyObject: {
+ delimiter: params.delimiter || ",",
+ formatString: currency.FORMATSTRING,
+ iso3Code: currency.CODE,
+ symbol: currency.SYMBOL,
+ usePrecision: params.usePrecision
+ },
+ showCentDelim : params.showCentDelim || false,
+ type: params.type
+ };
+ return params;
+ },
+
+ isSubscription: function(serviceCommitment, termType) {
+ return (serviceCommitment == this.SubscriptionItemText &&
+ (termType == this.TermTypeMonth || termType == this.TermTypeYear));
+ },
+
+ subscriptionItem: function(serviceCommitment, termType) {
+ return (termType == this.TermTypeMonth &&
+ (serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear));
+ },
+
+ getSubscriptionText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.SubMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.SubYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ if (serviceCommitment === this.TermTypeMonth) {
+ return this.FullSubMonthText;
+ } else if (serviceCommitment === this.TermTypeYear) {
+ return this.FullSubYearText;
+ }
+ }
+ return "";
+ },
+
+ getSubscriptionPriceText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.PriceMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.PriceYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ return this.PriceMonthText;
+ }
+ return "";
+ }
+
+ };
+</script>
+</div>
+<div id="modalContent" style="display:none;"></div>
+</div>
+<!--googleon: all--></div>
+ <div class="Link" id="top">
+ <div class="Link LayoutBreakAfter">
+ <div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link">
+ <div class="LayoutHeaderPath">
+ <div class="LayoutCellSides LinkStrong LayoutH IconAlign">
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet.html">
+ Adobe Developer Connection</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet/flex.html">
+ Flex Developer Center</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ </div>
+ </div>
+</div>
+</div>
+<div class="LayoutGrid-1-3 LayoutSlimGrid-1-2">
+ <h1 class="LayoutCellSides LayoutSmallRow TextH1">
+ Flex mobile skins – Part 3: Multiplatform development</h1>
+ </div>
+ </div>
+</div>
+<div class="LayoutRow Link RuleH">
+ <div class="LayoutBreakAfter">
+ <!-- Article Leaf -->
+ <div class="ArticleGrid-1 LayoutSlimGrid-1-2 ArticleWideGrid-1 TextSmall">
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleAuthorDisplay authordisplay"><h2 class="TextH5 LayoutRow">
+ by <a href="/devnet/author_bios/jason_san_jose.html">Jason San Jose</a></h2>
+ <div class="LayoutRow">
+ <img title="jason_san_jose_bio" alt="Jason San Jose" class="ImageShadow LayoutImage" src="devnet/authors/bio/j/jason_san_jose_bio.jpg.adimg.mw.160.png"/></div>
+ <div class="LayoutRow">
+ <ul>
+ <li><a href="Link URL.html" title="Adobe">Adobe</a></li>
+ <li><a href="http://blogs.adobe.com/jasonsj" title="blogs.adobe.com/jasonsj" target="_blank">blogs.adobe.com/jasonsj</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">
+ Notable platform differences</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_0">
+ Creating platform-specific skins and styles </a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_1">
+ ActionBar styling tutorial</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_2">
+ Mobile theme overlay tutorial</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_3">
+ Where to go from here</a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides">
+ <h2 class="TextH5 LayoutSmallRow">Created</h2>
+ <p>12 July 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.tag-ADC%2BKeywords_c_css.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="CSS">CSS</a><a href="/devnet/tagsearch.tsb.prod-_sl_flash_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Builder">Flash Builder</a><a href="/devnet/tagsearch.tsb.prod-_sl_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_mobile.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="mobile">mobile</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_multiscreen.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides
" title="multiscreen">multiscreen</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_ria.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="RIA">RIA</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_skinning.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="skinning">skinning</a></div>
+ </div>
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="parbase adcFeedBack compbase adcfeedback"><script type="javascript">
+ //<![CDATA[
+ s_tagEnv = 'dev';
+ //]]>
+ </script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/script/article-compressed.js"></script>
+
+ <div id="helpful-pod">
+ <div id="helpful" class="collapsed">
+ <div id="helpfulspan">Was this helpful?</div>
+ <input type="radio" name="feedback" id="radioyes" onClick="showForm();"/><span id="yesspan" class="radio-option">Yes</span>  
+ <input type="radio" name="feedback" id="radiono" onClick="showForm();"/><span id="nospan" class="radio-option">No</span>
+ <textarea title="(Optional) Please let us know how we can improve this page. " id="feedbacktext" placeholder="" rows="5" cols="25" style="font-family:sans-serif;display:none"></textarea>
+ <button id="submitButton" onClick="submitForm();" style="display:none">Submit</button>
+ <button id="noCommentButton" onClick="hideForm();" style="display:none">No comment</button>
+ <br clear="both">
+ <div id="termsofuse"><p>By clicking Submit, you accept the <a href="/misc/terms.html">Adobe Terms of Use</a>.</p>
+</div>
+ </div>
+ <div id="fold"> </div>
+ </div>
+ <div id="helpful-thankyou" class="thankyou">Thanks for your feedback.</div>
+
+ <script>
+ //<![CDATA[
+ // Send CHL-specific data to SiteCatalyst
+ var s_chl = s_gi("mxchlprod");
+ var urlMatch = /(https?:\/\/)([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*))(index.html)?(\?\S+)?(#\S+)?/;
+ var adobeMatch = /(https?:\/\/)([-\w\.]+)+(\.adobe\.com)/;
+ var adobeLocaleMatch = /^\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var cqLocaleMatch = /^\/content\/help\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var ua = navigator.userAgent.toLowerCase();
+ s_chl.channel = "helpx";
+ s_chl.eVar3 = window.location.toString().replace(/[\?,#](.*)/, "");
+ s_chl.pageName = s_chl.eVar11 = document.title;
+ if ( typeof(omtrPageName) != 'undefined' && omtrPageName.length > 0 ) {
+ s_chl.pageName = s_chl.eVar11 = omtrPageName;
+ }
+ // s_chl.list1 = omtrProductList.replace(/,/g,":");
+ var omtrLocale = "en";
+ if (adobeLocaleMatch.test(location.pathname)) {
+ var matchArray = adobeLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+ else if (cqLocaleMatch.test(location.pathname)) {
+ var matchArray = cqLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+
+ s_chl.eVar8 = omtrLocale;
+ if (omtrLocale != "en") {
+ s_chl.eVar9 = document.title;
+ }
+ // Transmit
+ // The s_gs() call in compressed.js causes problems with any .t() call in any report suite
+ function s_gs(){}
+ s_chl.t();
+
+ function showForm(){
+ if (ua.indexOf('msie 6') == -1 ){
+ $('#helpfulspan').hide();
+ $('#radioyes').hide();
+ $('#radiono').hide();
+ $('#yesspan').hide();
+ $('#nospan').hide();
+ $('#feedbacktext').autofill();
+ $('#helpful').animate({width:'420px', height: '185px'});
+ $('#helpful').removeClass('collapsed');
+ $('#helpful').addClass('expanded');
+ $('#fold').css('background-position', '-12px 0');
+ displayTextField();
+ }else{
+ submitForm();
+ }
+ }
+
+
+
+ $(document).ready(function() {
+ var feedbackLocales = "en, jp, fr, de, it, se, es, nl , dk, br, no, fi";
+ if ( feedbackLocales.indexOf( omtrLocale ) > -1 ){
+ $('#helpful-pod').fadeIn();
+ $('#helpful-pod').animate({
+ opacity: 1,
+ top: '+=20'},
+ 1500);
+ }
+ });
+
+ // ]]>
+ </script>
+ </div>
+</div>
+ <div class="LayoutBreak"></div>
+ </div>
+ <!-- Main Content -->
+ <div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6">
+ <div class="ArticleWideGrid-2-4">
+ <div class="articlerequirements articlePrerequistes"><div class="PanelFillMedium PanelBorder LayoutRow TextSmall">
+ <div id="requirements-title" class="LayoutCell Link">
+ <h2 class="TextH5">
+ <span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span>
+ Requirements</h2>
+ </div>
+ <div id="requirements-content" class="LayoutBreakAfter">
+ <div class="ArticleGrid-2">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Prerequisite knowledge</h3>
+ <div class="LayoutRowBottom">
+ <p>Familiarity with ActionScript, CSS, and Flex skinning is required. Read <a href="/devnet/flex/articles/mobile-skinning-part1.html">Part 1</a> and <a href="/devnet/flex/articles/mobile-skinning-part2.html">Part 2</a> of this series before completing this tutorial.</p>
+ </div>
+ <h3 class="TextH5 LayoutSmallRowTop">
+ User level</h3>
+ <p class="LayoutRowBottom">Intermediate</p>
+ </div>
+ </div>
+ <div class="ArticleGrid-3">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Required products</h3>
+ <ul class="LayoutSmallRowTop LayoutRowBottom">
+ <li class="LayoutSmallRow">
+ <span class="IconLeft IconSmallDownload"></span>Flash Builder<a href="/go/try_flashbuilder/"> (Download trial)</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="ArticleGrid-4">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Sample files</h3>
+ <ul class="LayoutSmallRowTop LayoutRowBottom">
+ <li class="LayoutSmallRow"><a href="mobile-skinning-part3.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>mobile-skinning-part3</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script>
+ adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+<script>
+ adobe.fn.panelToggle("requirements-title", "requirements-content", true);
+</script>
+</div>
+<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
+ <div class="parsys articlecontentAdobe"><div id="articlecontentAdobe">
+<a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>In <a href="/devnet/flex/articles/mobile-skinning-part2.html">Part 2</a> of this series on creating Flex mobile skins, I discussed the effect of screen density (DPI) on component skinning and layout of mobile applications. I also showed how to use application scaling, density-specific bitmaps, and CSS media queries to adjust and accommodate for various DPI values.</p>
+ <p>Aside from screen size, screen density, and form factor differences, Flex mobile application developers now have to address differences across platforms. In addition to Android, Flex 4.5.1 and Flash Builder 4.5.1 support two more platforms to target for Flex Mobile projects: Apple iOS and BlackBerry Tablet OS. Each of these platforms has their own distinct look and feel, UI patterns, and Human Interface Guidelines (HIG). </p>
+ <p>The Mobile theme in Flex 4.5 doesn't cater to any one specific platform. Like Spark, the Mobile theme has a neutral look and feel with design elements that generally work across platforms. Depending on your needs and your customers' needs, you have the freedom to change the appearance of your applications quickly using CSS styling or you might opt for additional control with more advanced mechanisms such as custom skinning, FXG, or even platform-specific skins that blend in well with other native applications.</p>
+ </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>
+ Notable platform differences</h3>
+</div>
+<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>Each platform supported by AIR has its own unique features, characteristics, and challenges. Flex 4.5.1 accounts for a few of these challenges already and gives you the option to add new, platform-specific behavior when necessary. This section briefly covers the major differences that can have an effect on both the visual and behavioral design of your application.</p>
+ <h4>Hardware buttons</h4>
+ <p>AIR on Android adds keyboard support for buttons found on Android hardware: Home, Back, Menu, and Search. These buttons may be on the physical hardware or may be present on-screen. Some device manufacturers omit the Search button.</p>
+ <p>The Back button on Android is used to navigate back to the previous activity, even if that activity is not part of the current application.</p>
+ <p>iOS devices and the BlackBerry PlayBook don't have a dedicated Back button. Instead, iOS and PlayBook applications typically place an optional soft Back button in the top left corner of the screen. For these two platforms, the Back button's navigation behavior is local to each application.</p>
+ <p>The Menu button on Android opens an options menu (that is, the ViewMenu mobile component in Flex 4.5). The options menu displays a list of commands (as buttons) that are used in the current activity.</p>
+ <p>The closest equivalent on iOS is the action sheet. The action sheet displays a list of actions available for the currently active or currently selected item.</p>
+ <p>The BlackBerry PlayBook has a touch-sensitive bezel that applications can use to display a container of arbitrary controls. </p>
+ <p>The Search button on Android is typically used for search data within the application context. For example, a contacts application would provide a text search to filter contact data. The search activity on Android has a consistent look and feel for all applications. Neither iOS nor BlackBerry Tablet OS have application-specific search UI design elements.</p>
+ <h4>Usable screen area</h4>
+ <p>Android 2.x and iOS show a status bar at the top of the application that is hidden when an application is using full screen mode.</p>
+ <p>In Android 3.x Honeycomb, the status bar at the bottom of the screen is always visible, full screen or not.</p>
+ <p>Applications for the BlackBerry PlayBook are run in full screen by default. A swipe down from the top right corner will show the system status bar, but this will not resize the AIR application window. </p>
+ <h4>Typography</h4>
+ <p>The default sans serif device font used by AIR differs by device. The PlayBook uses Myriad Pro, iOS uses Helvetica, and Android uses Droid Sans.</p>
+ <p>To be clear, even when using the same font size across devices with the same DPI, font metrics will be different due to the different fonts in use. The amount of text you can fit in a given area will vary across screen sizes and platforms (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="Figure 1. On the left a BlackBerry PlayBook (landscape, cropped), in the center an Apple iPod 4th generation (portrait), and on the right a Samsung Galaxy S (portrait) using the default styles in the Flex Mobile theme." alt="Figure 1. On the left a BlackBerry PlayBook (landscape, cropped), in the center an Apple iPod 4th generation (portrait), and on the right a Samsung Galaxy S (portrait) using the default styles in the Flex Mobile theme." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/articles/mobile-skinning-part3/fig01.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 1. On the left a BlackBerry PlayBook (landscape, cropped), in the center an Apple iPod 4th generation (portrait), and on the right a Samsung Galaxy S (portrait) using the default styles in the Flex Mobile theme.</div>
+</div>
+<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>Single lines of text are generally ascent centered (that is, not including descenders in text height) across all platforms. Skins in the Mobile theme also use ascent centering.</p>
+<h4>Soft keyboard</h4>
+<p>All three platforms have soft keyboard support in both portrait and landscape orientations.</p>
+<p>Some Android phones, however, have a permanent hardware keyboard and no soft keyboard (for example, Motorola Droid Pro), and others have an optional hardware keyboard that supersedes the soft keyboard when open.</p>
+<p>Android also allows third-party soft keyboards. Keyboards such as Swype and SwiftKey integrate seamlessly with AIR.</p>
+<p>The size of the soft keyboard varies by platform, device, and even device orientation. Soft keyboards for all three platforms are aligned with the bottom edge of the screen in all orientations.</p>
+<p>By default, Flex Mobile projects built in Flash Builder are automatically configured to shrink and grow the application height when the soft keyboard is activated and deactivated respectively.</p>
+<h4>Text input</h4>
+<p>On Android and BlackBerry PlayBook, text entry in an AIR application's TextField and the new StyleableTextField controls work without any issues.</p>
+<p>The implementation of these controls on iOS, however, is a special case. In order to get full featured error correction and text selection on iOS, text editing occurs in a native control that is overlaid on top of the stage. This technique creates a few limitations when editing TextField and StyleableTextField content on iOS, including:</p>
+<ul>
+<li>The <code>restrict</code> property is not supported while editing. The restrict behavior is applied after exiting a TextField.</li>
+<li>Whitespace and dash characters are smaller, potentially causing multiline text to reflow when entering and exiting an editable TextField.</li>
+<li>Text is not clipped by <code>scrollRect</code> properties specified on ancestor containers.</li>
+<li>Keyboard events are not fired.</li>
+<li>The native clear button (a gray circle with an X) always appears in the TextInput and is not configurable.</li>
+</ul>
+<h4>Color depth</h4>
+<p>AIR on Apple iOS and BlackBerry Tablet OS supports 32-bit color. AIR on Android is currently limited to 16-bit color using RGB565.</p>
+<h4>Human interface guidelines</h4>
+<p>Each platform vendor has its own set of Human Interface Guidelines (HIG) also known as UI guidelines:</p>
+<ul>
+<li><a target="_blank" href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html">Apple iOS Human Interface Guidelines </a></li>
+<li><a target="_blank" href="http://developer.android.com/guide/practices/ui_guidelines/index.html">Google Android User Interface Guidelines</a></li>
+<li><a target="_blank" href="http://docs.blackberry.com/en/developers/deliverables/27299/">BlackBerry Tablet OS UI Guidelines</a></li>
+</ul>
+<p>Following these conventions will help you create Flex mobile applications that look and feel like their native counterparts.</p>
+<h4>Platform-specific wrap-up</h4>
+<p>I've barely scratched the surface with respect to platform-specific issues. For more on this topic, you may want to visit <a target="_blank" href="http://www.androidpatterns.com/">www.androidpatterns.com</a> and <a target="_blank" href="http://pttrns.com/">pttrns.com</a>, two sites that are continuing to grow their catalogs of UI patterns.</p>
+<p>While AIR allows designers and developers to build applications on a common runtime, it's still important to know when and how to take platform-specific differences into account while designing your applications. Flex mobile projects give you a range of options from using a single UI across all platforms to redesigning your UI for each supported platform.</p>
+</div>
+ </div>
+<a name="articlecontentAdobe_numberedheader_0" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow">
+ <a id="articlecontentAdobe_numberedheader_0"></a>
+ Creating platform-specific skins and styles </h3>
+</div>
+<a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>Flex 4.5.1 and Flash Builder 4.5.1 provide basic tools for defining and using platform-specific styles and skins in your projects.</p>
+ <h4>Using CSS media queries</h4>
+ <p>In Part 2 of this series on creating Flex mobile skins, I discussed how to use the <code>application-dpi</code> custom media feature in a CSS media query to set DPI-specific styles such as font size and padding values. Flex 4.5 supports one additional custom media feature: <code>os-platform</code> . This feature allows developers to specify platform-specific styles. Here's a simple example that sets a default ActionBar <code>chromeColor</code> value, as well as Android-specific and iOS-specific values:</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock">ActionBar { chromeColor: #000000; }
+@media (os-platform: "Android")
+{
+ ActionBar { chromeColor: #999999; /* dark gray */ }
+}
+@media (os-platform: "IOS")
+{
+ ActionBar { chromeColor: #6DA482; /* blue */ }
+}
+</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>This example code uses the default ActionBarSkin skin class from the Mobile theme and changes the <code>chromeColor</code> property. You can use this same technique to completely replace the default skin with your own platform-specific skin. </p>
+ <h4>Using themes</h4>
+ <p>The main drawback of using CSS for platform-specific skins is that all skins and their assets, regardless of platform, are compiled into your applicat
<TRUNCATED>