Distributed Web Application Components Part 2

In Distributed Web Application Components, the Engine for Web Applications Distributed Component feature was introduced. In Part II, the DWAC Designer is highlighted to show how Distributed Web Application Component projects are constructed, and a few simple examples are included. I'll also introduce a more complex example: drag-and-drop with canvas.

 

The DWACDesigner is a general Web-based development tool for creating Application Components and Tasks; extending Application Components with Templates and Fragments; and creating Distributed Component project files. DWACDesigner persists data through the Core Web project (via the DWACHandler HttpHandler). Therefore, it is necessary to authenticate with a registered user account.

 

The designer is separated into tabs:

 

Explorer : Navigate through the Account Manager file system for your account, starting at the top of the DWAC directory.

 

Projects : DWAC Project builder. Assemble Components, Tasks, Templates, and Fragments into a project, test it, and publish it into a unified DWAC file.

 

Task Lists : Create lists of tasks for bootstrapping your application component and performing basic workflows.

 

Fragments : Create XHTML chunks, define script scoped to the parent Template, or create reusable libraries for use by other Templates and Fragments.

 

Components : Create Application Components that may optionally be bound to XHTML nodes, load templates, and manage transactions.

 

Templates : Create XHTML to define the interface to your application, import Fragments, and define script scoped to the parent Component.

 

Running : Why wait? Each builder can run a work-in-progress on the page. More importantly, the Engine Profiler includes debugging and test tools for drilling through the internals of the framework to the script you are working on. And, when you run a demo of your work-in-progress, example code is included so you only need to cut-and-paste, and it's ready for use.

 

To create a Simple Example:

1) Navigate to the DWAC Designer for your account: /DWAC/user-name. For example, my designer is located at /DWAC/steve/.

2) Click the Components tab, or select Components from the tree control, and click the new icon. The New Component Template will be loaded in a window component.

3) Enter a component name, such as ExampleComponent, and click the Create button.

4) In the Component Model, select the component_init function.

5) Within the function body, use the getContainer function to obtain a reference to the object this component will be bound to. Example: this.getContainer. Add some content to the container to test the component, such as: this.getContainer().innerHTML = "<b>Loaded</b>". Although the built-in designer runtime will create a container (a <div /> element), this is optional when using the component.

6) Click the Update button to save the changes to the component_init function.

7) Click the Save icon to save the new component. Notice that after saving, the path to the component is displayed.

8) Select Declarative from the Scripted/Declarative drop-down, and then click the Run button to test the component.

9) In the Running tab, click Show Example Info to view cut-and-paste example HTML. If you have set up the Engine framework for your own Web site, you can use the new component by copying the example, saving the XML file to your Web server, and modifying the appcomp_path as appropriate. If you select Scripted, the example code will be JavaScript, but the result should be the same.

 

When dealing with more complex examples, sometimes it's easier to flesh out the details in a favorite IDE, which was the case with the the component.canvas.xml component. This was written while working on the component.hierarchy.xml and component.hierarchy_decorator.xml components for a canvas and feature demonstration. After creating the components, I then wanted to easily re-use them. Using the Import feature on the Component builder, it was two-clicks to import and save the component for use within DWAC Designer. I then quickly crafted an Example Template to implement the components, and from there it was very easy to debug and test the components in various circumstances.

 

Next, I created an Example Project to link together the templates, components, and a fragment of script utilities imported from the TemplateTools.xml static file.

 

From the canvas example project file, I could publish the project into a single XML resource. During the publication process, the Project Builder validates that all referenced templates and fragments exist in the project, replaces the external URIs with internal tokens, ${dwac.path}, and uses a different linking capability better suited for same-file references. With the published file, the application can be delivered as one file, not five.