Comtaste Consulting | Enterprise RIA consulting and development

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>