9 Replies Latest reply on Nov 24, 2010 1:52 PM by Yozef0

    Place spark TabBar on Bottom of ViewStacks (+ rounded corners pointing downwards)

    Yozef0 Level 1

      Why is it so hard to do such a simple thing... I figure also it must be a very common thing.

       

       

      <s:VGroup horizontalAlign="center" horizontalCenter="0" verticalCenter="0" gap="0">
          <mx:ViewStack id="view" width="450" height="300" />
          <!-- NavigatorContent dynamically gets added to view on appComplete-->
          <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" />
      </s:VGroup>
      
      

       

       

      The Custom Skin:

       

       

      <s:Skin 
      xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:fb="http://ns.adobe.com/flashbuilder/2009"     
      alpha.disabled="0.5"><fx:Metadata>
          <![CDATA[ 
          [HostComponent("spark.components.TabBar")]
          ]]>
      </fx:Metadata> 
      
      <fx:Script  fb:purpose="styling" >
          <![CDATA[ 
      
          import mx.core.UIComponent;
      
          /**  Push the cornerRadius style to the item renderers.*/
          override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void {
              const numElements:int = dataGroup.numElements;
              const cornerRadius:int = hostComponent.getStyle("cornerRadius");
      
              for (var i:int = 0; i < numElements; i++) {
                  var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
                  if (elt)
                      elt.setStyle("cornerRadius", cornerRadius);
              }
              super.updateDisplayList(unscaledWidth, unscaledHeight);
          }
      
          ]]>            
      </fx:Script>
      <s:states>
          <s:State name="normal" />
          <s:State name="disabled" />
      </s:states>
      <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
      <s:DataGroup id="dataGroup" width="100%" height="100%">
      
      

       

       

       

      Comes out with this component:

      tabExample.png

      I would like to place that TabBar at the Bottom of the viewstack, rounded corners pointing outwardly.

       

       

       

      if I add rotation="180" to the TabBar <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" rotation="180"/> will make the matter all the more laughable. I don't understand why is it so hard to create a TabNavigator with the buttons on the bottom?!

        • 2. Re: Place spark TabBar on Bottom of ViewStacks (+ rounded corners pointing downwards)
          kevinklin Adobe Employee

          Hi,

           

          What itemRenderer are you using for your DataGroup? The itemRenderer will use the cornerRadius style to round the corners.

           

          The default skin for TabBar has this:

           

           ...
              <s:DataGroup id="dataGroup" width="100%" height="100%">
                  <s:layout>
                      <s:ButtonBarHorizontalLayout gap="-1"/>
                  </s:layout>
                  <s:itemRenderer>
                      <fx:Component>
                          <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
                      </fx:Component>
                  </s:itemRenderer>
              </s:DataGroup>
          ...
          

           

          I think you want to use a custom skin for the ButtonBarButton to use cornerRadius on the bottom instead of the top. Let me know if that works.

           

          -Kevin

          1 person found this helpful
          • 3. Re: Skinning TabBar - Label not showing
            Yozef0 Level 1

            Alright, I solved it by using Flash Catalyst... at least its' a simple way...

             

            So what I did was, Skinned it in Photoshop, imported it to Catalyst, and did the ncessary (convert to button, and select the label for it) and imported it into Flash Builder 4.

             

            I added the following component in Main:

             

            <mx:ViewStack id="view" width="450" height="300"  x="33" y="70"/>
            <s:TabBar id="tabBar" dataProvider="{view}" skinClass="components.CustomSparkTabBarSkin" y="375" x="32"/>
            
            

             

             

            The component.CustomSparkTabBarSkin

             

            ...
            
            <s:DataGroup id="dataGroup" width="100%" height="100%">
                <s:layout>
                    <s:ButtonBarHorizontalLayout gap="4"/>
                </s:layout>
            
            
                <s:itemRenderer>
                   <fx:Component>
                       <s:ButtonBarButton skinClass="components.TabButton" buttonMode="true"/>
                   </fx:Component>
                </s:itemRenderer>
            ...
            
            

             

             

            The components.TabButton (generated by Flash Catalyst)

             

            <s:Group d:userLabel="Tab Button 1" x="0" y="0">
                 <s:BitmapImage smooth="true" source="@Embed('/assets/images/Game Tab Navigator/Buttonec.png')" d:userLabel="Button 99c" x="4" y="0"/>
                 <s:RichText alpha="0.95" color="#725b3c" fontFamily="Bebas" fontSize="18" height="20" lineHeight="120%" textAlign="center" d:userLabel="hello" whiteSpaceCollapse="preserve" width="62" x="0" y="24" x.up="0" y.up="14">
                      <s:content>
                           <s:p>
                           <s:span>Hello</s:span>
                           <s:span baselineShift="2" fontFamily="Myriad Pro" fontSize="17" fontWeight="bold">¢</s:span>
                           </s:p>
                    </s:content>
                 </s:RichText>
            </s:Group>
            
            

             

             

            Now the problem is... When I label my NavigatorContent, and dynamically added to the ViewStack (which is the dataprovider of the TabBar), the TabBar don't show the labels...

             

            Even though it's hardcoded in the example above to show Hello ... Nothing shows.

             

            What am I missing?

            TabLabels_Spark.png

            • 4. Re: Skinning TabBar - Label not showing
              kevinklin Adobe Employee

              Set the id of the RichText to be "labelDisplay" should do it. Doing this makes the RichText the "labelDisplay" skin part of the button. The RichText will then show the label of the button.

               


              <s:Group d:userLabel="Tab Button 1" x="0" y="0">
                   <s:BitmapImage smooth="true" source="@Embed('/assets/images/Game Tab Navigator/Buttonec.png')" d:userLabel="Button 99c" x="4" y="0"/>
                   <s:RichText id="labelDisplay" alpha="0.95" color="#725b3c" fontFamily="Bebas" fontSize="18" height="20" lineHeight="120%" textAlign="center" d:userLabel="hello" whiteSpaceCollapse="preserve" width="62" x="0" y="24" x.up="0" y.up="14">
                   </s:RichText>
              </s:Group>

               

              You'll also want to remove the content.

               

              -Kevin

              • 5. Re: Skinning TabBar - Label not showing
                Yozef0 Level 1

                I had a similar idea, by labeling it 'label'.

                 

                Thank you very much Kevin for your help. I tried setting the id to labelDisplay

                 

                That didn't work...I removed the content to look as so:

                <s:RichText id="labelDisplay" 
                alpha="0.95" color="#725b3c" 
                fontFamily="Bebas" fontSize="18" height="20" lineHeight="120%" 
                textAlign="center" d:userLabel=".99¢" whiteSpaceCollapse="preserve" 
                width="62" x="0" y="24" x.up="0" y.up="14" />
                
                

                • 6. Re: Skinning TabBar - Label not showing
                  kevinklin Adobe Employee

                  That seems to be correct. One thing that might be happening is that the height is too small. Try removing height="20" and see if that helps? Or even remove width, height, x and y, and replace them with left, right, top, bottom constraints.

                   

                  If not, could you attach the code and I'll take a look?

                   

                  -Kevin

                  • 7. Re: Skinning TabBar - Label not showing
                    Yozef0 Level 1

                    I've removed all properties, and simply kept the id="labelDisplay".

                     

                    The whole class is:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" height.up="45" width.up="62">
                         <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
                    
                         <s:states>
                              <s:State name="up"/>
                              <s:State name="over"/>
                              <s:State name="down"/>
                              <s:State name="upAndSelected" />
                              <s:State name="overAndSelected" />
                              <s:State name="downAndSelected" />
                              <s:State name="disabled"/>
                         </s:states>
                    
                         <s:Group d:userLabel="Tab Button 1" x="0" y="0">
                              <s:BitmapImage smooth="true" source="@Embed('/assets/images/Game Tab Navigator/Button 99c.png')" d:userLabel="Button 99c" x="4" y="0"/>
                              <s:RichText id="labelDisplay" />
                         </s:Group>
                    </s:Skin>
                    
                    

                     

                    The thing is, the way these tabs are being created is by the Main.mxml calls the server, and depending on the array I receive, I create these tabs... The Number of Tabs being created is correct, though it's the Label that's not showing.

                     

                    is It possible, this class should be a SkinComponent, not a Skin class?

                     

                    Also, if I hardcode <s:RichText id="labelDisplay" text="XX"/> also nothing shows...

                     

                    Even still if I:

                    protected function labelDisplay_creationCompleteHandler(event:FlexEvent):void

                    {

                        trace(labelDisplay.text);

                    }

                     


                    The trace gives me 4 (number of tab) blanks (new line) in the console

                    • 8. Re: Skinning TabBar - Label not showing
                      kevinklin Adobe Employee

                      This looks right. This is a skin for the ButtonBarButton component that you have in your custom tabbar skin.

                       

                      I would suggest hard coding some Navigators with labels into your ViewStack to check if its really a problem with the tabbar. It could be that the navigators aren't actually having their label property set. I'd try something like:

                       

                       

                          <mx:ViewStack id="view" width="450" height="300">
                              <s:NavigatorContent label="hello" />
                              <s:NavigatorContent label="tab2" />
                              <s:NavigatorContent label="hopethisworks3" />
                          </mx:ViewStack>
                      

                       

                      This should help isolate your problem.

                       

                      -Kevin

                      • 9. Re: Skinning TabBar - Label not showing
                        Yozef0 Level 1

                        Oh Myyy, solved... the problem was frommy end!

                         

                        Thank you very much kevinklin

                         

                        By the way it would not have worked without the id of the label to labelDisplay. Thanks again.