Hi folks, I'm trying to use a MVC model for buildin my application. I have built 2 custom components & placed them in my components folder.
My components are: - Appliction Layout component, similiar to a VDivided box - Custom panel component with minimise, maximise, close button. In my main.mxml, I plan to set up 10 different states, each one representing different screens of my application. Each of these states, will be made up of 1 "custom layout component" which can contain multiple "custom panels" on the left and multiple "custom panels" on the right hand side. My question is, im main.mxml, how can I write the following: - Create a new Layout Component - In the lhs of the Layout Component put 2 custom panels - In the RHS of the layout componnet put 3 custom panels Once I can do that, I an create lots of different states, I just cant figure out how to write it...im sooo close, but yet so far! -------------------------------------------------------------------- Here is my Layout Component -------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="100%" xmlns:components="assets.src.components.*"> <mx:Script> <![CDATA[ public var indexValue:int = 0; private function changeState() : void { if(indexValue == 0){ currentState='zeroOneHundred'; indexValue = 1; } else if(indexValue == 1){ currentState='fiftyFifty'; indexValue = 0; } } ]]> </mx:Script> <mx:states> <mx:State name="fiftyFifty"> <mx:SetProperty target="{fnwLeftPanel}" name="width" value="50%"/> <mx:SetProperty target="{fnwRightPanel}" name="width" value="50%"/> </mx:State> <mx:State name="zeroOneHundred"> <mx:SetProperty target="{fnwLeftPanel}" name="width" value="0%"/> <mx:SetProperty target="{fnwRightPanel}" name="width" value="100%"/> </mx:State> </mx:states> <mx:transitions> <mx:Transition id="fnwTransition" fromState="*" toState="*"> <mx:Parallel id="t1" targets="{[fnwLeftPanel,fnwRightPanel]}"> <mx:Move duration="500"/> <mx:Resize duration="500"/> </mx:Parallel> </mx:Transition> </mx:transitions> <mx:VBox id="fnwLeftPanel" width="50%" height="100%" backgroundColor="red"> </mx:VBox> <mx:Image source="assets/src/images/arrow_sample.png" click="changeState();"/> <mx:VBox id="fnwRightPanel" width="50%" height="100%" backgroundColor="green"> </mx:VBox> </mx:HBox> ---------------------------------------------------------------------- - here is my panel ---------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"; styleName="layoutPanel" layout="absolute" width="100%" height="200" paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0" x="0" y="0"> <mx:states> <mx:State name="minimise"> <mx:SetProperty name="height" value="48"/> <mx:SetEventHandler target="{button1}" name="click" handler="currentState=''"/> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Parallel target="{this}"> <mx:Resize duration="1000"/> <mx:Move duration="1000"/> </mx:Parallel> </mx:Transition> </mx:transitions> <mx:Label id="fnwPanelLabel" text=""/> <!-- taskbar control items --> <mx:HBox id="fnwPanelControlBox" width="100%" height="22" styleName="panelOpts"> <mx:Spacer width="100%"/> <mx:Button height="13" width="13" styleName="optionsButton" /> <mx:Button height="13" width="2" styleName="panelDivider" /> <mx:Button height="13" width="10" styleName="minButton" click="currentState='minimise'" id="button1"/> <mx:Button height="13" width="2" styleName="panelDivider" /> <mx:Button height="13" width="12" styleName="closeButton" /> </mx:HBox> <!-- main content items --> <mx:VBox id="fnwPanelContentBox" styleName="contentHolder" y="22" width="100%" height="100%"> </mx:VBox> </mx:Panel> ---------------------------------------------------------------------- -- here is my main.mxml ---------------------------------------------------------------------- -- <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" xmlns:fnw="assets.src.components.*"> <mx:Style source="assets/src/styles/fnw.css"/> <fnw:FNWDivider id="fnwDivider" width="100%" height="100%"> </fnw:FNWDivider> </mx:Application>
