6 Replies Latest reply on Feb 11, 2010 3:45 AM by Karl_Sigiscar_1971

    Creating a ViewStack in Actionscript

    vindictive27

      I have been working on creating an extended viewstack, but I haven't been able to find a good example of what I want to do - any tips would be greatly appreciated.

       

      In the main mxml I want to specify something like <local:CustomViewStack state="whatever" size="whatever"/>  and then include a new custom viewstack class that I can set a state and size for and pre-create the components based on some image assets.

       

      For example, <local:CustomViewStack state="red" size="small"/> would set the ViewStack index to the red icon, out of the small set of icons.  Ideally, the ViewStack would have 3 canvases with an image (one green, one yellow, one red) and also based on the size property I would adjust the image source to display the proper set of icons (16x16, 24x24, 32x32, etc...).

       

      Somehow in the Actionscript I need to create the children, the canvases, and their content and adjust those based on the parameters passed in, so that's the setup.  Here's the question:

       

      How do you create the Viewstack and the children in Actionscript?  Thanks in advance for any insight (even if you'd like to point out my stupidity)!

        • 1. Re: Creating a ViewStack in Actionscript
          vindictive27 Level 1

          This is what I've sort of stubbed out that doesn't seem to work:

           

          MXML:

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

          <mx:Application

           

           

          xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

          <local:ViewStackInd

           

          iconState="{ViewStackInd.green}" iconSize="{ViewStackInd.small}" />

          </mx:Application>

           

           

          AS:

           

          package

           

          {

           

          import mx.containers.Canvas;

           

          import mx.containers.ViewStack;

           

          import mx.controls.Image;

           

          import mx.effects.Iris;

           

           

          public class ViewStackInd extends ViewStack

          {

           

          public static const green:String = "green";

           

          public static const yellow:String = "yellow";

           

          public static const red:String = "red";

           

           

          public static const small:String = "small";

           

          public static const medium:String = "medium";

           

          public static const large:String = "large";

           

           

          private var _iconState:String = ViewStackInd.green;

           

          private var _iconSize:String = ViewStackInd.medium;

           

          private var irisEffect:Iris = new Iris();

           

           

          public function ViewStackInd()

          {

           

          super();

           

          this.creationPolicy = "all";

          buildViewStack();

          }

           

           

          public function set iconSize(i:String):void

          {

           

          this._iconSize = i;

          }

           

           

          public function get iconSize():String

          {

           

          return this._iconSize;

          }

           

           

          public function set iconState(s:String):void

          {

           

          this._iconState = s;

          }

           

           

          public function get iconState():String

          {

           

          return this._iconState;

          }

           

           

           

          public function buildViewStack():void

          {

           

           

          var img1:Image = new Image();

          img1.id =

          "img1";

           

          var img2:Image = new Image();

          img2.id =

          "img2";

           

          var img3:Image = new Image();

          img3.id =

          "img3";

           

           

          if (this._iconSize == "small")

          {

          img1.source=

          "assets/msg_ok_sm.png";

          img2.source=

          "assets/msg_warn_sm.png";

          img3.source=

          "assets/msg_crit_sm.png";

          }

           

          if (this._iconSize == "medium")

          {

          img1.source=

          "assets/msg_ok_med.png";

          img2.source=

          "assets/msg_warn_med.png";

          img3.source=

          "assets/msg_crit_med.png";

          }

           

          if (this._iconSize == "large")

          {

          img1.source=

          "assets/msg_ok_lrg.png";

          img2.source=

          "assets/msg_warn_lrg.png";

          img3.source=

          "assets/msg_crit_lrg.png";

          }

           

           

          var cnvImg1:Canvas = new Canvas();

          cnvImg1.setStyle(

          "hideEffect",irisEffect);

          cnvImg1.setStyle(

          "showEffect",irisEffect);

          cnvImg1.height = 32;

          cnvImg1.width = 32;

          cnvImg1.addChild(img1);

           

           

          var cnvImg2:Canvas = new Canvas();

          cnvImg2.setStyle(

          "hideEffect",irisEffect);

          cnvImg2.setStyle(

          "showEffect",irisEffect);

          cnvImg2.height = 32;

          cnvImg2.width = 32;

          cnvImg2.addChild(img2);

           

           

          var cnvImg3:Canvas = new Canvas();

          cnvImg3.setStyle(

          "hideEffect",irisEffect);

          cnvImg3.setStyle(

          "showEffect",irisEffect);

          cnvImg3.height = 32;

          cnvImg3.width = 32;

          cnvImg3.addChild(img3);

           

           

          this.addChild(cnvImg1);

           

          this.addChild(cnvImg2);

           

          this.addChild(cnvImg3);

           

          }

          }

          }

          • 2. Re: Creating a ViewStack in Actionscript
            Karl_Sigiscar_1971 Level 3

            1. When is buildViewStack() called ?

            2. Why do you extend ViewStack when all you really do is adding children based on some data ?

             

            You should simply create a custom MXML component whose root is Viewstack and add some states to it that add children.

            • 3. Re: Creating a ViewStack in Actionscript
              vindictive27 Level 1

              Well, this is going to be dropped into a much larger application, and the idea is that all the main app will have to do is reference the viewstack id and change its property, so in the Actionscript they could just put vs1.iconSize="large" at some point and it would automatically change the viewstack, or they could pass the state to change the icon (selected index) automatically by name.  buildViewStack() is being called in the constructor before the properties are set which is part of the problem.

               

              Should I be using some sort of invalidate/update method for this?

              • 4. Re: Creating a ViewStack in Actionscript
                Karl_Sigiscar_1971 Level 3
                Again, you do not need to extend the Viewstack for what you want to achieve.

                What you need to do is to put your data in a centrally located model or in a presentation model.

                Then you need to write a simple MXML component with ViewStack as the root:

                <mx:ViewStack xmlns:mx="http://www.adobe.com/2006/mxml"
                  borderStyle="solid" width="100%" height="100%%"
                  addedToStage="dispatchEvent( new Event( 'configureIOC' , true ))">

                    <mx:Script>
                        <![CDATA[

                            import com.mycompany.presentation.GalleryPM;

                            [Inject]
                            [Bindable]
                            public var model:GalleryPM;

                        ]]>
                    </mx:Script>

                            <mx:Repeater id="rp" dataProvider="{model.dp}">

                                <mx:Canvas height="{String(rp.width)}" width="{String(rp.height)}"
                                    label="{String(rp.name)}"
                                    click="dispatcher(new ImageSelectedEvent(event.currentTarget.getRepeaterItem() as ImageItem)">

                                    <mx:Image source={String(rp.source)} />

                                </mx:Canvas>

                           </mx:Repeater>

                </mx:ViewStack>

                In this example (from the top of my head), you use a dataprovider located in a model.

                You use the <mx:Repeater> in order to create Canvas instances from the data.

                You can then instantiate that MXML component and give it an id. If you want it to be accessible from anywhere, store its reference in the model.

                In that case, I used dependency injection with Parsley, but you could use Cairngorm 2, PureMVC or any other framework. This is especially useful
                if your project is goint to be sizable.


                1 person found this helpful
                • 5. Re: Creating a ViewStack in Actionscript
                  vindictive27 Level 1

                  Since I have already done a lot of work on my current route (and I am not familiar with dependency injection), is there any way to make this work from its current state (the mxml is a test)  - project archive attached.

                  • 6. Re: Creating a ViewStack in Actionscript
                    Karl_Sigiscar_1971 Level 3

                    If you are not familiar with dependency injection and presentation models, you can still use the solution I showed you with the repeater.

                     

                    You can either use Cairngorm 2 to store the data in a model object in the model singleton OR (bad practice), store the data directly in the view.

                    1 person found this helpful