In Adobe Flash Catalyst the states concept is really important but a little bit hard to understand immediately, let’s try to catch the sense of it together.

With this new Adobe tool for designer, working on Rich Interactive Applications will be a lot easier and the cooperation with developers will be as close as it has never been before. The software interface is not the final one, the version available now is a beta, but still we can use many functionalities. Flash Catalyst is different from other Adobe design tools, maybe who use Flash will be familiar with the general approach.

The states in Flash Catalyst are referred to Pages and to elements inside a page and they represent different views of the application. We navigate between different states but in the same way they can be referred also to a component, for instance a button has state such as Up, Over, Down, and Disabled.

In the interface the right side is dedicated to tools and panels as Libraries, Layers and Properties, up to the stage there are indications about pages, components and states.

I created a very simple application as an example that has two pages Start and End, where you can click on a button “click here” to switch to different states/pages.

In Flash Catalyst interface you can find the states also on the left side of the Timeline. Here you find the States transitions panel, remember that in this tools transitions are taken as separate parts of the entire navigation, this means that you must put properties thinking of a "round trip".

When you double click on components their states are displayed on the same part where the pages/elements are and this can be a little bit tricky, maybe the component state should be represented in a different way, graphically speaking. Anyway as in Flash, we can always go back to the previous element using the menu up on the left side of the stage.

We can say that the states represent the condition/status of pages and components, more generally the concept indicate what an element is doing before and when users interact with it.

Let's have a look to the Pantaste Library, exploring her feature trough examples, divided by interests:

HelloWorld
Switching dashed, snapped or free
Tile and Cascade panels in a container
Manual control panels ( minimize, maximize, restore )
Listen containers change
Apply constraint to Panels
Styling panels
Freeze panels

• HelloWorld

This first example show how to implement a simple Panel and the relative container:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:components="com.comtaste.pantaste.components.*"

layout="vertical">

<components:DashPanelContainer width="100%" height="100%">

<components:DashPanel

title="HelloWorld"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox

backgroundAlpha="1"

backgroundColor="#FFFFFF" >

<mx:Label text="Hello World from Pantaste Panel!" />

</mx:VBox>

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>

 

• Switching dashed, snapped or free

 

Now let’s look how to switch the container type, between dashed, snapped or free to move:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:components="com.comtaste.pantaste.components.*"

layout="vertical">

<mx:Script>

<![CDATA[

import com.comtaste.pantaste.components.DashDock;

]]>

</mx:Script>

<mx:HBox>

<mx:NumericStepper

id="snapSizer"

minimum="1"

maximum="500"

change="dashContainer.snapSize = snapSizer.value;"

visible="{dashContainer.snapped}" />

<mx:Button

toggle="true"

label="Snap"

click="dashContainer.snapped = !dashContainer.snapped;"

selected="{dashContainer.snapped}" />

<mx:Button

toggle="true"

label="Dash"

click="dashContainer.dashed = !dashContainer.dashed;"

selected="{dashContainer.dashed}" />

<mx:Button

toggle="true"

label="Free"

click="dashContainer.dashed = false; dashContainer.snapped = false;"

selected="{!dashContainer.snapped &amp;&amp; !dashContainer.dashed }" />

</mx:HBox>

<components:DashPanelContainer

id="dashContainer" width="100%" height="100%">

<components:DashPanel

title="Panel 1"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox

backgroundAlpha="1"

backgroundColor="#FFFFFF" >

<mx:Label text="Here the content!" />

</mx:VBox>

</components:DashPanel>

<components:DashPanel

title="Panel 2"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox width="100%" height="100%"

backgroundAlpha="1"

backgroundColor="#FFF000" >

<mx:Label text="Content 2!" />

</mx:VBox>

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>

 

• Tile and Cascade panels in a container

 

It’s also possible to manual control panels on a container, like tile or cascade all panels. To do this we need to use the DashLayoutManager, a multiTon class that maps containers trough container id’s.

 

To use the DashLayoutManager of a specific container you have to reference to it trough the id:

DashLayoutManager.getManager( containerID ).

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

xmlns:blocks="blocks.*">

<mx:Script>

