1 /** |
|
2 * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies). |
|
3 * All rights reserved. |
|
4 * This component and the accompanying materials are made available |
|
5 * under the terms of the License "Eclipse Public License v1.0" |
|
6 * which accompanies this distribution, and is available |
|
7 * at the URL "http://www.eclipse.org/legal/epl-v10.html". |
|
8 * |
|
9 * Initial Contributors: |
|
10 * Nokia Corporation - initial contribution. |
|
11 * |
|
12 * Contributors: |
|
13 * |
|
14 * Description: |
|
15 * |
|
16 */ |
|
17 |
|
18 /////////////////////////////////////////////////////////////////////////////// |
|
19 // The Control class is an abstract base class for all user interface controls. |
|
20 |
|
21 // Constructor. |
|
22 function Control(id, caption) { |
|
23 if (id != UI_NO_INIT_ID) { |
|
24 this.init(id, caption); |
|
25 } |
|
26 } |
|
27 |
|
28 // Control inherits from UIElement. |
|
29 Control.prototype = new UIElement(UI_NO_INIT_ID); |
|
30 |
|
31 // The view that control belongs to. |
|
32 Control.prototype.view = null; |
|
33 |
|
34 // Is the control focused? |
|
35 Control.prototype.focused = false; |
|
36 |
|
37 // Is the pointer over this control? |
|
38 Control.prototype.hovering = false; |
|
39 |
|
40 // The element hierarchy in a control is as follows: |
|
41 // |
|
42 // rootElement |
|
43 // assemblyElement |
|
44 // captionElement |
|
45 // controlElement |
|
46 // |
|
47 // The assembly element groups the portion of a control that typically handle |
|
48 // the visual effects for focus and hover states. Having a separate root and |
|
49 // assembly elements allows other elements to be added to a control without |
|
50 // them being affected by the CSS rules of the assembly element. |
|
51 |
|
52 // The assembly element of this control. |
|
53 Control.prototype.assemblyElement = null; |
|
54 |
|
55 // The caption of this control; null if none. |
|
56 Control.prototype.caption = null; |
|
57 |
|
58 // The caption element of this control. |
|
59 Control.prototype.captionElement = null; |
|
60 |
|
61 // The control element of this control. |
|
62 Control.prototype.controlElement = null; |
|
63 |
|
64 // Initializer - called from constructor. |
|
65 Control.prototype.init = function(id, caption) { |
|
66 uiLogger.debug("Control.init(" + id + ", " + caption + ")"); |
|
67 |
|
68 // call superclass initializer |
|
69 UIElement.prototype.init.call(this, id); |
|
70 |
|
71 // create assembly, caption and control elements |
|
72 this.assemblyElement = document.createElement("div"); |
|
73 this.captionElement = document.createElement("div"); |
|
74 this.assemblyElement.appendChild(this.captionElement); |
|
75 this.controlElement = document.createElement("div"); |
|
76 this.assemblyElement.appendChild(this.controlElement); |
|
77 this.rootElement.appendChild(this.assemblyElement); |
|
78 |
|
79 // set the caption |
|
80 // style is not updated because the subclass will update the style later |
|
81 // when it has completely initialized the component |
|
82 this.setCaption(caption, true); |
|
83 }; |
|
84 |
|
85 // Returns the caption; null if none. |
|
86 Control.prototype.getCaption = function() { |
|
87 return this.caption; |
|
88 }; |
|
89 |
|
90 // Sets the caption; null if none. |
|
91 Control.prototype.setCaption = function(caption, noStyleUpdate) { |
|
92 uiLogger.debug("Control.setCaption(" + caption + ")"); |
|
93 |
|
94 // set the display style |
|
95 this.captionElement.style.display = (caption == null) ? "none" : "block"; |
|
96 |
|
97 // set the caption |
|
98 this.caption = caption; |
|
99 this.captionElement.innerHTML = (caption == null) ? "" : caption; |
|
100 |
|
101 // update style |
|
102 if (!noStyleUpdate) { |
|
103 this.updateStyleFromState(); |
|
104 } |
|
105 }; |
|
106 |
|
107 // Returns the enabled state. |
|
108 // Override this in subclasses as required to implement the state change. |
|
109 Control.prototype.isEnabled = function() { |
|
110 return false; |
|
111 }; |
|
112 |
|
113 // Sets the enabled state. |
|
114 // Override this in subclasses as required to implement the state change. |
|
115 Control.prototype.setEnabled = function(enabled) { |
|
116 uiLogger.debug("Control.setEnabled(" + enabled + ")"); |
|
117 }; |
|
118 |
|
119 // Returns the focusable state for the control. |
|
120 // Defaults focusable if enabled - override this in subclasses as required. |
|
121 Control.prototype.isFocusable = function() { |
|
122 return this.isEnabled(); |
|
123 }; |
|
124 |
|
125 // Returns the focused state for the control. |
|
126 Control.prototype.isFocused = function() { |
|
127 return this.focused; |
|
128 }; |
|
129 |
|
130 // Sets the focused state for the control. |
|
131 // Note: This may not always succeed. |
|
132 // Override this in subclasses as required to implement the state change. |
|
133 Control.prototype.setFocused = function(focused) { |
|
134 uiLogger.debug("Control.setFocused(" + focused + ")"); |
|
135 // note that this.focused gets set as a result of focusStateChanged() being called |
|
136 // rather than setting it explicitly here |
|
137 }; |
|
138 |
|
139 // Called when the focus state has changed for this control. |
|
140 Control.prototype.focusStateChanged = function(focused) { |
|
141 uiLogger.debug("Control.focusStateChanged(" + focused + ")"); |
|
142 if (this.focused != focused) { |
|
143 this.focused = focused; |
|
144 |
|
145 // let the view know about the focus change |
|
146 if (this.view != null) { |
|
147 this.view.focusedControlChanged(focused ? this : null); |
|
148 } |
|
149 |
|
150 // update the style from the current state |
|
151 this.updateStyleFromState(); |
|
152 |
|
153 // notify event listeners |
|
154 this.fireEvent(this.createEvent("FocusStateChanged", focused)); |
|
155 } |
|
156 }; |
|
157 |
|
158 // Called when the hover state has changed for this control. |
|
159 Control.prototype.hoverStateChanged = function(hovering) { |
|
160 uiLogger.debug("Control.hoverStateChanged(" + hovering + ")"); |
|
161 if (this.hovering != hovering) { |
|
162 this.hovering = hovering; |
|
163 |
|
164 // update the style from the current state |
|
165 this.updateStyleFromState(); |
|
166 |
|
167 // notify event listeners |
|
168 this.fireEvent(this.createEvent("HoverStateChanged", hovering)); |
|
169 } |
|
170 }; |
|
171 |
|
172 // Helper method that returns the state name for the current state. |
|
173 Control.prototype.getStyleStateName = function() { |
|
174 var focusable = this.isFocusable(); |
|
175 if (focusable && this.focused) { |
|
176 return "Focus"; |
|
177 } else if (focusable && this.hovering) { |
|
178 return "Hover"; |
|
179 } else if (!this.isEnabled()) { |
|
180 return "Disabled"; |
|
181 } else { |
|
182 return "Normal"; |
|
183 } |
|
184 }; |
|
185 |
|
186 // Resets the state tracking for focus and hover. |
|
187 // Override this in subclasses as required to implement the state reset. |
|
188 Control.prototype.resetFocusState = function() { |
|
189 uiLogger.debug("Control.resetFocusState()"); |
|
190 this.hovering = false; |
|
191 this.focused = false; |
|
192 this.updateStyleFromState(); |
|
193 }; |
|
194 |
|
195 // Helper function that sets a classname for an element. |
|
196 // Only sets the class name if it actually is different from the current value. |
|
197 Control.prototype.setClassName = function(element, className) { |
|
198 if (element.className != className) { |
|
199 element.className = className; |
|
200 } |
|
201 }; |
|
202 |
|
203 // Updates the style of the control to reflects the state of the control. |
|
204 // Override this in subclasses as required to implement the state change. |
|
205 Control.prototype.updateStyleFromState = function() { |
|
206 uiLogger.debug("Control.updateStyleFromState()"); |
|
207 }; |
|