app:template
  • Required Attributes (1)
  • Optional Attributes (1)
  • Examples (1)
  • Source code
Name Type Description Default value
src Path or url to resource The source for the template file to load. Not specified
Back to menuExample: Simple Example

This is a simple example that uses the <app:template>.

In the example below, the Header and the Footer come from a template, but the Body of the template is overriden:

Welcome Today's Specials 50% off InterWeb Machines 2006 Canyonerro SUV - $12
<style>
.my_body
{
	height:100px;
	background-color:#fff;
	color:#666;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	padding:20px;

}
.specials
{
	margin:10px;
	padding:5px;
	border:1px dashed #ccc;
	background-color:#ffffcc;
	color:#333;
}
</style>

<app:template src="widgets/app_template/doc/template.html">
	<html:div id="template_body">
		<html:div class="my_body">
			<html:div class="bold_value" style="margin-bottom:5px">Welcome </html:div>
			Today's Specials
			<html:div class="specials">50% off InterWeb Machines  </html:div>
			<html:div class="specials">2006 Canyonerro SUV - $12</html:div>
		</html:div>
	</html:div>
</app:template>
  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 
 23 Appcelerator.Widget.Template =
 24 {
 25 	getName: function()
 26 	{
 27 		return 'appcelerator template';
 28 	},
 29 	getDescription: function()
 30 	{
 31 		return 'template widget';
 32 	},
 33 	getVersion: function()
 34 	{
 35 		return '1.0.1';
 36 	},
 37 	getSpecVersion: function()
 38 	{
 39 		return 1.0;
 40 	},
 41 	getAuthor: function()
 42 	{
 43 		return 'Jeff Haynie';
 44 	},
 45 	getModuleURL: function ()
 46 	{
 47 		return 'http://www.appcelerator.org';
 48 	},
 49 	isWidget: function ()
 50 	{
 51 		return true;
 52 	},
 53 	getWidgetName: function()
 54 	{
 55 		return 'app:template';
 56 	},
 57 	execute: function(id,parameterMap,data,scope)
 58 	{
 59 		Appcelerator.Widget.Template.fetch(id,parameterMap['src'],parameterMap['args']);
 60 	},
 61 	getAttributes: function()
 62 	{
 63 		var T = Appcelerator.Types;        
 64         return [{
 65             name: 'src',
 66             optional: false,
 67 			type: T.pathOrUrl,
 68             description: "The source for the template file to load."
 69         }, {
 70             name: 'args',
 71             optional: true,
 72 			type: T.json,
 73             description: "Used to replace text in the template file."
 74         }];
 75 	},	
 76 	buildWidget: function(element,parameters,state)
 77 	{
 78 		var src = parameters['src'];
 79 		var args = parameters['args'];
 80 		var payload = {};
 81 
 82 		element.innerHTML = Appcelerator.Compiler.getHtml(element);		
 83 		if (element.childNodes.length > 0)
 84 		{
 85 			for (var c=0;c<element.childNodes.length;c++)
 86 			{
 87 				var node = element.childNodes[c];
 88 				if (node.nodeType == 1)
 89 				{
 90 					var id = node.getAttribute('id');
 91 					payload[id] = Appcelerator.Compiler.getHtml(node,true);
 92 				}
 93 			}
 94 		}
 95 
 96 		Appcelerator.Widget.Template.fetch(element.id,element.scope,src,args,payload,state);
 97 
 98 		return {
 99 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
100 			'presentation' : ''
101 		};
102 	},
103 	fetch: function (target,scope,src,args,payload,state)
104 	{
105 		state.pending++;
106 		
107 		Appcelerator.Util.IFrame.fetch(src,function(doc)
108 		{
109 			if (args)
110 			{
111 				var html = doc.innerHTML;
112 				// replace tokens in our HTML with our args
113 				var t = Appcelerator.Compiler.compileTemplate(html);
114 				html = t(args.evalJSON());
115 				doc.innerHTML = html;
116 			}
117 			
118 			for (var token in payload)
119 			{
120 				if (typeof token == 'string')
121 				{
122 					var item = doc.ownerDocument.getElementById(token);
123 					if (item)
124 					{
125 						item.innerHTML = payload[token];
126 					}
127 					else
128 					{
129 						Logger.warn('Element with id = '+token+' not found in '+src);
130 					}
131 				}
132 			}
133 			
134 			var t = $(target);
135 			t.setAttribute('scope',scope);
136 			t.innerHTML = Appcelerator.Compiler.getHtml(doc);
137 			state.pending--;
138 			Appcelerator.Compiler.compileElement(t,state,true);
139 			Appcelerator.Compiler.checkLoadState(state);
140 		});
141 	}
142 };
143 
144 Appcelerator.Widget.register('app:template',Appcelerator.Widget.Template);
145