<![CDATA[

import com.comtaste.pantaste.manager.DashLayoutManager;

private function tile( containerId:String ) : void

{

DashLayoutManager.getManager( containerId ).tile( );

}

private function cascade( containerId:String ) : void

{

DashLayoutManager.getManager( containerId ).cascade( );

}

]]>

</mx:Script>

<mx:HBox>

<mx:Button label="Tile Container 1" click="tile( dashContainer1.id );" />

<mx:Button label="Tile Container 2" click="tile( dashContainer2.id );" />

<mx:Spacer width="100" />

<mx:Button label="Cascade Container 1" click="cascade( dashContainer1.id );" />

<mx:Button label="Cascade Container 2" click="cascade( dashContainer2.id );" />

</mx:HBox>

<blocks:TwoPanels id="dashContainer1" />

<blocks:TwoPanels id="dashContainer2" />

</mx:Application>

 

• Manual control panels ( minimize, maximize, restore )

 

Now let’s see how to control every panel programmatically, to maximize, minimize and restore its. To do this we have to use the DashPanelEvent class. So we don’t have any api to control, but we must use events.

 

First define the event:

• Maximize:

var minimizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MINIMIZE, myPanel );

• Minimize:

var maximizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MAXIMIZE, myPanel );

• Restore:

var restoreEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.RESTORE, myPanel );

 

and then dispatch the event:

myPanel.dispatchEvent( maximizeEvent );

myPanel.dispatchEvent( maximizeEvent);

myPanel.dispatchEvent( restoreEvent);

 

Example:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">

<mx:Script>

<![CDATA[

import com.comtaste.pantaste.events.DashPanelEvent;

private function manualMinimize( ) : void

{

var minimizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MINIMIZE, myPanel );

myPanel.dispatchEvent( minimizeEvent );

}

private function manualMaximize( ) : void

{

var maximizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MAXIMIZE, myPanel );

myPanel.dispatchEvent( maximizeEvent );

}

private function manualRestore( ) : void

{

var restoreEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.RESTORE, myPanel );

myPanel.dispatchEvent( restoreEvent );

}

]]>

</mx:Script>

<mx:HBox>

<mx:Button label="Maximize" click="manualMaximize();" />

<mx:Button label="Minimize" click="manualMinimize();" />

<mx:Button label="Restore" click="manualRestore();" />

</mx:HBox>

<components:DashPanelContainer width="100%" height="100%">

<components:DashPanel

id="myPanel"

title="My Manual Controlled Panel"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox

backgroundAlpha="1"

backgroundColor="#FFFFFF" >

<mx:Label text="Minimize, maximize and restore me!" />

</mx:VBox>

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>

 

• Listen containers change

 

The Pantaste dash container ( DashPanelContainer class ), propagate an event to inform you that something happened. Information that you can obtain is about panels and this is the type:

 

• Added to the container
• Removed from the container
• Maximized
• Minimized
• Restored
• Moved

 

All we have to do is listening on the “pantasteChanged” event defined by the DashPanelContainerEvent class. This class will provide to us the changedTypeEvent, the panel caused the change and the container were is placed.

 

Example:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:blocks="blocks.*">

<mx:Script>

<![CDATA[

import com.comtaste.pantaste.events.DashPanelContainerEvent;

private function onPantasteChange( event:DashPanelContainerEvent ) : void

{

infoPanel.text += "\n Panel " + event.panel.title + " changed: " + event.changeType + " on container " + event.pantaste.id;

infoPanel.verticalScrollPosition = infoPanel.maxVerticalScrollPosition;

}

]]>

</mx:Script>

<mx:HBox width="100%">

<mx:TextArea width="100%" height="60" id="infoPanel" />

</mx:HBox>

<blocks:TwoPanels id="dashContainer1" pantasteChanged="onPantasteChange( event );" />

<blocks:TwoPanels id="dashContainer2" pantasteChanged="onPantasteChange( event );" />

</mx:Application>

 

• Apply constraint to Panels

 

Setting constraint to the panels, let you the ability to control some default settings:

• Closable
• Movable
• Resizable
• Maximizable
• Minimizable
• Always in front

 

To implement this you can simply set the correspondent property of the panel.

 

Example:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">

<mx:HBox>

