Secure editing in a mobile flex project

[ClintonCooper1]

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!

[ClintonCooper1]

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

[ClintonCooper1]

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

[LloydHeberlie · Accepted solution]

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!

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/sr...
I used Adobe Flex SDK 4.6.0 with AIR SDK 3.8 overlay when testing this sample.

[ClintonCooper1]

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

Clinton

[LloydHeberlie]

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

Clinton

I'm glad you got it working.

[KomanDiabate]

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.

[ClintonCooper1]

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.

[LloydHeberlie]

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