Decorated LinkBar component
In my last article I demonstrated how to create like picnik.com TabNavigator. Now, it is time to move forward and try to create decorated LinkBar component. In this article I will show how to add triangle garland under selected item and move it when you change selected item.
So, lets extend LinkBar bass class and add garland under selected item.
public class ExtendedLinkBar extends LinkBar
Because we need to add garland under LinkBar component we need to create UIComponent type variable which will contain graphics.
private var uiComponentContainer : UIComponent = new UIComponent();
In UIContainer we can draw anything we like, even place images, icons etc. Procedure which draw garland may look like below.
private function CreateGarlandContainer(): void {
uiComponentContainer.name = "bottomGarland";
uiComponentContainer.graphics.beginFill(GarlandBgColor,1);
uiComponentContainer.graphics.lineStyle(2, GarlandBgColor, 0, false, "normal", "square", "miter", 1);
uiComponentContainer.graphics.moveTo(0, 0 );
uiComponentContainer.graphics.lineTo(GarlandWidth /2, GarlandHeight);
uiComponentContainer.graphics.lineTo(GarlandWidth, 0);
uiComponentContainer.graphics.lineTo(0, 0);
uiComponentContainer.graphics.endFill();
uiComponentContainer.graphics.lineStyle(3, GarlandShadowColor, 0.3, false, "normal", "round", "bevel", 0);
uiComponentContainer.graphics.moveTo(0, 0 );
uiComponentContainer.graphics.lineTo(GarlandWidth/2, GarlandHeight);
uiComponentContainer.graphics.lineTo(GarlandWidth, 0);
uiComponentContainer.graphics.lineStyle(2, GarlandBgColor, 1, false, "normal", "round", "miter", 1);
uiComponentContainer.graphics.moveTo(0, 0 );
uiComponentContainer.graphics.lineTo(GarlandWidth, 0);
GarlandCreated = true;
}
Since our component contains garland all we need is add container to display list. To do so, you need to call addChild function and refresh linkbar size by calling setActualSize function.
this.parent.addChild(uiComponentContainer);
this.setActualSize (this.getExplicitOrMeasuredWidth(),
this.getExplicitOrMeasuredHeight());
Please notice I do not add UIComponent container to bass LinkBar class, instead of this I am adding to LinkBar parent. Purpose is quite simple, if you add UIComponent container it can be overlapped by other components linked to LinkBar (like Canvas, VBox). Remember to refresh LinkBar class to get updated size.
To achieve nice dynamic garland move behavior I calculate distance between previous and currently selected link bar button and move garland on time event.
private function timerHandler(event:TimerEvent):void {
var GarlandXPos : int = GarlandNewXPos - (GarlandXStep * (GarlandMoveSteps - GarlandMoveTimer.currentCount) );
uiComponentContainer.move( GarlandXPos , this.height );
}
Result you can see beneath. Right click on mouse if you want to see the code.