Jul 14, 2010

Dojo Layout Tips

Dojo has gone through much work to build a nice set of widgets to help with the layout of your web applications.  They currently have many different layout managers.  From the highly usable dijit.layout.BorderContainer, to the functional, (or at least it doesn’t crash) dijit.layout.AccordianContainer.

But with all these layout managers, you can also use a multitude of pane objects.  SplitPane, SliderPane and so on.  But it’s the ContentPane, that really holds the guts of your application together.

Dojo now has 3 different content panes.  The dojo.layout.ContentPane, the dijit.layout.ContentPane, and the (you guessed it)…  the dojox.layout.ContentPane.

All three can be declaratively or programmatically created.

Declarative

<script type="text/javascript">
    dojo.require("dijit.layout.ContentPane");
</script>
<div dojoType="dijit.layout.ContentPane">
    &lt;!—Put your info here à
</div>

Programmatic

<div id="targetID">
    IE Rules
</div>
&lt;script type="text/javascript"&gt;
    dojo.require("dijit.layout.ContentPane");
    dojo.addOnLoad(function() {
        new dijit.layout.ContentPane({
            content: "<p>Honestly, it sucks</p>",
            style: "height:125px"
        },
        "targetID");
    });
&lt;/script&gt;
 
 

Where, once again, Dojo fails to excel is in their documentation.  While working on an application with many nested containers and layouts, I encountered several headaches, which forced me to head to Google to solve.

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Back when in the early days of Dojo (0.4 to be honest), Dojo had the </span>dojo.widget.ContentPane, which executed javascript when you the set the executeScripts parameter to true.

This was removed in 0.9, to make the widget more streamlined (Huh???).  Since the dijit ContentPane was next logically choice, they must have added to the ability to run script code there. Well not exactly  To run script code, you need to should actually use dojox.layout.ContentPane.  Even though its in the dojox package it has been well tested and used.

Another helpful tip, when nesting multiple panes and containers together, the dojo.addOnLoad() method is ONLY executed on the first load.  Even if you href another page in, that addOnLoad will not be executed.  This means you can declaratively build your initial page, but subsequent pages that are “sucked in” your existing content panes, need to be built programmatically.

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published.

Related Blog Posts
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]