initial field focus

[caclark]

I have a login window for my app. I want the cursor to Do The Right Thing and start in the user Id edittext. Seems pretty simple, but it doesn't work. Here's a sample app. It's not the code that I'm running, but a simplified test case.

When the canvas init's, I set focus to the userId form field. The cursor doesn't show up and you don't get typed text in the userId field.

Button 1 sets focus to the userId form field just as the oninit handler did. However, it works.

Button 2 prints some useful info the debug console, which oddly enough, is the same if you press it immediately after the app loads and after you press Button 1.

Any suggestion on how to make this work?

Thanks,
Cary



<?xml version="1.0" standalone="no"?>
<!DOCTYPE canvas SYSTEM "http://www.laszlosystems.com/lps/tools/lzx.dtd">

<canvas>

<handler name="oninit">
<![CDATA[
Debug.write( "\ntestFocus.lzx::canvas::oninit: inited...width:", this.width, " height:", this.height ) ;
var formField = this.searchSubviews( "name", "userId" ) ;
Debug.write( "testFocus.lzx::canvas::oninit: setting focus to:", formField.name ) ;
LzFocus.setFocus( formField );
]]>
</handler>

<vbox>
<hbox name="namePart" x="15" fontsize="12" >
<text fontsize="12" >User Id:</text>
<edittext height="20" width="130" x="70"
name="userId" >
<handler name="onfocus">
Debug.write( "\n" + this.name + "::onfocus\n\n" ) ;
</handler>
</edittext>
</hbox>

<hbox name="pwdPart" fontsize="12" >
<text fontsize="12">Password:</text>
<edittext height="20" x="70" width="130"
name="password" password="true" >
<handler name="onfocus">
Debug.write( "\n" + this.name + "::onfocus\n\n" ) ;
</handler>
</edittext>
</hbox>

<hbox>
<button name="button1" >Button 1
<handler name="onclick">
var formField = parent.parent.namePart.userId ;
Debug.write( "setting focus to:", formField ) ;
LzFocus.setFocus(formField) ;
</handler>
</button>
<button name="button2" >Button 2
<handler name="onclick">
Debug.write( "focused:", LzFocus.getFocus(), " last:", LzFocus.lastfocus, " prev:", LzFocus.getPrev() ) ;
</handler>
</button>
</hbox>
</vbox>
</canvas>

[rcyeager]

This is a common source of frustration. There are two reasons for the problem. First, the SWF canvas needs focus before it can be interacted with, depending on the mechanism used to embed it within a web page. Second, placing focus on a control in an oninit handler can be problematic, too.

The first issue will be apparent if you try to run the app without a custom wrapper page (e.g. by running the lzx file directly in the browser, causing the default wrapper page to be generated). What I do is to either use SWFObject, or after embedding the app with Lz.swfEmbed to call focus() on the app instance in Javascript.

The second problem is easier. Just add a delay before setting focus:


<canvas>

<handler name="oninit">
<![CDATA[
var del = new LzDelegate(this, "waitToFocus");
LzTimer.addTimer(del, 3000);
]]>
</handler>
<method name="waitToFocus">
Debug.write( "\ntestFocus.lzx::canvas::oninit: inited...width:", this.width, " height:", this.height ) ;
var formField = this.searchSubviews( "name", "userId" ) ;
Debug.write( "testFocus.lzx::canvas::oninit: setting focus to:", formField.name ) ;
LzFocus.setFocus( formField );
</method>

<vbox>
<hbox name="namePart" x="15" fontsize="12" >
<text fontsize="12" >User Id:</text>
<edittext height="20" width="130" x="70"
name="userId" >
<handler name="onfocus">
Debug.write( "\n" + this.name + "::onfocus\n\n" ) ;
</handler>
</edittext>
</hbox>

<hbox name="pwdPart" fontsize="12" >
<text fontsize="12">Password:</text>
<edittext height="20" x="70" width="130"
name="password" password="true" >
<handler name="onfocus">
Debug.write( "\n" + this.name + "::onfocus\n\n" ) ;
</handler>
</edittext>
</hbox>

<hbox>
<button name="button1" >Button 1
<handler name="onclick">
var formField = parent.parent.namePart.userId ;
Debug.write( "setting focus to:", formField ) ;
LzFocus.setFocus(formField) ;
</handler>
</button>
<button name="button2" >Button 2
<handler name="onclick">
Debug.write( "focused:", LzFocus.getFocus(), " last:", LzFocus.lastfocus, " prev:", LzFocus.getPrev() ) ;
</handler>
</button>
</hbox>
</vbox>
</canvas>


Note that I added a 3 second delay. To do a quick test, run the test app without a wrapper page (just load the lzx in the browser) and click anywhere on the canvas before 3 seconds...then the field will receive the focus. After you create a wrapper page that works around the SWF focus issue, you can decrease the delay to something like 100ms.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

[mildavw]

Here's some sample code for the first part:


<html>
<head>
<title>My App</title>
<script src="embed-compressed.js" type="text/javascript"></script>
</head>
<body style="margin: 0;" onLoad="window.document.lzapp.focus();">
<script type="text/javascript">
Lz.swfEmbed({url: 'main.lzx.lzr=swf8.swf?&lzproxied=false', bgcolor: '#ffffff', width: '100%', height: '100%', id: 'lzapp', accessible: 'false'});
</script>

<noscript>
Please enable JavaScript in order to use this application.
</noscript>
</body>
</html>

[caclark]

Thanks for the tips Robert & Dave. I got it to work in IE 7.0.5730.11 running Flash 9,0,28,0.

It doesn't seem to work in FireFox 2.0.0.14 running Flash 9,0,124,0, though. I'll install FF 3 today and see what happens there.

My app will run at a client site w/ IE, so I'll see if it works on their installation.

Thanks for the help!

[rcyeager]

Try adjusting the wmode setting. For IE, I use "window", all others "opaque". Besides facilitating floating IFRAMEs on top of the canvas, the setting can also affect focus and even runtime performance.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

[caclark]

Try adjusting the wmode setting. For IE, I use "window", all others "opaque". Besides facilitating floating IFRAMEs on top of the canvas, the setting can also affect focus and even runtime performance.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

Setting wmode to opaque for non-IE made it work in Firefox 2, but there was a constant refresh happening on the left side of the app that was distracting. Looks like a vertical bar or cursor the size of the app positioned on the left.

I tested it in Firefox 3 without changing the wmode and it works fine. So, I think I'll leave it set to 'window' and anyone has Firefox 2 I'll "encourage" them to upgrade.

Thanks for the help,
Cary