Flex Examples
This example is pretty similar to the previous entry “Adding icons to a Flex TabNavigator control” although it uses a TabBar control instead of a TabNavigator control. Well, that and this post doesn’t bother with an XML object and the DataGrid controls.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/21/adding-icons-to-a-flex-tabbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/bulletCheck.png")]
private var BulletCheck:Class;
[Bindable]
[Embed(source="assets/bulletWarning.png")]
private var BulletWarning:Class;
[Bindable]
[Embed(source="assets/bulletCritical.png")]
private var BulletCritical:Class;
]]>
</mx:Script>
<mx:VBox id="box" width="400" verticalGap="0">
<mx:TabBar id="tabBar"
direction="horizontal"
dataProvider="{viewStack}"
width="100%" />
<mx:ViewStack id="viewStack"
width="100%"
height="100"
backgroundColor="white"
borderSides="left bottom right"
borderStyle="solid"
borderThickness="1">
<mx:Canvas id="child1"
label="Success"
icon="{BulletCheck}">
<mx:Label text="one" />
</mx:Canvas>
<mx:Canvas id="child2"
label="Warning"
icon="{BulletWarning}">
<mx:Label text="two" />
</mx:Canvas>
<mx:Canvas id="child3"
label="Error"
icon="{BulletCritical}">
<mx:Label text="three" />
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Yeaahh, eso es justo lo q estaba buskando. Gracias amigos xD.
hi
i am developing one simple application
which contains 10 tabs over all but according to the user group
example:- 1.Admin 2.Developer 3.Tester 4.Trainee
i want show different tabs means for admin i want to show all
for tester i want to show 5 tabs
for developer i want to show 8 tabs
at the time of loading my application i am inserting all the items in tab bar and then removing the unwanted tabs using remove child but it is working for single time
if i loge3d in as a admin and then i login as tester and then again tester it is showing the eror
pls help me to solve this
Hi, I found this example a perfect resources for what I want to do except for one thing: how to declare an icon as a class when creating the tabBar dynamically from a list (that can differ time-to-time) of types of product.
In another words, I have to deal with different alternatives to show the different types of product available and for design purpose, I decided to opt for a tabBar. Until now everything is fine until I wanted to use the icon option you are proposing. This is agreat feature but I cannot create a public icon-class variable for each possible option – this will not be efficient as the types of product can be added by an admin of the application or can be removed from the same source. Is there any way to create a class to contain the icon dynamically?
Thank’s!
Francois-Yanick,
Try Ben Stucki’s IconUtility component: “IconUtility Component for Dynamic Run-Time Icons”.
Peter
Hi everybody and this blog owner :)
i’m totally new to flex.
currently i am using flex 3.
And i have some problems and hope u guys can help me and guide me.
I have one ADG(Advanced DataGrid) control and have several rows and columns.
My problem is I can’t add icon to other columns except first, tree columns.
I try and googling but found no example which explain how to do it.
I only found add icon to list, tab, etc.
i have tried and failed many times so i just drop a message here and hope u guys can help me.
thanks.
Hi
I want to change the icons when it selected and rollover.
Can you help me out on that?
Thanks
is it possible to add close buttons to tabbar with ability to close tabs, but without first one.
@Tomek,
I believe the 3rd party SuperTabBar supports close buttons and other stuff: http://code.google.com/p/flexlib/wiki/ComponentList
Peter