Hi all,
I have two components in a view. One called Dashboard ( a custom
Canvas component which can be hidden/shown by a pull bar) - and the
other called WorkArea, which is the main work area, also an extension
of Canvas,
Simply, when the Dashboard is moved out of view, I want the WorkArea
component to fill the screen and then retract when the Dashboard is
shown again.
I hope this isn't too simple that it is staring me in the face.
Could someone offer assistance? Code below:
--Dashboard.MXML--
<?xml version="1.0" encoding="utf-8"?>
<!--
NAME: Dashboard
PACKAGE: com.civiltrack.view
AUTHOR: Kenny Silanskas
DATE: 03/03/2007
VERSION: 1.0.0
An extension of the Canvas component.
The user can hide or show the Dock by clicking on the region to the
right of the component.
Future versions could implement additional functionality.
-->
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml";
width="200"
height="100%"
creationComplete=" { this.docked = false }"
backgroundColor="0xCCCCCC">
<mx:Metadata>
[Event (name="change", type="flash.events.Event")]
</mx:Metadata>
<mx:Move id="moveOut" xFrom="0" xTo="-180" duration="250"
target="{
this }" />
<mx:Move id="moveIn" xFrom="-180" xTo="0" duration="250"
target=" {
this }" />
<mx:Script>
<![CDATA[
import flash.events.Event;
[Embed(source='/assets/skins/SidebarOpenSkin.jpg')]
private var SidebarOpenSkin : Class;
[Embed(source='/assets/skins/SidebarClosedSkin.jpg')]
private var SidebarClosedSkin : Class;
private var _docked : Boolean;
[Bindable(event="change")]
public function set docked ( val :Boolean ) : void {
_docked = val;
if ( val ) {
hide();
} else {
show();
}
var evt : Event = new Event (Event.CHANGE);
dispatchEvent ( evt );
}
public function get docked () : Boolean {
return _docked;
}
public function show() : void{
pullbar.source = SidebarOpenSkin;
moveIn.play();
this._docked = false;
}
public function hide() : void {
pullbar.source = SidebarClosedSkin;
moveOut.play();
this._docked = true;
}
]]>
</mx:Script>
<!--Pull Bar-->
<mx:VBox
backgroundColor="0x666666"
height="100%"
width="20"
verticalAlign="middle"
right="0"
useHandCursor="true"
buttonMode="true"
click=" { this.docked = !_docked }">
<mx:Image id="pullbar"/>
</mx:VBox>
</mx:Canvas>
--WorkArea.mxml--
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml";
minWidth="700"
minHeight="700"
width="100%"
height="100%" backgroundColor="#00ffff">
</mx:Canvas>
--SecureArea.mxml-- (The container for both)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:vw="com.civiltrack.view.*"
xmlns:model="com.civiltrack.model.*"
xmlns:civil="com.civiltrack.components.*">
<mx:Script>
<![CDATA[
import com.civiltrack.model.CivilTrackLocator;
]]>
</mx:Script>
<vw:Dashboard
id="dashboard" change=" { dashboardChanged( event )
}"/>
<vw:WorkArea
id="applicationWorkArea"
x="200"
/>
</mx:Canvas>
Thanks so much for any assistance.
