Styling your Flex 4.5 Mobile Application Tabs and ActionBar

If you’re building a TabbedViewNavigatorApplication in Flex 4.5 and you want to customize your tabs or ActionBar (the title bar that contains title text and any other components or navigation content), you can go about it in a couple of different ways. One approach would be to skin the tabs with your own custom assets (fxg, skins etc) if the needs of your application surpass what you can do with CSS properties. If your needs are not this custom, or you need a quick and easy approach to making a dramatic change from those boring gray tabs then simply use CSS.

I created a sample tabbed application to illustrate how this can be done. In the following examples you will see how adding just a few lines of CSS can change your ActionBar and mobile application tabs quickly!

If we create a Flex TabbedViewNavigatorApplication with three tabs that link to their own first views with code such as:

<?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 id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView"/>
	<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView"/>
	<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView"/>
</s:TabbedViewNavigatorApplication>

It will look like this screenshot below by default using the Mobile theme that is applied automatically when you create a Flex Mobile project:

Not exactly exciting :). However, we can start sprucing it up by at least adding an icon to the tabs…

Tabs with Icons

To add an icon to the tabs you can use the icon property on each of the ViewNavigator components that points to an icon of our choice. In my case I used three icons from my assets directory within my project root.

<?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 id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/>
	<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/>
	<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>

Here’s the result of that code:

Styling the ActionBar

So the last example was a little better, but what if we wanted to change the gray colors used on the ActionBar and tabs to match a theme of some sort? We can do that with CSS. For the ActionBar we’ll simply use the Spark selector for ActionBar and specify any supported styles or inherited styles to change (Note: the Flex 4.5 ActionScript API documentation will show the specific style properties supported for the component as well as inherited styles. It will also show if a style property has CSS inheritance or not. In this case you can look up the ActionBar in the API, located in the spark.components package to see what is styleable).

Since there’s not much to this particular ActionBar (just a text title), I’m just going to customize it a little bit. If you have buttons and other components within your ActionBar, you can customize supported styles for those as well. It’s important to know what the defaults are though before you go start changing things. For instance, you may want to know what that default font size is, and is it bold? Things that may not be as obvious as the font color. You can take a look at the default CSS properties for the mobile theme to better understand this example and what you’re styling. My Mac has it under a path of: /Applications/Adobe Flash Builder Burrito/sdks/4.5/frameworks/projects/mobiletheme/defaults.css. Below are a couple of snippets from this file regarding the ActionBar:

ActionBar
{
    chromeColor: #484848;
    defaultButtonAppearance: normal;
    skinClass: ClassReference("spark.skins.mobile.ActionBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
    paddingBottom: 1;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 1;
}
...
ActionBar #titleDisplay
{
    color: #FFFFFF;
    fontSize: 28;
    fontWeight: bold;
}

Notice the font color, size and weight are customized using the titleDisplay ID selector, since titleDisplay is a skin part and contains that label we want to customize. I’m now going to set the following CSS properties for my sample application:

s|ActionBar
{
	chromeColor: #229988;
        titleAlign: center;
}

s|ActionBar #titleDisplay
{
	color: #CCCCCC; /* default color is white */
	fontSize: 40;
	fontFamily: "Comic Sans MS";
}

My application now looks like the screenshot below:

Styling Tabs

Next I want to style my tabs in my tab bar. For this one I also need to specify a skin part id of tabBar from the TabbedViewNavigator component. If we look back at our defaults.css file for mobile theme, we can see the current defaults of:

TabbedViewNavigator #tabBar
{
    chromeColor: #484848;
    color: #FFFFFF;
    fontSize: 20;
    fontWeight: normal;
    iconPlacement: top;
    interactionMode: mouse;
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
}

Note: the tabBar defined in the TabbedViewNavigator is actually a ButtonBar. The Spark TabBar is not yet optimized for mobile. If you go down the path of customizing skins, it’s important to note since the TabbedViewNavigatorTabBarSkin actually extends ButtonBarSkin.

So based on the defaults.css file, I’ve decided to make add custom CSS to mine to change the appearance as in the following:

TabbedViewNavigator #tabBar
{
    chromeColor: #229988;
    color: #CCCCCC;
    fontFamily: "Comic Sans MS";
    iconPlacement:left;
    textDecoration:underline;
}

Tada! The final result is shown below with the original for comparison. Keep in mind, I am definitely not a designer ;), but it should be apparent what simply adding a block of CSS can do to change the look of your application quickly!

