app:content
| Widget Name | appcelerator content |
| Element | <app:content> |
| Author | Jeff Haynie |
| Homepage | http://www.appcelerator.org |
| Description | content widget support modularizing of code by breaking them into separate files which can be loaded either at load time or dynamically based on a message |
- Required Attributes (1)
- Optional Attributes (7)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| src | Path or url to resource | The source for the content file to load. | Not specified |
| Name | Type | Description | Default value |
|---|---|---|---|
| on | On Expression | May be used to execute/load the content. | Not specified |
| args | JSON Object | Used to replace text in the content file. | Not specified |
| lazy | Boolean | Indicates whether the content file should be lazy loaded. | false |
| reload | Boolean | Indicates whether the content file should be refetched and reloaded on every execute. If false, execute will do nothing if already executed. | false |
| onload | Appcelerator Message Send | Fire this message when content file is loaded. | Not specified |
| onfetch | Appcelerator Message Send | Fire this message when content file is fetched but before being loaded. | Not specified |
| useframe | Boolean | Use a hidden iframe when fetching the content, instead of an Ajax request. This is normally not required. | Not specified |
Back to menuExample: Simple Example
Favorite Movies
Favorite Music
Banjo Sonatas in D
This is a simple example that uses the <app:content>.
<div id="styled"> <app:tabpanel id="contentmenu" initial="movies"> <tab name="movies">Favorite Moviestab> <tab name="music">Favorite Musictab> <tab name="banjo">Banjo Sonatas in Dtab> app:tabpanel> div> <div id="my_tab_divider">div> <app:content lazy="false" args="{'title':'These movies do not suck'}" src="../../widgets/app_content/doc/movies.html" on="contentmenu[movies] then show else hide"> app:content> <app:content lazy="false" args="{'title':'These albums do not suck'}" src="../../widgets/app_content/doc/music.html" on="contentmenu[music] then show else hide"> app:content> <app:content lazy="false" args="{'title':'Banjo - the new Cow Bell'}" src="../../widgets/app_content/doc/banjo.html" on="contentmenu[banjo] then show else hide"> app:content>
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.Content = 24 { 25 getName: function() 26 { 27 return 'appcelerator content'; 28 }, 29 getDescription: function() 30 { 31 return 'content widget support modularizing of code by breaking them into separate files which can be loaded either at load time or dynamically based on a message'; 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:content'; 56 }, 57 getActions: function() 58 { 59 return ['execute']; 60 }, 61 getAttributes: function() 62 { 63 var T = Appcelerator.Types; 64 return [{name: 'on', optional: true, type: T.onExpr, 65 description: "May be used to execute/load the content."}, 66 {name: 'src', optional: false, type: T.pathOrUrl, 67 description: "The source for the content file to load."}, 68 {name: 'args', optional: true, type: T.json, 69 description: "Used to replace text in the content file."}, 70 {name: 'lazy', optional: true, defaultValue: 'false', type: T.bool, 71 description: "Indicates whether the content file should be lazy loaded."}, 72 {name: 'reload', optional: true, defaultValue: 'false', type: T.bool, 73 description: "Indicates whether the content file should be refetched and reloaded on every execute. If false, execute will do nothing if already executed."}, 74 {name: 'onload', optional: true, type: T.messageSend, 75 description: "Fire this message when content file is loaded."}, 76 {name: 'onfetch', optional: true, type: T.messageSend, 77 description: "Fire this message when content file is fetched but before being loaded."}, 78 {name:'useframe', optional: true, type: T.bool, 79 description: "Use a hidden iframe when fetching the content, instead of an Ajax request. This is normally not required."} 80 ]; 81 }, 82 execute: function(id,parameterMap,data,scope) 83 { 84 if (!parameterMap['reload']) 85 { 86 if (!$(id).fetched && !parameterMap['fetched']) 87 { 88 Appcelerator.Widget.Content.fetch(id,parameterMap['src'],parameterMap['args'],parameterMap['onload'],parameterMap['onfetch'],parameterMap['useframe']); 89 $(id).fetched = true; 90 } 91 } 92 else 93 { 94 Appcelerator.Widget.Content.fetch(id,parameterMap['src'],parameterMap['args'],parameterMap['onload'],parameterMap['onfetch'],parameterMap['useframe']); 95 } 96 }, 97 compileWidget: function(parameters) 98 { 99 if (!(parameters['lazy'] == 'true')) 100 { 101 Appcelerator.Widget.Content.fetch(parameters['id'],parameters['src'],parameters['args'],parameters['onload'],parameters['onfetch'],parameters['useframe']); 102 parameters['fetched'] = true; 103 } 104 }, 105 buildWidget: function(element,parameters,state) 106 { 107 parameters['reload'] = (parameters['reload'] == 'true'); 108 109 return { 110 'position' : Appcelerator.Compiler.POSITION_REPLACE, 111 'presentation' : '', 112 'compile' : true 113 }; 114 }, 115 fetch: function (target,src,args,onload,onfetch,useframe) 116 { 117 target = $(target); 118 target.style.visibility='hidden'; 119 120 if (!useframe) 121 { 122 new Ajax.Request(src, 123 { 124 asynchronous:true, 125 method:'get', 126 onSuccess:function(resp) 127 { 128 if (onfetch) 129 { 130 $MQ(onfetch,{'src':src,'args':args}); 131 } 132 var scope = target.getAttribute('scope') || target.scope; 133 var state = Appcelerator.Compiler.createCompilerState(); 134 var html = resp.responseText; 135 var match = /<body[^>]*>([\s\S]*)?<\/body>/mg.exec(html); 136 if (match) 137 { 138 html = match[1]; 139 } 140 html = Appcelerator.Compiler.addIENameSpace('<div>'+html+'</div>'); 141 if (args) 142 { 143 // replace tokens in our HTML with our args 144 var t = Appcelerator.Compiler.compileTemplate(html); 145 html = t(args.evalJSON()); 146 } 147 // turn off until we're done compiling 148 target.innerHTML = html; 149 state.onafterfinish=function() 150 { 151 // turn it back on once we're done compiling 152 target.style.visibility='visible'; 153 if (onload) 154 { 155 $MQ(onload,{'src':src,'args':args}); 156 } 157 }; 158 Appcelerator.Compiler.compileElement(target.firstChild,state); 159 state.scanned=true; 160 Appcelerator.Compiler.checkLoadState(state); 161 } 162 }); 163 } 164 else 165 { 166 Appcelerator.Util.IFrame.fetch(src,function(doc) 167 { 168 if (onfetch) 169 { 170 $MQ(onfetch,{'src':src,'args':args}); 171 } 172 173 var scope = target.getAttribute('scope') || target.scope; 174 doc.setAttribute('scope',scope); 175 doc.scope = scope; 176 Appcelerator.Compiler.getAndEnsureId(doc); 177 var state = Appcelerator.Compiler.createCompilerState(); 178 var html = '<div>'+doc.innerHTML+'</div>'; 179 if (args) 180 { 181 // replace tokens in our HTML with our args 182 var t = Appcelerator.Compiler.compileTemplate(html); 183 html = t(args.evalJSON()); 184 } 185 // turn off until we're done compiling 186 target.innerHTML = html; 187 state.onafterfinish=function() 188 { 189 // turn it back on once we're done compiling 190 target.style.visibility='visible'; 191 if (onload) 192 { 193 $MQ(onload,{'src':src,'args':args}); 194 } 195 }; 196 Appcelerator.Compiler.compileElement(target.firstChild,state); 197 state.scanned=true; 198 Appcelerator.Compiler.checkLoadState(state); 199 },true,true); 200 } 201 } 202 }; 203 204 Appcelerator.Widget.register('app:content',Appcelerator.Widget.Content); 205
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