![]() |
|
|
|
dynapi.gui.TemplateManager - Quick Reference |
Inherit: DynLayer |
|
Remarks
The TemplateManager (TM) Class provides an easy way DynAPI components to be
embedded within HTML templates. These html templates can be
create with any WYSIWYG editor and can include fields that are used as place
holders for the actual object or data.
Field name Syntax:
{@fieldname} {@fieldname:[ some text here]}
Where "fieldname" should be replaced with a desired name. For example {@firstname}. Fields which uses the {@fieldname:[]} syntax are called container fields. These fields are used for storing multiple lines of text or html inside the template.
Another feature of the TM is to allow developers to create DynAPI Widgets/Components inside the templates with only a few lines of code. This is made possible through the use a special set of fields (or tags) called HyperText Component (HTC) fields.
HTC Field Syntax:
<htc:DynObject() @fieldname />
Example:
var t= 'This is a DynLayer <htc:DynLayer("HTC",0,0,30,20,"Yellow") @lyr1 /> ' +'This is a Button <htc:HTMLButton(null,"Button") @btn2 /> '; var tp = new Template(t,100,100,100,100,'#EEEEEE'); tp.lyr1.setHTML('Cool!'); // note the DynLayer object is created automatically
NOTE: The htc field format is in early beta and might change in the future. Do you have any suggestions on ways to improve the htc format?
Templates should only contain html codes found between the <body></body> tags. To convert your html codes to a JavaScript String or Array variable use the Text2Var Converter.
Template(html,x,y,w,h,color,image) - Used to create template object. The Template object is basically a DynLayer with an html template as it's content.
[none]
addChild(c, fld) - Adds a child object to the template. If no field name was specified the child will be added to the base of the Template. If a valid field name was specified, the child will be embedded inside the template where the field was entered. Fields are basically placeholders and/or containers. Only one child object can be added to a field at any one time.
c - (DynElement) Child object to be added to the template fld - (String) Field name inside template to embed the child object
example:
var html = 'With TM I can now embed a {@lyr1} inside my html templates'; var tp = new Template(html,10,10,100,100); tp.addChild(new DynLayer('layer',0,0,10,10,'red'), 'lyr1'); dynapi.document.addChild(tp);
Layers that are added to the TM will be relatively positioned. To force layers to be absolute do the following:
tp.addChild(lyr) // without any field name or tp.addChild(lyr,'fld'); tp.fld.setPosition('absolute');
TemplateManager (TM) allows you to replace any child object (e.g. DynLayer) associated with a field at any time
example:
var tp = new Template('Some text {@field1}') tp.addChild(new DynLayer('Here'),'field1'); //..... load and display tp ..... //.... some code here .... // to replace the DynLayer in field1 with a new DynLayer do the following tp.addChild(new DynLayer('Hello World'),'field1'); // replace exiting child tp.generate(); // recreate and display template;
addField(fld,adjFld,content) - Adds a new field to the existing template.
fld - (String) Name of new field adjFld - (String) Optional. Name of adjacent field content - (String) Text/HTML content of new field.
example:
// add a new field3 to existing template tp.addField('field3','field1'); // adjacent to field1 tp.addChild(new DynLayer(),'field3');
cloneField(fld,fld1,fld2,...,fldN) - Clones a field inside the template
fld - (String) Name of existing field fld1...fldN - (String) Name of new fields. fld2 to fldN are optional names
example:
var tp = new Template('Some text {@field1}') // clone field1 to create field2 and field3, etc tp.cloneField('field1','field2','field3',...'fieldN'); tp.addChild(new DynLayer(),'field2'); tp.addChild(new DynLayer(),'field3');
Note: The cloneField() function will only clone the field and it's text/html content. It will not clone the child object (e.g. DynLayer) that's associated with the field.
clearTemplate() - Clears the template
getField(fld) - Returns the value of an embedded field
generate() - Generates and display the changes made to the template object. Calling setHTML(html) after the template has been created will also invoke this function.
setDefaultFieldValue(v) - Changes the default value used in unused fields from <!--fieldname--> to the specified value.
example:
var html = 'This is my first {@field1} template {@field2}'; var tp = new Template(html,10,10,100,100); tp.setField('field1','HTML'); // set field1 tp.setDefaultFieldValue('???'); // all unused fields (i.e field2) will display ??? dynapi.document.addChild(tp);
setField(fld,value) - Sets the value (or content) of an embedded field.
_TemplateSetHTML()
_insertField(fld,value)
_insertChild(c)
_parseFields()
TemplateManager.isDynLayer(c)
TemplateManager.isLayer(c)