Final Result

Original

Here’s the full source for the main tabbed application file. The only other things referenced are the very basic views in the views folder with names set to those of the firstView property in the ViewNavigator objects below (TrendsView, AttachView and CallView) and my icons:

<?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">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";

		s|ActionBar
		{
			chromeColor: #229988;
			titleAlign: center;
		}

		s|ActionBar #titleDisplay
		{
			color: #CCCCCC;
			fontSize: 40;
			fontFamily: "Comic Sans MS";
		}

		s|TabbedViewNavigator #tabBar
		{
			chromeColor: #229988;
			color: #CCCCCC;
			fontFamily: "Comic Sans MS";
			iconPlacement:left;
			textDecoration:underline;
		}
	</fx:Style>

	<s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/>
	<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/>
	<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>

Please note that the above examples include the styles within the MXML application for simplicity, however it’s generally a good practice to create a separate CSS file to contain all of your styles and include that reference in your main application file.

General Guidelines

  • If you are styling colors, text, alignment, icons etc… use CSS.
  • If you want to create something more graphical use fxg, custom skins and images.
  • To skin for different DPIs use CSS media filters and/or special skin classes in fxg loaded for that DPI/density. (If you’re not aware of it, DPI varies between devices and OS, such as an iPhone 4 (320 DPI) or iPad (132 DPI) versus an Android Nexus One (240 DPI) and Motorola Xoom (160 DPI). A list of a bunch of devices and DPIs can be found here. Flex 4.5 has a lot of built-in capabilities for supporting screen densities that you should definitely look into further if you are doing mobile development).Tip: to see what DPI the targeted device has, choose that device in the Flash Builder debug or run configurations drop-down, run the application on the device (or via the emulator) and check the runtimeDPI property off the root mobile application (either TabbedViewNavigatorApplication or ViewNavigatorApplication) to see what is returned.

Make a point to check out this great article on mobile skinning from Jason San Jose on Adobe Devnet. It provides a bunch of useful information, including using fxg for skinning as well as creating density aware skins. Looks like there will be more parts to come there as well…

For more information on the TabbedViewNavigatorApplication and other new things in Flex 4.5, see this post.

Filed in: Flash Builder 4.5Flex 4.5Flex 4.5/MobileMobile Development Tags:

About the Author ()

Comments (88)

