app:stopwatch
| Widget Name | appcelerator stopwatch |
| Element | <app:stopwatch> |
| Author | Tejus Parikh |
| Homepage | http://www.appcelerator.org |
| Description | stopwatch widget |
- Required Attributes (0)
- Optional Attributes (1)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| There are no required attributes | |||
| Name | Type | Description | Default value |
|---|---|---|---|
| show_button | Boolean | Set to false to hide button | Not specified |
Back to menuExample: Simple Example\n
<app:stopwatch></app:stopwatch>
Instead of using the buttons you can have the stopwatch respond to events:
<a on="click then l:stopwatch_toggle">Toggle</a> <a on="click then l:stopwatch_reset">Reset</a> <app:stopwatch on="l:stopwatch_toggle then start_stop or l:stopwatch_reset then clear_time" show_button="false"></app:stopwatch>
1 /* 2 * This file is part of Appcelerator. 3 * 4 * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved. 5 * For more information, please visit http://www.appcelerator.org 6 * 7 * Appcelerator is free software: you can redistribute it and/or modify 8 * it under the terms of the GNU General Public License as published by 9 * the Free Software Foundation, either version 3 of the License, or 10 * (at your option) any later version. 11 * 12 * This program is distributed in the hope that it will be useful, 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 15 * GNU General Public License for more details. 16 * 17 * You should have received a copy of the GNU General Public License 18 * along with this program. If not, see <http://www.gnu.org/licenses/>. 19 * 20 */ 21 22 Appcelerator.Widget.Stopwatch = 23 { 24 stopwatches: new Hash(), 25 26 getName: function() 27 { 28 return 'appcelerator stopwatch'; 29 }, 30 getDescription: function() 31 { 32 return 'stopwatch widget'; 33 }, 34 getVersion: function() 35 { 36 return 1.0; 37 }, 38 getSpecVersion: function() 39 { 40 return 1.0; 41 }, 42 getAuthor: function() 43 { 44 return 'Tejus Parikh'; 45 }, 46 getModuleURL: function () 47 { 48 return 'http://www.appcelerator.org'; 49 }, 50 isWidget: function () 51 { 52 return true; 53 }, 54 getWidgetName: function() 55 { 56 return 'app:stopwatch'; 57 }, 58 getAttributes: function() 59 { 60 return [{ 61 name: 'show_button', 62 optional: true, 63 type: Appcelerator.Types.bool, 64 description: "Set to false to hide button" 65 }]; 66 }, 67 compileWidget: function(params) 68 { 69 var id = params['id']; 70 Appcelerator.Widget.Stopwatch.stopwatches.set(id, {'date': new Date(0), 'timer_id': null}); 71 }, 72 getActions: function() 73 { 74 return ['start_stop', 'clear_time']; 75 }, 76 buildWidget: function(element, parameters) 77 { 78 var html = []; 79 html.push('<div id="' + element.id + '" class="stopwatch">'); 80 html.push('<table><tr>'); 81 html.push('<td><h3 id="' + element.id + '_clock">00:00 <span>00</span></h3></td>'); 82 if(parameters["show_button"] != "false") 83 { 84 var enableReset = "l:" + element.id + "_enable_reset"; 85 var disableReset = "l:" + element.id + "_disable_reset"; 86 html.push('<td>'); 87 html.push('<div class="stopwatch_start">'); 88 html.push('<app:button width="100" on="click then script[Appcelerator.Widget.Stopwatch.start_stop(\'' 89 + element.id + '\')] and ' + disableReset + '">Start</app:button>'); 90 html.push('</div>'); 91 html.push('<div class="stopwatch_stop">'); 92 html.push('<app:button width="100" on="click then script[Appcelerator.Widget.Stopwatch.start_stop(\'' 93 + element.id + '\')] and ' + enableReset + '">Stop</app:button>'); 94 html.push('</div>'); 95 html.push('</td>'); 96 html.push('<td class="stopwatch_reset">'); 97 html.push('<app:button disabled="true" width="100" on="click then script[Appcelerator.Widget.Stopwatch.clear_time(\'' 98 + element.id + '\')] and disable or ' + enableReset + ' then enable or ' 99 + disableReset + ' then disable">Reset</app:button>'); 100 html.push('</td>'); 101 } 102 html.push('</tr></table>'); 103 html.push('</div>'); 104 return { 105 'presentation' : html.join(' '), 106 'position' : Appcelerator.Compiler.POSITION_REPLACE, 107 'wire' : true, 108 'compile': true 109 }; 110 }, 111 //custom functions 112 start_stop: function(id,parameters,data,scope,version) 113 { 114 var stopwatch = Appcelerator.Widget.Stopwatch.stopwatches.get(id); 115 if(stopwatch.timer_id != null) 116 { 117 Appcelerator.Widget.Stopwatch.stop(id); 118 } 119 else 120 { 121 Appcelerator.Widget.Stopwatch.start(id); 122 } 123 }, 124 stop: function(id,parameters,data,scope,version) 125 { 126 var stopwatch = Appcelerator.Widget.Stopwatch.stopwatches.get(id); 127 clearInterval(stopwatch.timer_id); 128 $(id).removeClassName( "app_stopwatch_started"); 129 stopwatch.timer_id = null; 130 }, 131 start: function(id,parameters,data,scope,version) 132 { 133 var stopwatch = Appcelerator.Widget.Stopwatch.stopwatches.get(id); 134 var format = function(value) 135 { 136 return (10 > value) ? "0" + value : value; 137 }; 138 139 var timerId = setInterval(function() 140 { 141 var date = stopwatch.date; 142 var clock = $(id + "_clock"); 143 date.setTime(date.getTime() + 1000); 144 clock.innerHTML = format(date.getUTCHours()) + ":" + format(date.getMinutes()) + " <span>" + format(date.getSeconds()) + "</span>"; 145 }, 1000); 146 $(id).addClassName( "app_stopwatch_started"); 147 stopwatch.timer_id = timerId; 148 }, 149 clear_time: function(id,parameters,data,scope,version) 150 { 151 var stopwatch = Appcelerator.Widget.Stopwatch.stopwatches.get(id); 152 $(id + "_clock").innerHTML = "00:00 <span>00</span>"; 153 stopwatch.date = new Date(0); 154 } 155 156 }; 157 158 Appcelerator.Core.loadModuleCSS('app:stopwatch', 'stopwatch.css'); 159 Appcelerator.Widget.register('app:stopwatch', Appcelerator.Widget.Stopwatch); 160
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- app:modaldialog
- app:mp3player
- app:music_player
- app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- » app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- app:validation
- app:widget
- app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker