DualPanel Reversible Component

This week I’ve been discussing with Alberto from undefined.es different ways to implement a reversible panel. Basically a reversible panel would be a 2-sides panel. In the front part you could have the component or widget and in the back you could have a configuration panel (same concept as in the OSX Dashboard widgets).

One way to implement it, would be as an extended concept of a template component as explained in my previous post. It would basically be a template component with 2 customizable areas: the frontView and the backView. As a developer I’d then use it like:

<dualpanel:DualPanel
        width="200" height="200"
        transitionDuration="200">

        <dualpanel:frontView>
            <local:SampleComponent
                width="100%" height="100%"
                backgroundColor="0x000000"
                label="Front"/>
        </dualpanel:frontView>

        <dualpanel:backView>
            <local:SampleComponent
                width="100%" height="100%"
                backgroundColor="0x999999"
                label="Back"/>
        </dualpanel:backView>
</dualpanel:DualPanel>

The interesting thing about this component is that there’re a bunch of different ways to present 2 panels and to transition between them i.e. flip, wipe, zoom, etc. If we encapsulate the logic of having 2 areas or content holders we can extract the presentation or view customizations into skins.

See sample fullScreen
Browse code.

The component is implemented using states, although it could be implemented without using states to prevent the views to be mutually exclusive, the base idea would be essentially the same: define contentHolders where we addElements set in certain properties.

A very interesting feature we still to add is deferred instantiation of the frontView and backView. By typing frontView and backView as IDeferredInstance will prevent the application from paying the cost of initializing the views until the user actually wants to see them. This means that if the user doesn’t click on the button the back view won’t be instantiated.

This movie requires Flash Player 9

See sample fullScreen
Browse code.

If you use this component make sure you grab the one with deferred instantiation.

This is just a proof of concept and the code might have some problems. You can use it at your own risk.

9 Comments to “DualPanel Reversible Component”

  1. Template Components in Flex4 | rialvalue.com

    [...] In more complex scenarios where the template has more than one customizable area SkinnableContainer might not be the best choice. You can find further information about this scenario in the DualPanel component post. [...]

  2. pascualin 5 May 2010 at 9:04 pm #

    Thanks mate! I might use it in my current project if thats ok with you :)

  3. riavietnam 5 July 2010 at 6:19 pm #

    Hello,
    Could I implement the dualpanel and get the data of back view when I am at front view (without accessing the back view)

    Thanks.

  4. Xavi Beumala 6 July 2010 at 7:49 am #

    Hi riavietnam,

    yes, you could access the data without accessing the view. To do so you should use an intermediate model injected on both views. This way you could read from both views the same data model

  5. riavietnam 18 July 2010 at 6:25 am #

    Thanks Xavi

    Could I ask one more question: When I apply many children in each view, the transition was not smooth. Is it depend on the deferred logic because the children were not instatiated when we change the view? Do you have any solution for this dual panel component?

  6. ehlersd 17 December 2010 at 6:13 am #

    Got a question.

    I have some code where I was using 2 images…1 visible (the current image) and 1 hidden (the next image). The idea was the “next” image was a cache to “preload” the image for quick display when time for the change.

    I changed it to use this component (NOT the deferred one). Works great, BUT, when I set the “source” of the image on the back, it doesn’t actually start the load until the back is displayed.

    Is there an easy way to force the load to occur without having to switch the state?

    Thanks,

    Darren

  7. flexillu 17 December 2010 at 2:36 pm #

    How would i use this component without the “i” button.

    I want the panel to flip when i click a button that is not part of the skin

  8. ehlersd 24 December 2010 at 5:44 pm #

    @flexillu: Check out this post in the Adobe Forums. I made similar changes as you wanted…

    http://forums.adobe.com/thread/766396

    Darren

  9. skb8036 13 April 2011 at 5:33 pm #

    Hi,

    This ia a cool component. I extended this component to include 6 states. By default only first state is created. How can i control the creation policy of the states? I use this component in many ways some requiring all states creation policy to be true and in some instances it is none. I want the states creation policy to be passed through the main component.

    I tried by setting itemCreationPolicy on each state container(Group in this case in the skin part).But this wouldn’t let me set dynamically by looking up at the creationPolicy value passed through main component.

    Thanks for the help.


Leave a Reply