Build a local menu in flex mobile

Adobe Flash Builder 4 Simplified Chinese official edition Windows Version click to download: http://g.csdn.net/5134151

Adobe Flash Builder 4 Simplified Chinese official Mac version click to download: http://g.csdn.net/5134152

Adobe online classroom: http://adobev.csdn.net/zx/index.html

Adobe platform Technology Summit course video: http://adobev.csdn.net/

Flex mobile now integrates most of the content and functions of the local Android API, from the acceleration table, to the toolbar, to the microphone, most of the functions required to build a localized program can be easily executed. The default menu component is an exception. As long as you click the menu button (Standard settings on the Android phone), this menu is usually visible at the bottom of the screen, it also contains a program-specific menu or a specific menu designed based on the user's screen.

 

Flex mobile now only has beta version, but this feature will definitely appear in the android roadmap, probably before the full version is released. At the same time, I will show you how to execute the "local" menu on flex mobile. I recently built a menu for flex mobile as part of my Max volume project. Max volume is a social jukebox. mobile app users can browse music libraries and select the next song they want to listen. Our menus are first used to navigate between different windows. Each window allows users to organize or browse music libraries based on their preferences.

 

For more information, read our presentation on Adobe Max on Adobe TV and learn more about this advanced project, and how to start using Flex mobile. Now, let's start making this menu object. First, you need to observe when the user will click the menu. Menu is now a key on the keyboard object, so it is easy to listen to menu events:

This. View. addeventlistener (keyboardevent. key_down, _ onkeydown );

 

Listening function:

Private function _ onkeydown (Event: keyboardevent): void {

If (event. keycode = keyboard. Menu ){

// Code to handle the menu event goes here

}

}

 

In a common network or desktop program, this is what you need-to listen to events and build your menu objects. Flex Mobil adds complexity because the program is basically a viewstack object, which means that you may have one (only one) screen of many different visual screens at any given time. You can execute your menu (as a component) on each screen, but this is not the ideal state. Most programs only need a global menu and overwrite it on a single screen that requires advanced menu functions. The global menu should be executed once and can be read from any address-re-execute this function, even if it is componentized, "it consumes" no waste of memory when we program for mobile devices. So where can I place the menu processor? In Flex mobile, the basic program object is mobileapplication. It defines the global actionbar content (at the top of the screen; program title), such as a title or program logo. in my opinion, this is why we need to listen to menu events and execute our menu objects.

 

In max volume, we use robotlegs micro-architecture, so we actually need to add the required code to listen to menu click events in the main program mediator class. This mediator contains a reference for the main mobileapplication class, which is responsible for building the menu object and inserting it into the element list of the current window. My complete method includes a processor to overwrite the backend and search buttons, so it is shown as follows:

Private function _ onkeydown (Event: keyboardevent): void {

If (event. keycode = keyboard. Back ){

Event. preventdefault ();

} Else if (event. keycode = keyboard. Menu ){

Event. preventdefault ();

View. togglemenu ();

} Else if (event. keycode = keyboard. Search ){

Event. preventdefault ();

}

}

 

Event. preventdefault (); call. When the button is pressed, the built-in Android function is blocked. The back key may cause the Android system to "return", while the "Search" key may execute the global search function. Prevent these events from exceeding the control of our program so that we can effectively control them in our context.

 

Return to the main mobileapplication window object, and the trigger menu code is complicated.

First, we need to remove the menu from another window. If a menu is opened in a different window, make sure that the menu is closed before being moved to the current window.

Next, we need to hide or display the Window Based on the menu status. To do this, I first try to remove the menu. I used status variables to track the window of the last release menu. It is possible that the menu cannot be removed. I will handle this error. Of course, I have not performed any operations in the processor. I also used a status variable tracking menu for visibility. This process of removing the menu partially resets the state variable.

