topic Re: Secure editing in a mobile flex project in ArcGIS API for Flex Questions

Secure editing in a mobile flex project

ClintonCooper1 — Wed, 31 Jul 2013 12:12:51 GMT

I have been running through the flex in a week tutorial and been playing around with developing a flex mobile app using snippets from flex api samples. I found the Secure editing sample, and have been trying to run that in a flex mobile project. However, I am running into an error when I run IdentityManager function in the code:

 <?xml version="1.0" encoding="utf-8"?> <s:View 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:esri="http://www.esri.com/2008/ags"   initialize="application1_initializeHandler(event)">    <fx:Script>   <![CDATA[    import com.esri.ags.components.IdentityManager;    import com.esri.ags.events.LayerEvent;    import com.esri.ags.geometry.MapPoint;    import com.esri.ags.layers.TiledMapServiceLayer;        import mx.events.FlexEvent;        protected function application1_initializeHandler(event:FlexEvent):void    {     IdentityManager.instance.enabled = true;    }        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;    }    protected function marine_loadHandler(event:LayerEvent):void    {     myEditor.featureLayers = [ marine ];     myEditor.attributeInspector.fieldInspectors = [ creatorFI, typeFI ];    }   ]]>  </fx:Script>

I get the runtime error of

 ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.  at flash.display::DisplayObjectContainer/getChildIndex()  at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::rawChildren_getChildIndex()  at mx.managers::SystemRawChildrenList/getChildIndex()  at spark.components.supportClasses::StyleableStageText/getFormIndex()  at spark.components.supportClasses::StyleableStageText/findTopmostForm()  at spark.components.supportClasses::StyleableStageText/updateProxyImageForTopmostForm()  at spark.components.supportClasses::StyleableStageText/commitProperties()  at mx.core::UIComponent/validateProperties()  at mx.managers::LayoutManager/validateClient()  at mx.managers::PopUpManagerImpl/addPopUp()  at mx.managers::PopUpManagerImpl/createPopUp()  at mx.managers::PopUpManager$/createPopUp()  at com.esri.ags.components::IdentityManager/popUpSignInWindow()  at com.esri.ags.components::IdentityManager/signIn()  at com.esri.ags.components::IdentityManager/doSignIn()  at com.esri.ags.components::IdentityManager/enqueue()  at Function/com.esri.ags.components:IdentityManager/getCredential/com.esri.ags.components:svcInfoResult2()  at mx.rpc::Responder/result()  at Function/<anonymous>()  at MyURLLoader/completeHandler()  at flash.events::EventDispatcher/dispatchEventFunction()  at flash.events::EventDispatcher/dispatchEvent()  at flash.net::URLLoader/onComplete()

Is this an error due to the creation of a popup window on a cell device or is this just an error due to bad code writing? the code works great in a windowed project, but causes this error on a mobile project. Thanks in advance for helping me understand what is going on!

Clinton

After doing some more research on IdentityManager, I think the issue has something due to do with configuring PopUpManager. But I am not yet there technically to understand it. Thanks!

Re: Secure editing in a mobile flex project

DasaPaddock — Wed, 31 Jul 2013 19:12:19 GMT

What version of AIR are you using and what device are you testing this on?

Re: Secure editing in a mobile flex project

DasaPaddock — Wed, 31 Jul 2013 19:15:44 GMT

Also what version of the Flex SDK are you using?

It looks like the error may be coming from StyleableStageText.

Re: Secure editing in a mobile flex project

ClintonCooper1 — Wed, 31 Jul 2013 19:31:48 GMT

Also what version of the Flex SDK are you using?

It looks like the error may be coming from StyleableStageText.

Flash Builder 4.7 with Flex SDK 4.6 through air 3.4. I am running this code through Flash Builder on an Air simulator android device (incredible 2). I have not yet tried it on my actual phone as I am just trying some different things.

I get it to run once...when I first start up flash builder. However, subsequent runs I get this error.

I also have the mx.swc and sparkskins.swc added to the build path.

Re: Secure editing in a mobile flex project

