4 Replies Latest reply on May 12, 2008 9:52 PM by Mitek17

    Creating dynamic link on each click

    Jaguar280
      Hey everyone!

      got another small issues... this is the last thing i need to fix to finish my project :-).. what im doing is creating a map that will allow you to click on a state and using PopUpManager, display data from that state (the data resides within an xml file).

      right now on each click, i run clickState="createPopUp()". the createPopUp functions runs and initializes the http service to grab the xml file. in the result handler.. i have it grab the data for the state. the problem is, i cannot figure out how to make it dynamic so that when u click on one state it grabs the name and then uses the name to grab the data from the xml file. for example, right now it always grabs event.result.venuelist.michigan but i want it to grab event.result.venuelist.stateName so its dynamic (or something like that). Thank you so much for the help!!!

      Here is the result handler that grabs the info from the xml... here i just set it to grab the data for michigan to make sure it was working..
      quote:

      public function resultHandler(event:ResultEvent):void {
      /* var icon:Object = map.target.selected.name; */
      arrcol = event.result.venuelist.michigan as ArrayCollection;
      dg.dataProvider = arrcol;
      }


      Here is the code for creating the popup... i tried to use this.selectedItem.name to grab the name of the state but it didnt work. i did it in an alert box to test if it was grabbing the name.
      quote:

      public function createPopUp():void {
      var icon:Object = this.selectedItem.name;
      var state:String = icon;
      Alert.show(state, 'Alert Box', mx.controls.Alert.OK);
      getXML.send();
      PopUpManager.addPopUp(panel, this, true);
      PopUpManager.centerPopUp(panel);
      }


      Here is the entire code... there are two xml files... one inline and one external... the one inline which is shown below contains the name for each state in the <name></name> brackets... that is the info i need to grab once i click so i can grab the info for that state from the external xml file. (i left out some states from the populationdata xml to shorten the code for posting)
      quote:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]"
      backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="739" height="481" creationComplete="init()">

      <!--<mx:XML id="list"/>
      <mx:HTTPService id="getXML" url="VenueList/list.xml" resultFormat="e4x" result="list = XML(event.result);"/>-->
      <mx:HTTPService id="getXML" url="list.xml" result="resultHandler(event)" resultFormat="object"/>
      <!--
      The populationData contains elements for each state: the state code (eg, "ca")
      and the data (population). This data set assumes you will color the map based on
      a colorFunction (see below). Alternatively, you can supply a color for each state
      directly in the model: <color>0xffcccc</color>
      -->
      <mx:XML id="populationData" format="e4x" xmlns="">
      <list>
      <state><name>California</name><code>ca</code><present>0</present></state>
      <state><name>Texas</name><code>tx</code><present>1</present></state>
      <state><name>NewYork</name><code>ny</code><present>1</present></state>
      <state><name>California</name><code>fl</code><present>0</present></state>
      <state><name>California</name><code>il</code><present>1</present></state>
      <state><name>California</name><code>pa</code><present>0</present></state>
      <state><name>California</name><code>oh</code><present>1</present></state>
      <state><name>California</name><code>mi</code><present>1</present></state>
      <state><name>California</name><code>ga</code><present>0</present></state>
      <state><name>California</name><code>nj</code><present>1</present></state>
      <state><name>California</name><code>nc</code><present>0</present></state>
      </list>
      </mx:XML>

      <mx:Style>
      global {
      modalTransparencyBlur: 0;
      modalTransparency: 0.6;
      modalTransparencyColor: black;
      modalTransparencyDuration: 500;
      }
      </mx:Style>

      <mx:Script>
      <![CDATA[
      import mx.events.ListEvent;
      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent;
      import mx.containers.Panel;
      import mx.controls.Button;
      import mx.controls.Spacer;
      import mx.controls.DataGrid;
      import mx.containers.ControlBar;
      import mx.controls.dataGridClasses.DataGridColumn
      import mx.managers.PopUpManager;
      import mx.controls.Alert;
      import mx.events.ListEvent;

      public var panel:Panel;
      public var arrcol:ArrayCollection = new ArrayCollection();
      public var dg:DataGrid = new DataGrid();
      public var arr:Array = [];

      public function init():void {
      var d1:DataGridColumn = new DataGridColumn;
      var d2:DataGridColumn = new DataGridColumn;
      var d3:DataGridColumn = new DataGridColumn;
      var d4:DataGridColumn = new DataGridColumn;
      var d5:DataGridColumn = new DataGridColumn;
      var d6:DataGridColumn = new DataGridColumn;
      var b1:Button = new Button();
      var cb:ControlBar = new ControlBar();
      var s:Spacer = new Spacer();

      b1.label = "Click here to return to the map";
      b1.addEventListener(MouseEvent.CLICK, closePopUp);
      s.percentWidth = 100;
      cb.addChild(s);
      cb.addChild(b1);

      dg.width = 638
      dg.height = 146

      d1.width = 150;
      d1.headerText = "Venue Name";
      d1.dataField = "name";
      d2.width = 150;
      d2.headerText = "Address";
      d2.dataField = "address";
      d3.width = 100;
      d3.headerText = "City";
      d3.dataField = "city";
      d4.width = 50;
      d4.headerText = "State";
      d4.dataField = "state";
      d5.width = 50;
      d5.headerText = "Zip";
      d5.dataField = "zip";
      d6.width = 100;
      d6.headerText = "Phone";
      d6.dataField = "phone";

      arr.push(d1);
      arr.push(d2);
      arr.push(d3);
      arr.push(d4);
      arr.push(d5);
      arr.push(d6);
      dg.columns = arr;

      panel = new Panel();
      panel.title = "Here are our venues:";
      panel.width = 658;
      panel.height = 222;
      panel.addChild(dg);
      panel.addChild(cb);

      }

      public function resultHandler(event:ResultEvent):void {
      /* var icon:Object = map.target.selected.name; */
      arrcol = event.result.venuelist.michigan as ArrayCollection;
      dg.dataProvider = arrcol;
      }

      public function closePopUp(evt:MouseEvent):void {
      PopUpManager.removePopUp(panel);
      }

      public function createPopUp():void {
      var icon:Object = this.selectedItem.name;
      var state:String = icon;
      Alert.show(state, 'Alert Box', mx.controls.Alert.OK);
      getXML.send();
      PopUpManager.addPopUp(panel, this, true);
      PopUpManager.centerPopUp(panel);
      }

      [Bindable]
      public var stateData:ArrayCollection;

      /*
      * This method uses the alpha setting to indicate mouseOver and mouseOut events.
      */
      public function hilightState( event:*, alpha:Number ) : void {
      map.setStateAlpha( event.code, alpha );
      }

      /*
      * This method is invoked by the click event on the map. All this does is set the comboBox to
      * the state selected.
      */
      public function selectState( event:USAMapEvent ) : void {
      var stateData:Object = map.stateData;
      for(var i:Number=0; i < stateData.length; i++) {
      if( event.code == stateData .code ) {


      break;
      }
      }
      }

      /*
      * This method is used to set the color of a state based on the item given.
      */
      public function dataColor( item:Object ) : Number {
      if( item.present > 0 ) return 0x2e81fe;
      else return 0xe9e9e9;
      }




      ]]>
      </mx:Script>

      <mx:CurrencyFormatter id="currFmt" />
      <mx:NumberFormatter id="numFmt" />


      <!-- Set the USAMap and its initial properties:
      dataProvider - maps state codes to colors and valuesa
      dataField - indicates which field should be displayed in the dataTip
      formatFunction - specifies a function to use to present the data tip
      clickState - event handler invoked when mouse is pressed and released over a state
      rollOverState - event handler invoked when mouse is rolled over a state
      rollOutState - event handler invoked when a mouse is rolled out of a state
      -->
      <USAMap id="map" dataProvider="{populationData.state}"
      dataField="population" colorFunction="dataColor"
      mapLoaded="stateData = new ArrayCollection(map.stateData)"
      clickState="createPopUp()"
      rollOverState="hilightState(event,.5)"
      rollOutState="hilightState(event,1)" left="10" top="10"/>


      </mx:Application>