Trackback URL | Comments RSS Feed

  1. I could test this myself, but I assume you could use icons and _no_ labels if you wanted? (Although you want to be sure your icons are simple.)

    As to your customization of the action bar – how did it determine how to render the active mode? It looks like it just made it darker. Can you control that?

    • devgirl says:

      Yes you sure can remove the label field there and just use an icon (ensuring they’re simple and descriptive enough not to need text).

      The action bar style settings changed the color of the title to #CCCCCC which is a very light grey and looks just slightly darker than white (the default). It also made the title bold and moved the alignment to center. Perhaps I will change the color to something else to make it more obvious though…

      Thanks :)!
      Holly

  2. Maybe I read too quick. Didn’t you change the bottom to green too? That’s what I meant – those buttons. It looks like the active one is just darker.

    • devgirl says:

      Hey Ray, in my example I’m just using the base chrome color via CSS to change the look of the tabs quickly. The actual shading when the button is active is applied via FXG based on the state of the button. So the active or ‘selected’ state has the following highlight fill applied from the default FXG for example, which causes the darker shade:

      <!-- highlight fill -->
          <Rect x="0" y="1" width="120" height="74">
              <fill>
                  <LinearGradient x="0" scaleX="74" rotation="90">
                      <GradientEntry color="#000000" ratio="0" alpha=".05"/>
                      <GradientEntry color="#000000" ratio="1" alpha=".1"/>
                  </LinearGradient>
              </fill>
          </Rect>
      

      You can change it to something custom by using your own FXG and loading that in a custom skin you set on for your tabBar (extending spark.skins.mobile.TabbedViewNavigatorTabBarSkin). That’s the easy answer, however, the tabs are broken down into first, last etc so there’s a little more to it than that. You have to customize them for each and if you want them all to match.
      Maybe I’ll make a part 2 on all that… :)

      Hope that made some sense!!
      Holly

  3. Lionel says:

    Could I do the equivalent with Flash Catalyst 5.5?

  4. Paul says:

    Nice article, thanks

    No idea why spark confuses me, guess my brain is still with flex 3, speaking of flex 3, there was a css style designer in that, I can’t find it in 4.5!

    Did they misplace it?

    • devgirl says:

      Thanks Paul! Regarding the CSS style view… here’s a quote from Deepa, the current Flex SDK Product Manager in response to someone asking that about Flash Builder 4:

      “Flash Builder 4 does not have a CSS design view for Flex 4 projects because the existing CSS design view was very much geared towards helping figure out the myriad of styles available for Halo components. In Flex 4 there are fewer style knobs but they can be set globally to style your whole application. So instead of the CSS design view in Flex 4 projects, Flash Builder introduced the Appearance Panel to help you globally style and/or set a theme for your application. Please check out the Appearance Panel for your styling needs when working within Flex 4 projects and as always, feel free to log enhancement requests in the bug base (bugs.adobe.com).”

      :)

  5. Siebe says:

    Hi Holly,

    Great tutorial.

    However I have a question about the TabbedViewNavigatorApplication itself.

    So, I have my app with 3 tabs, but when my app starts I want a login view to load without the tabs at the bottom nor the top bar visible.

    What is the best way to achieve this?

    Tnx,

    Siebe

    • devgirl says:

      Hi Siebe! There are properties on the view class you can set to toggle the actionBar and tabBar visibility. So in your login view you would just set tabBarVisible = false; and actionBarVisible = false;

      Hope that helps!
      Holly

  6. Michael C says:

    How do we change the background color of the application from the default white. I was able to do this easily in burrito but now with 4.5 there doesn’t seem to be a one click way of changing it that I can see. Thanks.

    • devgirl says:

      Hi Michael, you can set the backgroundColor style on the ViewNavigatorApplication/TabbedViewNavigator or View to the color you would like such as:

      s|ViewNavigatorApplication
      {
      	backgroundColor: #355D89;
      }
      s|View
      {
      	backgroundColor: #355D89;
      }
      

      Hope that helps!
      Holly

      • RJ Bruneel says:

        I would like to change the background color of my app to a radial gradient. I have been trying to use a skin, but I just am not getting it. Any help would be much appreciated.

  7. Rpgccv says:

    Great ;-)

    If i just want to show 3 tabs, can they slide to show more!?

  8. Michael says:

    Hi Holly,

    Can the tabbar be placed at the top of the screen as it was with TabbedMobileApplication? That would be much prefered for android devices.

    Thanks!
    Michael

    • brybam says:

      I’m looking around trying to find this informations as well ^^

    • devgirl says:

      Hi Michael, you could create a custom TabbedViewNavigator skin by first copying the default one into the custom one. Then in the layoutContents method, you could change the line:

      tabBar.setLayoutBoundsPosition(0,unscaledHeight – tabBarHeight);

      TO

      tabBar.setLayoutBoundsPosition(0,0);

      Then be sure to set the skin class to the custom one in your style sheet such as:

      s|TabbedViewNavigator
      {
      skinClass: ClassReference(“skins.MyTabbedViewNavigatorSkin”);
      }

      Of course then it will cover the actionBar (which I assume you’re not using in this case) so you could just set the actionBarVisible to false on your views (unless you’re creating a custom skin for that to anchor it to the bottom instead… :)).

      Thanks!!
      Holly

      • Michael says:

        Thanks Holly! That got me on the right track, I was hoping for an easier solution but that wasn’t too bad.

        I actually wanted the tabbar below the action bar so I also created a ViewNavigatorSkin and changed the following line:

        var contentGroupPosition:Number = (_isOverlay) ? 0 : actionBarHeight;

        to

        var contentGroupPosition:Number = (_isOverlay) ? 0 + myTabBarHeight : actionBarHeight + myTabBarHeight;

        Works good so far but needs a little more testing. Thanks,

        Michael

      • Michael says:

        One more line to add after a bit of testing…my app hides the tab when the user clicks through to deeper views so I ended up using the following two lines in my ViewNavigatorSkin:

        var myTabBarHeight:Number = (FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.visible) ? FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height : 0;
        var contentGroupPosition:Number = (_isOverlay) ? myTabBarHeight : actionBarHeight + myTabBarHeight;

        Michael

  9. Anton Bremer says:

    Hi, Thanks for this, this is very useful.

    I am having a list in my application and I am using an IconItemRenderer to render the list items.

    I can set the selectionColor and downColor when you select an item in the list, however, I cannot figure out how to set the background color of the IconItemRenderer.

    Whatever I try, the background color remains white. Any ideas on how to do this?

  10. khuram says:

    Hi, I am using this code to add icons to the tab Buttons but icons dosent appear at all. I am using flash builder 4.5 pre-release version. This is my code.

    <!—->

  11. rahul says:

    @Devgirl
    i done
    tabBarVisible=”false”
    actionBarVisible=”false” in my login view but initially tab bar is visible in my screen.I want to set default value of tabBarVisible to false & after click on button in login view it is set to true.

  12. hi holly,
    first of all thanks to u and all websites that show the details of flex projects. i am software developer in indore, india and learning many things due to this type of tutorials. Can you help me to create a tab at the top of view in mobileapplication in flex4.5, and if in future when i need to your support. Can I disturb u?

    Thanks
    Bbye

  13. qianyang says:

    Thanks,that help me a lot .
    I want to add background image for mobiles,I ‘v no idea to do this with flex 4.Could you help me ?I will appreciate.

  14. Joseph says:

    Loooove the New Flash Builder 4.5.1!!!

    Launching iOS apps on the fly with the help of Catalyst for skinning.

    Optimizing is a priority…

  15. Tom Murphy says:

    Is it possible to position the icon to the left of the text on the ViewNavigator?

    Thanks!

    • Hi Tom! If you’re referring to the tabs, there is some CSS in my post there towards the end that shows how you can specify iconPlacement: left to cause the icon to be left of the text:

      TabbedViewNavigator #tabBar
      {
          chromeColor: #229988;
          color: #CCCCCC;
          fontFamily: "Comic Sans MS";
          iconPlacement:left;
          textDecoration:underline;
      }
      

      Is that what you’re looking for?

      Thanks!!
      Holly

      • Tom Murphy says:

        Thanks Holly, that worked great!

        Now that my icon is on the left, I’m trying to get both the icon and label text centered again. “horizontalAlign:center;” and “textAlign:center;” don’t seem to do the trick, but I’ll keep hunting.

  16. Jo says:

    Hello,

    Is there a way to change the icon of the ViewNavigator once it is selected?

    • Hi Jo! Yes you can… I will try to blog an example, that seems to come up a lot. But for now as a quick answer, you can add an IndexChangeEvent listener to the tabbedNavigator and then in the event listener check the tab index and switch it out to the new image…

      Hope that helps! Check back soon, I’ll try to put up an example!

      Holly

  17. Joseph says:

    Hi Holly,

    Thanks very much… I’ve done a quick example:

    protected function changeIcon(event:IndexChangeEvent):void {
    (navigators[event.newIndex] as ViewNavigator).icon = ICON_ON;
    (navigators[event.oldIndex] as ViewNavigator).icon = ICON_OFF;
    }

    protected function tabbedviewnavigatorapplication1_creationCompleteHandler(event:FlexEvent):void {
    tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE, changeIcon);
    }

  18. Chris says:

    I’ve added the icons to the ViewNavigator and the icons show up in the Design view in FlashBuilder. However on running (Desktop or Device) the icons are missing. Any thoughts on this?

    30×30 transparent PNGs.

  19. Ed says:

    Hey Holly;

    Just had to say that your site is the best resource I have found so far!

    I am really trying to figure out how to change the icon placement for only a particular tab/button and not the entire component. Is that possible? I’ve tried setting the styleName on the particular instance, but that didn’t work. : (

    Thank you for sharing your knowledge with all of us!

    Ed

  20. Jose says:

    Hi, anyone know how implement a “ApplicationIconBadge” in Flex 4.5 for TabbedViewNavigatorApplication ??

  21. Amit says:

    With Flex4.5 I am developing the mobile application. i want diffrent-diffrent skins based on the platform(i.e. Diffrent for Android, iOS and black berry). Is that possible with flex 4.5.

  22. Blue_Chi says:

    I’m trying to figure out how to change the icon of each tab depending on the DPI by using CSS? Can you please show us how to do that?

  23. Bhawani Singh Bhati says:

    Hey, I have install the flex 4.5.1, and started writing code, just hello world when run the application, it does not show any thing – its blank , can you tell me what will be the problem?

    Thank You,

    Bhawani Singh Bhati

  24. Erdem says:

    Hi…

    How can i use Flex background width css?

    For exp. tabBar button …

  25. Eric DeCoff says:

    Is it possible to hide ViewNavigators

    • Hi Eric! Are you trying to hide them so they don’t show up at all or so the tab doesn’t show up? If you read the comments on this post, I did reply to one or two that may help you if it’s tab visibility related. If not, let me know what you’re trying to do exactly and I’ll see what I can suggest!! Holly

  26. Lawrence says:

    Small correction: iPad DPI is not 320 as mentioned above, but somewhere around 130 DPI, much lower than the iPhone 4.

  27. Barno says:

    Thanks!

    To make the icons tab, if I set applicationDPI to 320, since they must be great?

    Could you give an example with FXG files?

    thanks again

  28. Danial says:

    Hi holly, is it possible to split the actionbar to develop a splitview application on Flash Builder? I am currently given a project by my school to develop an iPad application on Flash Builder and i’ve been cracking my brains to figure out how to develop a splitview application like the following: http://vimeo.com/27807575

    would appreciate a reply :) thanks in advance

    • Hi Danial, yes, that is possible. What you could do is use the Blank Application template in the Flash Builder wizard (when you select New Flex Mobile Project), then add two ViewNavigators to it, one for managing the left and one for the right side:

      something such as…

      <s:Application ...>
           <s:ViewNavigator id="leftNav" left="0" width="320" top="0" bottom="0"		firstView="views.ListView"/>
      				
      	
           <s:ViewNavigator id="rightNav" left="320" right="0" top="0" bottom="0" firstView="views.DetailView"/>
      </s:Application>
      

      Make sense?
      Cheers!
      Holly

  29. Barno says:

    hi! Thanks for your posts!
    Can i format the Botton with Css, and have a bottom totally black? without glow…

    Thanks!!

  30. Manikandan says:

    Hi,

    As i have tried to change the Action bar style in Viewbased application. Like follows,

    @namespace s “library://ns.adobe.com/flex/spark”;
    s|ActionBar
    {
    chromeColor: #229988;
    titleAlign: center;
    }

    But it showing a warning message as,
    CSS type selectors are not supported in components: spark.components.view.

    How can i implement in viewbased application?

  31. Manikandan says:

    Hi,

    As i have tried the actionbar styling in my view based application. but it shows warning that, “CSS type selectors are not aupported in components:’spark.components.ActionBar’”

    The code i have tried as follows,

    @namespace s “library://ns.adobe.com/flex/spark”;

    s|ActionBar
    {
    chromeColor:Red;
    }

    How can i set ActionBar style in View based application?

  32. Alejandro says:

    Hi,

    Excellent your article. I am having a trouble, I need to define the icon of view navigator from .css but I can not do it. Could you give me a clue for doing that.

    Thnaks in Advance

  33. Don Kerr says:

    Thanks Holly! This helped me today :) Appreciate it.

    Don

  34. vasu says:

    Hi thanks,
    I have little doubt, please clear me.

    How to invisible the right side scroll bar always? It automatically getting fade out after sometime, but how to hide always.

    please see the img.
    http://jaspreetchahal.org/wp-content/uploads/2011/09/app-page-with-rounded-corners.png

  35. Ajitpal Singh says:

    Hi,
    It is very useful post to understand basic designing of Flash builder 4.5 & really interesting what can be achieved from this.I want to know two things,

    1: How can we set the background image for the TabViewNavigation application, so that it appears on all the view backgrounds?

    2: How can we add gradient to the item renderer in flash bulder 4.5?

    Thanks
    Ajit

  36. Eric C says:

    Hi Holly,
    Just came back from Adobe Max and loving 4.5. I would like to reiterate the prior poster’s questions regarding a background image. I’ve seen sample code to create a skin and embed an image but it just displays the image over top of my content in the application. I want a background image only, specifically for a mobile applicatin.

    Is there any way to add a background image via the css file or via skinning?

  37. jackey says:

    i want to know how to set the tabbar button style

  38. Amir says:

    Hi Holly,

    I searched a lot to find a way to apply different colors to different tabs in a TabbedViewNavigator, but no success. There are some suggestion out there, but none of them is working for me. Do you know how can I change the color of an individual tab button (e.g. Attach or Call Center) to some color, instead of turning the whole tab bar into green?

    Thanks,
    Amir

  39. Trinu says:

    Hi,
    I want to insert another TabbedViewNavigator inside a view and that tabnavigator should come on the top of that view.
    For example our application is a TabbedViewNavigator contains 3 views in the viewnavigator now if we press first view in that view also i should get a viewnavigator that contains two views.Can you please give me an example showing this.
    Thanks

  40. Brandon says:

    I’ve trying to find a way to hide the actionbar and tabbar for a login page. I have tried creationComplete in the view at the top of the app and for the login button to do a this.actionBarVisible and this.tabBarVisible set to false. I am in the function, but both are null so never get created. I am guessing they are being created after the rest of the page. Do you have any tips on how to hide them?

  41. Amar Shukla says:

    Hi Holly,
    I want to add icon to of my view component so that I could have icon instead of title text but I couldn’t figure how to do that. There is no such property as icon in view ?

  42. Amar Shukla says:

    I got the answer myself after playing a little bit.I could do it with having image inside
    Thanks!

  43. Chris Farrell says:

    Hi all,
    I am utilizing the TabbedViewNavigator Application and have a requirement to only allow LEFT and RIGHT orientations. I have tried dozens of configurations with no success. Including the most obvious: setting autoOrients to true and listening for ORIENTATION_CHANGING and then calling prevent default for DEFAULT and UPSIDE DOWN. This seems to be the closest I can get to the desired functionality but the tab bar disappears and reappears. It seems as if the preventDefault does not prevent the tab bar from changing it orientation. The view itself doesn’t change, though, so i’m confused. Anyone have experience with this particular situation?

    • Chris Farrell says:

      Well, I found a work around for my issue: In my ORIENTATION_CHANGING handler, after using the preventDefault call for afterOrientations I don’t want, I then call invalidateProperties. In commitProperties I set the tabbedNavigator.tabBar’s minWidth and width to 1024. This seems to keep the tabBar at the right size in the right location.

  44. vineet agarwal says:

    Helllo holy i need a quick help from u ….i have to make an tab based view application which should display names in list dynamically and the list shd have check box where we can select or deselect nd next screen should save the names on th list.

    My questions how to get a list of names dynamically. not static data….for that how to put names in local server…some one saying u have to use sqlite.

    N then wen that list is generated then how to save the list names in check box and show the selected names on other tab //……plss help me out.It will be gr88 help

  45. Mehdi Mustafayev says:

    Hi !

    How can I change tabs height and actionBar height ?

    s|TabbedViewNavigator #tabBar
    {
    chromeColor: #00a5df;
    fontSize: 12px;

    for example tabBarHeight: 10px; not work

    }

  46. Humberto says:

    How can I set the background color os the actionBar to only one color (without the gradient)?

    Thanks in advance!

  47. kremilek10 says:

    How can I set the background image for the TabViewNavigation (actionbar) ? Is it possibility? This is a basic and I don’t found some links ..

  48. Vinicius Oliviera says:

    Where I put the icon in app ??
    What size 57×57 ?

  49. Humberto says:

    About my question: “How can I set the background color os the actionBar to only one color (without the gradient)?”

    I solved it extending the ActionBarSkinClass.

    Thanks

  50. Fatih says:

    Hi Holly,

    I want tabbar icons uncolored while the tab is not selected. Only the selected one’s icon will be colored. Is it possible?

    Thanks.

  51. Restless says:

    Does “actionBarHeight” still exist in the current AS3 Flex-4.5.1 (for a mobile TabbedViewNavigatorApplication) ?

    I cannot seem to find it.

  52. Mr.Chai says:

    how can i set ActionBar’s backgroudAlpha

    i have write style sheet like this:

    s|ActionBar{ defaultButtonAppearance:beveled;
    backgroundAlpha:0.5;
    chromeColor:’0x95826C’;
    contentBackgroundAlpha:0.5;
    }
    but worked not well!

    help me ! wait~~~~

  53. vengatesh says:

    how can i load styles in swf for my application?

    i can’t get my styles when i run my application on android devices and some error message was also thrown,something like styles are not loaded(stream error)…

  54. Grizzly says:

    What happen if I want to change the background color of the application?

  55. Martin says:

    Hi Holly!

    I am working in Flash Builder 4.6
    When I try to set the ActionBar CSS properties. I get an error saying “CSS type selectors are not supported in components: ‘spark.components.ActionBar’. I want to set the titleAlign to center. Any ideas?

  56. Dave says:

    How would I set a different color for each tab

    many thanks! (in advance)

  57. Ricky says:

    Hi Holly,

    I’m a Flex developing fan from China and trying to make idea come true via Flex tools. Occasionally come here when finding Flex mobile developing materials difficult to find in Chinese websites.In some period, we ever be collegues, ^ ^, that I ever took intership in Adobe China.

    But I’m truly a rookie in flex developing,my question is:

    Action bar is a default component in each ViewNavigator, but sometimes we wanna divide the upper deck to tabs(represent views in one ViewNavigator) instead of the action bar. How to realize this thought? via create new component or reform the action bar?

  58. Norman says:

    Hi Holly,

    How do you change the skin of the ActionBar so that it is rounded at the top right and left or bottom left or right?

  59. taciturnus says:

    hi Holly,
    i applied this example to mine but i can’t get rid of the space between text and the image underneath. why is that? thanks…

    <1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <2Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leave a Reply