8 Replies Latest reply on Sep 22, 2011 2:27 AM by Designscripting

    TabbedViewNavigator without the ActionBar

    robertsq

      Hello everybody !

       

      I'm a beginner in Flex mobile development and I'm trying to do my first application.
      I created a ViewNavigatorApplication and the first view of this one is a TabbedViewNavigator. When I launch the application, there is two Action bar : the ViewNavigator one and the TabbedViewNavigator one. Is it possible to remove the last one ? Both of them ?

       

      Thank you a lot.

       

      Regards,

      Sébastien

        • 1. Re: TabbedViewNavigator without the ActionBar
          Rangora Level 3

          In the design view, double click on the action bar (or the title). The properties window will show you 2 checkbox, 1 for each action bar.

           

          You can also remove them in the mxml declaration of the view by changing tabBarVisible and actionbarVisible attributes.

          1 person found this helpful
          • 2. Re: TabbedViewNavigator without the ActionBar
            robertsq Level 1

            Ok thank you for the infrormation but it's doesn't work for the TabViewNavigator action bar...

            When I set the property :

            actionBarVisible="false"
            

             

            It works for the ViewNavigator action bar but not for the TabViewNavigator...

             

            Here is my code :

            <?xml version="1.0" encoding="utf-8"?>
            <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" title="Météo" tabBarVisible="false">
                 <fx:Declarations>
                      <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
                 </fx:Declarations>
                 
                 <s:actionContent>
                      <s:Button label="Home" height="100" click="navigator.pushView(InfosView)"/>
                 </s:actionContent>
                 
                 <s:TabbedViewNavigator height="100%" width="100%" change="trace('change')">
                      <s:ViewNavigator label="Composants" width="100%" height="100%" icon="img/icone.png" firstView="views.ComposantsView"/>
                      <s:ViewNavigator label="Infos" width="100%" height="100%" icon="img/twitter.png" firstView="views.TestsView"/>
                 </s:TabbedViewNavigator>
            </s:View>
            
            

             

            But, the TabViewNavigator action bar still appears...

             

            And, do you know how we can enable the design button ? Because mine isn't enabled for my Flex mobile project.

             

            Thanks a lot !

             

            Regards,

            Sébastien

            • 3. Re: TabbedViewNavigator without the ActionBar
              Barno7 Level 1

              try tu use visible="false"  inside <s:ViewNavigator>

               

              like

               

              <s:ViewNavigator label="HomePage" width="100%" height="100%" firstView="views.Home" visible="false"/>

              • 4. Re: TabbedViewNavigator without the ActionBar
                robertsq Level 1

                If you mean that :

                <s:TabbedViewNavigator height="100%" width="100%" change="trace('change')">
                     <s:ViewNavigator label="Composants" width="100%" height="100%" icon="img/icone.png" firstView="views.ComposantsView" visible="false"/>
                     <s:ViewNavigator label="Infos" width="100%" height="100%" icon="img/twitter.png" firstView="views.TestsView" visible="false"/>
                </s:TabbedViewNavigator>
                

                 

                It doesn't change anything...

                • 5. Re: TabbedViewNavigator without the ActionBar
                  robertsq Level 1

                  And my design mode isn't enabled, so I have to do this with the MXML declaration...

                  Any ideas ?

                   

                  Thanks a lot !

                  • 6. Re: TabbedViewNavigator without the ActionBar
                    robertsq Level 1

                    I searched a lot but I didn't find anything !

                    Can someone help me pleaaase ?

                    • 7. Re: TabbedViewNavigator without the ActionBar
                      chiedozi

                      To hide the inner actionBar, you'll want to do one of the following:

                       

                      1) Set actionBarVisible to false on the ComposantsView and TestView

                      2) Reskin the inner navigators to not show an ActionBar

                       

                      Let me know how that works.

                      Chiedo

                      • 8. Re: TabbedViewNavigator without the ActionBar
                        Designscripting

                        The ActionBar control can be removed or disbled from Flex 4.5 mobile application by ViewNavigator.hideActionBar() to hide or remove the ActionBar control from all the views controlled by the ViewNavigator.

                         

                        Article source to TabbedViewNavigator without the ActionBar

                         

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <components:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:components="spark.components.*" xmlns:views="views.*"
                         creationComplete="creationCompleteHandler(event);">
                         <fx:Script>
                         <![CDATA[
                         import mx.events.FlexEvent;
                        
                         protected function creationCompleteHandler(event:FlexEvent):void {
                         // Access the ViewNavigator using the ViewNavigatorApplication.navigator property.
                         home.hideActionBar();
                         }
                         ]]>
                         </fx:Script>
                        
                         <fx:Declarations>
                         <!-- Place non-visual elements (e.g., services, value objects) here -->
                         </fx:Declarations>
                         <views:Home id="home" label="Home" />
                         <views:Flash id="flash" label="Flash"/>
                         <views:Flex id="flex" label="Flex"/>
                        </components:TabbedViewNavigatorApplication>