<mx:Button toggle="true" label="minimizable" click="myPanel.minimizable = event.target.selected" selected="{myPanel.minimizable}" />

<mx:Button toggle="true" label="maximizable" click="myPanel.maximizable = event.target.selected" selected="{myPanel.maximizable}" />

<mx:Button toggle="true" label="resizable" click="myPanel.resizable = event.target.selected" selected="{myPanel.resizable}" />

<mx:Button toggle="true" label="closable" click="myPanel.closable = event.target.selected" selected="{myPanel.closable}" />

<mx:Button toggle="true" label="draggable" click="myPanel.draggable = event.target.selected" selected="{myPanel.draggable}" />

<mx:Button toggle="true" label="always in front" click="myPanel.alwaysInFront = event.target.selected" selected="{myPanel.alwaysInFront}" />

</mx:HBox>

<components:DashPanelContainer width="100%" height="100%">

<components:DashPanel

id="myPanel"

title="My Panel"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox

backgroundAlpha="1"

backgroundColor="#FFFFFF" >

<mx:Label text="{'minimizable:' + myPanel.minimizable}" />

<mx:Label text="maximizable: {myPanel.maximizable}" />

<mx:Label text="resizable: {myPanel.resizable}" />

<mx:Label text="closable: {myPanel.closable}" />

<mx:Label text="draggable: {myPanel.draggable}" />

<mx:Label text="always in front: {myPanel.alwaysInFront}" />

</mx:VBox>

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>

 

• Styling panels

 

To style the pantaste components you need to use styles. So create a style.css file and include into your application:

 

<mx:Style source="/assets/style.css" />

 

• Styling the DashPanel by the global class implementing the backgroundImage:

DashPanel

{

background-image: Embed(source="assets/FlexSkin_FOB.swf", symbol="Panel_smallBase");

background-size: "100%";

}

 

• Styling the controll buttons:

.minimizeButton

{

upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMin");

overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMin");

downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMin");

disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMin");

}

 

.maximizeButton

{

upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMax");

overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMax");

downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMax");

disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMax");

}

 

.restoreButton

{

upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMax");

overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMax");

downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMax");

disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMax");

}

 

.dockedButton

{

upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelUp");

overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelOver");

downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelDown");

disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelDisabled");

}

 

.closeButton

{

upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseUp");

overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseOver");

downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseDown");

}

 

.titleBarText

{

fontWeight: bold;

color: #555555;

}

 

• Setting icon properties:

 

Setting the icon image:

icon='@Embed(source="assets/FlexSkin_FOB.swf", symbol="Icon_music")'

 

Also you can set the x nad y offset position, if you want to change it:

iconXOffset="-8" iconYOffset="-8"

 

• Control the title bar:

 

You can set the height of the title bar and if you want to show the title:

showTitleText="false"

titleBarHeight="35"

 

Example:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">

<mx:Style source="/assets/style.css" />

<components:DashPanelContainer width="100%" height="100%">

<components:DashPanel

title="Styled panel" showTitleText="true" titleBarHeight="35"

iconXOffset="-8" iconYOffset="-8"

icon='@Embed(source="assets/FlexSkin_FOB.swf", symbol="Icon_travel")' >

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>

 

• Freeze panels

 

An interesting feature of pantaste is that you can freeze panel, showing a loader progress bar, and remove it when you want.

 

Simple you must call myPanel.startLoad( ) to freeze and show the progress bar and myPanel.stopLoad( ) to hide the progressbar and defreeze.

 

Example:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:components="com.comtaste.pantaste.components.*"

layout="vertical">

<mx:HBox>

<mx:Button label="Start" click="myPanel.startLoad( );" />

<mx:Button label="Stop" click="myPanel.stopLoad( );" />

</mx:HBox>

<components:DashPanelContainer width="100%" height="100%">

<components:DashPanel

id="myPanel"

title="Freeze and defreeze"

titleBarHeight="30"

backgroundAlpha="1"

backgroundColor="#CCCCCC">

<mx:VBox

backgroundAlpha="1"

backgroundColor="#FFFFFF" >

<mx:Label text="Loader panel!" />

</mx:VBox>

</components:DashPanel>

</components:DashPanelContainer>

</mx:Application>