Sunday, April 29, 2012

Flex GroupStack (ViewStack) Component

Update: I've released a more direct port of the ViewStack and will be deprecating this component.

One of the components missing from the Spark component set is the ViewStack. Generally, I have not missed this component when creating Flex 4 applications because I tend to favor using skin states where I would have normally used a ViewStack in Flex 3 applications. That, and if I really need a ViewStack, I don't mind using MX controls in my Flex 4 applications.

When I do want a ViewStack, it's usually because its children need to be dynamic. In other words, either I need to add/remove children at run-time, or I'm developing a reusable component and each instance of the component may need a different set of children. Although this can still be achieved with skin states, it's a bit difficult and cumbersome to set up skin states and their configuration at run-time, and a ViewStack would solve the problem in a much more elegant way. However, I've often found that when wanting to use the ViewStack, it's usually to replace a "contentGroup" skin part within the skin class for a Spark component. A ViewStack, not being based on Group (like contentGroup containers usually are), ends up breaking the skin part contract between a Spark component's host component and skin classes.

With that being said, some of the components I'm creating for the ShinyLib library need ViewStack-like functionality. When I originally created the ShinyLib library, I made the decision to keep it as a Spark-only library, meaning that I don't even have access to MX controls, such as the ViewStack. For that reason, I created a quick and temporary solution: the GroupStack, which is a Spark Group extended with ViewStack-like functionality.

Like I said, it was quick and temporary solution, mainly to avoid putting off the creation of some components I've envisioned while waiting for an official Spark ViewStack. That means that it does not have all the features of the MX ViewStack (such as creation policy and deferred creation) and it's not heavily tested. When we do get an official sparkified ViewStack in an upcoming release of the Apache Flex framework, I'll update my ShinyLib components to use that instead, and remove (or possibly deprecate) my GroupStack.

The GroupStack implements the ISelectable and IList interfaces including a selectedChild property to give you most of the same API as the ViewStack. Unlike the ViewStack, the children of the GroupStack only need to be instaces of IVisualComponent instead of INavigatorContent. This means that the children can be simple controls such as Buttons and CheckBoxes and do not need to be wrapped in NavigatorContent containers. However, if you wanted to set the GroupStack as the dataProvider to a ButtonBar or TabBar, it's still best to wrap the children in NavigatorContent containers in order to properly render labels and icons.

The first example, below, shows a GroupStack with a Button, TextInput, and VGroup as direct children, and a NumericStepper to control the selectedIndex. The second example is the same except each of the children are wrapped in a NavigatorContent container in order to be set as the dataProvider of a ButtonBar.


Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes

1 comment:

  1. http://www.tink.ws/blog/flex-4-navigator/
    http://www.tink.ws/blog/spark-datanavigators/
    http://www.lfpug.com/flex-navigators/

    Might be of interest

    ReplyDelete