How to add a script block to the index.mxml Viewer code

[DavidBoiano]

Hi all,

I am trying to convert a working MXML application with a custom mapclick handler and an attribute table into the Flex Viewer so that I can take advantage of the better interface and widget capabilities--particularly the collapsable aspect of the attribute table widget.

My question is, what is the best practice for this to be done? Do I add a script block into the index.mxml part, or is it something I should be changing in configuration files? In my first attempt to add my script into the index.mxml file, I realized this wouldn't work because I had variables in my script referencing drop down lists in my control bar, etc. 

Is it possible to get this to work correctly in the viewer?

Thank you so much for your advice.

-David


FYI I am working with Flash Builder 4.6, Flex Api 3.3, and ArcGIS Server 10.

My script is:

<fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.tasks.supportClasses.Query; 
   import mx.collections.ArrayCollection;   
   import spark.events.IndexChangeEvent;
   import com.esri.ags.Map;
   
   
   //Create labels for drop down list data provider
   [Bindable]
   public var myDP:ArrayCollection = new ArrayCollection(
    [ {timeframe:"Last 2 Weeks"},
     {timeframe:"Last Month"},
     {timeframe:"Last 6 Months"},
     {timeframe:"Last Year"}]);
   
   //Create string variable assigned initially to definition expression for last two weeks
   [Bindable]
   public var updateDefExp:String = "TIME_FRAME = 'TWO WEEKS'";
   
   //Create functions to update definition expression in drop down list
   private function doQuery0():void
   {
    var defExp0:String = "TIME_FRAME = 'TWO WEEKS'";
    updateDefExp = defExp0;
   }
   private function doQuery1():void
   {
    var defExp1:String = "TIME_FRAME = '1 MONTH'";
    updateDefExp = defExp1;
   }
   private function doQuery2():void
   {
    var defExp2:String = "TIME_FRAME = '6 MONTHS'";
    updateDefExp = defExp2;
   }
   private function doQuery3():void
   {
    var defExp3:String = "TIME_FRAME = '1 YEAR'";
    updateDefExp = defExp3;
   }
   
   //Create function to update the updateDefExp variable to the correct timeframe
   private function updateSelection(e:IndexChangeEvent):void
   {
    if(myDDL.selectedIndex == 0)
    {
     myFeatureLayer.clearSelection();
     doQuery0();
     myMap.extent=myExtent;
    }
    else if (myDDL.selectedIndex == 1)
    {
     myFeatureLayer.clearSelection();
     doQuery1();
     myMap.extent=myExtent;
    }
    else if (myDDL.selectedIndex == 2)
    {
     myFeatureLayer.clearSelection();
     doQuery2();
     myMap.extent=myExtent;
    }
    else if (myDDL.selectedIndex == 3)
    {
     myFeatureLayer.clearSelection();
     doQuery3();
     myMap.extent=myExtent;
    }
   }
   
   
   protected function myMap_clickHandler(event:MouseEvent):void
   {
    if (event.target is Graphic || event.target.parent is Graphic)
    {
     var graphic:Graphic = event.target is Graphic ? Graphic(event.target) : Graphic(event.target.parent);
     var query:Query = new Query;
     query.objectIds = [ graphic.attributes[myFeatureLayer.layerDetails.objectIdField]];
     myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
     myMap.zoomTo(graphic.geometry);
     myMap.scale = 1000;
    }
    else
    {
     myFeatureLayer.clearSelection();
    }
   }  
  ]]>
 </fx:Script>

[BjornSvensson]

In general it depends on what code/functionality you are trying to transfer to the flex viewer.  Often it already has the functionality, so there is nothing to do (except learning how to use it). 

When adding new code is required, most people create a widget as a way to add their functionality.  This encapsulates it nicely and makes it easy to upgrade to newer versions.

Sometimes people tweak an existing widget if it's already close to what they are looking for. Other times it's better to start from scratch (or with the Hello World sample).

It really depends on what you are trying to do in a specific case.

[DavidBoiano]

Hi Bjorn,

Thanks for responding. Essentially what I have done is created a mapclick handler for selecting points from the one operational layer in my map. If the click is recognized as a graphic, then the map will zoom in to that point at a scale of myMap.scale = 1000.  Anytime the point is clicked, it will go to this scale.  There is also a drop down list in the control bar that when it is changed, it reassigns a variable to change the definitionExpression of the feature layer in order only show the features from the time frame as selected in the list. 

If I were to encapsulate all of this functionality into a custom widget, how does that work exactly? Does the widget have to be open and active for the mapclicks to work correctly?

Thanks for your help, I really appreciate it!

David