Posted in Dojo Cookies
Skip the mark-up: dojo.body, create and place
For those that have wondered, “How can I create a design that requires no HTML mark-up within the body?” The answer lies with 3 essential functions in the Dojo core:
For fun, let’s programmatically create a drag-and-drop (DnD) list on the page:
dojo.require("dojo.dnd.Source"); dojo.addOnLoad(function(){ var header = dojo.create('h2'); dojo.place(header, dojo.body()); header.innerHTML = 'Fruit List'; var listContainer = dojo.create('div', {'class':'listContainer'}); dojo.place(listContainer, dojo.body()); var fruitList = dojo.create('ol', {'id':'fruitList'}); dojo.place(fruitList, listContainer); fruitList = new dojo.dnd.Source('fruitList'); fruitList.insertNodes(false, [ "Limes", "Apples", "Lemons", "Oranges", "Pears", "Bananas", "Mangos", "Passion Fruit", "Stawberries", "Lulos" ]); });
You can download the code here: dojobodycreateplace.html.
Here, we’ve created three elements and have placed them within the body. Should you want to explore more, click on the links for dojo.body(), dojo.create() and dojo.place(). For an excellent DnD tutorial, check out: Dojo Drag and Drop, Part 1: dojo.dnd
Tags: dojo.body, dojo.create, dojo.place
Author: Gerald Lopez
About: Gerald Lopez is a Dojo Software Developer for www.SITA.aero
Website: http://www.geraldlopez.com
This entry was posted
on Thursday, April 8th, 2010 at 1:36 pm and is filed under Dojo Cookies.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
April 18th, 2010 at 6:36 pm
Even more compact creation of 3 elements:
dojo.create(’h2′, {innerHTML: ‘Fruit List’}, dojo.body());
dojo.create(’div’, {’class’:'listContainer’}, dojo.body());
dojo.create(’ol’, {’id’:'fruitList’}, listContainer);
The rest is unchanged.
May 13th, 2010 at 2:24 pm
Thanks Eugene. Of course, for the sake of featuring dojo.place(), the extended example was shown. As always, it’s a good idea to keep your code compact when you can.