13 Replies Latest reply on Jan 30, 2012 8:23 AM by jetrased

    Modal Focus Question

    jetrased

      Hi

       

      IU am using popupManager to display a login form for an application. I was having issues getting the popup to become the active focus (I was not able to tab to the textInput fields, the parent application was getting the focus).

       

      I implemented mx.core.IFlexDisplayObject in my Login component that I was loading and the textFields became able to be tabbed. However I noticed something else. They became tabbable when I had set the modal value to false. The drawback is that the application in the background does not get disabled awaiting the login details.

       

      The problem i am having is: I want the modal set to true while also enabling the tabbing. I am wondering what the best way to achieve this is?

       

      Should I set it to false and disabel the background? (if so -how) Or is there something I am missing?

       

      The PopUp gets called on creation complete. I am wondering alos is it a timing thing, of the popup getting created at the same time as the application and hence not getting the focus?

       

       

      Creating the PopUp form the main application.

       

      stwLogOn = StwLogOn(PopUpManager.createPopUp(this, StwLogOn, true));

      stwLogOn.addEventListener("clickOK", handleCloseLogOnDlg);

       

       

      Any suggestions woudl be great.

        • 1. Re: Modal Focus Question
          Flex harUI Adobe Employee

          Does the popup implement IFocusManagerContainer?

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.<http://www.adobe.com/>

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Modal Focus Question
            jetrased Level 1

            Hi

             

            Ah no id does not, I used the BorderContainer component instead as I believe that inherits the IFocusManagerContainer and the problem is gone. Thanks for that


            • 3. Re: Modal Focus Question
              jetrased Level 1

              Hi

               

              Random bug I noticed, I am using a setINterval method to delay the calling of my Modal window popup. This along with the IFocusManagerContainer seemed to have eliminated my problem. However I checked running it in chrome and the problem is back, works fine in IE and Firefox, any thoughts on what might be causing this?

               

              The setinterval has a 2second delay to allow the application to loading befor epoppint up the login form

              • 4. Re: Modal Focus Question
                saisri2k2 Level 4

                Yes, I agree with jetrased, use Timer or setInterval to delay setting the focus, even I use 2 sec

                • 5. Re: Modal Focus Question
                  jetrased Level 1

                  Any ideas on why the delay needs to be longer for chrome? Tried googling but is there a way to set different intervals / timers depending on the browser?

                  • 6. Re: Modal Focus Question
                    Flex harUI Adobe Employee

                    Relying on timers is a bad practice.  It is effectively trying to fix an intermittent problem with an intermittent event.  There is a certain amount of probability involved.

                     

                    It is better to understand the sequence of events and use events to trigger the focus code.  Usually, waiting for applicationComplete is a good time to put up a popup, and the popup should wait for creationComplete before setting focus.  If that doesn’t work, I would delay via callLater from the creationComplete event, not a timer.

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.<http://www.adobe.com/>

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: Modal Focus Question
                      jetrased Level 1
                      • I tried to use the applicationComplete but it doesn't seem to wrok. I am wondering about your setting focus, I am currently not setting any focus, wondering if that is my problem.

                       

                      here is the code example

                       

                      <ns:WorkspaceApplication xmlns:mx="http://www.adobe.com/2006/mxml"

                                                                                    xmlns:ns="http://www.ns.com/flex/mxml" creationComplete="creationComplete()">

                       

                      Then in that method I am calling

                       

                      callLater(popupLogOnDlg);

                       

                      And the Method then calling the popup

                       

                      stwLogOn = new StwLogOn();

                      stwLogOn.addEventListener("clickOK", handleCloseLogOnDlg);

                       

                      stwLogOn = StwLogOn(PopUpManager.createPopUp(this, StwLogOn, true));

                                                    stwLogOn.addEventListener("clickOK", handleCloseLogOnDlg);

                                                    PopUpManager.centerPopUp(stwLogOn);

                       

                       

                      The component stwLogOn is built on BorderContainer

                      • 8. Re: Modal Focus Question
                        Flex harUI Adobe Employee

                        Usually, a popup’s creationComplete handler calls setFocus() on something.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.<http://www.adobe.com/>

                        Blog: http://blogs.adobe.com/aharui

                        • 9. Re: Modal Focus Question
                          jetrased Level 1

                          When I called set focus on one of the text input fields, the focus is put onto that field . However when I tab, it goes back to the application in the background.

                           

                          I can't think why that is happening.

                          • 10. Re: Modal Focus Question
                            Flex harUI Adobe Employee

                            You sure your popup implements IFocusManagerContainer?

                             

                            Alex Harui

                            Flex SDK Developer

                            Adobe Systems Inc.<http://www.adobe.com/>

                            Blog: http://blogs.adobe.com/aharui

                            • 11. Re: Modal Focus Question
                              jetrased Level 1

                              Yeah it should, I have attached code incase I am way off.

                               

                              <?xml version="1.0" encoding="utf-8"?>

                              <s:BorderContainer            cornerRadius="10"  borderStyle="inset" borderWeight="6"           left="10" right="10" top="10" bottom="10"

                                                                                xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                                                xmlns:s="library://ns.adobe.com/flex/spark"

                                                                                xmlns:sas="http://www.sas.com/flex/mxml"

                                                                                xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="200"

                                                                                implements="mx.managers.IFocusManagerContainer"

                                                                                defaultButton = "{okBtn}" creationComplete="doIt(event)">

                               

                               

                                        <fx:Script>

                                                  <![CDATA[

                                                            import com.sas.commons.controls.Alert;

                                                            import com.sas.commons.images.ImageLibrary;

                               

                                                            import mx.events.CloseEvent;

                                                            import mx.events.FlexEvent;

                                                            import mx.managers.FocusManager;

                                                            import mx.managers.IFocusManagerContainer;

                                                            import mx.managers.PopUpManager;

                               

                                                            public var focus:FocusManager

                               

                               

                                                            private function handleClickOK():void

                                                            {

                               

                                                                      dispatchEvent(new Event("clickOK"))

                                                            }

                               

                                                            private const BACKGROUND_COLOR:Object = "haloBlue";

                               

                                                            private function formItem_focusIn(evt:FocusEvent):void {

                                                                      var item:FormItem = FormItem(evt.currentTarget.parent);

                                                                      item.setStyle("backgroundAlpha", 0.2);

                                                                      item.setStyle("backgroundColor", BACKGROUND_COLOR);

                                                            }

                               

                                                            private function formItem_focusOut(evt:FocusEvent):void {

                                                                      var item:FormItem = FormItem(evt.currentTarget.parent);

                                                                      item.setStyle("backgroundColor", null);

                                                            }

                               

                               

                               

                               

                                                            protected function doIt(event:FlexEvent):void

                                                            {

                                                                      // TODO Auto-generated method stub

                                                                      nameTextInput.setFocus();

                                                            }

                               

                                                  ]]>

                                        </fx:Script>

                               

                               

                                        <mx:Form width="100%"  paddingTop="50">

                                                  <mx:FormItem width="100%" fontThickness="620" fontSize="15"  label="User name:" horizontalAlign="center">

                                                            <mx:TextInput width="100%"

                                                                                            focusIn="formItem_focusIn(event);"

                                                                                            focusOut="formItem_focusOut(event);" restrict="A-Za-z0-9_." id="nameTextInput"/>

                               

                               

                                                  </mx:FormItem>

                               

                               

                                                  <mx:FormItem  width="100%" fontThickness="220" fontSize="15" label="Password:" horizontalAlign="left">

                                                            <mx:TextInput width="100%"

                                                                                            focusIn="formItem_focusIn(event);"

                                                                                            focusOut="formItem_focusOut(event);" id="keywordTextInput" displayAsPassword="true"/>

                               

                               

                                                  </mx:FormItem>

                                        </mx:Form>

                               

                                        <mx:HBox x="0" y="120" width="100%" horizontalAlign="right" >

                                                  <sas:Spacer height="10"/>

                               

                                                   <sas:Button label="Log On" id="okBtn" click="handleClickOK()"/>

                                                  <sas:Spacer width="10"/>

                                        </mx:HBox>

                               

                              </s:BorderContainer>

                              • 12. Re: Modal Focus Question
                                Flex harUI Adobe Employee

                                If you type a few chars before you tab, does it go in the TextInput?

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.<http://www.adobe.com/>

                                Blog: http://blogs.adobe.com/aharui

                                • 13. Re: Modal Focus Question
                                  jetrased Level 1

                                  No even if you type and then tab, you can see the backgroup shell being selected. So the focus moves off the popup.