Insert Characters Into Text Fields Using the Remote Control in EBIF Application
Overview
This article is part of a group of simple, step-by-step tutorials covering common EBIF application development aspects such as two-way communication, creating dynamic content, entering text from remote control, etc.
These tutorials assume basic knowledge of EBIF technology and all sample applications were developed and tested using TVWorks XDK, Eclipse IDE and Tomcat Application Server.
Interactivity is a key feature for ETV applications. TVWorks allows the user to interact with an EBIF application using the navigable widgets. The textinput widget offers the possibility to enter alphanumeric characters. You can easily send numeric characters by pressing the digits on the remote control, but to send alpha-characters to the user interface, an additional programming effort is required.
In this tutorial we'll present a simple solution to this aspect: to use the "up/down" buttons of the remote control to select the character the "left" button to delete and the "right" button to advance to the next character.
Set up a new project
1. Open the TVWorks XDK.
2. Create a new project by choosing File -> New -> MAX Bound Project.
Set a name for the project and select Basic Bound Max Project as the template.
Create a text input widget
3. Create a <textinput> widget inside the <page> tag in \application\page-resource\page\index.xml:
<textinput name="my-textinput" x="100" y="360" width="200" height="27" length="11">
</textinput>
The textinput tag has the following attributes:
- name: a unique identifier for the textinput
- x, y: the position for the top-left corner of the widget
- width, height: the width and height size (in pixels) of the widget
- length: the maximum number of characters allowed
Define variables and the alphabet
4. To define variables use the <var> and <datatable> tags. These are children of the <mac> tag.
<var name="txtval" type="stringcopy" length="10"></var>
<var name="txtlen" type="int"></var>
<var name="pos" type="int">-1</var>
<var name="minpos" type="int">0</var>
<var name="maxpos" type="int"></var>
<datatable name="alphabet" src="alphabet" />
"txtval" is a string that stores the characters entered by the user. The maximum number of characters stored by this variable is set by the length attribute
"txtlen" stores the number of characters in the textinput widget. If the user wants to delete a character this variable will be decremented.
We are going to use a set of characters as our alphabet and this characters will be stored in an array. "minpos" and "maxpos" represent the minimum and the maximum index values in the array. The user can select the characters from within this array. The character at the "pos" position will be the one selected.
The "alphabet" is the array variable, mapped to the "alphabet" data source.
5. Define the "alphabet" data source in the <page-resource> tag of the \application\app-desc.xml
<data name="alphabet" src="page-resource/data/alphabet.xml" />
6. Create the alphabet.xml file inside \application\page-resource\data and add the characters:
<data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<alphabet>
<row><char>a</char></row>
<row><char>b</char></row>
...
<row><char>z</char></row>
</alphabet>
</data>
Implement the subroutines for selecting the characters
To select from the available characters, we have to increment/decrement the value of the "pos" variable. If this variable exceeds the upper limit ("maxpos"), it will be reset to the lower limit and if it gets below the lower limit, it will be reset to the upper limit.
After calculating the value of the "pos" the subroutines will change the text in the textinput widget: the previous string is cleared, the text entered by the user is recopied and then the selected character is appended. Finally the widget is refreshed with the redraw() function.
7. Implement the up/down subroutines:
<sub name="up-action">
<action value="add($pos, 1)"/>
<if>
<test lhs="$pos" expr="gt" rhs="$maxpos"/>
<action value="set($pos, $minpos)"/>
</if>
<action value="stringclear(@my-textinput.text);
stringappend(@my-textinput.text, $txtval);
stringappend(@my-textinput.text, $$alphabet[$pos].char);
redraw(@my-textinput)"/>
</sub>
<sub name="down-action">
<action value="sub($pos, 1)"/>
<if>
<test lhs="$pos" expr="lt" rhs="$minpos"/>
<action value="set($pos, $maxpos)"/>
</if>
<action value="stringclear(@my-textinput.text);
stringappend(@my-textinput.text, $txtval);
stringappend(@my-textinput.text, $$alphabet[$pos].char);
redraw(@my-textinput)"/>
</sub>
We will use the "right-action" subroutine to set the selected character and advance to the next one. This function simply copies the widget text to the "txtval".
When deleting a character the "txtval" must be updated by removing the last character. The "left-action" subroutine does this by subtracting the string from the widget.
8. Implement left/right subroutines:
<sub name="left-action">
<action value="stringlength($txtlen, @my-textinput.text);
sub($txtlen, 1);
stringextract($txtval, @my-textinput.text, 0, $txtlen)"/>
</sub>
<sub name="right-action">
<action value="set($txtval, @my-textinput.text)"/>
</sub>
The subroutines needs to be mapped to the key events on the remote control
10. Add the following lines inside the <page> tag:
<keymap>
<keypress keycode="KEY_UP" action="call(up-action)"/>
<keypress keycode="KEY_DOWN" action="call(down-action)"/>
<keypress keycode="KEY_LEFT" action="call(left-action)"/>
<keypress keycode="KEY_RIGHT" action="call(right-action)"/>
</keymap>
Simulate the application
11. Right-click inside the TVWorks project and select Package
12. Right-click inside the TVWorks project and select Simulate
Download complete source code for this tutorial
