<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Styling text entry fields and setting focus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2>The following works for me:</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2>Add an interaction to a page, set perpetual to
1</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2>Add a textEntry to it, give it an rs property of
txtUsername;</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2>
<DIV dir=ltr align=left><SPAN class=155085807-28072008><FONT face=Arial
color=#0000ff size=2>Add another textEntry to it, give it an rs property of
txtPassword;</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>Add a script below the
interaction, call it setup:</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>txtUsername.background =
true;</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>txtPassword.background =
true;</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>txtPassword.password =
true;</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>That sets up the fields
as you need. You need to do this after the interaction has been setup, hence the
perpetual proeprty, allowing the flow to pass through the interaction after the
text fields have been set up. You code can now access the text
fields.</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>You can then add a button
to the interaction, with a script for fishing out the details the user
entered:</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>debug('username: ' +
txtUsername.text + '; password:' + txtPassword.text);</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008>or handle it with
rootIcon.onKeyDown as discussed last week,</SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=155085807-28072008></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN
class=155085807-28072008>J</SPAN></DIV></FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> xerte-bounces@lists.nottingham.ac.uk
[mailto:xerte-bounces@lists.nottingham.ac.uk] <B>On Behalf Of </B>Paul
Swanson<BR><B>Sent:</B> 25 July 2008 22:12<BR><B>To:</B> Xerte discussion
list<BR><B>Subject:</B> RE: [Xerte] Styling text entry fields and setting
focus<BR></FONT><BR></DIV>
<DIV></DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2>Update:</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2>I've been able to get the look I want, set focus, and
designate the field as a password field by using a V2 TextInput component,
but now I can't get the control off the screen. I can't seem to Tab or Enter out
of the field. I based the setup on the V2Components example, and found that if
you try to use 'change' as the event, only 1 character at a time appears in the
text field. But if I use 'enter' (also tried: Enter, onEnter, blur,
Blur, onBlur, onKillFocus, KillFocus) as the event you can continue to type
characters, but nothing happens when you press Tab or Enter. The interaction
never seems to exit unless I use 'change' as the event with
InteractionId.exit(), but then I only capture the first character typed. What is
the name of the event I should be using if I want to use Tab or Enter as the
action key?</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2>I'm also unsure of how to remove the control from the
screen once you've Entered or Tabbed out of the field. I guess I could use a
framework for that, and just navigate to the next page of the
framework.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=640323620-25072008><FONT face=Verdana
color=#0000ff size=2>Paul</FONT></SPAN></DIV><BR>
<BLOCKQUOTE dir=ltr
style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #0000ff 2px solid; MARGIN-RIGHT: 0px">
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> xerte-bounces@lists.nottingham.ac.uk
[mailto:xerte-bounces@lists.nottingham.ac.uk] <B>On Behalf Of </B>Paul
Swanson<BR><B>Sent:</B> Friday, July 25, 2008 11:23 AM<BR><B>To:</B> Xerte
discussion list<BR><B>Subject:</B> [Xerte] Styling text entry fields and
setting focus<BR></FONT><BR></DIV>
<DIV></DIV><!-- Converted from text/rtf format -->
<P><FONT face=Verdana size=2>I'm building a login page, and I'm having trouble
getting the Text Entry fields to look and work the way I want them
too.</FONT></P>
<P><FONT face=Verdana size=2>I'm using a regular text entry response, but the
text field does not have a white background (page background color is a light
blue). I've tried using a script icon with the following:</FONT></P>
<P><FONT face=Verdana size=2>pword.pw.background = true;</FONT> <BR><FONT
face=Verdana size=2>pword.pw.backgroundColor = 0xFF0000;</FONT> <BR><FONT
face=Verdana size=2>pword.pw.password = true;</FONT> </P>
<P><FONT face=Verdana size=2>Where pword is the interaction id, and pw is the
rs property of the text entry response. This is in an Event response attached
to the same Interaction as the text entry response. I'm using an event of
onInit with the icon set to pword, but have also tried setting it to pw. The
text entry field is displayed, but the background of the text field is the
same color as the stage, and text typed into the field is visible as entered,
not masked by the password property. I also want to set the focus to the text
entry fields, but setFocus() doesn't seem to have an effect.</FONT></P>
<P><FONT face=Verdana size=2>So how would I do this? It seems I would have to
use a script icon after the response has loaded, but I don't want the
interactions to be perpetual if I can avoid it. Do I use an event response
like my above does, or can I somehow have a setup script on the login page
that sets the styles before the text entry fields are set up?</FONT></P>
<P><FONT face="Courier New" color=#808080
size=2>_____________________________</FONT> </P>
<P><FONT face="Courier New" color=#808080 size=2> Paul Swanson</FONT>
<BR><FONT face="Courier New" color=#808080 size=2> Instructional
Designer</FONT> <BR><FONT face="Courier New" color=#808080
size=2> Harland Financial Solutions</FONT> <BR><FONT face="Courier New"
color=#808080 size=2>_____________________________</FONT>
</P></BLOCKQUOTE></BODY></HTML>