0 Replies Latest reply on Jul 8, 2009 7:46 AM by jimmyoneshot

    Problem with getting specific canvas's to display within a viewstack based on button's clicked within a tilelist

    jimmyoneshot Level 1

      In a new application I'm creating I've managed to set it up so that a user can add up to 5 'user profile buttons' by clicking an 'add item' button and remove each one by clicking an 'remove item' when they are selected.

       

      That part works fine, however once each button is clicked it should bring up a specific canvas view within the viewstack relevant to that particular button i.e. when a user clicks the 'New Profile 1' button the 'New Profile 1' Canvas view should then be displayed in the viewstack, when they click 'New Profile 2' it should display 'New Profile 2' canvas in the viewstack etc but I am having trouble linking each specific button to 1 specific Viewstack canvas.

       

      The problem is if, for example, I click the 'New Profile 2' button the 'New Profile 2' canvas IS displayed in the viewstack however if I then delete the selected 'New Profile 2' button the 'New Profile 3' button slides left into it's place but now clicking on New Profile 3 brings up the new profile 2 canvas whereas it should actually bring up the new profile 3 canvas at all times.

       

      Eventually these canvas's will be personal areas for specific users so it is important that each button in the tilelist links to that specific user but it is also important that a user can add/delete each button at all times.

       

      I've already had the first part of this problem (which was linking the tilelist to the viewstack) more or less answered but I clicked Correct answer rather than helpful answer in my previous thread. My mistake, sorry. Is ther a better way to do this application. Heres my code so far:-

       

      <?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>