Subscribe to RSS Feed

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.

Hello World! template

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.

var helloWorldRep = domplate(
{
    myTag:
        DIV({class: "MyDiv"},
            "Hello World!"
        )
});

HTML generated from this template should look like as follows:

<DIV class="MyDiv">Hello World!</DIV>

The template object is created by domplate function and stored in helloWorldRep variable. This new object usually contains three type of properties:

  1. Tag - set of functions (constructors) that represent a markup template.
  2. Data provider - a function that is intended to provide dynamic data for the template during generation process.
  3. Event handler - a function that is intended to handle DOM events fired when the generated UI is used by the user.

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.

onMyButton: function(context)
{
    var panel = context.getPanel(panelName);
    var parentNode = panel.panelNode;
    var rootTemplateElement = helloWorldRep.myTag.append(
        {}, parentNode, helloWorldRep);
}

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.

Dynamic template

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.

var helloWorldRep = domplate(
{
    myTag:
        DIV({class: "MyDiv", onclick: "$onClick"},
            SPAN($HW_STR("helloworld.message")),
            SPAN(" "),
            SPAN("$date")
        ),

    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.

onMyButton: function(context)
{
    var panel = context.getPanel(panelName);
    var args = {
        date: (new Date()).toGMTString()
    };
    var root = helloWorldRep.myTag.append(args, panel.panelNode, null);
},

Generated markup should look as follows:

<DIV class="MyDiv">
    <SPAN>Hello World!</SPAN>
    <SPAN> </SPAN>
    <SPAN>Wed, 04 Jun 2008 11:06:28 GMT</SPAN>
</DIV>

$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.

Domplate & JQuery

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.


Rss Commenti

7 Comments

  1. #1 Jeff Walden
  2. Yeah, this is similar to what Domplate does.

    #2 admin
  3. The jQuery plugin URL has changed to: http://plugins.jquery.com/project/domplate

    There is also a project page at: http://code.google.com/p/domplate/

    #3 Christoph Dorn
  4. OK, link updated.

    #4 admin
  5. Thanks for the great series Honza. Keep up the good work!

    #5 Nathan Mische
  6. Is it possible to dump the firebug NET console output to a file? I want to output all the "net requests" made by page to a local file.
    Thoughts?

    #6 anurag phadke
  7. @anurag phadke: unfortunately not yet 🙁 Watch the issue http://code.google.com/p/fbug/issues/detail?id=416, it's on my wish list.

    #7 admin

Sorry, the comment form is closed at this time.