1 Reply Latest reply on Dec 17, 2011 6:07 AM by Chejerla

    How to add multiple skin states to SkinnableContainerSkin so that can switch among states

    Chejerla Level 1

      Hi All,

       

       

      I have a xml which represents 2 views of SkinnableContainer, xml being parsed and converted to ui elements and stored into 2 array variables based on display property of the tag

      initially adding 1 set of array element to Container

      whenever a button clicked to show different set of array elements, calling removeAllElements() and adding different set of elements from 2nd array

       

      Can somebody help me converting this application to utilize "Skin States"  feature

       

      Sorry, Could not find way to attach demo project, copied code bellow

       

      Thanks in advance...

       

       

      /src/ContainerDemo.mxml

           /com.containerdemo.controls

                ButtonControl.as

                ContainerControl.mxml

                CustomContainer.as

                CustomControls.mxml

                IControl.as

                ParentControl.mxml

       

           /com.containerdemo.skins

                ButtonControlSkin.mxml

                CustomContainerSkin.mxml

       

           /com.containerdemo.utils

                XmlUtil.as

       

      -----------------------------------------------------------------------------------

      ContainerDemo.mxml

      ------------------------------------------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx"

                                       minWidth="700" minHeight="500"

                                       xmlns:controls="com.containerdemo.controls.*">

                <s:VGroup paddingBottom="20" paddingLeft="20"

                                      paddingRight="20" paddingTop="20" gap="20"

                                      horizontalCenter="0">

                          <s:Label text="Flex states demo" fontSize="30"/>

                          <controls:ParentControl id="pc" />

                </s:VGroup>

      </s:Application>

       

      ---------------------------------------------------------------------------------

      XmlUtil.as

      ----------------------------------------------------------------------------------

      package com.containerdemo.utils {

                import com.containerdemo.controls.ButtonControl;

                import com.containerdemo.controls.ContainerControl;

                import com.containerdemo.controls.CustomContainer;

                import com.containerdemo.controls.IControl;

       

                public class XmlUtil {

                          public static var ELEMENTS:Object = {

                                    "buttonElement": ButtonControl,

                                    "containerElement": ContainerControl

                          };

                          public static function parse(xml:XML):IControl {

                                    var name:String = xml.name();

                                    var clazz:Class = ELEMENTS[name];  

                                    var elem:IControl = new clazz();

                                    elem.parse(xml);

                                    return elem;

                          }

                }

      }

       

      -----------------------------------------------------------------------------------

      CustomContainerSkin.mxml

      -----------------------------------------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                                     xmlns:s="library://ns.adobe.com/flex/spark"                               

                                     xmlns:mx="library://ns.adobe.com/flex/mx">

         

                <fx:Metadata>

                          [HostComponent("com.containerdemo.controls.CustomContainer")]

                </fx:Metadata>

          <s:states>

              <s:State name="normal" />

              <s:State name="disabled" />

          </s:states>

                <s:Group id="rectGroup">

                          <s:Rect left="0" right="0" top="0" bottom="0" radiusX="8" radiusY="8">

                                    <s:stroke>

                                              <s:SolidColorStroke weight="2" color="#FF0000" alpha="0.8" />

                                    </s:stroke>

                          </s:Rect>

                          <s:HGroup top="10" left="10" right="10" gap="4">

                                    <s:Label id="containerLabel" text="{this.hostComponent.label}" />

                                    <s:Button id="compOrExpButton" label="{this.hostComponent.btnLabel}" />

                                    <mx:Spacer width="100%" />

                          </s:HGroup>

                          <s:Group id="contentGroup" left="16" right="16" top="32" bottom="32" />

                </s:Group>

      </s:SparkSkin>

       

      ------------------------------------------------------------------------------------------ ------------------

      ButtonControlSkin.mxml

      ------------------------------------------------------------------------------------------ -----------------

      <?xml version="1.0" encoding="utf-8"?>

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

                                     minWidth="21" minHeight="21" alpha.disabled="0.5">

         

                <fx:Metadata>

                          [HostComponent("com.containerdemo.controls.ButtonControl")]

                </fx:Metadata>

         

          <s:states>

              <s:State name="up" />

              <s:State name="over" />

              <s:State name="down" />

              <s:State name="disabled" />

          </s:states>

       

       

                <s:Label id="labelDisplay"

                   textAlign="center"

                   verticalAlign="middle"

                   maxDisplayedLines="1" minWidth="20"

                   horizontalCenter="0" verticalCenter="1"

                   left="10" right="10" top="2" bottom="2">

          </s:Label>

         

      </s:SparkSkin>

       

      ------------------------------------------------------------------------------------------ -------------------

      ParentControl.mxml

      ------------------------------------------------------------------------------------------ -------------------

      <?xml version="1.0" encoding="utf-8"?>

      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx"

                           xmlns:controls="com.containerdemo.controls.*"

                           creationComplete="group1_creationCompleteHandler(event)">

       

                <fx:Declarations>

                          <fx:XML id="compXml" xmlns="">

                                    <elems>

                                              <buttonElement id="b1" label="Element1" />

                                              <containerElement id="c2" label="Container2" display="comp">

                                                        <comp>

                                                                  <buttonElement id="c2b1" label="Element5 (Comp)" />

                                                                  <buttonElement id="c2b2" label="Element6 (Comp)" />

                                                                  <containerElement id="c2c1" label="Container c2c1" display="comp">

                                                                            <comp>

                                                                                      <buttonElement id="c2c1b1" label="Element c2c1b1 (Comp)" />

                                                                                      <buttonElement id="c2c1b2" label="Element c2c1b2 (Comp)" />

                                                                            </comp>

                                                                  </containerElement>

                                                                  <containerElement id="c2c2" label="Container c2c2" display="comp">

                                                                            <comp>

                                                                                      <buttonElement id="c2c2b1" label="Element c2c2b1 (Comp)" />

                                                                                      <buttonElement id="c2c2b2" label="Element c2c2b2 (Comp)" />

                                                                            </comp>

                                                                  </containerElement>

                                                        </comp>

                                              </containerElement>

                                              <buttonElement id="b3" label="Element7" />

                                    </elems>

                          </fx:XML>

       

                          <fx:XML id="expXml" xmlns="">

                                    <elems>

                                              <buttonElement id="b1" label="Element1" />

                                              <containerElement id="c2" label="Container2" display="exp">

                                                        <comp>

                                                                  <buttonElement id="c2b2" label="Element5 (Comp)" />

                                                                  <buttonElement id="c2b2" label="Element6 (Comp)" />

                                                                  <containerElement id="c2c1" label="Container c2c1" display="exp">

                                                                            <comp>

                                                                                      <buttonElement id="c2c1b1" label="Element c2c1b1 (Comp)" />

                                                                                      <buttonElement id="c2c1b2" label="Element c2c1b2 (Comp)" />

                                                                            </comp>

                                                                            <exp>

                                                                                      <buttonElement id="c2c1b3" label="Element c2c1b3 (Exp)" />

                                                                                      <buttonElement id="c2c1b4" label="Element c2c1b4 (Exp)" />

                                                                            </exp>

                                                                  </containerElement>

                                                                  <containerElement id="c2c2" label="Container c2c2" display="comp">

                                                                            <comp>

                                                                                      <buttonElement id="c2c2b1" label="Element c2c2b1 (Comp)" />

                                                                                      <buttonElement id="c2c2b2" label="Element c2c2b2 (Comp)" />

                                                                            </comp>

                                                                            <exp>

                                                                                      <buttonElement id="c2c2b3" label="Element c2c2b3 (Exp)" />

                                                                                      <buttonElement id="c2c2b4" label="Element c2c2b4 (Exp)" />

                                                                            </exp>

                                                                  </containerElement>

                                                        </comp>

                                                        <exp>

                                                                  <containerElement id="c4" label="Container4" display="comp">

                                                                            <comp>

                                                                                      <buttonElement id="c4b1" label="Element 555(Comp)" />

                                                                                      <buttonElement id="c4b2" label="Element 655 (Comp)" />

                                                                            </comp>

                                                                            <exp>

                                                                                      <buttonElement id="c4b3" label="Element 335 (Exp)" />

                                                                                      <buttonElement id="c4b4" label="Element 126 (Exp)" />

                                                                            </exp>

                                                                  </containerElement>

                                                        </exp>

                                              </containerElement>

                                              <buttonElement id="b3" label="Element7" />

                                    </elems>

                          </fx:XML>

                </fx:Declarations>

       

                <fx:Script>

                          <![CDATA[

                                    import mx.events.FlexEvent;

       

       

                                    protected function group1_creationCompleteHandler(event:FlexEvent):void {

                                              this.customControls.parse(compXml);

                                    }

                          ]]>

                </fx:Script>

       

                <controls:CustomControls id="customControls" />

       

      </s:Group>

       

      ------------------------------------------------------------------------------------------ -----------------------

      IControl.as

      ------------------------------------------------------------------------------------------ ---------------------

      package com.containerdemo.controls

      {

                import mx.core.IVisualElement;

       

       

                public interface IControl extends IVisualElement {

       

                          function parse(xml:XML):void;

       

                }

      }

       

      ------------------------------------------------------------------------------------------ -------------------------

      CustomControls.mxml

      ------------------------------------------------------------------------------------------ ------------------------

      <?xml version="1.0" encoding="utf-8"?>

      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx"

                           implements="com.containerdemo.controls.IControl">

       

                <fx:Script>

                          <![CDATA[

                                    import com.containerdemo.utils.XmlUtil;

                                    public function parse(xml:XML):void {

                                              for each (var child:XML in xml.children()) {

                                                        var e:IControl = XmlUtil.parse(child);

                                                        this.addElement(e);

                                              }

                                    }

                          ]]>

                </fx:Script>

       

                <s:layout>

                          <s:HorizontalLayout verticalAlign="middle" gap="15"

                                                                            paddingLeft="16" paddingRight="16"

                                                                            paddingTop="16" paddingBottom="16" />

                </s:layout>

       

      </s:Group>

       

      ------------------------------------------------------------------------------------------ -------------------

      CustomContainer.as

      ------------------------------------------------------------------------------------------ -----------------

      package com.containerdemo.controls

      {

                import com.containerdemo.skins.CustomContainerSkin;

                import com.containerdemo.utils.XmlUtil;

       

                import flash.events.MouseEvent;

       

                import mx.collections.ArrayCollection;

       

                import spark.components.Button;

                import spark.components.Group;

                import spark.components.SkinnableContainer;

       

                public class CustomContainer extends SkinnableContainer implements IControl {

       

                          [SkinPart(required="true")]

                          public var compOrExpButton:Button;

       

                          [SkinPart(required="true")]

                          public var rectGroup:Group;

       

                          private var dispState:String;

       

                          private var _label:String;

                          private var _cid:String;

       

                          private var compControls:ArrayCollection;

                          private var expControls:ArrayCollection;

       

                          public function CustomContainer() {

                                    this.setStyle("skinClass", Class(CustomContainerSkin));

                          }

       

                          public function parse(xml:XML):void {

                                    this.compControls = null;

                                    this.expControls = null;

                                    compControls = new ArrayCollection;

                                    expControls = new ArrayCollection;

       

                                    this.dispState = xml.@display;

                                    this.label = xml.@label;

                                    this.cid = xml.@id;

       

                                    for each (var child:XML in xml.comp.children()) {

                                              var e:IControl = XmlUtil.parse(child);

                                              this.compControls.addItem(e);

       

                                              //trace((e is ButtonControl).label);

                                    }

       

                                    for each (var child1:XML in xml.exp.children()) {

                                              var e1:IControl = XmlUtil.parse(child1);

                                              this.expControls.addItem(e1);

       

                                              //trace((e1 as ButtonControl).label);

                                    }

       

                                    showControls();

       

       

                          }

       

                          [Bindable]

                          public function set cid(value:String):void {

                                    this._cid = value;

                          }

       

                          public function get cid():String {

                                    return this._cid;

                          }

       

                          public function showControls():void {

                                    if (this.dispState == "comp") {

                                              showCompControls();

                                    } else {

                                              showExpControls();

                                    }

                          }

       

                          public function showCompControls():void {

                                    if (this.numElements >0)

                                              this.removeAllElements();

       

                                    for each (var e:IControl in compControls) {

                                              this.addElement(e);

                                    }

       

                                    this.btnLabel = "Exp";

       

                                    this.invalidateSkinState();

                          }

       

                          public function showExpControls():void {

                                    if (this.numElements >0)

                                              this.removeAllElements();

       

                                    for each (var e:IControl in expControls) {

                                              this.addElement(e);

                                    }

       

                                    this.btnLabel = "Comp";

       

                                    this.invalidateSkinState();

                          }

       

                          public function get ownerContainer():CustomContainer {

                                    return this.owner as CustomContainer;

                          }

       

                          public var b:Boolean = true;

                          public function displayCompOrExpControls(event:MouseEvent):void {

                                    if (this.btnLabel == "Exp") {

                                              if (b) {

                                                        this.reParse();

                                                        b = false;

                                              } else {

                                                        this.showExpControls();

                                              }

                                    } else {

                                              this.showCompControls();

                                    }

                          }

       

                          public function reParse():void {

                                    /*if (this.owner && (this.owner is CustomContainer))

                                              (this.owner as CustomContainer).reParse();

                                    else {*/

                                              var xml:XML = this.parentApplication.pc.expXml;

                                              var expXml:XMLList = xml.descendants().(attribute("id") == this.cid);

                                              this.parse(expXml[0]);

                                    //}

                          }

       

                          private var _btnLabel:String;

       

                          public function get btnLabel():String {

                                    return this._btnLabel;

                          }

       

                          [Bindable]

                          public function set btnLabel(value:String):void {

                                    this._btnLabel = value;

                          }

       

                          public function get label():String {

                                    return this._label;

                          }

       

                          [Bindable]

                          public function set label(value:String):void {

                                    this._label = value;

                          }

       

                          override protected function partAdded(partName:String, instance:Object):void {

                                    super.partAdded(partName, instance);

       

                                    if (instance == this.compOrExpButton)

                                              this.compOrExpButton.addEventListener(MouseEvent.CLICK, displayCompOrExpControls, false, 0, true);

                          }

       

                          override protected function partRemoved(partName:String, instance:Object):void {

                                    super.partRemoved(partName, instance);

       

                                    if (instance == compOrExpButton)

                                              this.compOrExpButton.removeEventListener(MouseEvent.CLICK, displayCompOrExpControls, false);

                          }

                }

      }

       

      ------------------------------------------------------------------------------------------ -------------------------------------------------------------

      ContainerControl.mxml

      ------------------------------------------------------------------------------------------ ------------------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>

      <controls:CustomContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                                    xmlns:s="library://ns.adobe.com/flex/spark"

                                                                    xmlns:mx="library://ns.adobe.com/flex/mx"                                                              

                                                                    xmlns:controls="com.containerdemo.controls.*">

       

       

                <controls:layout>

                          <s:HorizontalLayout gap="20"

                                                                            paddingLeft="16" paddingRight="16"

                                                                            paddingBottom="16" paddingTop="16" />

                </controls:layout>

      </controls:CustomContainer>

       

      ------------------------------------------------------------------------------------------ ---------------------------------------------------------------

      ButtonControl.as

      ------------------------------------------------------------------------------------------ ---------------------------------------------------------------

      package com.containerdemo.controls

      {

                import com.containerdemo.skins.ButtonControlSkin;

       

                import spark.components.Button;

       

                public class ButtonControl extends Button implements IControl {

       

                          public function ButtonControl() {

                                    this.setStyle("skinClass", Class(ButtonControlSkin));

                          }

       

                          public function parse(xml:XML):void {

                                    this.label = xml.@label;

                          }

       

                }

      }