Hemi - JavaScript Framework - Get Started with DWAC

A Distributed Web Application Component (DWAC) is a composite, self-contained project. At present, a DWAC may contain Fragments, Templates, Tasks, Components. The DWAC Designer is a GUI for working with the Hemi JavaScript Framework, and includes builders for each of these components, a builder for projects, a project publisher, and persistence for your project files.

At present, you need to register with this site to use the DWAC Designer. An Offline/Unregistered Framework Designer is coming soon.

The following example walks through creating a template, creating a component to load a second template, fragment to include in the second template, and a project to link them all together.

1. If not already registered, you'll need to register with this site, and login. For the DIY-crowd, you can download and setup the Account Manager 4.
2. Access the DWAC Designer by typing: http://www.whitefrost.com/DWAC/[UserName]. Example: http://www.whitefrost.com/DWAC/steve (Screenshot #1)
3. Click Templates on the Explorer tab, or from the Templates tab, click the New button, and name the template "Example Template Container". (Screenshot #2)
4. Click Create. Note that the status is "Volatile". Click the Save icon, and take note of the the path. (Screenshot #3)
5. Click Components on the Explorer tab, or from the Components tab, click the New button, and name the component "ExampleComponent" (no spaces!). Check the Enable Templates checkbox (this will prepopulate the component with example code). (Screenshot #4)
6. Click Create, and then click Save. Copy the Path.(Screenshot #5)
7. Click the Templates tab (the Template created in Step #3 should still be loaded; if not, load it from the Explorer tab). Select "XHTML Template" from the drop down, and enter the following: <p acid = "ExampleComponent" appcomp_path = "/DWAC/[UserName]/Components/ExampleComponent">[ Template Component ]</p> Click "Update", then click "Save". (Screenshot #6)
8. Click Templates. Follow steps #3 and #4 again to create a new Template named "Embedded Template". (Screenshot #7)

9. Click Fragments on the Explorer tab, or from the Fragments tab, and click the New button, and name the fragment "Example Fragment". Include some example XHTML: <p>Example Fragment</p>. (Screenshot #8)
10. Click Create and then click Save. (Screenshot #9)
11. Click the Templates tab (the Template created in Step #8 should still be loaded; if not, load it from the Explorer tab). Click the "Link Fragment" button, and select "Example Fragment". Notice the <import-xml /> statement that was generated for you. This is a Hemi abstraction feature that is part of the Application Space service. Click "Save". (Screenshot #10)
12. Click the Components tab (The Component created in Step #6 should still be loaded; if not, load it from the Explorer tab). Select component_init from the Component Model, uncomment the loadTemplate line. Copy the path from Step #8 and replace the loadTemplate parameter. (Screenshot #11)
13. At this point, "Example Template Container" includes "Example Component", which loads the "Embedded Template", which imports the "Example Fragment". Each template, including referenced fragments and components, operates within its own Application Space. From the "Explorer" tab, click the "Templates" tree, select the "Example Template Container", and click the "Open" icon to reload "Example Template Container".
14. From the list box, select "Scripted" or "Declarative", and click the "Run" button to see the template executed. This will automatically load the template into the "Running" tab. (Screenshot #12)
15. Click "View Example Info" to see example code for how the template was loaded, depending on which option, Scripted or Declarative, was selected. (Screenshot #13)
16. Click the "Send to Active Source" button to load the Framework Profile, and set a reference to the running object. (Screenshot #14)
17. Once the Framework Profile is loaded (you can load it from any page by clicking the "Tools" icon in the upper-right hand corner), the Hemi Framework registry identifier is switched from "hemi-" to "dwd-". By selecting the "Filter Results" checkbox on the "Hemi Stats" tab, all new Hemi Framework objects are created with the alternate identifier prefix. This makes it easy to pick out in-flight work from everything else that may be running. To try it out, click the checkbox, minimize or close the profiler (this tool will persist once opened), and re-run the Template from the Templates tab. Open up the profiler again, and from the "Hemi Stats" tab click the "Registry" button. Notice that only the objects related to the running example are displayed. (Screenshot #15)
18. Now, create a project out of all the Hemi objects that were created. Click the "Projects" tab and click the "New" button, give the project a name such as "Example Project", and click "Create". (Screenshot #16)
19. From the "Link" list box, select "Template", click the "Link" button, and select the first template. Do this again for the second template. (Screenshot #17)
20. Select "Fragment" to link the fragment, and select "Component" to link the component. For Primary Template, specify "Example Template Container" (if you don't, this particular project won't do anything when you click "Run"), and then click the "Save" button. (Screenshot #18)
21. When a project is deployed, or by selecting "Deploy XML" from the list box, the linked project modules are merged into a single deployable DWAC XML file. All linked fragments and /DWAC paths are replaced with internal references. This will also verify that all discoverable links are resolved. For example, if the fragment link is not included, an error will be raised. (Screenshot #19)
22. Click the "Run" button to publish the project, and test the running project in the Runtime Container. Notice that in the example information, the code is different for how the DWAC was loaded. (Screenshot #20)
23. Once a DWAC is created, you can copy the Deployed XML text, and use that for your own DWAC - and everything needed for your distributed component is included. And, by using the Hemi JavaScript Framework, you can load the Framework Profiler at any time to actively view and debug your work.