Archive for July, 2007

Internet Explorer: Setting Focus on Flex Apps / Flash Player

Posted July 9, 2007 * Comments(3)

One of the biggest issues I have come across when deploying a Flex application has been the difficulty in gaining initial focus on the Flash player and the components within it.

I finally came up with a simple approach that is working for me with IE 6 and IE 5. I would like to hear any feedback for this solution working in different versions of IE and other browsers.

What I did is modify the Flex project html-template. I added the following to the <body> tag.

<body scroll=”no” onload=”document.getElementById(’${application}’).focus()”>

This points the onload() function in the html wrapper to force focus on the Flash object by object id.

Once you have modified the html wrapper file you can create a simple Flex application to test with. Create a new Flex Project and simply copy the following mxml code into your application. When you run this application you should see a blinking cursor in the text box.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” 
  creationComplete=”initApp()”>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.events.FlexEvent;       

  private function initApp():void {
   // set the focus to the first text input
   input1.setFocus();
  }
 ]]>
 </mx:Script>      

 <mx:Canvas width=”420″ height=”244″>
  <mx:TextInput id=”input1″ x=”130″ y=”50″/>
 </mx:Canvas> 
</mx:Application>