|
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="Control states" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-F98575AC-F913-466D-A790-0FF0207463A3" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Control states</title> |
|
16 </head> |
|
17 <body id="GUID-F98575AC-F913-466D-A790-0FF0207463A3"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Control states</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 Controls can be in a number of different states. Some of the states are specific |
|
29 to a particular type of control (e.g. whether a checkbox is checked) and some |
|
30 are common to all controls. Some states can be explicitly set while others are |
|
31 implicit based on some user action (e.g. moving the pointer over a control). |
|
32 The states can be retrieved using "getter" functions and in cases when a state |
|
33 can be explicitly set there is a "setter" function that allows the state to be |
|
34 manipulated. The following presents the common control states. |
|
35 </p> |
|
36 |
|
37 <div class="section"><h2 class="sectiontitle"> |
|
38 Focusable</h2> |
|
39 |
|
40 |
|
41 <p> |
|
42 |
|
43 The focusable state is a boolean (i.e. true or false) value that indicates |
|
44 whether the control can receive the focus and receive input or not. Some |
|
45 non-interactive controls like labels are never focusable, others are focusable |
|
46 unless the control has specifically been disabled, and some are always |
|
47 focusable. E.g. textfields can be focused even when disabled in order to be able |
|
48 to copy text from them to the clipboard. |
|
49 </p> |
|
50 |
|
51 </div> |
|
52 |
|
53 <div class="section"><h2 class="sectiontitle"> |
|
54 Focused</h2> |
|
55 |
|
56 |
|
57 <p> |
|
58 |
|
59 The focused state is a boolean value that specifies if a control is currently |
|
60 selected for interaction. The focused typically changes implicitly through user |
|
61 actions like moving the 4-way controller, however the focus can also be |
|
62 explicitly set. Unlike other states, setting the focus to a control is more like |
|
63 a request than an absolute command because it is not always possible to actually |
|
64 set the focus to the control to which it is requested. For example if a control |
|
65 is not focusable or not visible on the screen, the focus cannot be set to it. |
|
66 </p> |
|
67 |
|
68 <div class="fignone" id="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-E7C3B5D6-F0CE-43D0-8FF4-304F6F716050"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-E7C3B5D6-F0CE-43D0-8FF4-304F6F716050"><!-- --></a><span class="figcap">Figure 1. |
|
69 Focused and unfocused FormButton controls</span> |
|
70 |
|
71 |
|
72 <br /><img src="FormButton_Controls_Screenshot_1.png" /><br /> |
|
73 </div> |
|
74 |
|
75 </div> |
|
76 |
|
77 <div class="section"><h2 class="sectiontitle"> |
|
78 Hovering</h2> |
|
79 |
|
80 |
|
81 <p> |
|
82 |
|
83 Hovering means that the pointer arrow is over a control. It is always implicit |
|
84 and changes based on pointer movement. The hovering state is a boolean value. |
|
85 The hovering state is rarely needed outside a control itself, which uses it to |
|
86 determine how the control draws itself. |
|
87 </p> |
|
88 |
|
89 </div> |
|
90 |
|
91 <div class="section"><h2 class="sectiontitle"> |
|
92 Enabled</h2> |
|
93 |
|
94 |
|
95 <p> |
|
96 |
|
97 Controls are always enabled by default, but can be disabled to prevent |
|
98 interaction. Disabling a control doesn't hide it but rather causes it to be |
|
99 displayed in some way (typically with dimmer or duller colors) that indicates to |
|
100 users that it cannot be used. Toggling the enabled state is always an explicit |
|
101 action. The enabled state is a boolean value. Note that toggling the enabled |
|
102 state can have an effect on other things. Focus is typically lost from controls |
|
103 that are disabled and they become non-focusable. |
|
104 </p> |
|
105 |
|
106 <div class="fignone" id="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-ADB1D1B7-A652-4A3C-A89F-A23C5E1B0D44"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-ADB1D1B7-A652-4A3C-A89F-A23C5E1B0D44"><!-- --></a><span class="figcap">Figure 2. |
|
107 Enabled and disabled FormButton controls</span> |
|
108 |
|
109 |
|
110 <br /><img src="FormButton_Controls_Screenshot_2.png" /><br /> |
|
111 </div> |
|
112 |
|
113 </div> |
|
114 |
|
115 <div class="section"><h2 class="sectiontitle"> |
|
116 Activated</h2> |
|
117 |
|
118 |
|
119 <p> |
|
120 |
|
121 Certain controls like textfields cannot be interacted with despite being |
|
122 focused. Instead the focus merely indicates that they are selected for |
|
123 interaction. In order to actually interact with them they have to be "activated" |
|
124 by pressing a selection button. The reason for this is that the same 4-way |
|
125 controller keys are used for navigating between controls and within a control. |
|
126 When a control such as a textfield is activated, all key presses are consumed by |
|
127 the control. Activation of a control is transparent to the WRTKit and due to |
|
128 this cannot be queried nor commanded. Also note that activation is not needed on |
|
129 PC computers and thus will not occur when testing a WRTKit user interface in a |
|
130 PC browser. |
|
131 </p> |
|
132 |
|
133 </div> |
|
134 |
|
135 </div> |
|
136 |
|
137 <div> |
|
138 <div class="familylinks"> |
|
139 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div> |
|
140 </div> |
|
141 </div> |
|
142 |
|
143 </body> |
|
144 </html> |