Public Function togglemenu (): void {

// If the menu is visible but not on the current view, hide it and then show it again

If (menuview! = NULL & menuview! = This. Navigator. activeview) {d

Try {

Removemenu ();

} Catch (E: Error ){}

Showmenu ();

} Else if (menuvisible ){

Hidemenu ();

} Else {

Showmenu ();

}

} Private function removemenu (Event: event = NULL): void {

Menuview. removeelement (menu );

Menuvisible = false;

}

 

Finding errors in an empty processor is obviously not the best strategy. However, I still saw such errors during development. It makes no sense, but it is a bug in the beta framework. The menu is removed. I don't think the code needs to be modified now. Next, let's see how to show and hide menu objects.

Public Function hidemenu (): void {

Menuview. removeelement (menu );

Menuvisible = false;

}

Public Function showmenu (): void {

Menuview = This. Navigator. activeview;

Menu. Y = menuview. Height-menu. height;

Menuview. addelement (menu );

Menuvisible = true;

}

 

That's it. The real menu object I executed in this case is a simple group object with four buttons. The menu itself is mediated (according to the best policy of robotlegs), and the mediator monitors click events on different buttons in the menu. Each button pushes different windows into the main menu navigation bar, so that our menu can only be used for navigation.

The code of the menu object is as follows:

<? XML version = "1.0" encoding = "UTF-8"?>

<S: group xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" Height = "209" width = "100%">

<S: vgroup Height = "100%" width = "100%">

<S: hgroup Height = "100%" width = "100%">

<S: button id = "songsbtn"

Height = "100%" width = "100%"

Label = "Songs"/>

<S: button id = "nowplayingbtn"

Height = "100%" width = "100%"

Label = "Now playing"/>

</S: hgroup>

<S: hgroup Height = "100%" width = "100%">

<S: button id = "albumsbtn"

Height = "100%" width = "100%"

Label = "albums"/>

<S: button id = "artistsbtn"

Height = "100%" width = "100%"

Label = "artists"/>

</S: hgroup>

</S: vgroup>

</S: group>

 

My menu mediator:

Package com. paitiveui. maxpower. Mobile. application. Views. COMPONENTS {

Import com. titiveui. maxpower. Mobile. application. Models. mobilemusicmodel;

Import com. Alibaba tiveui. maxpower. Mobile. application. Views. albumsview;

Import com. Alibaba tiveui. maxpower. Mobile. application. Views. artistsview;

Import com. javastiveui. maxpower. Mobile. application. Views. songsview;

Import flash. Events. event;

Import flash. Events. mouseevent;

Import MX. Collections. arraycollection;

Import org. robotlegs. MVCs. Mediator;

Import spark. components. view;

Public class menumediator extends mediator {

[Inject]

Public var view: menu;

[Inject]

Public var musicmodel: mobilemusicmodel;

Override public function onregister (): void {

Eventmap. maplistener (view. artistsbtn, mouseevent. Click, onartists );

Eventmap. maplistener (view. albumsbtn, mouseevent. Click, onalbums );

Eventmap. maplistener (view. songsbtn, mouseevent. Click, onsongs );

Eventmap. maplistener (view. nowplayingbtn, mouseevent. Click, onnowplaying );

}

Private function onartists (Event: Event): void {

(View. Parent as view). Navigator. poptofirstview ();

(View. Parent as view). Navigator. pushview (artistsview );

}

Private function onalbums (Event: Event): void {

(View. Parent as view). Navigator. poptofirstview ();

Musicmodel. currentalbums = musicmodel. safealbums;

(View. Parent as view). Navigator. pushview (albumsview );

}

Private function onsongs (Event: Event): void {

(View. Parent as view). Navigator. poptofirstview ();

Musicmodel. currentalbums = NULL;

Musicmodel. currentsongs = musicmodel. musicfiles;

(View. Parent as view). Navigator. pushview (songsview );

}

Private function onnowplaying (Event: Event): void {

(View. Parent as view). Navigator. poptofirstview ();

}

}

}

With this system, your menu can truly contain any content from simple navigation buttons, just like those advanced UI components that have their own interactions.