Flex Viewer 3.0

[AngieGarcia1]

Hi,

Can someone answer this general question? 

I have read ESRIs documentation and do not understand how to do the following:
I open to view the MapSwitcher.mxml sample application in Adobe Flash Builder 4.6, copy and paste the Basic Route.mxml sample into the MapSwitcher.mxml, then compiled it.  When it opens in my web browser, the street map was overlay on the Map Switcher maps.  How do I fix it so when the application opens, I can select the street map then click my stop and end route points.

Below is the sample code I used:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags"
      pageTitle="Toggle between Map Services">
<!--
This sample shows one way of allowing users to change between different basemaps.
It also ensures that the levels of detail (LOD) are updated based on which basemap is selected.
If all base maps have the same LODs, you wouldn't need the layerShowHandler function.
-->
<fx:Script>
  <![CDATA[
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.layers.TiledMapServiceLayer;
  
   import mx.events.FlexEvent;
  
   private function layerShowHandler(event:FlexEvent):void
   {
    // update the LODs/zoomslider to use/show the levels for the selected base map
    var tiledLayer:TiledMapServiceLayer = event.target as TiledMapServiceLayer;
    myMap.lods = tiledLayer.tileInfo.lods;
   }
  ]]>
</fx:Script>

<esri:Map id="myMap"
     level="4"
     load="myMap.centerAt(new MapPoint(-11713000, 4822000))">
  <esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
           url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
           visible="{bb.selectedIndex == 0}"/>
  <esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
           url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
           visible="{bb.selectedIndex == 1}"/>
  <esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
           url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
           visible="{bb.selectedIndex == 2}"/>
</esri:Map>
<s:ButtonBar id="bb"
     right="5" top="5"
     requireSelection="true">
  <s:dataProvider>
   <s:ArrayList>
    <fx:String>Streets</fx:String>
    <fx:String>U.S. Topo</fx:String>
    <fx:String>Imagery</fx:String>
   </s:ArrayList>
  </s:dataProvider>
</s:ButtonBar>

<!--Next the basic routing will begin -->

  <fx:Script>
   <![CDATA[
    import com.esri.ags.FeatureSet;
    import com.esri.ags.Graphic;
    import com.esri.ags.events.MapMouseEvent;
    import com.esri.ags.events.RouteEvent;
    import com.esri.ags.tasks.supportClasses.RouteResult;
    import com.esri.ags.utils.WebMercatorUtil;
   
    import mx.controls.Alert;
    import mx.rpc.events.FaultEvent;
   
    private var lastRoute:Graphic;
   
    private function mapClickHandler(event:MapMouseEvent):void
    {
     var stop:Graphic = new Graphic(event.mapPoint, stopSymbol);
     graphicsLayer.add(stop);
    
     stops.push(stop);
     if (stops.length > 1)
     {
      routeTask.solve(routeParams);
     }
    }
   
    private function solveCompleteHandler(event:RouteEvent):void
    {
     var routeResult:RouteResult = event.routeSolveResult.routeResults[0];
     routeResult.route.symbol = routeSymbol;
     graphicsLayer.remove(lastRoute);
     // TODO: if your server is AGS10, you can ask for it to be projected
     // (instead of having to project it clientside)
     routeResult.route.geometry = WebMercatorUtil.geographicToWebMercator(routeResult.route.geometry);
     lastRoute = routeResult.route;
     lastRoute.toolTip = routeResult.routeName;
     if (routeResult.stops && routeResult.stops.length > 0)
     {
      lastRoute.toolTip += " with " + routeResult.stops.length + "stops";
     }
     if (routeResult.route.attributes.Total_Time)
     {
      lastRoute.toolTip += " in " + Math.round(Number(routeResult.route.attributes.Total_Time)) + " minutes.";
     }
     graphicsLayer.add(lastRoute);
    }
   
    private function faultHandler(event:FaultEvent):void
    {
     Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail, "Routing Error " + event.fault.faultCode);
     // remove last stop (or both stops if only two)
     if (stops.features.length <= 2)
     {
      graphicsLayer.clear();
     }
     else
     {
      graphicsLayer.remove(stops.features.pop());
     }
    }
   ]]>
  </fx:Script>
 
  <fx:Declarations>
   <esri:RouteTask id="routeTask"
       concurrency="last"
       fault="faultHandler(event)"
       requestTimeout="30"
       showBusyCursor="true"
       solveComplete="solveCompleteHandler(event)"
       url="http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route"/>
  
   <esri:RouteParameters id="routeParams">
    <esri:stops>
     <esri:FeatureSet>
      <esri:features>
       <fx:Array id="stops"/>
      </esri:features>
     </esri:FeatureSet>
    </esri:stops>
   </esri:RouteParameters>
  
   <esri:SimpleMarkerSymbol id="stopSymbol"
          size="15"
          style="triangle">
    <esri:SimpleLineSymbol width="4"/>
   </esri:SimpleMarkerSymbol>
  
   <esri:SimpleLineSymbol id="routeSymbol"
           width="5"
           alpha="0.5"
           color="0x0000FF"/>
  </fx:Declarations>
 
  <s:Label fontSize="12" text="Click on the map to add stops for your routing..."/>
  <esri:Map mapClick="mapClickHandler(event)" openHandCursorVisible="false">
   <esri:extent>
    <esri:Extent xmin="-13048000" ymin="4034000" xmax="-13043000" ymax="4038000">
     <esri:SpatialReference wkid="102100"/>
    </esri:Extent>
   </esri:extent>
   <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
   <esri:GraphicsLayer id="graphicsLayer"/>
  </esri:Map>
