Question

My goal

I’d like to make an application for PlayBook (using Flex) that has the UI similar to the PlayBook web browser. By similar I mean I want to implement a menu that is shown when the user swipes down from the top bezel of the tablet. I like this feature because I can draw on it, place tons of other objects and handle all kind of events without using screen space when not needed. Plus the PlayBook does not have a “Menu” button like some phones have.

Depending on configurations chosen from the first view a number of other views will be pushed onto the the stack view. When the user will access the pull down menu I’d like to show in form of thumbnail snapshot my main (configuration view) and the rest of the views that are on the view stack. This will basically show the user what is going on in different view and let him choose to which one to switch.

Achieved so far

The menu is accessible from any view, but the code for event handler is in my main MXML file (project.MXML), I found this to be the only way of having one menu for all the views.
I managed to pull down the menu from any view and displaying a thumbnail of the current view.

My problem

How to get access to all the views. I’ve been trying all day and all my trials give me access to the active view and my menu object. Here is some code to show what is going on:

// This is in my default view MXML

navigator.pushView(MainView);
navigator.pushView(SecondView);
navigator.pushView(ThirdView);
navigator.pushView(FourthView);

…….

// And this is where I try to gain access to my Views (in the Project.MXML)

var totalViews:int = navigator.length;//Length is 5 (4 Views plus menu which is wright)
var obj:Object;

for(var i:int = 0; i < totalViews; ++i)
{
    obj = navigator.getElementAt(i);// Tried child here, it's not working either
    var currentThumbnail:Preview = new Preview();
    var bmData:BitmapData        = new BitmapData( obj.stage.width, obj.stage.height );

    bmData.draw(obj.stage);
    currentThumbnail.setSize( m_previewH, m_previewW );
    currentThumbnail.setBitmap( bmData );
    currentThumbnail.setLayoutBoundsPosition(i * m_previewW + PREVIEW_GAP * i, 10);
    slideMenu.addChild( currentThumbnail );

    trace(i.toString() + " " + obj.toString());
}

As I mentioned above this for loop will successfully do the job for the current view then it will crash.Does anyone know how to loop through all the views?

This is my first application with flex so if there are any alternatives to my approach I’ll be glad to try them. Although I’d like to stick with a single ViewNavigator as opposed to tabbed navigator and multiple views instead of states, I don’t mind suggestions from that side.

TIA.

Answer 1

I’m pretty sure that for memory consumpation reasons Flex will not keep more than one instance of the view in memory at a time. So, looping over the number of views and trying to access the instance of that view will cause issues; because the view is essentially created every time it is displayed and destroyed every time it is hidden.

To do what you want to do, I think you’re going to have to create the view snapshots on your own. Perhaps as in memory bitmaps that will exist even if the view isn’t on screen. Or perhaps you’ll want to save them temporarily to disk for memory purposes. Or even better, you could provide “pre-rendered” images.

Anyway, then keep a list of the images as they relate to the views and display them in your “Display Shelf” style menu.