|
1 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html lang="en" xml:lang="en"> |
|
3 <head> |
|
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> |
|
5 <meta name="copyright" content="(C) Copyright 2005" /> |
|
6 <meta name="DC.rights.owner" content="(C) Copyright 2005" /> |
|
7 <meta content="concept" name="DC.Type" /> |
|
8 <meta name="DC.Title" content="Using text entry controls" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Using text entry controls</title> |
|
16 </head> |
|
17 <body id="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2"><a name="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Using text entry controls</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 The WRTKit supports two controls for text entry: TextField for |
|
29 a single line of text and TextArea for multiple lines of text. |
|
30 The API for both controls is identical, except for the constructor. |
|
31 The TextField can be created in masked mode, which is useful for |
|
32 entry of text that should not be displayed (e.g. passwords). For |
|
33 every character that is typed in masked mode, an asterisk is shown |
|
34 instead in the text field. While a TextArea control can hold an |
|
35 unlimited number of lines of text, its height (as number of rows |
|
36 to display without scrolling) is specified when it is constructed. |
|
37 </p> |
|
38 |
|
39 <div class="fignone" id="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2__GUID-D4E1D422-DAB9-4F40-9A13-231B4ACF1FE5"><a name="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2__GUID-D4E1D422-DAB9-4F40-9A13-231B4ACF1FE5"><!-- --></a><span class="figcap">Figure 1. |
|
40 TextField and TextArea controls</span> |
|
41 |
|
42 |
|
43 <br /><img src="Text_Entry_Controls_Screenshot_1.png" /><br /> |
|
44 </div> |
|
45 |
|
46 <p> |
|
47 |
|
48 TextField and TextArea controls are created and added to views like |
|
49 any other controls in the WRTKit. The code assumes that a view has |
|
50 already been created and that a variable called exampleView refers |
|
51 to it. |
|
52 </p> |
|
53 |
|
54 <pre> |
|
55 |
|
56 // create textfield |
|
57 var nameField = new TextField("field1", "Enter your name"); |
|
58 exampleView.addControl(nameField); |
|
59 </pre> |
|
60 |
|
61 <p> |
|
62 |
|
63 "field1" is a unique identifier for the control and "Enter your |
|
64 name" is the control caption. An optional third argument to the |
|
65 constructor can be used to specify the text to display in the |
|
66 control, however the text can also be set at any time later on using |
|
67 the setText() method as follows: |
|
68 </p> |
|
69 |
|
70 <pre> |
|
71 |
|
72 // set the text in the textfield |
|
73 nameField.setText("John Smith"); |
|
74 </pre> |
|
75 |
|
76 <p> |
|
77 |
|
78 The current text in a text entry control can be retrieved using the |
|
79 getText() method: |
|
80 </p> |
|
81 |
|
82 <pre> |
|
83 |
|
84 // get the current text from the textfield |
|
85 var text = nameField.getText(); |
|
86 </pre> |
|
87 |
|
88 <p> |
|
89 |
|
90 Text entry controls fire "TextChanged" events when a user edits the |
|
91 text in a control. These events can be handled using by registering |
|
92 an event listener to the control. The code below shows what a |
|
93 typical callback function would look like: |
|
94 </p> |
|
95 |
|
96 <pre> |
|
97 |
|
98 // Callback function for text changed events. |
|
99 function nameChanged(event) { |
|
100 // implement what happens when the text changed here |
|
101 } |
|
102 </pre> |
|
103 |
|
104 <p> |
|
105 |
|
106 Registering the event listener function is done as follows, for |
|
107 example right after the control was created: |
|
108 </p> |
|
109 |
|
110 <pre> |
|
111 |
|
112 // register event listener |
|
113 nameField.addEventListener("TextChanged", nameChanged); |
|
114 </pre> |
|
115 |
|
116 </div> |
|
117 |
|
118 <div> |
|
119 <div class="familylinks"> |
|
120 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div> |
|
121 </div> |
|
122 </div> |
|
123 |
|
124 </body> |
|
125 </html> |