</s:Application>

Thank You
Angie

[RobertScheitlin__GISP]

Angie,

   You seems to be a little confused... You can not just take a widget from the Flex Viewer and paste it's code into a non Flex Viewer app.

[AngieGarcia1]

Hi,

Can someone clarify a couple of things?

The new flex viewer 3.0 has no config.xml file, but it can be viewed in Adobe Flash Builder, as I saw.  In addition, the Read document has a set of instructions to load the libraries and sample .mxml files, which can be viewed through Adobe Flash Builder 4.6.  The widgets consist of two files, according to ESRI, the .swf and .xml file. My question is:
How can you say that the sample files in viewer 3.0 is a widget, when it only contains an .mxml file extension?  Unless this is something new in the flex viewer 3.0?

What was provided with flex viewer 3.0 was the source code and sample applications, there is no .ai file extension like the flex 2.5 application that one can build a web application with and add widgets, is this correct?

All help welcomed,

Angie

[RobertScheitlin__GISP]

Angie,

   Hmm... The Zip file that you get when you download the Flex Viewer 3.0 Pre Release most definitely does have a config.xml
ArcGIS-ArcGISViewerForFlex-16b7ba8\src\config.xml.

The ReadMe.txt has theses instructions for the use of the files:

============================
Getting Started - Developers
============================

See http://links.esri.com/flexviewer-gettingstarted-developers

1. In Flash Builder 4.5, Go to File Menu -> Import -> Flash Builder project.

2. Keeping "File" option selected, click "Browse..." button.

3. Select flexviewer-3.0Prerelease-src.zip downloaded in step 1, e.g. "C:\Documents and Settings\jack\My Documents\flexviewer-3.0Prerelease-src.zip".

4. "Extract new project to:" textbox will be automatically set to location where the project source will reside,
    e.g. "C:\Documents and Settings\jack\Adobe Flash Builder 4\FlexViewer.
    Do not put it onto your web server - you should separate your code location from your output.

5. Click "Finish" button. Project will be created and displayed in the Package Explorer window of Flash Builder 4, e.g. in this case FlexViewer.

Yes a Compiled widget does consist of a (compiled mxml file) swf and most of the time an xml file for it's configuration.

In your first post you posted a FLEX API (not Flex Viewer) sample code app and sounded like you wanted to paste the mxml code from the MapSwitcherWidget.mxml file into that. Well as I mentioned earlier that will not work.

To possibly clear things up the Flex team has two distinct download paths (actually four or more) available downloads:

1. The ArcGIS Flex API - for custom developed applications.


2. The ArcGIS Flex Viewer Application uncompiled - a custom app that uses the Flex API and provides a pre developed web mapping application that can be customized and extended with custom built widgets, that follows a custom pseudo MVC development pattern.


3. The ArcGIS Flex Viewer Application compiled - which is just swfs and xml files and non developer just configure the xml files and deploy the compiled source files to their web server and they are up and running.


4. The Flex Viewer Application Builder that works with the ArcGIS Flex Viewer Application compiled and removes the need for people to have to know and mess with the XML files directly as the App Builder give a GUI interface built in Adobe AIR to do all the xml work for them.

How can you say that the sample files in viewer 3.0 is a widget

I said that because you made this statement

I open to view the MapSwitcher.mxml sample application in Adobe Flash  Builder 4.6, copy and paste the Basic Route.mxml sample into the  MapSwitcher.mxml

Well the MapSwitcher.mxml is ONE file of the whole Flex Viewer application that happens to be a uncompiled widget code file.

there is no .ai file extension like the flex 2.5 application

I am not sure what you are saying here either as .ai files are the Adobe Illustrator file type?...

If I can help further clarify any thing for you don't be afraid to ask, I have been working these forums for many years now and there is never a stupid question.

[AngieGarcia1 · Accepted solution]

Hi Robert,

Thanks for your reply, I did find ESRIs download website which had the entire viewer???s 3.0 source code, .air desktop application where one can create a simple out of box flex viewer etc. But it was not that straight forward to get things working in Adobe Flash Builder 4.6.  I had to read both of the README.txt files and follow two sets of instructions.

Good news, it???s working.

Thanks
Angie

[RobertScheitlin__GISP]

Angie,

Glad you got it working. Don't forget to click the Mark as answer check on this post and to click the top arrow (promote) as shown below: