A new feature have been implemented to the Pantaste library. Now you can create a dashboard and constrain the movement of the panels or block only along the defined columns.
How can i implement this?
Simply by placing the <DashBlock> components inside the <DashPanelContainer>. And then placing all your <DashPanel> components inside the desired <DashBlock> this will be the first configuration and after launching your application you will be able to move the panels only along the defined DashBlocks.
So download the latest source and use the following code to create your first column constrained dashboard:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
xmlns:components="com.comtaste.pantaste.components.*">
<mx:Style source="/assets/style.css"/>
<components:DashPanelContainer width="100%"
height="100%"
backgroundColor="#EEEEEE">
<mx:HBox width="630" backgroundColor="#EEE"
height="30">
<mx:Text fontSize="30"
text="PANTASTE COLUMN EXAMPLE" fontWeight="bold"/>
</mx:HBox>
<components:DashBlock width="300"
y="50"
height="100%">
<components:DashPanel backgroundAlpha="1"
width="300"
title="Styled panel 1"
showTitleText="true"
titleBarHeight="35"
backgroundColor="#CCCCCC"/>
</components:DashBlock>
<components:DashBlock x="330"
y="50"
width="300"
height="100%">
<components:DashPanel backgroundAlpha="1"
width="300"
title="Styled panel 2"
showTitleText="true"
titleBarHeight="35"
backgroundColor="#CCCCCC">
<mx:TextArea text="Blocco 2 "/>
</components:DashPanel>
<components:DashPanel backgroundAlpha="1"
title="Styled panel 3"
width="300"
showTitleText="true"
titleBarHeight="35"
backgroundColor="#CCCCCC">
<mx:TextArea text="Blocco 4 "/>
</components:DashPanel>
</components:DashBlock>
<components:DashBlock x="660"
width="300"
height="100%">
<components:DashPanel width="300"
title="Styled panel 4"
showTitleText="true"
titleBarHeight="35"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:TextArea text="Blocco 3 "/>
</components:DashPanel>
<components:DashPanel width="300"
title="Styled panel 5"
showTitleText="true"
titleBarHeight="35"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:TextArea text="Blocco 5 "/>
</components:DashPanel>
</components:DashBlock>
</components:DashPanelContainer>
</mx:Application>