source: EDIS/trunk/java/tracking-ui-core/src/main/flex/gov/va/med/edp/widget/TimeEntry.mxml@ 1227

Last change on this file since 1227 was 1227, checked in by George Lilly, 13 years ago

initial load of EDIS 1.0
File size: 20.7 KB
Line 
1<!--
2Copyright (c) 2007 Stretch Media Group
3
4Permission is hereby granted, free of charge, to any person
5obtaining a copy of this software and associated documentation
6files (the "Software"), to deal in the Software without
7restriction, including without limitation the rights to use,
8copy, modify, merge, publish, distribute, sublicense, and/or sell
9copies of the Software, and to permit persons to whom the
10Software is furnished to do so, subject to the following
11conditions:
12
13The above copyright notice and this permission notice shall be
14included in all copies or substantial portions of the Software.
15
16THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
18OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
20HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
21WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
22FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
23OTHER DEALINGS IN THE SOFTWARE.
24
25Features:
26
27- Provides time entry for hours, minutes and seconds in 24 and 12 hour format
28- Resizable to fit various text sizes, and also allows for styling of stepper buttons, border, and background
29- Can use numeric stepper to increase/decrease hour, minute, second, am/pm entries
30- Can use keyboard up/down, left/right to increase/decrease hour, minute, second, am/pm entries
31- Hour, minute, second, am/pm entries wrap if reaching max/min values
32- Can tab through fields
33- Can enable/disable component
34- Easily provide hour/minute/text values for preset/updatable time
35
36Properties:
37
38hour : the numeric value of the selected hour (if provided, overrides the defaultHour value)
39minute : the numeric value of the selected minute (if provided, overrides the defaultMinute value)
40second : the numeric value of the selected second (if provided, overrides the defaultSecond value)
41am_pm : the string value of the selected am/pm entry ("am", "pm")
42defaultHour : the hour which you want the selector to default to (is overriden if hour argument is provided)
43defaultMinute : the minute which you want the selector to default to (is overriden if minute argument is provided)
44defaultSecond : the second which you want the selector to default to (is overriden if second argument is provided)
45showSeconds : show seconds entry in selector
46is24Hour : if false hour selector allows range of 1-12 and am/pm entry is enabled
47 if true hour selector allows range of 0-23 and am/pm entry is disabled
48
49Revisions:
50
51* 2008.3.3 - added accessibility functionality for hours, minutes, and seconds so that it can be read by JAWS reader.
52
53-->
54
55<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
56 creationComplete="createComplete();" tabChildren="true">
57
58 <mx:NumberValidator id="hourValidator" source="{hourText}" exceedsMaxError="" lowerThanMinError="" integerError=""
59 property="text" maxValue="{maxHour}" minValue="{minHour}"
60 trigger="{hourText}" triggerEvent="change" invalid="hourText.text = String(maxHour); hourText.errorString = '';" />
61 <mx:NumberValidator id="minuteValidator" source="{minuteText}" exceedsMaxError="" lowerThanMinError="" integerError=""
62 property="text" maxValue="59" minValue="0"
63 trigger="{minuteText}" triggerEvent="change" invalid="minuteText.text = '59'" allowNegative="false" />
64 <mx:NumberValidator id="secondValidator" source="{secondText}" exceedsMaxError="" lowerThanMinError="" integerError=""
65 property="text" maxValue="59" minValue="0"
66 trigger="{secondText}" triggerEvent="change" invalid="secondText.text = '59'" allowNegative="false" />
67
68 <mx:NumericStepper id="timeStepper" x="0" y="0" height="80%" width="100" fontSize="0" textAlign="right" paddingLeft="100"
69 focusAlpha="0" borderThickness="0" borderStyle="none" maximum="99" minimum="-99"
70 change="changeStepValue(event)" backgroundAlpha="0" color="{this.getStyle('backgroundColor')}"
71 click="_focusArea.setFocus();" focusEnabled="false"/>
72
73 <mx:HBox id="timeBox"
74 horizontalGap="0"
75 verticalAlign="center"
76 height="100%"
77 horizontalScrollPolicy="off"
78 verticalScrollPolicy="off"
79 backgroundAlpha="0"
80 creationComplete="setTimeStepperPosition();">
81
82
83 <mx:TextInput id="hourText"
84 initialize="{AccessibilityTools.accessComponentName(hourText,'Enter Hours')}"
85 height="100%"
86 borderThickness="0"
87 borderStyle="none"
88 backgroundAlpha="0"
89 textAlign="center"
90 maxChars="2"
91 editable="false"
92 text="{formatText(String(hour), 'hourText')}"
93 keyDown="keyHandler(event)"
94 mouseUp="setTextFocus(event)"
95 mouseDown="setTextFocus(event)"
96 focusOut="fixText(event)"
97 tabIndex="{_tabIndexBase}"
98 focusIn="setTextFocus(event)"
99 change="setValues(event)"
100 focusAlpha="0"
101 errorString=""/>
102
103 <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" />
104
105 <mx:TextInput id="minuteText"
106 initialize="{AccessibilityTools.accessComponentName(minuteText,'Enter Minutes')}"
107 height="100%"
108 borderThickness="0"
109 borderStyle="none"
110 backgroundAlpha="0"
111 textAlign="center"
112 maxChars="2"
113 editable="false"
114 text="{formatText(String(minute), 'minuteText')}"
115 keyDown="keyHandler(event)"
116 mouseUp="setTextFocus(event)"
117 mouseDown="setTextFocus(event)"
118 focusOut="fixText(event)"
119 focusIn="setTextFocus(event)"
120 tabIndex="{_tabIndexBase + 1}"
121 change="setValues(event)"
122 focusAlpha="0" />
123
124 <mx:Spacer width="-8" includeInLayout="{showSeconds}" visible="{showSeconds}" />
125 <mx:Label text=":" includeInLayout="{showSeconds}" visible="{showSeconds}" />
126 <mx:Spacer width="-16" includeInLayout="{showSeconds}" visible="{showSeconds}" />
127
128 <mx:TextInput id="secondText"
129 initialize="{AccessibilityTools.accessComponentName(secondText,'Enter Seconds')}"
130 height="100%"
131 borderThickness="0"
132 borderStyle="none"
133 backgroundAlpha="0"
134 textAlign="center"
135 maxChars="2"
136 text="{formatText(String(second), 'secondText')}"
137 keyDown="keyHandler(event)"
138 mouseUp="setTextFocus(event)"
139 mouseDown="setTextFocus(event)"
140 focusOut="fixText(event)"
141 focusIn="setTextFocus(event)"
142 change="setValues(event)"
143 focusAlpha="0"
144 includeInLayout="{showSeconds}"
145 visible="{showSeconds}" />
146
147 <mx:Spacer width="-8" includeInLayout="{!is24Hour}" visible="{!is24Hour}" />
148
149
150 <mx:TextInput id="amPMText"
151 height="100%"
152 borderThickness="0"
153 borderStyle="none"
154 backgroundAlpha="0"
155 textAlign="center"
156 maxChars="2"
157 text="{this.am_pm}"
158 keyDown="amPMKeyHandler(event)"
159 mouseUp="setTextFocus(event)"
160 mouseDown="setTextFocus(event)"
161 focusAlpha="0"
162 focusIn="setTextFocus(event)"
163 editable="false"
164 includeInLayout="{!is24Hour}"
165 visible="{!is24Hour}" />
166
167 <mx:Spacer width="-5" includeInLayout="{!is24Hour}" visible="{!is24Hour}" />
168
169 </mx:HBox>
170
171
172 <mx:Script>
173 <![CDATA[
174 import mx.events.DateChooserEvent;
175 import mx.controls.NumericStepper;
176 import mx.events.NumericStepperEvent;
177 import mx.core.UITextField;
178 import flash.events.MouseEvent;
179 import gov.va.med.edp.util.AccessibilityTools;
180
181
182 private var _timeValue:Object;
183 private var _focusArea:TextInput;
184 private var _focusText:TextField;
185 private var _currentStepValue:Number;
186 [Bindable] private var maxHour:Number;
187 [Bindable] private var minHour:Number;
188
189
190 [Bindable] public var hour:Number = 0;
191 [Bindable] public var minute:Number = 0;
192 [Bindable] public var second:Number = 0;
193 [Bindable] public var am_pm:String = 'am';
194 [Bindable] public var showSeconds:Boolean;
195 [Bindable] public var is24Hour:Boolean;
196 public var defaultHour:Number;
197 public var defaultMinute:Number = 0;
198 public var defaultSecond:Number = 0;
199
200/* [Bindable]
201 public function get totalSeconds(): int
202 {
203 return ((this.hour * 3600) + (this.minute * 60) + this.second);
204 }
205
206 public function set totalSeconds(value: int): void
207 {
208 this.hour = int(value / 3600);
209 this.minute = int((value % 3600) / 60);
210 this.second = int(value % 60);
211 } */
212
213 [Bindable]
214 private var _tabIndexBase:int = -1;
215
216 public function set tabIndexBase(value:int):void {
217 _tabIndexBase = value;
218 }
219
220 public function get tabIndexBase():int {
221 return _tabIndexBase;
222 }
223
224 public function get timeValue():Object
225 {
226 var tmpTime:Object = new Object();
227 tmpTime.hour = this.hour;
228 tmpTime.minute = this.minute;
229 tmpTime.second = this.second;
230 return tmpTime;
231 }
232
233 public function set timeValue(value:Object):void
234 {
235 this._timeValue = value;
236 }
237
238 override public function setFocus():void
239 {
240 _focusArea.setFocus();
241 }
242
243 private function createComplete():void
244 {
245 this.focusEnabled = true;
246 this.tabEnabled = true;
247 this.mouseFocusEnabled = true;
248
249 if(!this.hour)
250 {
251 String(this.hour);
252 this.hour = Number(hourText.text);
253 }
254 else
255 {
256 if(defaultHour)
257 {
258 hourText.text = String(defaultHour);
259 }
260 else
261 {
262 (is24Hour) ? hourText.text = "12" : hourText.text = "1";
263 }
264 }
265 if(!this.minute)
266 {
267 minuteText.text = (defaultMinute < 10) ? "0" + String(defaultMinute) : String(defaultMinute);
268 this.minute = Number(minuteText.text);
269 }
270 if(!this.second)
271 {
272 secondText.text = (defaultSecond < 10) ? "0" + String(defaultSecond) : String(defaultSecond);
273 this.second = Number(secondText.text);
274 }
275
276 if(!this.am_pm)
277 {
278 this.am_pm = (is24Hour) ? 'pm' : "am";;
279 }
280
281 (is24Hour) ? maxHour = 23 : maxHour = 12;
282 (is24Hour) ? minHour = 0 : minHour = 1;
283
284 if(!_focusArea)
285 {
286 _focusArea = hourText;
287 _currentStepValue = Number(_focusArea.text);
288 timeStepper.value = _currentStepValue;
289 }
290
291 }
292 private function setTextFocus(event:Event):void
293 {
294 _focusArea = event.currentTarget as TextInput;
295 _focusText = event.target as TextField;
296 TextField(event.target).setSelection(0, 2);
297 if(event.currentTarget != amPMText)
298 {
299 _currentStepValue = Number(_focusArea.text);
300 timeStepper.value = _currentStepValue;
301 }
302 setStepValue();
303
304 }
305
306 private function setTimeStepperPosition():void
307 {
308 if(timeBox) timeStepper.x = (!is24Hour) ? (timeBox.width - (timeStepper.width * 0.72)) : timeBox.width - (timeStepper.width * 0.8);
309 }
310
311 private function setStepValue():void
312 {
313 if(_focusArea == amPMText)
314 {
315 timeStepper.minimum = -99;
316 timeStepper.maximum = 99;
317 }
318 }
319
320 private function changeStepValue(event:Event):void
321 {
322 if(_focusArea != amPMText)
323 {
324 if(_focusArea == hourText)
325 {
326 var tmpMinValue:Number = (is24Hour) ? 0 : 1;
327 if(NumericStepper(event.target).value > maxHour)
328 {
329 NumericStepper(event.target).value = (is24Hour) ? 0 : 1;
330 }
331 else if(NumericStepper(event.target).value < tmpMinValue)
332 {
333 NumericStepper(event.target).value = (is24Hour) ? 23 : 12;
334 }
335 }
336 if(_focusArea == minuteText || _focusArea == secondText)
337 {
338 if(NumericStepper(event.target).value > 59)
339 {
340 NumericStepper(event.target).value = 0;
341 }
342 else if(NumericStepper(event.target).value < 0)
343 {
344 NumericStepper(event.target).value = 59;
345 }
346 }
347
348 _focusArea.setFocus();
349 if(_focusArea == hourText) this.hour = NumericStepper(event.target).value;
350 if(_focusArea == minuteText) this.minute = NumericStepper(event.target).value;
351 if(_focusArea == secondText) this.second = NumericStepper(event.target).value;
352 }
353 else
354 {
355 amPMText.text = (amPMText.text == "am") ? "pm" : "am";
356 this.am_pm = amPMText.text;
357 }
358 }
359
360 private function fixText(event:Event):void
361 {
362 if(!(event.currentTarget == hourText && !is24Hour))
363 {
364 _focusArea.text = (_focusArea.text.length < 2) ? "0" + _focusArea.text : _focusArea.text;
365 }
366 _focusArea.setSelection(0, 2);
367 if(event.currentTarget == hourText) this.hour = Number(event.currentTarget.text);
368 if(event.currentTarget == minuteText) this.minute = Number(timeStepper.value);
369 if(event.currentTarget == secondText) this.second = Number(timeStepper.value);
370 }
371
372 private function setValues(event:Event):void
373 {
374 if(event.currentTarget == hourText)
375 {
376 if(hourValidator.validate(Number(event.currentTarget.text))){
377 timeStepper.value = Number(event.currentTarget.text);
378 this.hour = Number(event.currentTarget.text);
379 }
380 }
381 if(event.currentTarget == minuteText)
382 {
383 if(minuteValidator.validate(Number(event.currentTarget.text))) {
384 timeStepper.value = Number(event.currentTarget.text);
385 this.minute = Number(event.currentTarget.text);
386 }
387 }
388 if(event.currentTarget == secondText)
389 {
390 if(secondValidator.validate(Number(event.currentTarget.text))) timeStepper.value = Number(event.currentTarget.text);
391 }
392
393 }
394
395 private function formatText(value:String, theField:String):String
396 {
397 if(_focusArea) _focusArea.setSelection(0, 2);
398 if(Number(value) > 12 && !is24Hour && theField == 'hourText')
399 {
400 value = String(Number(value) % 12);
401 }
402 if(theField == 'hourText' && !is24Hour)
403 {
404 return value;
405 }
406 else
407 {
408 return (value.length < 2) ? ("0" + value) : value;
409 }
410 }
411
412 private function keyHandler(event:KeyboardEvent):void
413 {
414 if(event.keyCode == 39 || event.keyCode == 38)
415 {
416 if(_focusArea == hourText)
417 {
418 _currentStepValue++;
419 var tmpMaxValue:Number = (is24Hour) ? (maxHour) : maxHour;
420 if(_currentStepValue > tmpMaxValue)
421 {
422 _currentStepValue = (is24Hour) ? 0 : 1;
423 }
424
425 }
426 else if(_focusArea == minuteText || _focusArea == secondText )
427 {
428 _currentStepValue++;
429 if(_currentStepValue > 59)
430 {
431 _currentStepValue = 0;
432 }
433
434 }
435 timeStepper.value = _currentStepValue;
436 timeStepper.dispatchEvent(new NumericStepperEvent('change'));
437 _focusArea.setSelection(0, 2);
438 }
439 if(event.keyCode == 37 || event.keyCode == 40)
440 {
441 if(_focusArea == hourText)
442 {
443 _currentStepValue--;
444 var tmpMinValue:Number = (is24Hour) ? 0 : 1;
445 if(_currentStepValue < tmpMinValue)
446 {
447 _currentStepValue = (is24Hour) ? 23 : 12;
448 }
449 }
450 else if(_focusArea == minuteText || _focusArea == secondText )
451 {
452 _currentStepValue--;
453 if(_currentStepValue < 0)
454 {
455 _currentStepValue = 59;
456 }
457 }
458 timeStepper.value = _currentStepValue;
459 timeStepper.dispatchEvent(new NumericStepperEvent('change'));
460
461 _focusArea.setSelection(0, 2);
462 }
463 }
464
465 private function amPMKeyHandler(event:KeyboardEvent):void
466 {
467 if(event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 37 || event.keyCode == 39)
468 {
469 amPMText.text = (amPMText.text == "am") ? "pm" : "am";
470 this.am_pm = amPMText.text;
471 _focusArea.setSelection(0, 2);
472 }
473
474 }
475 ]]>
476 </mx:Script>
477
478</mx:Canvas>
Note: See TracBrowser for help on using the repository browser.