Setting Focus to textInput on a Embedded flex web application from Air application

0
votes

Well friends, the scenario is very complicated:

I have an air application and inside of it I have an HTML component running a flex web application and I need to set focus on a textinput in two moments. The HTML component is inside a Panel and this is inside a stackview

1.- When I select the stackview index where the HTML component is, and the Panel dispatch the complete event. Well, I solve this by modifying the html wrapper for the flex web app adding some code like

<script languaje="javascript" type="text/javascript">
    function setInitialFocus() {
       document.getElementById('${application}').tabIndex = 0;
       document.getElementById('${application}').focus();
    }
</script>

<body scroll="no" onload="setInitialFocus()">

2.- The wrong thing is the next: When I select another index from stackview then the Panel where the HTML dwells dispatch the hide event. If I come back to the index where the HTML is then the Panel who contains the HTML dispatch the show event. Inside the show event handler I send a command to web application by using localConnection to restore the focus to the textInput component by calling the same javascript function that works fine when page was loaded (onload="setInitialFocus()").

Inside air app: protected creationComplete_Handler(event:Event) : void { localConnection = new LocalConnection(); localConnection.addEventListener(StatusEvent.STATUS, localConnection_onStatus); localConnection.connect("some.domain.com"); }

 protected function show(event:FlexEvent) : void {
     localConnection.send("_someConnection","executeJavaScript");
 }

Inside web app: public creationComplete_handler(event:Event) : void { localConnection.allowInsecureDomain("app#chevronLocstattDesktop"); localConnection.client = this; localConnection.connect("_SomeConnection"); }

 public function executeJavaScript() : void {
   ExternalInterface.call("setInitialFocus");
   textInput.setFocus();
 }

The javascript function is executed well (because I add some alert inside it and it was shown) but no focus is given to web app and therefore no focus is given to textInput which is all the goal of this.

Please help me...

2
apache-flexwebairfocus

2 Answers

1
votes

1. Create a Javascript function inside your index.template.html;

<script language="JavaScript" type="text/javascript" >
<!--
function setFocus()
{
    window.document.YourSite.focus();
}

// -->
</script>

PS: Replace "YourSite" with the name of your SWF movie.

2. Insert in your creation complete method;

if (ExternalInterface.available) {
        ExternalInterface.call('setFocus');
    } else {
        Alert.show("Browser not available");
    }

    focusManager.setFocus(yourTextInput);
0
votes

Right now I found the solution:

on html wrapper for web application add another function

<script languaje="javascript" type="text/javascript">
    function unsetInitialFocus() {
       document.getElementById('${application}').tabIndex = 0;
       document.getElementById('${application}').blur();
    }
</script>

on air application:

Inside the component which has the HTML component, in the hide event handler I call the javascript function called unsetInitialFocus. This turns off the flag to the html wrapper forcing it to lose the focus and next time the function setInitialFocus is invoked then the focus is configured.

protected function hide(event:FlexEvent) : void {
   HTMLViewer.htmlLoader.window.unsetInitialFocus();
}

It looks very complicated to understand but if someone needs more help please ask.