Hello all,
I am new to flex, and Flash builder, I followed the tutorial in this link: https://developers.arcgis.com/flex/guide/tutorial-query-your-data.htm to write a mobile mapping application that includes a query task, after writing the code, no errors appeared in the problems tab but there was 6 warnings, and when running the app the following error appears (Also shown in screenshots):
An ActionScript error has occurred:
TypeError: Error #1034: Type Coercion failed: cannot convert views::AGISHomeView@6396ae1 to spark.components.View.
at spark.components::ViewNavigator/createViewInstance()
at spark.components::ViewNavigator/commitNavigatorAction()
at spark.components::ViewNavigator/commitProperties()
at mx.core::UIComponent/validateProperties()
at mx.managers::LayoutManager/validateProperties()
at mx.managers::LayoutManager/doPhasedInstantiation()
at mx.managers::LayoutManager/doPhasedInstantiationCallback()
Any kind of help is appreciated.
Hani,
___________________________________________________________________________________________________________
Screenshots:
1- Warnings:
2- Error:
__________________________________________________________________________________________________________
Here is the 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:mx="library://ns.adobe.com/flex/mx"
xmlns="http://ns.adobe.com/air/application/4.6"
xmlns:esri="http://www.esri.com/2008/ags">
<s:layout>
<s:VerticalLayout gap="10"
horizontalAlign="center"
paddingBottom="20"
paddingLeft="25"
paddingRight="25"
paddingTop="20"/>
</s:layout>
<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import mx.controls.Alert;
import mx.rpc.AsyncResponder;
private function doQuery():void
{
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null😞void
{
// No code needed in this simple sample, since the
// graphics layer is bound to the query result using
// graphicProvider="{queryTask.executeLastResult.features}"
}
function onFault(info:Object, token:Object = null😞void
{
Alert.show(info.toString(), "Query Problem");
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Layer with US States -->
<esri:QueryTask id="queryTask"
showBusyCursor="true"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
useAMF="false"/>
<esri:Query id="query"
outSpatialReference="{myMap.spatialReference}"
returnGeometry="true"
text="{qText.text}">
<esri:outFields>
<fx:String>MED_AGE</fx:String>
<fx:String>POP2007</fx:String>
</esri:outFields>
</esri:Query>
</fx:Declarations>
<s:Panel height="60"
backgroundColor="0xB2BFC6"
title="Query a layer (search for a state)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:TextInput id="qText"
width="100%"
enter="doQuery()"
text="California"/>
<s:Button click="doQuery()" label="Do Query"/>
</s:Panel>
<esri:Map id="myMap">
<esri:extent>
<esri:Extent xmin="-14298000" ymin="2748000" xmax="-6815000" ymax="7117000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
</esri:Map>
</s:Application>
_______________________________________________________________
Solved! Go to Solution.
Hani,
What Anthony is taking about is that you are taking the code from a Web Application sample and trying to paste it into a mobile app view, and you can not do that.
You view page code would need to look like this instead:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns="http://ns.adobe.com/air/application/4.6"
xmlns:esri="http://www.esri.com/2008/ags"
title="HomeView">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<esri:QueryTask id="queryTask"
showBusyCursor="true"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
useAMF="false"/>
<esri:Query id="query"
outSpatialReference="{myMap.spatialReference}"
returnGeometry="true"
text="{qText.text}">
<esri:outFields>
<fx:String>MED_AGE</fx:String>
<fx:String>POP2007</fx:String>
</esri:outFields>
</esri:Query>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import mx.rpc.AsyncResponder;
import spark.components.Alert;
private function doQuery():void
{
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null):void
{
// No code needed in this simple sample, since the
// graphics layer is bound to the query result using
// graphicProvider="{queryTask.executeLastResult.features}"
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString(), "Query Problem");
}
}
]]>
</fx:Script>
<s:Panel height="80" width="100%"
backgroundColor="0xB2BFC6"
title="Query a layer (search for a state)">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" paddingRight="2" paddingLeft="2"/>
</s:layout>
<s:TextInput id="qText"
width="100%"
enter="doQuery()"
text="California"/>
<s:Button click="doQuery()" label="Do Query"/>
</s:Panel>
<esri:Map id="myMap">
<esri:extent>
<esri:Extent xmin="-14298000" ymin="2748000" xmax="-6815000" ymax="7117000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
<esri:GraphicsLayer id="myGraphicsLayer" graphicProvider="{queryTask.executeLastResult.features}"/>
</esri:Map>
</s:View>
Hani,
Did you follow this part of the tutorial:
Getting started—ArcGIS API for Flex | ArcGIS for Developers
as it sets up the application to run in the web:
'Web (runs in Adobe Flash Player)' as the application type.
Not as a stand alone flash file in adobe air, which it looks like your file is trying to do
Hello Anthony,
Thank you very much for the help. First of all I am building a flex mobile project to make a mobile mapping app, NOT a web mapping app, and before I started coding, I followed "Getting Started" section in all steps and added the 3 swc libraries (agslib-3.6-2013-12-13, mx, and sparkskins) this is shown with the screenshots below:
1-
2-
3-
4-
5-
Hani,
What Anthony is taking about is that you are taking the code from a Web Application sample and trying to paste it into a mobile app view, and you can not do that.
You view page code would need to look like this instead:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns="http://ns.adobe.com/air/application/4.6"
xmlns:esri="http://www.esri.com/2008/ags"
title="HomeView">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<esri:QueryTask id="queryTask"
showBusyCursor="true"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
useAMF="false"/>
<esri:Query id="query"
outSpatialReference="{myMap.spatialReference}"
returnGeometry="true"
text="{qText.text}">
<esri:outFields>
<fx:String>MED_AGE</fx:String>
<fx:String>POP2007</fx:String>
</esri:outFields>
</esri:Query>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import mx.rpc.AsyncResponder;
import spark.components.Alert;
private function doQuery():void
{
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null):void
{
// No code needed in this simple sample, since the
// graphics layer is bound to the query result using
// graphicProvider="{queryTask.executeLastResult.features}"
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString(), "Query Problem");
}
}
]]>
</fx:Script>
<s:Panel height="80" width="100%"
backgroundColor="0xB2BFC6"
title="Query a layer (search for a state)">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" paddingRight="2" paddingLeft="2"/>
</s:layout>
<s:TextInput id="qText"
width="100%"
enter="doQuery()"
text="California"/>
<s:Button click="doQuery()" label="Do Query"/>
</s:Panel>
<esri:Map id="myMap">
<esri:extent>
<esri:Extent xmin="-14298000" ymin="2748000" xmax="-6815000" ymax="7117000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
<esri:GraphicsLayer id="myGraphicsLayer" graphicProvider="{queryTask.executeLastResult.features}"/>
</esri:Map>
</s:View>
Hani,
Also the Warning you are getting can just be ignored. They are there because of importing the mx.swc (which is necessary).
Dear Robert,
Thank you very much for the help, I used your code; the error and the six warnings disappeared, but two new errors appeared:
1120: Access of undefined property Alert
1172: Definition Spark.components: Alert could not be found
an when I run the app and proceed the errors, it starts with a blank screen.
Thank you again!
1-
2-
3-
Hani,
Sorry, That is because I am using Flex SDK 4.13.0 that has an spark version of the Alert. You just need to remove the spark.components.Alert and replace it with mx.controls.Alert;
Dear Robert,
You are Great!
It worked fine!
Robert,
Could you please recommend me a resource that help me to learn developing Mobile Mapping Apps?
Hani Draidi, I know you asked specifically for Robert's advice, but here is a link to the tutorial for
Mobile-specific application—ArcGIS API for Flex | ArcGIS for Developers . You might also want to consider whether Flex is the right technology for you to use, especially if you are new to Flex and/or mobile apps.
Other options include the ArcGIS API for JavaScript and the iOS/Android/etc SDKs - see Documentation | ArcGIS for Developers or any of the "mobile" presentations from the latest Esri User Conference and Developer Summit.