Distributed Web Application Components

Abstraction plays a big part of the Engine for Web Applications framework. One derivative strength is Engine's flexibility when working with customizations, extensions, and other frameworks. Effectively widgets and extensions are made plug-and-play via the configuration. For example, Application Components may be instantiated via XHTML Component objects, which in turn may be auto-instrumented via the engine.config.xml file. These capabilities make it easy for developers to capture intent with their own concepts and tools; it is very easy to create new application paradigms.

 

Distributed Web Application Components is an umbrella term for describing existing Engine features and new tools for building, running, and debugging the components. Each Distributed Component is a repository of fragments, templates, components, and tasks, that can be authored and released as a single deliverable. The Engine framework includes everything needed to load and execute one or more DWAC projects.

 

Here are a few examples using the DWAC tools. Starting with a basic event-driven example: An extension to a text field to reflect keystrokes. At the moment, the tools are hosted with the Core Web project, but an anonymous version is coming soon. Until then, registered users can access the DWAC tools via /DWAC/{user-name}. For example, my DWAC workspace is located at /DWAC/steve/.

 

1) From the Component Builder, click the New icon.

2) Name the component Reflector, and specify the participation name as Reflect.

3) Optional, check the Include Transaction API to include an example of the transaction service.

4) Application Components, by default, are not configured for key stroke evnts. So, the component_init function is updated to add the event handler using the createHandler method to create a delegate, and the addEventListener helper method to attach the handler, _prehandle_keyup.

5) Click New Function and enter _handle_keyup, which is invoked by _prehandle_keyup, which in turn was attached as the event listener.

6) In the body of _handle_keyup, add a call to serve the transaction: this.serveTransaction("keypress",this);

7) Save the Reflector component, and take note of the DWAC Path. The Component is now available via the Core Web DWACHandler. For example, the named URI for my version is: /DWAC/steve/Components/Reflector

8) Create a new component named Reflected, and delete the component_init and component_destroy functions.

9) Add a new function named _handle_transaction. In the function body, copy the value from the TransactionPacket source (the this parameter in the serveTransaction call) into the component's container. org.cote.js.xml.setInnerXHTML(this.getContainer(),v.data.src.getContainer().value);

10) Save the Reflected component, and take note of the DWAC Path. For example, the named URI for my version is: /DWAC/steve/Components/Reflected

11) From the Template Builder, click the New icon and name the template Type Echo.

12) In the XHTML text field, add a new text field for the Reflector component: <input type = "text" acid = "Reflector" appcomp_path = "DWACPath" />

13) Below the text field, add a span tag for the Reflected component: <span acid = "Reflected" appcomp_path = "DWACPath"></span> Optionally, copy the <span /> tag a few times.

14) Save the Type Echo template. For example, the named URI for my template is /DWAC/steve/Templates/Type Echo

15) Click Run (either as Scripted or Declarative) to try out the new template in the Running tool.

16) Click the Send to Active Source button to try debugging. Or, once the active source window is open, re-run the template and then select the Profiler tab to browse through the internal Engine object model for the running example.

 

I'll add more examples as I finish the tools for composting the DWAC files from the created modules.