Focus and tabbing

[sfarrow]

Trying to understand how to create my own focusable views. Here is a simplified example:


<view x="10" y="10">
<inputtext width="100" bgcolor="red"/>

<text width="100" bgcolor="#00FF00" focusable="true">
<method event="onfocus">
debug.write(this + ".onfocus");
this.setAttribute("bgcolor", 0x00FFFF);
</method>

<method event="onblur">
debug.write(this + ".onblur");
this.setAttribute("bgcolor", 0x00FF00);
</method>
</text>

<inputtext width="100" bgcolor="blue"/>

<simplelayout axis="y" spacing="5"/>
</view>


If you place the cursor in the red inputtext and then tab, the onfocus event is fired for the green text followed immediately by an onblur event. The focus doesn't stick.

[antun]

I think this may be a bug caused by the fact that you were using <text>, and not an <inputtext>. That's not your fault mind, you should be able to apply focus to anything that inherits from view.

I found that if I switched your <text> tag to an <inputtext>:


<canvas debug="true">
<view x="10" y="10">
<inputtext width="100" bgcolor="red" focusable="true"/>

<inputtext width="100" bgcolor="0x00ff00" focusable="true">
<method event="onfocus">
debug.write(this + ".onfocus");
this.setAttribute("bgcolor", 0x00FFFF);
</method>

<method event="onblur">
debug.write(this + ".onblur");
this.setAttribute("bgcolor", 0x00FF00);
</method>
</inputtext>

<inputtext width="100" bgcolor="blue" focusable="true"/>

<simplelayout axis="y" spacing="5"/>
</view>
</canvas>


... it worked fine. The onfocus event got sent at the right time, and the onblur got sent when you tabbed to the next field.

-Antun

[sfarrow]

The <text> field was intentional. In practice we have our own component here that has no inputtext requirement. Can I make an <inputtext> non-editable?

[antun]

There isn't a switch you can use (although I've filed a feature request on this), but here's a workaround:


<canvas debug="true">

<class name="myreadonlyinputtext" extends="inputtext"
oninit="this.setText( this.recordedtext )">
<attribute name="recordedtext" value="This is read only" type="text" />
<method event="ontext">
this.setText( this.recordedtext );
</method>
</class>


<simplelayout axis="y" spacing="5" />

<inputtext bgcolor="blue" focusable="true" />
<myreadonlyinputtext bgcolor="red" focusable="true" />
<inputtext bgcolor="yellow" focusable="true" />

</canvas>


I basically wrote a class that extends <inputtext>, that writes to itself whenever the ontext event gets set (i.e. whenever the text in the field changes. You could go one further, and add a state that allows the same inputtext to have it's writeability turned on and off at will.

Hope this helps!

-Antun

[jshood]

I'm looking to construct a inputtext that can be switched to a read only mode. ie. text cannot be change and preferably the object cannot recieve focus. Has there been any motion on this feature request?

If not could anyone give me an idea of how to build my own class that using states can be put into a read only & non focusable mode.

Thanks
-Jeff

[adam]

Actually, I ran the example at the top of this thread in both 2.1.x and 2.2.x and it works as I would expect in both cases. When I tab to text in the middle it focuses and then when I tab away it blurs.