How To Control Icons in TabbedViewNavigator tabs for Flex Mobile - actionscript-3

Question

As currently developing an mobile application with Flex Mobile, got to the point of finalising things and make some fine visual layout adjustments. As my Application is built in sections using TabbedViewNavigatorApplication i wanted to add and fine tune icons that appear in the TabbedViewNavigator #tabBar tabs. Well, that was one of those tasks that seems to take minutes, ending in searching Adobe api docs and googling around for hours, eventually to find the solution in days. Said so i want to post my solution, hoping that someone will need it and use it in their own specific situations.
The first thing to mention here is that Adobe per default, has an extensive help library for skinning spark components, but eventually and on the end - those examples often only scratch the surface of what is needed in specific situation and / or implementation.
At first i want to say that I avoid using mxml skins and always do my spark skinning job in AS3 classes using ClassReference. Seems to me that this approach is much more flexible, elegant and cleaner than over-spamming things in mxml. Although sometimes more harder to implement.
So your typical minimal TabbedViewNavigator Application looks like this:
<?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" applicationDPI="160" applicationComplete="onApplicationComplete(event)">
<fx:Style source="MyStyles.css" />
<fx:Script>
<![CDATA[
import spark.components.ViewNavigator;
private function onApplicationComplete(e:Event):void {
for each(var vn : ViewNavigator in this.navigators){
/// do something with your VN's ...
vn.icon = "./assets/myFaboulousIcon.png";
}
}
]]>
</fx:Script>
<s:ViewNavigator label="one" width="100%" height="100%" firstView="views.oneView"/>
<s:ViewNavigator label="two" width="100%" height="100%" firstView="views.twoView"/>
<s:ViewNavigator label="three" width="100%" height="100%" firstView="views.threeView"/>
</s:TabbedViewNavigatorApplication>
In this typical configuration you can access the ViewNavigator icon property and set it either in your mxml or from AS3 (eg. in the for loop above) eventually adding a switch statement to select different icons for each tab ... But that is where your story ends. ViewNavigator icon property is used when certain ViewNavigator is represented by a visual component. Which means that in your #tabBar the ViewNavigator is represented visually as a part of navigators stack, and is logical - in this situation it uses the icon specified.
Now let's suppose now you want to change the alpha or colorise your icons programatically, meaning you always use one set of icons but in different situations - you give them different visual properties, and one of those situations can be - their visual appeal in the application #tabBar.
The icon property is a path to the icon image file, and as a type is an generic Object. So you can't change alpha or do anything else with it. Neither icon property will give you any reference to the display object containing the icon itself or anything else you want for your juicy AS3 jonglery pokery ...
For such task we must do some nice spark skinning (in AS3) ;) So read the answer bellow

Answer 1

The first step is to add your css file from example above MyStyles.css (i always do skin class references from within css, found it easy to manage and change if needed) ...
/* MyStyle.css example */
.
.
s|TabbedViewNavigator #tabBar {
skinClass: ClassReference("com.myapp.skins.TabBarSkin");
}
.
.
You must now define your custom TabBarSkin class that can look something like this:
/* TabBarSkin Class */
package com.myapp.skins
{
import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
import spark.components.ButtonBarButton;
public class TabBarSkin extends TabbedViewNavigatorTabBarSkin
{
public function TabBarSkin() {
super();
}
override protected function createChildren():void
{
if (!firstButton) {
firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
firstButton.skinClass = TabBarFirstTabSkin;
}
if (!lastButton) {
lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
lastButton.skinClass = TabBarLastTabSkin;
}
if (!middleButton) {
middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
middleButton.skinClass = TabBarLastTabSkin;
}
super.createChildren();
}
}
}
Not getting so much in details, you must know that this custom class TabBarSkin inherits from TabbedViewNavigatorTabBarSkin which has 3 skin classes for each of the significant tab positions / first / mid / last / in your #tabBar. In the most simple situation we must implement (extend) two of them / first / and / last -> as the / mid / position also uses the / last / skin, and in this case we don't need it separately implemented.
/* TabBarFirstTabSkin Class */
package com.myapp.skins
{
import spark.components.Group;
import spark.skins.mobile.TabbedViewNavigatorTabBarFirstTabSkin;
public class TabBarFirstTabSkin extends TabbedViewNavigatorTabBarFirstTabSkin
{
private var __iconGroup : Group = null;
public function TabBarFirstTabSkin() {
super();
}
override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
super.layoutContents(unscaledWidth, unscaledHeight);
if(!__iconGroup) {
__iconGroup = getIconDisplay() as Group;
}
}
}
}
Same as for the / last / one:
/* TabBarLastTabSkin Class */
package com.myapp.skins
{
import spark.components.Group;
import spark.skins.mobile.TabbedViewNavigatorTabBarLastTabSkin;
public class TabBarLastTabSkin extends TabbedViewNavigatorTabBarLastTabSkin
{
private var __iconGroup : Group = null;
public function TabBarLastTabSkin() {
super();
}
override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
super.layoutContents(unscaledWidth, unscaledHeight);
if(!__iconGroup) {
__iconGroup = getIconDisplay() as Group;
}
}
}
}
Finally, the __iconGroup member will now have reference to the Group visual component containing your icon! -> and which you defined in your ViewNavigator instance through mxml / or in AS3 code. Now we can go dirty ;) and do things like this for example:
.
.
.
var colorTransform : ColorTransform = new ColorTransform();
colorTransform.color = 0xFF3300;
colorTransform.alphaMultiplier = 0.85;
__iconGroup.transform.colorTransform = colorTransform;
.
.
.
Which will colorise your icon in red and give alpha 0.85. etc ... This is really the basics you can do with spark #tabBar skinning in Flex Mobile. Hope will help someone. Cheers.