Example of implementation of the Pantaste Library
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
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 && !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}" />