{"id":453,"date":"2010-11-08T11:32:56","date_gmt":"2010-11-08T18:32:56","guid":{"rendered":"http:\/\/www.nayansavla.com\/blog\/?p=453"},"modified":"2011-02-03T19:40:30","modified_gmt":"2011-02-04T02:40:30","slug":"creating-bottom-navigation-bar-in-flex-mobile-applications","status":"publish","type":"post","link":"https:\/\/www.nayansavla.com\/blog\/?p=453","title":{"rendered":"Creating Bottom Navigation Bar in Flex Mobile Applications"},"content":{"rendered":"

When Flex 4.5 “Hero” was announced at MAX i jumped on the chance to play with it. For those who want to get a good basic understanding of how it is different from traditional Flex Application development i would highly recommend this MAX session titled “Deep Dive into Mobile Development using Flex SDK<\/a>“.
\n
\nSo first thing when i started playing around was that i realized there was no easy way to have a bottom navigation menu like most of the apps. for eg. If you look at the apple app store in the bottom you see \u00a0the top navigation menu, middle content area and then the bottom bar. The image below explains what i mean by it.
\n
\n\"\"
\n
\nTo get this functionality where you have a constant bottom bar and then the views change when you select the buttons, you have to do little bit of coding and here is how you do it.
\n
\nThe project file can be downloaded here<\/a>.
\n
\nThis is the main file and we don’t have to make any changes to it, this is what you will get when you create a mobile application.
\n<\/p>\n

1
2
3
4
5
6
7
8
9
<\/div><\/td>
<<\/span> ?xml<\/span> version<\/span>="1.0"<\/span> encoding="utf-8"<\/span>?><\/span>
\n<<\/span>s :MobileApplication xmlns:fx="http:\/\/ns.adobe.com\/mxml\/2009"<\/span>
\n                     xmlns:s="library:\/\/ns.adobe.com\/flex\/spark"<\/span> firstView="views.bottombarHome"<\/span>><\/span>
\n    <<\/span>fx :Declarations><\/span>
\n        <!<\/span>-- Place non-visual elements (<\/span>e<\/span>.g<\/span>., services, value objects)<\/span> here --><\/span>
\n    <\/<\/span>fx><\/span>
\n   
\n    <<\/span>fx :Style source="style.css"<\/span> \/><\/span>
\n<\/<\/span>s><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

so now lets look at the first view file called bottombarHome, this is where all the action happens.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<\/div><\/td>
<<\/span> ?xml<\/span> version<\/span>="1.0"<\/span> encoding="utf-8"<\/span>?><\/span>
\n<<\/span>s :View xmlns:fx="http:\/\/ns.adobe.com\/mxml\/2009"<\/span> creationComplete="view1_creationCompleteHandler(event)"<\/span>
\n        xmlns:s="library:\/\/ns.adobe.com\/flex\/spark"<\/span> actionBarVisible="false"<\/span>><\/span>
\n    <\/<\/span>s><<\/span>s :layout><\/span>
\n        <<\/span>s :BasicLayout\/><\/span>
\n    <\/<\/span>s><\/span>
\n   
\n    <<\/span>fx :Script><\/span>
\n        <<\/span> !<\/span>[<\/span>CDATA[<\/span>
\n
\n           
\n            import<\/span> mx.events<\/span>.FlexEvent<\/span>;
\n           
\n            import<\/span> views.*<\/span>;
\n           
\n            protected function<\/span> one_clickHandler(<\/span>event:MouseEvent)<\/span>:void<\/span> {<\/span>
\n                \/\/ TODO Auto-generated method stub<\/span>
\n                if<\/span> (<\/span>!<\/span>(<\/span>myNavigator.activeView<\/span> is One)<\/span>)<\/span>
\n                    myNavigator.pushView<\/span>(<\/span>One)<\/span>;
\n            }<\/span>
\n           
\n            protected function<\/span> two_clickHandler(<\/span>event:MouseEvent)<\/span>:void<\/span> {<\/span>
\n                \/\/ TODO Auto-generated method stub<\/span>
\n                if<\/span> (<\/span>!<\/span>(<\/span>myNavigator.activeView<\/span> is Two)<\/span>)<\/span>
\n                    myNavigator.pushView<\/span>(<\/span>Two)<\/span>;
\n            }<\/span>
\n           
\n            protected function<\/span> three_clickHandler(<\/span>event:MouseEvent)<\/span>:void<\/span> {<\/span>
\n                \/\/ TODO Auto-generated method stub<\/span>
\n                if<\/span> (<\/span>!<\/span>(<\/span>myNavigator.activeView<\/span> is Three)<\/span>)<\/span>
\n                    myNavigator.pushView<\/span>(<\/span>Three)<\/span>;
\n            }<\/span>
\n               
\n            protected function<\/span> view1_creationCompleteHandler(<\/span>event:FlexEvent)<\/span>:void<\/span> {<\/span>
\n                \/\/ TODO Auto-generated method stub<\/span>
\n                systemManager.stage<\/span>.addEventListener<\/span>(<\/span>KeyboardEvent.KEY_UP<\/span>, deviceKeyUpHandler)<\/span>;
\n                \/\/add the first view when this view is created<\/span>
\n                myNavigator.pushView<\/span>(<\/span>One)<\/span>;
\n            }<\/span>
\n           
\n            \/\/this is required to handle the device back key<\/span>
\n            protected function<\/span> deviceKeyUpHandler(<\/span>event:KeyboardEvent)<\/span>:void<\/span> {<\/span>
\n                \/\/ TODO Auto-generated method stub<\/span>
\n                var<\/span> key<\/span>:uint = event.keyCode<\/span>;
\n               
\n                if<\/span> (<\/span>key<\/span> == Keyboard.BACK<\/span> &&<\/span> myNavigator.navigationStack<\/span>.length<\/span> ><\/span> 1<\/span>)<\/span>{<\/span>
\n                    myNavigator.popView<\/span>(<\/span>)<\/span>;
\n                }<\/span>
\n            }<\/span>
\n           
\n        ]<\/span>]<\/span>><\/span>
\n    <\/<\/span>fx><\/span>
\n   
\n    <<\/span>fx :Declarations><\/span>
\n        <!<\/span>-- Place non-visual elements (<\/span>e<\/span>.g<\/span>., services, value objects)<\/span> here --><\/span>
\n    <\/<\/span>fx><\/span>
\n
\n    <<\/span>s :VGroup height<\/span>="100%"<\/span> width<\/span>="100%"<\/span> gap="0"<\/span>><\/span>
\n        <<\/span>s :ViewNavigator id="myNavigator"<\/span> width<\/span>="100%"<\/span> height<\/span>="100%"<\/span> \/><\/span>
\n        <\/<\/span>s><<\/span>s :HGroup left<\/span>="0"<\/span> right<\/span>="0"<\/span> bottom="0"<\/span> gap="0"<\/span> width<\/span>="100%"<\/span> ><\/span>
\n            <<\/span>s :Button<\/span> label="One"<\/span> id="one"<\/span> click="one_clickHandler(event)"<\/span> \/><\/span>
\n            <<\/span>s :Button<\/span> label="Two"<\/span> id="two"<\/span> click="two_clickHandler(event)"<\/span> \/><\/span>
\n            <<\/span>s :Button<\/span> label="Three"<\/span> id="three"<\/span> click="three_clickHandler(event)"<\/span> \/><\/span>
\n           
\n        <\/<\/span>s><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\nok i have to admit, putting code like this doesn’t make any sense but you will have to trust me that when you run this application you will have a bottom navigation bar which stays in place all the time during lifetime of your application.
\n
\nThere might be other ways to do it and i would like to know but so far i have found this way to be effective.
\n
\nIt would be cool if inside the MobileApplication.as there would be this functionality to add a bottombar and then every view for that button has a “master” viewstack instead of one single viewstack as it is the case right now.
\n
\nThere is one more way of achieving this you can read about it here<\/a>.
\n
\n<\/p>\n","protected":false},"excerpt":{"rendered":"

When Flex 4.5 “Hero” was announced at MAX i jumped on the chance to play with it. For those who want to get a good basic understanding of how it is different from traditional Flex Application development i would highly recommend this MAX session titled “Deep Dive into Mobile Development using Flex SDK“. So first […]<\/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-453","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\/453","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=453"}],"version-history":[{"count":0,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/453\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nayansavla.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}