DasaPaddock — Wed, 31 Jul 2013 19:33:43 GMT

Can you try AIR 3.8?

Re: Secure editing in a mobile flex project

ClintonCooper1 — Wed, 31 Jul 2013 22:17:58 GMT

Updated to air 3.8 and still getting the same error.

Re: Secure editing in a mobile flex project

ClintonCooper1 — Sat, 11 Dec 2021 14:43:33 GMT

I have attached my full code in hopes of finding the reason for the error. I do not have any other relevant code in the viewnavigator.mxml


<?xml version="1.0" encoding="utf-8"?>
<s:View 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:esri="http://www.esri.com/2008/ags"
  initialize="application1_initializeHandler(event)">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.components.IdentityManager;
   import com.esri.ags.events.LayerEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.layers.TiledMapServiceLayer;
   
   import mx.events.FlexEvent;
   
   protected function application1_initializeHandler(event:FlexEvent):void
   {
    IdentityManager.instance.enabled = true;
   }
   
   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;
   }
   protected function marine_loadHandler(event:LayerEvent):void
   {
    myEditor.featureLayers = [ marine ];
    myEditor.attributeInspector.fieldInspectors = [ creatorFI, typeFI ];
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:Extent id="initialExtent"
      xmin="-13449015" ymin="4182302" xmax="-13433803" ymax="4191340">
   <esri:SpatialReference wkid="102100"/>
  </esri:Extent>
  <!-- FieldInspector for the 'creator' field -->
  <esri:FieldInspector id="creatorFI"
        featureLayer="{marine}"
        fieldName="creator"
        label="Biologist"/>
  <esri:FieldInspector id="typeFI"
        featureLayer="{marine}"
        fieldName="type"
        label="Sighting"/> 
 </fx:Declarations>
 
 
 <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/World_Imagery/MapServer"
           visible="{bb.selectedIndex == 1}"/>
  <esri:FeatureLayer id="marine" name="SaveTheBay-Marine"
         load="marine_loadHandler(event)"
         mode="snapshot"
         outFields="[type, confirmed, comments, creator]"
         url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/SaveTheBay/FeatureServer/0"/>
 </esri:Map>
 <s:ButtonBar id="bb"
     right="0"
     requireSelection="true">
  <s:dataProvider>
   <s:ArrayList>
    <fx:String>Street</fx:String>
    <fx:String>Imagery</fx:String>
   </s:ArrayList>
  </s:dataProvider> 
 </s:ButtonBar>
 
 <esri:Editor id="myEditor"
     width="100%" height="75"
     geometryService="{new GeometryService('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer')}"
     includeInLayout="false"
     map="{myMap}"
     visible="true"/>
 <esri:Geocoder width="200" height="30"
       bottom="5"
       horizontalCenter="0"
       map="{myMap}"/>
</s:View>

Re: Secure editing in a mobile flex project

DasaPaddock — Thu, 01 Aug 2013 15:31:22 GMT

Does it work one time, every time you start Flash Builder? It may be a bug in the simulator. Can you try on a device?

Re: Secure editing in a mobile flex project

ClintonCooper1 — Thu, 01 Aug 2013 16:14:34 GMT

Just tried it on my device, and it worked flawlessly the first time. However after closing the app (stopping the program completely), I reopened it, and could not get anything (just a screen with a few buttons, but no login screen).

Clinton

Re: Secure editing in a mobile flex project

DasaPaddock — Thu, 01 Aug 2013 16:30:42 GMT

Which device did you test it on?

There is an option to not show the sign in as a pop-up. You can listen for the "showSignInWindow" event and then call event.preventDefault().

See:
https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/IdentityManager.html#event:showSignInWindow

You then could show the sign in form in a new View. See the source for the default form in the skins folder at:
com/esri/ags/skins/supportClasses/SignInWindow.mxml

Re: Secure editing in a mobile flex project

ClintonCooper1 — Fri, 02 Aug 2013 16:08:55 GMT

dpaddock,
As I am still just learning Flex, can you give me a outline from how the application should go, starting from when the application is started to the completion of entering in the credentials? I am not sure I follow on what you were saying above. If I understand you correctly, the order should be:

start app (initialize view), once it is initialized, fire the handler which will initialize the identity manger. Once the handler initializes the Identity Manager it fires the showSignInWindow which asks for the credentials?

The guidance also talks about an the IdentityManagerEvent, and this is confusing me a bit Can you give me something brief on this or point me in the direction of where I can get a better understanding of the differences? thanks!

Clinton

Re: Secure editing in a mobile flex project

ClintonCooper1 — Sat, 11 Dec 2021 14:43:36 GMT

Dasa,

After following the guidance you provided, I believe I have done it correctly, but I am still getting the same error after the second time I run the air app simulator of an incredible 2 android device (I have also tried it on the actual device and encountered the same problem). I inserted the code:

IdentityManager.instance.signInWindowClass = mySkins.supportClasses.CustomSignInWindow;

after the

IdentityManager.instance.enabled = true;

Here is what the new block looks like:


import com.esri.ags.components.IdentityManager;
import com.esri.ags.skins.supportClasses.SignInWindow;
import com.esri.ags.events.LayerEvent;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.layers.TiledMapServiceLayer;
   
import mx.events.FlexEvent;
   
import mySkins.supportClasses.CustomSignInWindow;
   
protected function application1_initializeHandler(event:FlexEvent):void
 {
  identityManager.instance.enabled = true;
  IdentityManager.instance.signInWindowClass = mySkins.supportClasses.CustomSignInWindow;
 }

I pasted the signinwindow code from the ArcGIS_API_Flex_3.4\skins\src\com\esri\ags\skins\supportClasses into a new mxml file located at src/myskins/supportClasses and called it CustomSignInWindow.

Hers is the full code from that file that I am using (which is the default code from the ArcGIS flex api file)

<?xml version="1.0" encoding="utf-8"?>
<!--
     Copyright (c) 2011 ESRI

     All rights reserved under the copyright laws of the United States
     and applicable international laws, treaties, and conventions.

     You may freely redistribute and use this sample code, with or
     without modification, provided you include the original copyright
     notice and use restrictions.

     See use restrictions in use_restrictions.txt.
-->
<!---
     @private
-->
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="325"
               close="cancel()"
               initialize="titlewindow_initializeHandler(event)"
               title="{resourceManager.getString('ESRIMessages', 'signInWindow_title')}">

    <s:layout>
        <s:VerticalLayout gap="0"
                          paddingBottom="6"
                          paddingLeft="6"
                          paddingRight="6"
                          paddingTop="6"/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.components.IdentityManager;
            import com.esri.ags.components.supportClasses.Credential;
            import com.esri.ags.components.supportClasses.SignInInfo;

            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            import mx.rpc.Fault;
            import mx.rpc.Responder;
            import mx.utils.StringUtil;
            import mx.utils.URLUtil;

            //--------------------------------------------------------------------------
            //
            //  Variables
            //
            //--------------------------------------------------------------------------

            protected var m_idManager:IdentityManager = IdentityManager.instance;

            [Bindable]
            protected var m_busy:Boolean;

            //--------------------------------------------------------------------------
            //
            //  Methods
            //
            //--------------------------------------------------------------------------

            protected function signIn():void
            {
                const usr:String = username.text;
                const pwd:String = password.text;
                const signInInfo:SignInInfo = m_idManager.currentSignInInfo;

                if (m_busy || !signInInfo || !usr || !pwd)
                {
                    // Invalid input
                    return;
                }

                m_busy = true;
                errorMsg.visible = false;
                m_idManager.generateCredential(signInInfo.serverInfo,
                                               usr, pwd,
                                               new mx.rpc.Responder(generateCredentialResult,
                                                                    generateCredentialFault));
            }

            protected function cancel():void
            {
                m_idManager.setCredentialForCurrentSignIn(null);
                PopUpManager.removePopUp(this);
            }

            protected function generateCredentialResult(credential:Credential):void
            {
                m_idManager.setCredentialForCurrentSignIn(credential);
                PopUpManager.removePopUp(this);
            }

            protected function generateCredentialFault(fault:Fault):void
            {
                // Login error. Keep the dialog open.
                var faultString:String = fault.faultString;
                if (faultString
                    && (faultString.indexOf("2048") != -1 // Security sandbox violation
                    || faultString.indexOf("2032") != -1)) // Stream Error
                {
                    errorMsg.text = faultString;
                }
                else
                {
                    errorMsg.text = resourceManager.getString('ESRIMessages', 'signInWindow_error');
                    password.text = "";
                    password.setFocus();
                }
                m_busy = false;
                errorMsg.visible = true;
            }

            //--------------------------------------------------------------------------
            //
            //  Event Handlers
            //
            //--------------------------------------------------------------------------

            protected function titlewindow_initializeHandler(event:FlexEvent):void
            {
                const signInInfo:SignInInfo = m_idManager.currentSignInInfo;
                const info:String = resourceManager.getString('ESRIMessages', 'signInWindow_info');
                const resourceHost:String = URLUtil.getServerNameWithPort(signInInfo.resourceURL);

                // default info is "Please log in to access {0} on {1}"
                infoText.text = StringUtil.substitute(info, signInInfo.resourceName, resourceHost);

                if (!URLUtil.isHttpsURL(signInInfo.serverInfo.tokenServiceURL))
                {
                    insecureMsg.text = resourceManager.getString('ESRIMessages', 'signInWindow_insecure');
                    insecureMsg.visible = insecureMsg.includeInLayout = true;
                }
            }
        ]]>
    </fx:Script>

    <s:RichEditableText id="infoText"
                        width="100%"
                        editable="false"
                        focusEnabled="false"/>

    <s:Form width="100%">
        <s:layout>
            <s:FormLayout gap="0"/>
        </s:layout>
        <s:FormItem width="100%"
                    label="{resourceManager.getString('ESRIMessages', 'signInWindow_username')}"
                    required="true">
            <s:TextInput id="username"
                         width="100%"
                         autoCorrect="false"
                         enter="password.setFocus()"
                         returnKeyLabel="next"/>
        </s:FormItem>
        <s:FormItem width="100%"
                    label="{resourceManager.getString('ESRIMessages', 'signInWindow_password')}"
                    required="true">
            <s:TextInput id="password"
                         width="100%"
                         displayAsPassword="true"
                         enter="signIn()"
                         returnKeyLabel="go"/>
        </s:FormItem>
        <s:Label id="insecureMsg"
                 width="100%"
                 includeInLayout="false"
                 textAlign="center"
                 visible="false"/>
    </s:Form>

    <s:Label id="errorMsg"
             width="100%"
             textAlign="center"
             visible="false"/>

    <s:HGroup width="100%"
              gap="10"
              horizontalAlign="center"
              paddingTop="10">
        <s:Button click="signIn()"
                  enabled="{!m_busy &amp;&amp; username.text &amp;&amp; password.text}"
                  label="{m_busy ? resourceManager.getString('ESRIMessages', 'signInWindow_signingIn') : resourceManager.getString('ESRIMessages', 'signInWindow_OK')}"/>
        <s:Button click="cancel()" label="{resourceManager.getString('ESRIMessages', 'signInWindow_cancel')}"/>
    </s:HGroup>

