app:content
  • 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
Back to menuExample: Simple Example

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

Favorite Movies Favorite Music Banjo Sonatas in D
<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