[ engine demonstrations | engine overview | imnmotion.com | Stephen W. Cote ]
Demonstration #17 builds on Demonstration #16. The functionality of the window gizmo - that is, the DHTML-based window - is added eye-candy for the latest Engine features available in version 1.8. Version 1.8 includes two very useful improvements: embedded and context-sensitive scripting within XML-based templates for Application Components, and automatic binding of those templates with new Engine objects. This makes it very easy to leverage many Engine features, with very little setup. One particular feature shown in this demonstration is the automatic and context-sensitive tracking of form elements. This is very useful when designing multiple forms for newer Web applications that intend to use AJAX communications over traditional FORM submissions.
A Note About Browser Support: Many demonstrations, including this one, use the EngineService module of Engine for Web Applications, which relies to some degree on XPath. Some browsers, including Opera up to 8.5, and Safari up to 1.3, do not support XPath and therefore the module will not operate. The EngineService module is entirely optional and is used in the demonstrations for its convenience.
Gizmos go here
This demonstration makes use of the new methods methods loadTemplate, getTemplateContainer, getTemplateEngine, setTemplateIsEngine, and setTitle. The template files should be XHTML, where the root node specifies an option Title attribute which causes the setTitle method to be invoked.
When loaded by the Application Component's loadTemplate method, the template is pre-processed for special tokens. The ${this} token equates to the following: org.cote.js.registry.ObjectRegistry.getObject(#id) where #id refers to the specific component. The ${this.id} token equates to the #id value. From within an Application Component, the #id has been available as: this.getObjectId().
After a template is loaded and the processed for tokens, any previous embedded-script functions are automatically stripped from the component, and any new embedded-script functions are extracted from the template and applied to the component. This allows templates to extend a component for a particular page. By using this in combination with the setTemplateIsEngine method, one template can define a form element, and another template can reference the value of that form element even when the XHTML node no longer exists. While this behavior has existed since the earliest versions of Engine, this new approach makes it very convienent to use.
The following example code shows the template structure with the tokenization, and with the engine references to extract form values.
<Template Title = "Demo">
<input type = "text" rid = "TestText" />
<input type = "button" value = "Test" onclick = "${this}.Test()" />
<embedded-script><![CDATA[
// invoked when template is loaded
//
template_init : function(){
},
Test : function(){
var oXForm = org.cote.js.xhtml.form.XHTMLFormComponent;
// Retrieve the value of "TestText" from XHTMLFormComponent
// using the template's engine id as a context reference
//
var sVal = oXForm.getValue("TestText",this.getTemplateEngine().engine_id);
}
]]></embedded-script>
</Template>