2 Replies Latest reply on Jul 8, 2009 5:34 AM by jimmyoneshot

    Linking a ViewStack to a Tilelist

    jimmyoneshot Level 1

      I am trying to create an application that will allow users to add new users profiles and display each of these profiles within a viewstack via selecting their own button (which will be contained within a TileList).

       

      When each button is selected via the TileList the viewstack will change to a view appropriate to that button so that each user has their own area. However I'm having trouble connecting the click of each button to the viewstack. It may seem simple to most but to me, being a new flex developer starting a university web design course it's really hard. I can add and remove user profile buttons via the add/remove item buttons that I've set up but when I click any of the user profile buttons an error message appears.

       

      What I want to happen is when the user clicks a user profile button the viewstack should change to the view appropriate to that button which is outlined in the data values of each item in the dpArr array.

       

      Here's my code for the app in full:-

       

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

       

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#545351, #E3DFDF]">

       

       

      <mx:Script>

      <![CDATA[

       

      import mx.managers.*;

       

      private var _dragManager:DragManager;

       

      private var _historyManager:HistoryManager;

       

      private var _popupManager:PopUpManager;

       

      import flash.net.navigateToURL;

       

      import flash.net.URLRequest;

       

      import flash.net.URLVariables;

       

      import mx.events.ListEvent;

       

      import mx.controls.Button;

       

      import mx.collections.*;

       

      import mx.controls.Alert;

      ]]>

       

      </mx:Script>

       

       

      <mx:Script>

      <![CDATA[

       

      import mx.effects.easing.Elastic;

       

      import mx.collections.ArrayCollection;

       

      [

      Bindable]

       

      private var myDP:ArrayCollection = new ArrayCollection(

      );

       

       

      private var dpArr:Array = [{label: "New Profile 1", data:View1},{label: "New Profile 2", data:View2}, {label: "New Profile 3", data:View3},{label: "New Profile 4", data:View4}, {label: "New Profile 5", data:View5}];

       

       

      private var addedIndices:ArrayCollection = new ArrayCollection();

       

       

      private function deleteItem():void {

       

      if(myDP.length > 0){

       

      for each(var i:int in tlist0.selectedIndices)

      myDP.removeItemAt(i);

      }

      }

       

       

      private function addItem():void {

       

      if(myDP.length < dpArr.length && addedIndices.length < dpArr.length){

       

      for(var a:uint = 0; a < dpArr.length; a++){

       

      if(!addedIndices.contains(a) && !myDP.contains(dpArr[a])){

      myDP.addItemAt(dpArr[a],myDP.length);

       

      break;

      }

      }

      }

      }

       

       

      private function tileList_itemClick(event:ListEvent):void {

       

      }

       

       

      private function showAlert(event:ListEvent):void{

      Alert.show(

      "You clicked button #"+event.currentTarget.selectedItem.data);

      }

       

       

      ]]>

       

      </mx:Script>

       

       

      <mx:Sequence id="itemsChangeEffect1">

       

       

      <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>

       

       

      <mx:Parallel>

       

       

      <mx:Move duration="750" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>

       

       

      <mx:RemoveItemAction startDelay="400" filter="removeItem"/>

       

       

      <mx:AddItemAction startDelay="400" filter="addItem"/>

       

       

      <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>

       

       

      </mx:Parallel>

       

       

      </mx:Sequence>

       

       

      <mx:Canvas width="1168" height="716" backgroundColor="#0219FB" horizontalCenter="0" verticalCenter="0" borderColor="#000000" borderStyle="solid" borderThickness="1" cornerRadius="20" backgroundAlpha="0.8">

       

       

      <mx:Canvas id="UserArea" left="10" x="0" y="49" width="670" height="594" backgroundColor="#000000" cornerRadius="20" borderStyle="solid">

       

       

      <mx:TileList id="tlist0" itemClick="myViewStack.selectedChild=(event.currentTarget.selectedItem.data)" itemRenderer="mx.controls.Button" top="10" left="10" right="10" color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"/>

       

      <mx:Canvas x="63" y="129" width="200" height="200" fontSize="36" borderColor="#FFFFFF" id="Canvas1" visible="false">

       

      <mx:Label x="27" y="25" text="Profile 1"/>

       

      </mx:Canvas>

       

      <mx:ViewStack x="115" y="88" id="myViewStack" width="382" height="317" backgroundColor="#F90C0C">

       

      <mx:Canvas id="View1" label="View 1" width="100%" height="100%" backgroundColor="#0FDDE5">

       

      </mx:Canvas>

       

      <mx:Canvas id="View2" label="View 2" width="100%" height="100%" backgroundColor="#A90BCB">

       

      </mx:Canvas>

       

      <mx:Canvas id="View3" label="View 3" width="100%" height="100%" backgroundColor="#E6E413">

       

      </mx:Canvas>

       

      <mx:Canvas id="View4" label="View 4" width="100%" height="100%" backgroundColor="#F4A40A">

       

      </mx:Canvas>

       

      <mx:Canvas id="View5" label="View 5" width="100%" height="100%" backgroundColor="#0D1DFA">

       

      </mx:Canvas>

       

      </mx:ViewStack>

       

       

      </mx:Canvas>

       

       

      <mx:Button label="Remove item" click="deleteItem();" color="0x323232" x="96" y="10"/>

       

      <mx:Button label="Add item" click="addItem();" color="0x323232" x="10" y="10"/>

       

       

      </mx:Canvas>

       

      </mx:Application>

       

       

       

       

       

       

       

       

       

       

        • 1. Re: Linking a ViewStack to a Tilelist
          Gregory Lafrance Level 6

          Use the following for line 263:

           

          <mx:TileList id="tlist0" itemClick="myViewStack.selectedIndex=tlist0.selectedIndex" itemRenderer="mx.controls.Button" top="10" left="10" right="10" color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"/>

           

          If this post answers your question or helps, please mark it as such.

          • 2. Re: Linking a ViewStack to a Tilelist
            jimmyoneshot Level 1

            That works good but now I've got a new problem. I wanted it set up so that each button brings up it's own specific area which is why I tried to store the name of each of the viewstack's canvas's in each button's data field within the dpArr button array.

             

            Now however if a user selects New profile 3 for example tyhe viewstack canvas appears with a yellow background like View3 should however when I then remove the New Profile 3 button (which should be the only button that brings up the yellow view3 canvas) via the remove item button and click on the New Profile 4 button that has now moved left into New Profile 3's position an now that brings up the yellow View3 canvas whereas it should only actually bring up the View4 orange canvas.

             

            To show you what I mean I've added labels to the code of each view within the viewstack for what button they should uniquely correspond to like this:-

             

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

             

            <mx:Application

             

             

            xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#545351, #E3DFDF]"

            >

             

             

             

            <mx:Script>

            <![CDATA[

             

             

            import

            mx.managers.*;

             

             

            private var

            _dragManager:DragManager;

             

             

            private var

            _historyManager:HistoryManager;

             

             

            private var

            _popupManager:PopUpManager;

             

             

            import

            flash.net.navigateToURL;

             

             

            import

            flash.net.URLRequest;

             

             

            import

            flash.net.URLVariables;

             

             

            import

            mx.events.ListEvent;

             

             

            import

            mx.controls.Button;

             

             

            import

            mx.collections.*;

             

             

            import

            mx.controls.Alert;

            ]]>

             

             

            </mx:Script>

             

             

             

            <mx:Script>

            <![CDATA[

             

             

            import

            mx.effects.easing.Elastic;

             

             

            import

            mx.collections.ArrayCollection;

             

            [

             

            Bindable

            ]

             

             

            private var myDP:ArrayCollection = new

            ArrayCollection(

            );

             

             

             

            private var dpArr:Array = [{label:"New Profile 1", data:View1},{label:"New Profile 2", data:View2}, {label:"New Profile 3", data:View3},{label:"New Profile 4", data:View4}, {label:"New Profile 5"

            , data:View5}];

             

             

             

            private var addedIndices:ArrayCollection = new

            ArrayCollection();

             

             

             

            private function deleteItem():void

            {

             

             

            if

            (myDP.length > 0){

             

             

            for each(var i:int in

            tlist0.selectedIndices)

            myDP.removeItemAt(i);

            }

            }

             

             

             

            private function addItem():void

            {

             

             

            if

            (myDP.length < dpArr.length && addedIndices.length < dpArr.length){

             

             

            for(var

            a:uint = 0; a < dpArr.length; a++){

             

             

            if

            (!addedIndices.contains(a) && !myDP.contains(dpArr[a])){

            myDP.addItemAt(dpArr[a],myDP.length);

             

             

            break

            ;

            }

            }

            }

            }

             

             

             

            private function tileList_itemClick(event:ListEvent):void

            {

             

            }

             

             

             

            private function showAlert(event:ListEvent):void

            {

            Alert.show(

             

            "You clicked button #"

            +event.currentTarget.selectedItem.data);

            }

             

             

            ]]>

             

             

            </mx:Script>

             

             

             

            <mx:Sequence id="itemsChangeEffect1"

            >

             

             

             

            <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"

            />

             

             

             

            <mx:Parallel>

             

             

             

            <mx:Move duration="750" easingFunction="{Elastic.easeOut}" perElementOffset="20"

            />

             

             

             

            <mx:RemoveItemAction startDelay="400" filter="removeItem"

            />

             

             

             

            <mx:AddItemAction startDelay="400" filter="addItem"

            />

             

             

             

            <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"

            />

             

             

             

            </mx:Parallel>

             

             

             

            </mx:Sequence>

             

             

             

            <mx:Canvas width="1168" height="716" backgroundColor="#0219FB" horizontalCenter="0" verticalCenter="0" borderColor="#000000" borderStyle="solid" borderThickness="1" cornerRadius="20" backgroundAlpha="0.8"

            >

             

             

             

            <mx:Canvas id="UserArea" left="10" x="0" y="49" width="670" height="594" backgroundColor="#000000" cornerRadius="20" borderStyle="solid"

            >

             

             

             

            <mx:TileList id="tlist0" itemClick="myViewStack.selectedIndex=tlist0.selectedIndex" itemRenderer="mx.controls.Button" top="10" left="10" right="10" color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"

            />

             

             

            <mx:Canvas x="63" y="129" width="200" height="200" fontSize="36" borderColor="#FFFFFF" id="Canvas1" visible="false"

            >

             

             

            <mx:Label x="27" y="25" text="Profile 1"

            />

             

             

            </mx:Canvas>

             

             

            <mx:ViewStack x="115" y="88" id="myViewStack" width="382" height="317" backgroundColor="#F90C0C"

            >

             

             

            <mx:Canvas id="View1" label="View 1" width="100%" height="100%" backgroundColor="#0FDDE5"

            >

             

             

            <mx:Label x="10" y="10" text="NEW PROFILE 1" fontWeight="bold" fontSize="15"

            />

             

             

            </mx:Canvas>

             

             

            <mx:Canvas id="View2" label="View 2" width="100%" height="100%" backgroundColor="#A90BCB"

            >

             

             

            <mx:Label x="10" y="10" text="NEW PROFILE 2" fontWeight="bold" fontSize="15"

            />

             

             

            </mx:Canvas>

             

             

            <mx:Canvas id="View3" label="View 3" width="100%" height="100%" backgroundColor="#E6E413"

            >

             

             

            <mx:Label x="10" y="10" text="NEW PROFILE 3" fontWeight="bold" fontSize="15"

            />

             

             

            </mx:Canvas>

             

             

            <mx:Canvas id="View4" label="View 4" width="100%" height="100%" backgroundColor="#F4A40A"

            >

             

             

            <mx:Label x="10" y="10" text="NEW PROFILE 4" fontWeight="bold" fontSize="15"

            />

             

             

            </mx:Canvas>

             

             

            <mx:Canvas id="View5" label="View 5" width="100%" height="100%" backgroundColor="#0D1DFA"

            >

             

             

            <mx:Label x="10" y="10" text="NEW PROFILE 5" fontWeight="bold" fontSize="15" color="#FFFFFF"

            />

             

             

            </mx:Canvas>

             

             

            </mx:ViewStack>

             

             

             

            </mx:Canvas>

             

             

             

            <mx:Button label="Remove item" click="deleteItem();" color="0x323232" x="96" y="10"

            />

             

             

            <mx:Button label="Add item" click="addItem();" color="0x323232" x="10" y="10"

            />

             

             

             

            </mx:Canvas>

             

            </mx:Application>