Dojo Layout Tips

Laying out UIs with Dojos Layout Containers.

Object Partners

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>

<!—Put your info here` `à
**Programmatic**
IE Rules
<script type=“text/javascript”>```` dojo.require(“dijit.layout.ContentPane”);```` dojo.addOnLoad(function() {new `dijit.layout.ContentPane({````content:` "<p>Honestly, it sucks</p>"`,````style:` "height:125px"},"targetID"`); `});`

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.

Back when in the early days of Dojo (0.4 to be honest), Dojo had the 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.

Share this Post

Related Blog Posts

Unknown

How To Become More Effective, or Why Some Are 10X As Productive As Others

April 26th, 2010

I am sure that you have heard the often quoted “great developers are 10 times more productive than average developers”.  As a consultant, I have seen this in practice many times, over the course of many projects at many clients.  I am sure that you…

Steve Banks
Unknown

How do I know if an open source software product is right for my organization?

March 18th, 2010

More and more organizations are relying on open source software to build, test, deploy, and run mission critical IT applications. From small start-ups to Fortune 500 companies, organizations worldwide are continuing to find open source as a cost effective means to deliver quality business applications. With a wealth of commercial and open source software options widely available, how does an organization know if an open source product is right for them?

David Reines
Unknown

Agile Project Inception, Success and Pitfalls

January 21st, 2010

Agile projects have been around for years now, but for companies that are still new to the concepts and process, some simple pitfalls can delay your project. I have seen projects at companies that have run into challenges so here are some ideas for successful starts and pitfalls to avoid.

Object Partners

About the author