Meta Capsules For Dynamic Web Applications
The use of meta capsules for content delivery lies at the heart of the WebRocketX paradigm. A meta capsule is a div that encloses the incoming content. This div also contains custom attributes, called meta attributes, which give instructions to the WebRocketX framework. Delivering content encapsulated within a meta capsule makes the framework both declarative and component driven.
- Meta Capsules
Simple Meta Capsule Example
Shown here is an example of using a meta capsule. Note how the capsule is
a simple outside div with meta attributes and content inside of it. This example capsule only specifies
the capsule id for tracking this view, the capsule class, the capsule type, the target div for injection,
a js onload function that will be run when injection is complete, and the title to show in the browser.
Meta attributes that are not included in the div and are not required will be set to their defaults by the framework.
The capsule class "metaCapsule" is only used by the framework to locate the capsule in the DOM. It servers no other styling purpose. The capsule is designed to be an invisible wrapper for content delivery. It should not be styled to be visible. However, sometimes the capsule div will break the css of the surrounding page hierarchy because it throws an extra div between its children and their parents. Small adjustments to the css can usually be done to fix this.
Keep in mind that a "hook", the jsOnload attribute, to facilitate onloads during injection is necessary because this is a Single Page Application and the body onload event that happened when we entered the application is no longer available for later injections.
Note that, in the example, the html content is in the same file as the capsule. With large layouts, it is recommended that the developer abstract the content to an included file to keep things cleaner, instead of putting the content in the same file as the capsule. Also, use of a meta capsule template will add even more formal structure, which is desireable when applications are built using large teams of developers. An example of that is given further below.
Of course, this is simply html markup so you can do this any way you want. All you need in the end, coming back from an async call, is a div (aka capsule) wrapping your content and the Webapi will do the rest. In the case of this example, the framework will do things in the following order.
Use the innerHTML method to inject the text into the div in your page with an id of "id_of_a_div".
Put a reference to this content in a js stack identified by the id of "helloWorldPage". This page
can then be cached by this reference on the browser and therefore navigated to later when it has
gone out of sight.
Call the function "myJSFunction()" to do any onload activities on this page.
Set the title on the browser to "My Great Title".
HTML Code For A Simple Meta Capsule
If you have questions about WebRocketX, please feel free to contact us at: