5 Replies Latest reply on Jul 12, 2011 2:02 PM by Shongrunden

    Trying to skin ActionBar in flex 4.5 mobile

    mikmiki Level 1

      Hi,

      i'm trying to add a backgound image to the ActionBar. there isn't enough samples on the web but i tried to do it by skining the action bar as follows:

      1. extending the action bar skin

      public

       

       

       

       

       

      class CustomActionBarSkin extends ActionBarSkin

      {

      [

      Embed(source='images/actionBar.png')]

      [

      Bindable]

       

      public var imgCls:Class;

       

      public var backgroundImage:Image=null;

       

      public function CustomActionBarSkin()

      {

       

      super();

      }

       

      override protected function createChildren():void

      {

       

       

      // image is below everything else in the display list

      backgroundImage =

       

      new Image();

       

      var imgObj:BitmapAsset = new imgCls() as BitmapAsset;

       

       

      // Write the modified object to the Image control.

      backgroundImage.source=imgObj;

       

      backgroundImage.fillMode = BitmapFillMode.REPEAT;

      addChild(backgroundImage);

       

       

       

      super.createChildren();

      }

       

      2. setting the style in my main window with css:

       

      <?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"

      width="

      400" height="422" applicationComplete="tabbedviewnavigatorapplication1_applicationCompleteHandler(event)">

       

       

      <fx:Style>

       

       

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

       

       

      s|TabbedViewNavigator #tabBar

      {

       

      skinClass: ClassReference("customSkins.TabbedViewNavigatorTabBarSkin");

       

      }

       

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

       

      s|ActionBar #actionBar

      {

       

      skinClass: ClassReference("customSkins.CustomActionBarSkin");

      }

       

       

       

      </fx:Style>

       

       

      <fx:Declarations>

       

      <!-- Place non-visual elements (e.g., services, value objects) here -->

       

      </fx:Declarations>settin

       

       

       

      <s:ViewNavigator id="navigator" width="100%" height="100%" firstView="views.LoginView" >

       

       

      </s:ViewNavigator>

       

      <s:ViewNavigator id="ratesnavigator" label="Rates" width="100%" height="100%" firstView="views.RatesView"/>

       

      <s:ViewNavigator label="Positions" width="100%" height="100%" firstView="views.PositionsView"/>

       

      <s:ViewNavigator label="Portfolio" width="100%" height="100%" firstView="views.PortfolioView"/>

       

       

      <fx:Script >

      <![CDATA[

       

      import mx.events.FlexEvent;

       

       

      import views.LoginView;

       

      import views.RatesView;

       

       

      protected function tabbedviewnavigatorapplication1_applicationCompleteHandler(event:FlexEvent):void

      {

       

      // TODO Auto-generated method stub

       

      ratesnavigator.pushView(views.RatesView);

      }

       

      ]]>

       

      </fx:Script>

      </s:TabbedViewNavigatorApplication>

       

       

      the result is that the tab bar is skinned and modfied and the action bar fails to init. (putting a break point doesn't reach the method overrided)

       

      anyone tried it before? any other way to background image the action bar?