TypeError: Error #1034: Type Coercion failed: cannot convert views::AGISHomeView@6396ae1 to spark.components.View.

[HaniDraidi]

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>

_______________________________________________________________

[AnthonyGiles]

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

[HaniDraidi]

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-

[RobertScheitlin__GISP · Accepted 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>

[RobertScheitlin__GISP]

Hani,

   Also the Warning you are getting can just be ignored. They are there because of importing the mx.swc (which is necessary).

[HaniDraidi]

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-

[RobertScheitlin__GISP]

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;

[HaniDraidi]

Dear Robert,

You are Great!

It worked fine!

[HaniDraidi]

Robert,

Could you please recommend me a resource that help me to learn developing Mobile Mapping Apps?

[BjornSvensson]

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.