app:stopwatch
  • Required Attributes (0)
  • Optional Attributes (1)
  • Examples (1)
  • Source code
Name Type Description Default value
There are no required attributes
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