</s:TitleWindow>

As I am still getting the same error upon opening this a second time, is there a trick that I am not doing to use this in a mobile environment as was developed for Viewer? Are the tags of </s:TitleWindow> the appropriate tags for a mobile app? Thanks in advance!

Clinton

Re: Secure editing in a mobile flex project

LloydHeberlie — Tue, 20 Aug 2013 15:12:48 GMT

 <?xml version="1.0" encoding="utf-8"?> <s:View 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:esri="http://www.esri.com/2008/ags"   initialize="application1_initializeHandler(event)">    <fx:Script>   <![CDATA[    import com.esri.ags.components.IdentityManager;    import com.esri.ags.events.LayerEvent;    import com.esri.ags.geometry.MapPoint;    import com.esri.ags.layers.TiledMapServiceLayer;        import mx.events.FlexEvent;        protected function application1_initializeHandler(event:FlexEvent):void    {     IdentityManager.instance.enabled = true;    }        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;    }    protected function marine_loadHandler(event:LayerEvent):void    {     myEditor.featureLayers = [ marine ];     myEditor.attributeInspector.fieldInspectors = [ creatorFI, typeFI ];    }   ]]>  </fx:Script>

I get the runtime error of

 ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.  at flash.display::DisplayObjectContainer/getChildIndex()  at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::rawChildren_getChildIndex()  at mx.managers::SystemRawChildrenList/getChildIndex()  at spark.components.supportClasses::StyleableStageText/getFormIndex()  at spark.components.supportClasses::StyleableStageText/findTopmostForm()  at spark.components.supportClasses::StyleableStageText/updateProxyImageForTopmostForm()  at spark.components.supportClasses::StyleableStageText/commitProperties()  at mx.core::UIComponent/validateProperties()  at mx.managers::LayoutManager/validateClient()  at mx.managers::PopUpManagerImpl/addPopUp()  at mx.managers::PopUpManagerImpl/createPopUp()  at mx.managers::PopUpManager$/createPopUp()  at com.esri.ags.components::IdentityManager/popUpSignInWindow()  at com.esri.ags.components::IdentityManager/signIn()  at com.esri.ags.components::IdentityManager/doSignIn()  at com.esri.ags.components::IdentityManager/enqueue()  at Function/com.esri.ags.components:IdentityManager/getCredential/com.esri.ags.components:svcInfoResult2()  at mx.rpc::Responder/result()  at Function/<anonymous>()  at MyURLLoader/completeHandler()  at flash.events::EventDispatcher/dispatchEventFunction()  at flash.events::EventDispatcher/dispatchEvent()  at flash.net::URLLoader/onComplete()

Hi Clinton,

Sorry it took me so long to get this to you. Here is a sample that should help get you going with secure mobile editing. https://github.com/lheberlie/building-mobile-apps-flex/tree/develop/samples/secure-mobile-editing/src
I used Adobe Flex SDK 4.6.0 with AIR SDK 3.8 overlay when testing this sample.

Re: Secure editing in a mobile flex project

ClintonCooper1 — Tue, 20 Aug 2013 15:36:12 GMT

Thank you so much! That was exactly what I was looking for, and it works beautifully!!

Clinton

Re: Secure editing in a mobile flex project

LloydHeberlie — Tue, 20 Aug 2013 16:30:09 GMT

Thank you so much! That was exactly what I was looking for, and it works beautifully!!

Clinton

I'm glad you got it working.

Re: Secure editing in a mobile flex project

KomanDiabate — Wed, 21 Aug 2013 20:55:48 GMT

Hi Lloyd,
Thanks for the code, this is a really good example to learn from.
I really hope there will be more focused apps like this in the future, so we can expand our mobile application knowledge.

Koman D.

Re: Secure editing in a mobile flex project

ClintonCooper1 — Thu, 22 Aug 2013 11:41:16 GMT

I agree. As a new developer, there are so few mobile apps examples out there to learn from. Going through the tutorials (from flash builder 4.5) only gets you so far and teaches you so much. I wish ESRI would invest more time into providing mobile focused web apps.

Re: Secure editing in a mobile flex project

LloydHeberlie — Mon, 26 Aug 2013 15:03:25 GMT

I agree. As a new developer, there are so few mobile apps examples out there to learn from. Going through the tutorials (from flash builder 4.5) only gets you so far and teaches you so much. I wish ESRI would invest more time into providing mobile focused web apps.

Do you have other specific mobile samples you would like to see integrated into the core samples?
Have you seen these also?
http://video.esri.com/watch/2298/building-mobile-applications-with-arcgis-api-for-flex
http://proceedings.esri.com/library/userconf/devsummit13/papers/devsummit-044.pdf
https://github.com/lheberlie/building-mobile-apps-flex
https://github.com/lheberlie/building-mobile-apps-flex/wiki