[ engine demonstrations | engine overview | imnmotion.com | Stephen W. Cote ]
Engine Demonstration #13 shows a basic inline engine implementation. An inline engine is one where the original markup is processed as the engine configuration. One purpose for using an inline engine is to make tasks such as dynamically importing content from another location more easy to declare from within the content without having to make alterations to a supplementary configuration.
The primary differentiator is the self keyword as the value for an engine configuration, as specified in this example by the engine-config attribute. Notice that there is relatively little script required to implement this example.
The files required for this demonstration are as follows:
If you see the text IMPORTED and a second button with the label imported button in the following block, then the demonstration succeeded. The original contents should remain, and the new content should be imported. Both buttons should be initialized as the demo_button Application Component.
This is a test
The following HTML represents the engine declaration used for this demonstration, and the script used to enable auto loading. Please note that auto loading is disabled for the pre-configured public release, and must be enabled for the EngineService to automatically inspect the page for engine elements.
Note the main difference in this demonstration is that the engine-config attribute specifies self, which instructs the engine to use the contents as the configuration. While the engine-config is required to load the object-definitions, this approach allows developers to more easily work with the engine containers. Also note that the configuration for the Application Component demo_button is a hard-coded path in engine_config.xml. This can be made configurable by using the task-based loading as used in many of the other demonstrations, such as Demonstration #11.
<script type = "text/javascript"><!--
if(
typeof ValidatePackage == "function"
&&
ValidatePackage("org.cote.js.engine.EngineService")
){
org.cote.js.engine.EngineService.setAutoLoad(1);
}
//--></script>
<div
is-engine = "1"
engine-action = "/projects/engine/demonstrations/demonstration_13/engine_config.xml"
engine-action-type = "xml"
engine-config-task = "engine_loader"
engine-config = "self"
class = "engine_demonstration"
>
<p>
<input
type = "button"
value = "Inline Test"
acid = "demo_button"
/>
</p>
<import-xml
id = "import-demoxml-1"
src = "/projects/engine/demonstrations/demonstration_13/import_xhtml.xml"
/>
</div>
The following Application Component definition for demo_button describes a component that alerts a message when the corresponding component is clicked.
<application-components>
<application-component id = "demo_button">
<![CDATA[
_handle_click:function(){
alert("click");
}
]]>
</application-component>
</application-components>
The following XML, or XHTML depending on your point of view, describes a couple elements that will be imported into the inline engine, which was previously defined.
<html-fragment>
<h3>IMPORTED</h3>
<p>Imported data</p>
<p>
<input type = "button" value = "imported button" acid = "demo_button" />
</p>
</html-fragment>