app:template
| Widget Name | appcelerator template |
| Element | <app:template> |
| Author | Jeff Haynie |
| Homepage | http://www.appcelerator.org |
| Description | template widget |
- 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 |
| Name | Type | Description | Default value |
|---|---|---|---|
| args | JSON Object | Used to replace text in the template file. | Not specified |
Back to menuExample: Simple Example
Welcome
Today's Specials
50% off InterWeb Machines
2006 Canyonerro SUV - $12
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:
<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
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