There is bunch of various possibilities how to generate UI using Domplate (remember entire Firebug UI is generated using Domplate - i.e. content of all panels) and so here is another set of how to examples that is trying to reveal some other useful aspect and patterns. Of course, all examples can be explored using Domplate Runner again.
See all posts about Domplate here.
Enjoy! 
There is still lack of documentation for Domplate (even if there are already some articles) and so, I have decided to put together set of how to examples. I believe that this kind of simple and focused examples is good start for everybody who wants to understand how Domplate works and use it for building HTML UI.
Each example consists usually from following parts:
Every example also contains a brief description and a Demo button that can be used to run the example with Domplate Runner and see/explore generated markup. Since the runner is based on Domplate, specifically on
JQuery Domplate Plugin (made by Christoph Dorn) and Domplate doesn't support other browsers yet, it runs only in Firefox. So, if you are not using Firefox, perhaps it's good time to install it now.
Even if this part is also about web services integration, the main purpose is actually to show another (and a bit more complex) example of Domplate usage. In this part I have used Yahoo! Search Web Services to track inbound links and demonstrate how Domplate can be used together with real data. Final extension in this part will discover what pages link to the current page in the browser.
Read more...
One of the most interesting parts of the Firebug framework is a template system called Domplate. This engine is used to generate HTML UI of Firebug (content of all FB's panels).
It's quite powerful template system and I would definitely recommend to use it when creating UI for Firebug extensions.
Domplate generates the result HTML markup according to templates written in JavaScript. These templates are internally evaluated into a text, which is consequently inserted into specified DOM element on the page through innerHTML property.
It's also possible to define DOM event listeners so, the template object can handle even the user interaction with the final UI.
So, let's take a look at how to make up some HTML for our Hello World! extension. First of all, see the following piece of code that defines a simple Domplate template.
HTML generated from this template should look like as follows:
The template object is created by domplate function and stored in helloWorldRep variable. This new object usually contains three type of properties:
In our case, we have only one tag that describes how the result markup should look like. Only static text will be generated so, no additional providers or handlers are necessary.
The next piece of code shows how to evaluate the template and append generated HTML into our panel. It's executed within onMyButton function, which is a handler for a toolbar button created in part II.
We are using panel's member variable panelNode, which represents content area of the panel - final HTML will be inserted into it. Notice that we are using getPanel function to get our panel for the current context (page) where panelName represents ID of the panel, see part II.
HTML is inserted into the panel by calling append method of the template tag. This method has three parameters. The first one is used to provide data for the template, it's just empty object in our case as there are no dynamic properties in our template. The second is the parent DOM node and the last represents context object (this) that contains callback methods (data providers and event handlers). It can be null in our case as we don't have any callbacks yet, but it's good practice to use the template itself. It's usually the template which defines all these callbacks. Return value is root element of the created DOM (we don't need it for now).
In order to test the example just press Say Hello toolbar button (multiple times). Following screenshot shows how the output should look like.
Let's make our template a bit more complicated and see how to (a) use dynamic properties, (b) localize the message and (c) use an event listener.
onClick: function(event)
{
alert("Hello World!");
}
});
The templates uses a dynamic property date so, don't forget to provide the actual value when inserting the template output into the page.
Generated markup should look as follows:
$date represents an expression that looks for a property named date within provided args object. The onclick: "$onClick" statement looks for a method named onClick within the provided args object and if it's not there it looks within context object (the third parameter of the append method). Finally, the Hello World! message is localized using our $HW_STR method that comes from part IV.
Example extension (helloworld-0.0.5.xpi) can be downloaded here.
Entire engine is completely independent of the rest of Firebug API and so, it can be also easily used individually (e.g. within a web page). There is already some activity in this area. Christoph Dorn (creator of FirePHP) wrapped it into a jquery plugin. You can download it here.
