Home | Quick Reference


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 Constructor

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.  


Events

[none]


Public Methods

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.


Private Methods

_TemplateSetHTML()

_insertField(fld,value)

_insertChild(c)

_parseFields()


Static Methods

TemplateManager.isDynLayer(c)

TemplateManager.isLayer(c)