{"id":497,"date":"2011-02-03T19:39:25","date_gmt":"2011-02-04T02:39:25","guid":{"rendered":"http:\/\/www.nayansavla.com\/blog\/?p=497"},"modified":"2011-02-03T19:43:54","modified_gmt":"2011-02-04T02:43:54","slug":"creating-bottom-navigation-bar-flex-mobile-part-2","status":"publish","type":"post","link":"https:\/\/www.nayansavla.com\/blog\/?p=497","title":{"rendered":"Creating Bottom Navigation Bar Flex Mobile Part 2"},"content":{"rendered":"

In my earlier post<\/a> i wrote about a way how you can create a bottom navigation bar in your Flex mobile applications. But recently i came across TabbedMobileApplication which has a Tabbar component built in but the tabbar is on top.
\n
\nIt was fairly easy for me to modify the skin for this application’s TabbedViewNavigator component so that it would have the tabbar in bottom and the viewnavigator on top.
\n
\nThis is how the application looks,
\n
\n\"\"
\n
\nI just copied the skin file from TabbedViewNavigatorSkin and modified it little to achieve the result.
\n
\nThis is how my custom skin class looks as below, you can download the project file here<\/a>.
\n<\/p>\n

package skins {<\/span>
\n    import<\/span> spark.components<\/span>.ButtonBar<\/span>;
\n    import<\/span> spark.components<\/span>.Group<\/span>;
\n    import<\/span> spark.skins<\/span>.mobile<\/span>.TabbedViewNavigatorSkin<\/span>;
\n    import<\/span> spark.skins<\/span>.spark<\/span>.ButtonBarSkin<\/span>;
\n   
\n    public<\/span> class<\/span> MySkin extends<\/span> TabbedViewNavigatorSkin {<\/span>
\n       
\n        public<\/span> function<\/span> MySkin(<\/span>)<\/span> {<\/span>
\n            super<\/span>(<\/span>)<\/span>;
\n        }<\/span>
\n       
\n       
\n        protected override function<\/span> createChildren(<\/span>)<\/span>:void<\/span>{<\/span>
\n            contentGroup = new<\/span> Group(<\/span>)<\/span>;
\n            contentGroup.id<\/span> = "contentGroup"<\/span>;
\n           
\n            tabBar = new<\/span> ButtonBar(<\/span>)<\/span>;
\n            tabBar.id<\/span> = "tabBar"<\/span>;
\n            tabBar.requireSelection<\/span> = true<\/span>;
\n            tabBar.setStyle<\/span>(<\/span>"skinClass"<\/span>, ButtonBarSkin)<\/span>;
\n            tabBar.height<\/span> = 40<\/span>;
\n            addChild(<\/span>tabBar)<\/span>;
\n            addChild(<\/span>contentGroup)<\/span>;
\n           
\n        }<\/span>
\n       
\n        override protected function<\/span> updateDisplayList(<\/span>unscaledWidth:Number<\/span>, unscaledHeight:Number<\/span>)<\/span>:void<\/span>
\n        {<\/span>
\n            super<\/span>.updateDisplayList<\/span>(<\/span>unscaledWidth, unscaledHeight)<\/span>;
\n           
\n            var<\/span> tabBarHeight:Number<\/span> = 0<\/span>;
\n           
\n            if<\/span> (<\/span>tabBar.includeInLayout<\/span>)<\/span>
\n            {<\/span>
\n                tabBarHeight = Math<\/span>.min<\/span>(<\/span>tabBar.getPreferredBoundsHeight<\/span>(<\/span>)<\/span>, unscaledHeight)<\/span>;
\n                tabBar.setLayoutBoundsSize<\/span>(<\/span>unscaledWidth, tabBarHeight)<\/span>;
\n               
\n                tabBarHeight = tabBar.getLayoutBoundsHeight<\/span>(<\/span>)<\/span>;
\n            }<\/span>
\n           
\n            if<\/span> (<\/span>currentState == "portraitAndOverlay"<\/span> ||<\/span> currentState == "landscapeAndOverlay"<\/span>)<\/span>
\n            {<\/span>
\n                tabBar.alpha<\/span> = .6;
\n               
\n                if<\/span> (<\/span>contentGroup.includeInLayout<\/span>)<\/span>
\n                {<\/span>
\n                    contentGroup.setLayoutBoundsSize<\/span>(<\/span>unscaledWidth, unscaledHeight)<\/span>;
\n                    contentGroup.setLayoutBoundsPosition<\/span>(<\/span>0<\/span>, 0<\/span>)<\/span>;
\n                }<\/span>
\n            }<\/span>
\n            else<\/span>
\n            {<\/span>
\n                tabBar.alpha<\/span> = 1.0<\/span>;
\n               
\n                if<\/span> (<\/span>contentGroup.includeInLayout<\/span>)<\/span>
\n                {<\/span>
\n                    var<\/span> contentGroupHeight:Number<\/span> = Math<\/span>.max<\/span>(<\/span>unscaledHeight - tabBarHeight, 0<\/span>)<\/span>;
\n                   
\n                    contentGroup.setLayoutBoundsSize<\/span>(<\/span>unscaledWidth, contentGroupHeight)<\/span>;
\n                    contentGroup.setLayoutBoundsPosition<\/span>(<\/span>0<\/span>, 0<\/span>)<\/span>;
\n                }<\/span>
\n                if<\/span> (<\/span>tabBar.includeInLayout<\/span>)<\/span>{<\/span>
\n                    tabBar.setLayoutBoundsPosition<\/span>(<\/span>0<\/span>, contentGroupHeight)<\/span>;
\n                }<\/span>
\n            }<\/span>
\n        }<\/span>
\n       
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

\n<\/p>\n","protected":false},"excerpt":{"rendered":"

In my earlier post i wrote about a way how you can create a bottom navigation bar in your Flex mobile applications. But recently i came across TabbedMobileApplication which has a Tabbar component built in but the tabbar is on top. It was fairly easy for me to modify the skin for this application’s TabbedViewNavigator […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,64],"tags":[],"class_list":["post-497","post","type-post","status-publish","format-standard","hentry","category-flex","category-mobile"],"_links":{"self":[{"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=497"}],"version-history":[{"count":0,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/497\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}