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:23 UTC
[38/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/flex-mobile-development-tips-tricks-pt3.html
----------------------------------------------------------------------
diff --git a/ADC/devnet/flex/articles/flex-mobile-development-tips-tricks-pt3.html b/ADC/devnet/flex/articles/flex-mobile-development-tips-tricks-pt3.html
new file mode 100644
index 0000000..bf82a34
--- /dev/null
+++ b/ADC/devnet/flex/articles/flex-mobile-development-tips-tricks-pt3.html
@@ -0,0 +1,1789 @@
+<!--
+ 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 development tips and tricks – Part 3: Hiding and positioning your app’s tabs and hiding the ActionBar | 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,RIA" />
+ <meta name="description" content="Learn how to customize TabbedViewNavigatorSkin and use the actionBarVisible and tabBarVisible properties on the View class." /><meta name="creationDate" content="2011-10-24 @ 10:48:29" />
+ <meta name="lastModifiedDate" content="2011-10-24 @ 10:48:29" />
+ <meta name="viewport" content="width=device-width" />
+<meta name="page" content="main" />
+<meta name="shortTitle" content="Flex mobile development tips and tricks – Part 3"/>
+<meta name="blurb" content="Learn how to customize TabbedViewNavigatorSkin and use the actionBarVisible and tabBarVisible properties on the View class." />
+<meta name="author" content="Holly Schinsky" />
+<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/flex-mobile-development-tips-tricks-pt3.html"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-compressed.css"/>
+<!--[if !IE]><!-->
+ <link rel="stylesheet" media="screen,print" href="http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css"/>
+ <!--<![endif]-->
+ <!--[if IE]>
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-compressed.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/default/SearchBuddy.css" />
+ <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-modes.css" />
+ <![endif]-->
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-configurator-compressed.css"/>
+ <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.css"/>
+ <!--[if lt IE 10]>
+ <link rel="stylesheet" media="screen" href="/include/style/modes/MirrorIE.css" />
+ <![endif]-->
+ <script>
+ function createNs ( ns )
+ {
+ var o, a;
+ a = ns.split(".");
+ o = window[a[0]] = window[a[0]] || {};
+ for(i=1; i < a.length; i++)
+ {
+ o = o[a[i]] = o[a[i]] || {};
+ }
+ return o;
+ }
+
+ createNs("Adobe.PageInfo");
+ createNs("Adobe.Tokens");
+ createNs("Adobe.UserInfo");
+ Adobe.PageInfo.AuthenticatedState = false;
+ Adobe.PageInfo.localeCode = "en";
+ Adobe.PageInfo.accountPageName = "";
+ Adobe.PageInfo.productKey = "";
+ Adobe.PageInfo.catalogName = "";
+ Adobe.PageInfo.countryCode = "US";
+ Adobe.PageInfo.localeString = "en_us";
+ Adobe.PageInfo.marketSegment = "COM";
+ Adobe.PageInfo.sitecatalystMarketSegment = "COM";
+ Adobe.PageInfo.akamaiURLPrefix = "http://wwwimages.adobe.com/www.adobe.com";
+ Adobe.PageInfo.pageLevel = "7";
+</script>
+<script src="http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-store-compressed.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/VisitorAPI.js"></script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></script>
+ <!--[if IE 6]>
+ <script>
+ try{void(document.execCommand("BackgroundImageCache",false,true));} catch(e) {}
+ </script>
+ <![endif]-->
+ <script>
+ //<![CDATA[
+ $(window).bind("hashchange load", adobe.fn.focusHashElement);
+ cart = new adobe.ui.CartFacade("cart-dialog", "cart-dialog-flash");
+ cart.setRequiredFlashVersion("9.0.115");
+ cart.setDefaultCountry("");
+ cart.setDomain(".adobe.com"); // set this to ".adobe.com"
+ cart.setContextPath(""); // set this to empty when web context is '/'
+ // Possibly add the .edu selector or override market segment
+ Adobe.Product.Controller.CPod.EduController.processLocation(true);
+ if(cart.isOverlaySupported()) {
+ var PromoIDReport = new Array();
+ var prmid = window.location.search.match(/\bpromoid\=([^&#$]+)/);
+ if(prmid) {
+ prmid[1]=prmid[1].toUpperCase();
+ cart.setEmailTrackingId(prmid[1]);
+ }
+ // if a promo code is pass thru the URL, set the promo in the cart and the cookie
+ prmid = window.location.search.match(/\bpromocode\=([^&#$]+)/) || null;
+ if(prmid) {
+ if (Adobe && Adobe.Cart && Adobe.Cart.Models && Adobe.Cart.Models.Cart) {
+ var cart = Adobe.Cart.Models.Cart;
+ var marketSegment = cart.getMarketSegment() || Adobe.Product.Controller.CPod.EduController.COM;
+ cart.addPromotion({code:prmid[1], marketSegment:marketSegment});
+ cart.savePromoCode(prmid[1]);
+ }
+ }
+ }
+ //]]>
+</script>
+<script>
+ $(document).ready(function()
+ {
+ adobe.dom.param("wcmmode=disabled");
+ adobe.dom.param("compress=false");
+ });
+</script>
+<script>
+ var locales = {"cn":true,"us":true,"en_xx":true,"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/flex-mobile-development-tips-tricks-pt3");
+
+
+ });
+</script><script type="text/javascript" src="/etc/clientlibs/granite/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/clientlibs/foundation/jquery-ui.js"></script>
+<script type="text/javascript" src="/etc/designs/dotcom/clientlib/stores.js"></script>
+<link rel="stylesheet" href="/etc/clientlibs/granite/jquery-ui.css" type="text/css">
+<link rel="stylesheet" href="/etc/clientlibs/foundation/jquery-ui/themes/default.css" type="text/css">
+<script src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/typekit/yoe7ink.js"></script>
+ <script>try{Typekit.load();}catch(e){}</script>
+ </head>
+<body class="Text TextMedium Link">
+<div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP">
+ <div class="PrintLayoutHide">
+ <!--googleoff: all--><div class="sitenav"><script>
+ //<![CDATA[
+ if (navigator.userAgent.match(/iPad/i) != null){
+ adobe.dom.createStyleSheet($('head').get(0), "/include/style/default/SiteHeader-iPad.css");
+ }
+
+ $(document).ready(adobe.fn.initGlobalNav);
+ //]]>
+</script>
+<!--googleoff: index-->
+<!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/globalnav/en_us/globalnav_ssi.html#1 $ -->
+<form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <div id="SiteHeader" class="SiteHeader Text TextSmall">
+ <span id="globalnav"></span>
+ <a href="/" id="shHome" class="SiteHeaderHome">Adobe</a>
+ <div class="SiteHeaderBar" id="shBar">
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts">
+ <a href="/products/catalog.html?promoid=KAWQI" id="shProductsLink" class="SiteHeaderBarLink">Products</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Full" id="ProductsPanel">
+ <div class="SiteHeaderColumnSingle">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Top destinations</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=JQPEQ" id="Products_Topdestinations_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=KFKQF" id="Products_Topdestinations_CreativeCloudforteams">Creative Cloud for teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/cs6.html?promoid=JOLIS" id="Product_Topdestinationss_CreativeSuite6">Creative Suite 6</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/marketing?promoid=JOLIT" id="Products_Topdestinations_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=JOLIR" id="Products_Topdestinations_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=JOLIW" id="Products_Topdestinations_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAWQH" id="Product_Topdestinationss_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education/students.html?marketSegment=EDU&promoid=KFKQD" id="Product_Topdestinationss_Students">Students</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/elements-family.html?promoid=JOLIV" id="Product_Topdestinationss_Elementsfamily">Elements family</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Creative Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=KAUBZ" id="Products_AdobeCreativeCloud_WhatisAdobeCreativeCloud">What is Adobe Creative Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/design.html?promoid=KFKPZ" id="Products_AdobeCreativeCloud_Design">Design</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/web.html?promoid=KFKQC" id="Products_AdobeCreativeCloud_Web">Web</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/photography.html?promoid=KFKQA" id="Products_AdobeCreativeCloud_Photography">Photography</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KFKQB" id="Products_AdobeCreativeCloud_Video">Video</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/students.html?marketSegment=EDU&promoid=JUTMG" id="Products_AdobeCreativeCloud_Students">Students</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=JZVVU" id="Products_AdobeCreativeCloud_Teams">Teams</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPX" id="Products_AdobeCreativeCloud_Enterprise">Enterprise</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise/education.html?promoid=KFKQE" id="Products_AdobeCreativeCloud_Educationalinstitutions">Educational institutions</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPY" id="Products_AdobeCreativeCloud_Government">Government</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Design and photography</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=KAUCA" id="Products_DesignandPhotography_Photoshop">Photoshop</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/illustrator.html?promoid=KAUCB" id="Products_DesignandPhotography_Illustrator">Illustrator</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/indesign.html?promoid=KAUCC" id="Products_DesignandPhotography_InDesign">InDesign</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/muse.html?promoid=KAUCE" id="Products_DesignandPhotography_AdobeMuse">Adobe Muse</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/photoshop-lightroom.html?promoid=KAUCD" id="Products_DesignandPhotography_Lightroom">Lightroom</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Video</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/premiere.html?promoid=KAUCJ" id="Products_Video_AdobePremiere">Adobe Premiere</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/aftereffects.html?promoid=KAUCK" id="Products_Video_AfterEffects">After Effects</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Web development and HTML5</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com/edge/?promoid=KAGMS" target="_blank" id="Products_WebdevelopmentHTML5_EdgeToolsServices">Edge Tools & <span class="SiteHeaderIconNewWindowNoWrap">Services<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/dreamweaver.html?promoid=KAUCF" id="Products_WebdevelopmentHTML5_Dreamweaver">Dreamweaver</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://gaming.adobe.com/?promoid=KAUCG" target="_blank" id="Products_WebdevelopmentHTML5_Gaming"><span class="SiteHeaderIconNewWindowNoWrap">Gaming<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Adobe Marketing Cloud</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing.html?promoid=KAUCL" id="Products_AdobeMarketingCloud_WhatisAdobeMarketingCloud">What is Adobe Marketing Cloud?</a></li>
+ </ul>
+
+ <div class="SiteHeaderColumn-1">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=KAVVU" id="Products_AdobeMarketingCloud_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAVVV" id="Products_AdobeMarketingCloud_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=KAVVX" id="Products_AdobeMarketingCloud_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAVVW" id="Products_AdobeMarketingCloud_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=KAVVY" id="Products_AdobeMarketingCloud_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQH" id="Products_AdobeMarketingCloud_Campaignmanagement">Campaign management</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">Analytics</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAUCM" id="Products_Analytics_SiteCatalyst">SiteCatalyst</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discover.html?promoid=KAUCN" id="Products_Analytics_AdobeDiscover">Adobe Discover</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/insight.html?promoid=KAUCO" id="Products_Analytics_Insight">Insight</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Social</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAUCP" id="Products_Social_AdobeSocial">Adobe Social</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Experience Manager</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/cq.html?promoid=KAUCQ" id="Products_ExperienceManager_CQ">CQ</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/scene7.html?promoid=KAUCR" id="Products_ExperienceManager_Scene7">Scene7</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">Target</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/testandtarget.html?promoid=KAUCS" id="Products_Target_TestTarget">Test&Target</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/recommendations.html?promoid=KAUCT" id="Products_Target_Recommendations">Recommendations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/searchandpromote.html?promoid=KAUCU" id="Products_Target_SearchPromote">Search&Promote</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Media Optimizer</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/adlens.html?promoid=KAUCV" id="Products_MediaOptimizer_AdLens">AdLens</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audiencemanager.html?promoid=KAUCW" id="Products_MediaOptimizer_AudienceManager">AudienceManager</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/audienceresearch.html?promoid=KAUCX" id="Products_MediaOptimizer_AudienceResearch">AudienceResearch</a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">Campaign management</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQI" id="Products_Campaignmanagement_AdobeCampaign">Adobe Campaign</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="SiteHeaderColumnSingle SiteHeaderShadowLeft">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeader">Document services</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAUCY" id="Products_DocumentServices_Acrobat">Acrobat</a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.echosign.adobe.com/en/home.html?promoid=KAUDB" target="_blank" class="SiteHeaderLinkNewWindow" id="Products_DocumentServices_EchoSign"><span class="SiteHeaderIconNewWindowNoWrap">EchoSign<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/formscentral/en/home.html?promoid=KAUCZ" target="_blank" id="Products_DocumentServices_FormsCentral"><span class="SiteHeaderIconNewWindowNoWrap">FormsCentral<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/sendnow/en/home.html?promoid=KAUDA" target="_blank" id="Products_DocumentServices_SendNow"><span class="SiteHeaderIconNewWindowNoWrap">SendNow<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/welcome/en/home.html?promoid=KAUDC" target="_blank" id="Products_DocumentServices_Acrobatcom"><span class="SiteHeaderIconNewWindowNoWrap">Acrobat.com<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeader">Publishing</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/digital-publishing-suite-family.html?promoid=JOLIU" id="Products_Publishing_DigitalPublishingSuite">Digital Publishing Suite</a></li>
+ </ul>
+ </div>
+ </div>
+ <br style="clear: both" />
+
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderRightLink">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog.html?promoid=JOOTH" id="Products_Seeallproducts">See all products</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBusinessSolutions">
+ <a href="/solutions.html?promoid=KAWQJ" id="shBusinessSolutionsLink" class="SiteHeaderBarLink">Business solutions</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Double" id="BusinessSolutionsPanel">
+ <div class="SiteHeaderRow">
+ <div class="SiteHeaderColumn-1">
+ <p class="SiteHeaderPanelHeaderSmall">By business need</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=JOLJB" id="BusinessSolutions_Bybusinessneed_Digitalanalytics">Digital analytics</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=JOLJA" id="BusinessSolutions_Bybusinessneed_Digitalpublishing">Digital publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAWSC" id="BusinessSolutions_Bybusinessneed_Documentmanagement">Document management</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=JOLIX" id="BusinessSolutions_Bybusinessneed_Mediaoptimization">Media optimization</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=JZPNO" id="BusinessSolutions_Bybusinessneed_Socialmarketing">Social marketing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAXLU" id="BusinessSolutions_Bybusinessneed_Testingandtargeting">Testing and targeting</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KAUDD" id="BusinessSolutions_Bybusinessneed_Videoeditingandserving">Video editing and serving</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com?promoid=JZEFF" target="_blank" class="SiteHeaderLinkNewWindow" id="BusinessSolutions_Bybusinessneed_Webdevelopment">Web <span class="SiteHeaderIconNewWindowNoWrap">development<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=JOOYM" id="BusinessSolutions_Bybusinessneed_Webexperiencemanagement">Web experience management</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=JOOTI" id="BusinessSolutions_Seeallbusinessneeds">See all business needs</a></li>
+ </ul>
+ </div>
+
+ <div class="SiteHeaderColumn-2">
+ <p class="SiteHeaderPanelHeaderSmall">By industry</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/broadcasting.html?promoid=JOLIY" id="BusinessSolutions_Byindustry_Broadcast">Broadcast</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/education.html?marketSegment=EDU&promoid=JOLIZ" id="BusinessSolutions_Byindustry_Education">Education</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/financial-services.html?promoid=KAUDE" id="BusinessSolutions_Byindustry_Financialservices">Financial services</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/government.html?promoid=KAUDF" id="BusinessSolutions_Byindustry_Government">Government</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=KAUDG" id="BusinessSolutions_Byindustry_Publishing">Publishing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/retail.html?promoid=KAWSD" id="BusinessSolutions_Byindustry_Retail">Retail</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=KAUDH" id="BusinessSolutions_Seeallindustries">See all industries</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shSupportLearning">
+ <a href="http://helpx.adobe.com/support/?promoid=KAWQK" id="shSupportLearningLink" class="SiteHeaderBarLink">Support & Learning</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="SupportLearningPanel">
+ <div class="SiteHeaderRow">
+ <p class="SiteHeaderPanelHeaderSmall">I need help</p>
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/support/?promoid=JZEFP" id="SupportLearning_Ineedhelp_Products">Products</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/creative-cloud/topics/getting-started.html?promoid=JZEFO" id="SupportLearning_Ineedhelp_AdobeCreativeCloud">Adobe Creative Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/marketing-cloud.html?promoid=KAWSE" id="SupportLearning_Ineedhelp_AdobeMarketingCloud">Adobe Marketing Cloud</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://forums.adobe.com/index.jspa?promoid=JZEFM" target="_blank" id="SupportLearning_Ineedhelp_Forums"><span class="SiteHeaderIconNewWindowNoWrap">Forums<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+
+ <p class="SiteHeaderPanelHeaderSmall">I want to learn</p>
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/learning.html?promoid=KAUDK" id="SupportLearning_Iwanttolearn_Trainingandtutorials">Training and tutorials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://training.adobe.com/certification.html?promoid=KAUDM" target="_blank" id="SupportLearning_Iwanttolearn_Certification"><span class="SiteHeaderIconNewWindowNoWrap">Certification<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/devnet.html?promoid=KAUDN" id="SupportLearning_Iwanttolearn_AdobeDeveloperConnection">Adobe Developer Connection</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/designcenter.html?promoid=KAUDO" id="SupportLearning_Iwanttolearn_AdobeDesignCenter">Adobe Design Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://tv.adobe.com?promoid=KFELF" target="_blank" id="SupportLearning_Iwanttolearn_AdobeTV">Adobe <span class="SiteHeaderIconNewWindowNoWrap">TV<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing/guides.html?promoid=KAWSF" id="SupportLearning_Iwanttolearn_AdobeMarketingCenter">Adobe Marketing Center</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://labs.adobe.com/?promoid=JZEFQ" target="_blank" id="SupportLearning_Iwanttolearn_AdobeLabs">Adobe <span class="SiteHeaderIconNewWindowNoWrap">Labs<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shDownload">
+ <a href="/downloads/?promoid=KAWQL" id="shDownloadLink" class="SiteHeaderBarLink">Download</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="DownloadPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFS" id="Download_Producttrials">Product trials</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/flashplayer/?promoid=JZEFT" id="Download_AdobeFlashPlayer">Adobe Flash Player</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/reader/?promoid=JZEFU" id="Download_AdobeReader">Adobe Reader</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/air/?promoid=JZEFV" id="Download_AdobeAIR">Adobe AIR</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFW" id="Download_Seealldownloads">See all downloads</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shCompany">
+ <a href="/company.html?promoid=KAWQM" id="shCompanyLink" class="SiteHeaderBarLink">Company</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="CompanyPanel">
+ <div class="SiteHeaderRow">
+ <ul>
+ <li class="SiteHeaderPanelLink"><a href="/careers.html?promoid=JZEFX" id="Company_CareersatAdobe">Careers at Adobe</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/invrelations/?promoid=JZEFZ" id="Company_InvestorRelations">Investor Relations</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/aboutadobe/pressroom/?promoid=JZEGA" id="Company_Newsroom">Newsroom</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/privacy.html?promoid=JZEGB" id="Company_Privacy">Privacy</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/corporate-responsibility.html?promoid=JZEFY" id="Company_CorporateResponsibility">Corporate Responsibility</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/customershowcase.html?promoid=KEWBG" id="Company_CustomerShowcase">Customer Showcase</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/company/contact.html?promoid=JZEGC" id="Company_Contactus">Contact us</a></li>
+ </ul>
+
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/company.html?promoid=JZPLK" id="Company_Morecompanyinfo">More company info</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBuy">
+ <a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_software_sl_mostpopular.html?promoid=KAWQN" id="shBuyLink" class="SiteHeaderBarLink">Buy</a>
+ <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="BuyPanel">
+ <div class="SiteHeaderRow">
+ <ul class="SiteHeaderPanelLinkNoBottom">
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software.html?marketSegment=COM&promoid=KAWQO" id="Buy_Forpersonalandprofessionaluse">For personal and professional use</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_education_sl_alledu.html?marketSegment=EDU&promoid=KAWQP" id="Buy_Forstudentseducatorsandstaff">For students, educators, and staff</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOLJE" id="Buy_Forsmallandmediumbusinesses">For small and medium businesses</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/volume-licensing.html?promoid=KAWQQ" id="Buy_VolumeLicensing">Volume Licensing</a></li>
+ <li class="SiteHeaderPanelLink"><a href="/products/discount-software-coupons.html?promoid=KAWQR" id="Buy_Specialoffers">Special offers</a></li>
+ <li class="SiteHeaderPanelLink"><a href="http://success.adobe.com/en/na/programs/rfi/dm_sales_inquiries.html?promoid=KAWSG" target="_blank" id="Buy_AdobeMarketingCloudsales">Adobe Marketing Cloud <span class="SiteHeaderIconNewWindowNoWrap">sales<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!--
+ <div id="tooltipStrings" class="SiteHeaderTooltipStrings LayoutHidden">
+ <span id="tooltipStringExpandMenu">Expand menu</span>
+ <span id="tooltipStringOpenLink">Open link</span>
+ </div>
+ -->
+
+ <a href="/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a>
+ <div class="SiteHeaderBarItem SiteHeaderBarItemLast"> </div>
+ <div id="site-search" class="SiteHeaderSearch">
+ <input title="Search" type="text" id="search-input" name="term" maxlength="1000" />
+ <input type="hidden" id="searchbuddy-loc" name="loc" value="en_us" />
+ <button type="submit" id="search-submit" class="icon-replace search">Search</button>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <div id="shSignInBlock">
+ <a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a>
+ <a href="/account/sign-in.adobedotcom.html" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a>
+ <div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;">
+ <div class="SiteHeaderPanelRow">
+ <span class="SiteHeaderPanelHeader">Why sign in?</span>
+ Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
+ </div>
+ </div>
+ </div>
+
+ <a href="/account.html" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a>
+
+ <div class="SiteHeaderPopPanelShadow" id="WelcomePanelShadow" style="display: none;"></div>
+ <div class="SiteHeaderPopPanel" id="WelcomePanel" style="display: none;">
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_en_us">My Adobe</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myorders_en_us">My orders</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myinformation_en_us">My information</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyProductsServices">
+ <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myproducts_services_en_us">My products and services</a>
+ </div>
+ <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut">
+ <a class="SiteHeaderPanelHeader" id="shSignOutLink" href="/cfusion/membership/logout.cfm">Sign out</a>
+ </div>
+ </div>
+
+ <div id="MyCartLinkContainer">
+ <a href="/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a>
+ </div>
+
+ <a href="/privacy.html" id="shPrivacy" class="SiteHeaderUserItem">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a>
+ </div>
+ </div>
+</form>
+
+<div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall">
+ <a href="/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a>
+
+ <div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile">
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span>
+ <span class="SiteHeaderBarItemMobile" id="shSectionsMobileBuy"><a href="/go/gnav_store_en_us" id="shBuyMobile" class="SiteHeaderBarLink">Buy</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemMobileNoPadding"> </span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span>
+ <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight SiteHeaderBarItemMobileNoPadding"> </span>
+ </div>
+ <div class="SiteHeaderBarMobileExtend" id="shBarExtend">
+ <div id="shBarExtendSections" style="display: none;">
+ <div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a>
+ <a href="/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a>
+ </div>
+ <div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections">
+ <a href="/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a>
+ <a href="/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a>
+ </div>
+ </div>
+ <div id="shBarExtendSearch" style="display: none;">
+ <form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/go/gnav_search" accept-charset="utf-8">
+ <input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000" />
+ <button type="submit" id="search-submit-mobile">Search</button>
+ </form>
+ </div>
+ </div>
+ <div class="SiteHeaderUser">
+ <a href="/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong">Sign in</a>
+ <a href="/cfusion/membership/logout.cfm" id="shSignOutMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong" style="display: none;">Sign out</a>
+ <a href="/privacy.html" id="shPrivacyMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">Privacy</a>
+ <a href="/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a>
+ </div>
+</div>
+<!--googleon: index--><div class="hovercart"><div id="HoverCartModal">
+ <div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;">
+ <div class="CartHeaderPopPanel HoverCart" id="CartPanel">
+ <div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none">
+ <div class="LayoutBreakAfter">
+ <div class="HoverCart-1 LayoutHItem">
+ <div style="padding-left:60px;" class=" LayoutBreakAfter LayoutPullout">
+ <div id="HoverCartBoxShotxyz" class="HoverCartBoxShot">
+ <a href="">
+ <img src="" class="LayoutImage" alt=""/>
+ </a>
+ </div>
+ <div style="float:left;width:100%" class="CPodCostCell">
+ <span class="TextStrong ProductName" id="HoverCartHeaderxyz">
+ <a href="#">
+ </a>
+ </span>
+ <div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz">
+ </div>
+ <span id="HoverCartPreOrderHardGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderHardGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.</span>
+ <span id="HoverCartPreOrderSoftGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderSoftGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.</span>
+
+ </div>
+ </div>
+</div>
+ <div class="LayoutHItem HoverCart-2">
+ <div class="HoverCartQty">
+ Qty:
+ <span id="HoverCartQtyxyz">
+ </span>
+ </div>
+ </div>
+ <div class="LayoutRight">
+ <div class="CheckoutCostDark LayoutRight TextRight">
+ <span id="HoverCartPricexyz">
+ </span>
+ <span id="HoverCartSubscriptionxyz" class="CheckoutSubscription">
+ </span>
+ <div id="HoverCartVatPercentageLabelxyz" class="TextEm TextSmall" style="display:none; max-width: 100px;"><span id="HoverCartVatPercentagePreTextxyz"></span>
+ <span id="HoverCartVatPercentagexyz"></span></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="HoverCartEDUMessage LayoutBigCellBottom" style="display:none">Purchase requires verification of academic eligibility</div>
+ </div>
+ <div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div>
+ <a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/cart.html"></a>
+ <div id="HoverCartButtons" class="HoverCart-1-3">
+ <table border="0" align="right" width="70%">
+ <tr>
+ <td>
+ <div class="TextRight HoverCartSubTotal">Subtotal</div>
+ <div id="ExVatLabel" style="display:none" class="TextEm TextSmall TextRight"></div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartSubTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartPromotionsRow">
+ <td>
+ <div class="TextRight HoverCartPromotionsLabel HoverCartSubTotal">Promotions</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartPromotions">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartShippingRow">
+ <td>
+ <div class="TextRight HoverCartShippingLabel HoverCartSubTotal">Estimated shipping</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartShipping">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr id="HoverCartVATRow">
+ <td>
+ <div class="TextRight HoverCartVATLabel HoverCartSubTotal">Tax</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartVat">
+ </span>
+ </div>
+ <div id="CartTaxHeader">
+ Calculated at checkout</div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><div class="RuleH"></div></td>
+ <td><div class="RuleH"></div></td>
+ </tr>
+ <tr>
+ <td>
+ <div class="TextRight HoverCartTotalLabel HoverCartSubTotal">Total</div>
+ </td>
+ <td>
+ <div class="LayoutRight TextRight">
+ <div class="CheckoutCostDark">
+ <span id="HoverCartTotal">
+ </span>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </table>
+ <div class="LayoutBreak"></div>
+
+ <div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter">
+ <a href="/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+<script>
+ /*global jQuery,adobe*/
+ jQuery.createNs("Adobe.Cart.ShoppingCart");
+
+ Adobe.Cart.ShoppingCart.HoverCart = {
+
+ MaxItems: "4",
+
+ DisplayTime: "5000",
+
+ MoreItemsTextSingular: "() more item in your cart",
+
+ MoreItemsTextPlural: "() more items in your cart",
+
+ MonthToMonthText: "per month",
+
+ YearlyText: "per year"
+ };
+
+ Adobe.Cart.TaxLabels = {
+ TaxInclusiveText : "",
+ TaxNotApplicable : "Tax not applicable"
+ };
+
+ Adobe.Cart.ShoppingCart.GlobalVars = {
+
+ CountryCode: "US",
+
+ MarketSegment: "COM",
+
+ AkamaiURLPrefix: "http://wwwimages.adobe.com/www.adobe.com",
+
+ PriceMonthText: "per month",
+
+ PriceYearText: "per year",
+
+ FullSubMonthText: "Month-to-month",
+
+ FullSubYearText: "One-year",
+
+ SubMonthText: "Monthly",
+
+ SubYearText: "Annual",
+
+ SubscriptionItemText: "NONE",
+
+ TermTypeMonth: "MONTH",
+
+ TermTypeYear: "YEAR",
+
+ BackupDVDParent: "_PARENT",
+ /*
+ params: {
+ cart,
+ price,
+ categoryPath,
+ originalPrice,
+ storeName,
+ locale,
+ usePrecision,
+ type,
+ taxCode,
+ delimiter,
+ showCentDelim,
+ distributionMethod
+ }
+ */
+ getPriceLabel: function(params) {
+ var currency = params.cart.currency;
+ var params = {
+ storeName: params.storeName,
+ locale: params.locale,
+ productKey: params.categoryPath,
+ priceObject: {
+ price: {
+ orginalPriceWithoutTax: params.originalPrice,
+ priceWithoutTax: params.price,
+ taxCode: params.taxCode || ""
+ },
+ priceTypeKey: params.distributionMethod
+ },
+ currencyObject: {
+ delimiter: params.delimiter || ",",
+ formatString: currency.FORMATSTRING,
+ iso3Code: currency.CODE,
+ symbol: currency.SYMBOL,
+ usePrecision: params.usePrecision
+ },
+ showCentDelim : params.showCentDelim || false,
+ type: params.type
+ };
+ return params;
+ },
+
+ isSubscription: function(serviceCommitment, termType) {
+ return (serviceCommitment == this.SubscriptionItemText &&
+ (termType == this.TermTypeMonth || termType == this.TermTypeYear));
+ },
+
+ subscriptionItem: function(serviceCommitment, termType) {
+ return (termType == this.TermTypeMonth &&
+ (serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear));
+ },
+
+ getSubscriptionText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.SubMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.SubYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ if (serviceCommitment === this.TermTypeMonth) {
+ return this.FullSubMonthText;
+ } else if (serviceCommitment === this.TermTypeYear) {
+ return this.FullSubYearText;
+ }
+ }
+ return "";
+ },
+
+ getSubscriptionPriceText: function(serviceCommitment, termType) {
+ if (this.isSubscription(serviceCommitment, termType)) {
+ if (termType === this.TermTypeMonth) {
+ return this.PriceMonthText;
+ } else if (termType === this.TermTypeYear) {
+ return this.PriceYearText;
+ }
+ } else if (this.subscriptionItem(serviceCommitment, termType)) {
+ return this.PriceMonthText;
+ }
+ return "";
+ }
+
+ };
+</script>
+</div>
+<div id="modalContent" style="display:none;"></div>
+</div>
+<!--googleon: all--></div>
+ <div class="Link" id="top">
+ <div class="Link LayoutBreakAfter">
+ <div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link">
+ <div class="LayoutHeaderPath">
+ <div class="LayoutCellSides LinkStrong LayoutH IconAlign">
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet.html">
+ Adobe Developer Connection</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ <span class="LayoutHItem LayoutSmallGutterRight">
+ <a href="/devnet/flex.html">
+ Flex Developer Center</a>
+ </span>
+ <span class="LayoutSmallGutterRight LayoutHItem">/</span>
+ </div>
+ </div>
+</div>
+</div>
+<div class="LayoutGrid-1-3 LayoutSlimGrid-1-2">
+ <h1 class="LayoutCellSides LayoutSmallRow TextH1">
+ Flex mobile development tips and tricks – Part 3: Hiding and positioning your app’s tabs and hiding the ActionBar</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/holly_schinsky.html">Holly Schinsky</a></h2>
+ <div class="LayoutRow">
+ <img title="" alt="Holly Schinsky" class="ImageShadow LayoutImage" src="/content/dotcom/en/devnet/author_bios/holly_schinsky/_jcr_content/image.adimg.mw.160.jpg/1345061813760.jpg"/></div>
+ <div class="LayoutRow">
+ <ul>
+ <li><a href="http://devgirl.org/" title="devgirl.org" target="_blank">devgirl.org</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">
+ Hiding the ActionBar and tabs</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_0">
+ Positioning the tabs at the top of your app</a>
+ </li>
+ <li class="LayoutSmallRow ListItemIndent">
+ <a href="#articlecontentAdobe_numberedheader_1">
+ 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>10 October 2011</p>
+ </div>
+ <ul class="LayoutRow">
+ </ul>
+ </div>
+</div>
+ <div class="LayoutRow">
+ <div class="articleCommentSummary commentsummary"><div class="LayoutRow LayoutCellSides">
+ <div id="articleRankAndCommentSummary"></div>
+</div>
+</div>
+</div>
+ <div class="LayoutRow">
+ <!-- Page Tools -->
+ <div class="pagetools pageTools"><div class="LayoutBreakAfter">
+ <div class="LayoutRow LayoutBreakAfter TextH5">
+ <table class="LayoutMaxH">
+ <tbody>
+ <tr>
+ <td class="PanelFillDark">
+ <h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides">
+ Page tools</h2>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="LayoutCellSides">
+ <div class="LayoutRow">
+ <div id="PageTools" style="padding-left:23px;" class=" LayoutBreakAfter LayoutPullout">
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Facebook-button Icon IconFacebook" href="http://www.facebook.com/sharer.php"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://www.facebook.com/sharer.php" class="Facebook-button" title="Share on Facebook" target="_blank">Share on Facebook</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Twitter-button Icon IconTwitter" href="http://twitter.com/"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://twitter.com/" class="Twitter-button" title="Share on Twitter" target="_blank">Share on Twitter</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="LinkedIn-button Icon IconLinkedIn" href="http://www.linkedin.com/"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a href="http://www.linkedin.com/" class="LinkedIn-button" title="Share on LinkedIn" target="_blank">Share on LinkedIn</a></div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Bookmark-button Icon IconBookmark" href="#"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a class="Bookmark-button" href="#">Bookmark</a>
+ </div>
+ </div>
+ <div class="LayoutSmallRowBottom LayoutBreakAfter">
+ <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px">
+ <a class="Print-button Icon IconPrint" href="#"></a>
+ </div>
+ <div style="float:left;width:100%">
+ <a class="Print-button" href="#">Print</a>
+ </div>
+ </div>
+ </div>
+</div>
+ </div>
+ </div>
+</div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <!-- Article Community -->
+ <div class="articletags articleTags"><div class="LayoutRow">
+ <div class="LayoutH LinkWeak TextTag">
+ <a href="/devnet/tagsearch.tsb.prod-_sl_flash_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Builder">Flash Builder</a><a href="/devnet/tagsearch.tsb.prod-_sl_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_mobile.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="mobile">mobile</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_ria.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="RIA">RIA</a></div>
+ </div>
+ </div>
+</div>
+ <div class="LayoutCellSides LayoutRow">
+ <div class="parbase adcFeedBack compbase adcfeedback"><script type="javascript">
+ //<![CDATA[
+ s_tagEnv = 'dev';
+ //]]>
+ </script>
+ <script src="http://wwwimages.adobe.com/www.adobe.com/include/script/article-compressed.js"></script>
+
+ <div id="helpful-pod">
+ <div id="helpful" class="collapsed">
+ <div id="helpfulspan">Was this helpful?</div>
+ <input type="radio" name="feedback" id="radioyes" onClick="showForm();"/><span id="yesspan" class="radio-option">Yes</span>  
+ <input type="radio" name="feedback" id="radiono" onClick="showForm();"/><span id="nospan" class="radio-option">No</span>
+ <textarea title="(Optional) Please let us know how we can improve this page. " id="feedbacktext" placeholder="" rows="5" cols="25" style="font-family:sans-serif;display:none"></textarea>
+ <button id="submitButton" onClick="submitForm();" style="display:none">Submit</button>
+ <button id="noCommentButton" onClick="hideForm();" style="display:none">No comment</button>
+ <br clear="both">
+ <div id="termsofuse"><p>By clicking Submit, you accept the <a href="/misc/terms.html">Adobe Terms of Use</a>.</p>
+</div>
+ </div>
+ <div id="fold"> </div>
+ </div>
+ <div id="helpful-thankyou" class="thankyou">Thanks for your feedback.</div>
+
+ <script>
+ //<![CDATA[
+ // Send CHL-specific data to SiteCatalyst
+ var s_chl = s_gi("mxchlprod");
+ var urlMatch = /(https?:\/\/)([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*))(index.html)?(\?\S+)?(#\S+)?/;
+ var adobeMatch = /(https?:\/\/)([-\w\.]+)+(\.adobe\.com)/;
+ var adobeLocaleMatch = /^\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var cqLocaleMatch = /^\/content\/help\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/;
+ var ua = navigator.userAgent.toLowerCase();
+ s_chl.channel = "helpx";
+ s_chl.eVar3 = window.location.toString().replace(/[\?,#](.*)/, "");
+ s_chl.pageName = s_chl.eVar11 = document.title;
+ if ( typeof(omtrPageName) != 'undefined' && omtrPageName.length > 0 ) {
+ s_chl.pageName = s_chl.eVar11 = omtrPageName;
+ }
+ // s_chl.list1 = omtrProductList.replace(/,/g,":");
+ var omtrLocale = "en";
+ if (adobeLocaleMatch.test(location.pathname)) {
+ var matchArray = adobeLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+ else if (cqLocaleMatch.test(location.pathname)) {
+ var matchArray = cqLocaleMatch.exec(location.pathname).slice();
+ omtrLocale = matchArray[1];
+ if ( typeof(matchArray[1]) != 'undefined') {
+ omtrLocale = matchArray[1];
+ }
+ }
+
+ s_chl.eVar8 = omtrLocale;
+ if (omtrLocale != "en") {
+ s_chl.eVar9 = document.title;
+ }
+ // Transmit
+ // The s_gs() call in compressed.js causes problems with any .t() call in any report suite
+ function s_gs(){}
+ s_chl.t();
+
+ function showForm(){
+ if (ua.indexOf('msie 6') == -1 ){
+ $('#helpfulspan').hide();
+ $('#radioyes').hide();
+ $('#radiono').hide();
+ $('#yesspan').hide();
+ $('#nospan').hide();
+ $('#feedbacktext').autofill();
+ $('#helpful').animate({width:'420px', height: '185px'});
+ $('#helpful').removeClass('collapsed');
+ $('#helpful').addClass('expanded');
+ $('#fold').css('background-position', '-12px 0');
+ displayTextField();
+ }else{
+ submitForm();
+ }
+ }
+
+
+
+ $(document).ready(function() {
+ var feedbackLocales = "en, jp, fr, de, it, se, es, nl , dk, br, no, fi";
+ if ( feedbackLocales.indexOf( omtrLocale ) > -1 ){
+ $('#helpful-pod').fadeIn();
+ $('#helpful-pod').animate({
+ opacity: 1,
+ top: '+=20'},
+ 1500);
+ }
+ });
+
+ // ]]>
+ </script>
+ </div>
+</div>
+ <div class="LayoutBreak"></div>
+ </div>
+ <!-- Main Content -->
+ <div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6">
+ <div class="ArticleWideGrid-2-4">
+ <div class="articlerequirements articlePrerequistes"><div class="PanelFillMedium PanelBorder LayoutRow TextSmall">
+ <div id="requirements-title" class="LayoutCell Link">
+ <h2 class="TextH5">
+ <span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span>
+ Requirements</h2>
+ </div>
+ <div id="requirements-content" class="LayoutBreakAfter">
+ <div class="ArticleGrid-2">
+ <div class="LayoutCellSides">
+ <h3 class="TextH5 LayoutSmallRowTop">
+ Prerequisite knowledge</h3>
+ <div class="LayoutRowBottom">
+ <p>Prior experience building applications—but not necessarily mobile apps—with Flex will help you make the most of this article.</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>
+ </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>This is Part 3 of a multipart series of articles that cover tips and tricks for Flex mobile development. <a href="/devnet/flex/articles/flex-mobile-development-tips-tricks-pt1.html">Part 1</a> focused on handling data when switching between views and between application executions. Part 2 covered styling the ActionBar and tab components in your mobile application. In this part, you'll learn how to control the visibility of the ActionBar and tab components, and you'll learn how to move the tab components to the top of your application.</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>
+ Hiding the ActionBar and tabs</h3>
+</div>
+<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>When you're working on a Flex mobile application based on <b>TabbedViewNavigatorApplication,</b> you may find that you need to hide the <b>ActionBar</b> or <b>tabs.</b> You may, for example, want to open more screen space for a particular view, or simply configure the display based on a user's preferences. In these instances, you can use two properties available on the<b> View</b> class to achieve the desired effect: <code>actionBarVisible</code> and <code>tabBarVisible</code> <i>.</i> </p>
+ <p>To illustrate how <code>actionBarVisible</code> and <code>tabBarVisible</code> work, I created a simple mobile app based on <b>TabbedViewNavigatorApplication</b>. If you'd like see the full source code and try the application yourself, download the sample files for this article and import the project in Adobe Flash Builder. </p>
+ <p>There are three views in the code: View1, View2, and View3. The first view has buttons to toggle the visibility of the ActionBar and TabBar controls. </p>
+ <p>As you can see from the View1 code below, you set <code>actionBarVisible</code> and <code>tabBarVisible</code> to <code>true</code> or <code>false</code> to control their visibility:</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="View1">
+
+ <fx:Script>
+ <![CDATA[
+ protected function onActionBarClickHandler(event:MouseEvent):void
+ {
+ if (actionBarVisible)
+ {
+ this.actionBarVisible = false;
+ b.label="Show ActionBar";
+ }
+ else {
+ this.actionBarVisible = true;
+ b.label="Hide ActionBar";
+ }
+ }
+
+ protected function onTabBarClickHandler(event:MouseEvent):void
+ {
+ if (tabBarVisible)
+ {
+ this.tabBarVisible = false;
+ b2.label="Show TabBar";
+ }
+ else {
+ this.tabBarVisible = true;
+ b2.label="Hide TabBar";
+ }
+ }
+ ]]>
+ </fx:Script>
+ <s:VGroup width="100%" height="100%" horizontalAlign="center" top="50">
+ <s:TextArea text="This is View 1" editable="false"/>
+ <s:HGroup>
+ <s:Button id="b" label="Hide ActionBar" click="onActionBarClickHandler(event)"/>
+ <s:Button id="b2" label="Hide TabBar" click="onTabBarClickHandler(event)"/>
+ </s:HGroup>
+ </s:VGroup>
+</s:View>
+</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>When switching between views–whether via the tabs or programmatically–the visibility of those items is only affected on View1 (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. The application at startup (left), with ActionBar hidden (center), and with ActionBar and tabs hidden (left)." alt="Figure 1. The application at startup (left), with ActionBar hidden (center), and with ActionBar and tabs hidden (left)." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/articles/flex-mobile-development-tips-tricks-pt3/fig01.jpg"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 1. The application at startup (left), with ActionBar hidden (center), and with ActionBar and tabs hidden (left).</div>
+</div>
+<a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>The other views remain unaffected (see Figure 2).</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="Figure 2. View2, which does not change when the buttons in View1 are clicked." alt="Figure 2. View2, which does not change when the buttons in View1 are clicked." class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/articles/flex-mobile-development-tips-tricks-pt3/fig02.gif"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 2. View2, which does not change when the buttons in View1 are clicked.</div>
+</div>
+<a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>None of this involves the main application code, as you can see below:</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_codeblock_0" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+ <s:ViewNavigator label="View1" width="100%" height="100%" firstView="views.View1"/>
+ <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/>
+ <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/>
+</s:TabbedViewNavigatorApplication>
+</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>If you build and test this application yourself, you may notice that when you hide the ActionBar, switch to another view, and then switch back, the ActionBar will be displayed again when you return to View1. This happens because the view is recreated when you switch back to it. If you want the ActionBar to always be invisible on a certain view, you can use a few different approaches. One approach is to set <code>destructionPolicy="never"</code> on the view; once the ActionBar is hidden it will not be shown again since the view will not be recreated. Another approach is to set <code>viewActivate="actionBarVisible=false"</code> on the root View tag so that it will be hidden each time the view is activated. One issue with using this approach, however, is that when the view is activated the user will actually see the ActionBar briefly before it is removed, which may be undesirable. A third approach is to add code to your root tabbed application file to set t
he active view's <code>actionBarVisible</code> property to <code>false</code> for the ViewNavigator component on the tabbedNavigator <code>IndexChangeEvent</code> , such as:</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_codeblock_1" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow">
+ <code class="CodeBlock"><?xml version="1.0" encoding="utf-8"?>
+<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ applicationComplete="onApplicationComplete(event)">
+<fx:Script>
+<![CDATA[
+import mx.events.FlexEvent;
+import spark.events.IndexChangeEvent;
+protected function onApplicationComplete (event:FlexEvent):void{
+ vn1.actionBar.visible=false;
+ tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE,onChange);
+}
+
+protected function onChange(event:IndexChangeEvent):void
+{
+ if (event.newIndex==0)
+ vn1.activeView.actionBarVisible=false;
+
+}
+
+]]>
+</fx:Script>
+
+
+ <s:ViewNavigator id="vn1" label="View1" width="100%" height="100%" firstView="views.View1"/>
+ <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/>
+ <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/>
+</s:TabbedViewNavigatorApplication>
+</code>
+ </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>
+ Positioning the tabs at the top of your app</h3>
+</div>
+<a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>By default, of course, the tab buttons for a Flex 4.5 TabbedViewNavigatorApplication are at the bottom, as you can see in the second sample application for this article (see Figure 3).</p>
+ </div>
+ </div>
+<a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides">
+ <img title="Figure 3. The default position for the tabs. " alt="Figure 3. The default position for the tabs. " class="cq-dd-image LayoutImage LayoutRow " src="devnet/flex/articles/flex-mobile-development-tips-tricks-pt3/fig03.gif"/></div>
+<div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom">
+ Figure 3. The default position for the tabs. </div>
+</div>
+<a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <p>However, there may be times when you prefer to have your tabs at the top of the screen instead. </p>
+ <p>Follow these steps to move the tabs to the top of your application:</p>
+ <ol>
+ <li>Find and copy the TabbedViewNavigatorSkin.as class into your mobile project in a folder called <kbd>skins</kbd>. On my Mac, I can find this skin class here (for Flash Builder 4.5.1): <kbd>/Applications/Adobe Flash Builder 4.5/sdks/4.5.1/frameworks/projects/mobiletheme/src/spark/skins/mobile/TabbedViewNavigatorSkin.as</kbd>.</li>
+ <li>Set your CSS style to use this skin class either in your main application file as below or in an external style sheet:</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"> <fx:Style>
+ @namespace s "library://ns.adobe.com/flex/spark";
+ s|TabbedViewNavigator
+ {
+ skinClass: ClassReference("skins.TabbedViewNavigatorSkin");
+ }
+</fx:Style>
+</code>
+ </div>
+</div>
+<a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
+ <ol start="3">
+ <li> In your newly copied <b>TabbedViewNavigatorSkin</b> class, change the package at the top of the class to reflect its new location in your local <kbd>skins</kbd> folder; replace the first package line from <code>package spark.skins.mobile</code> to <code>package skins.</code></li>
+ <li
<TRUNCATED>