Up to FAQ

Performance

Can I ask Dojo not to search the entire page for widgets?

To turn off global widget searching, add these lines just *before* you include dojo.js:

<script type="text/javascript">
	djConfig = {
		parseWidgets: false
	};
</script>

Note that this turns off Dojo's default "search the full page for widgets" behavior, so to get widgets declared with inline constructors to appear, you will need to explicitly provide a list of IDs of elements to search if you want to use inline constructors, like this:

<script type="text/javascript">
	djConfig = {
		parseWidgets: false,
		searchIds: ["widgetContainer", "anotherOne"]
	};
</script>
...
<div id="widgetContainer">
	<span dojoType="...">...
</div>
...
<div id="anotherOne" dojoType="...">...</div>

In situations where you don't know where other parts of your app may want or declare widgets, they can also declare there intentions by adding inline script blocks that do a push() onto the searchIds array.

Why are the tree images downloaded repeatedly?

Btw; there might be an other reason to see slowness: if you see that each icon of your tree is loaded one-by-one and not cached; that's because of an IE bug. This can be fixed by adding proper http header attributes on server side, which has several ways to achieve; my solution is here.

Configuring widgets

How do I set the CSS [for a floating pane]?

See Customizing Widget Look in the book.

How Can I Configure an Individual Widget?

How would one specify per-widget configuration information?  For
example, if I were creating a generic Suggests widget.  If I wanted to
specify the URL that a particular widget retreives results from, how
would I do that?

<input type="text" dojoType="SuggestWidget" ?url="http://foo.com"?/>?

<input type "text" dojoType="SuggestWidget">
<div class="url">http://foo.com</div>
</input>

Yes, it will automatically set the property of the widget, supposing of 
course that "url" is a property on the widget with a string value to 
begin with.

Regards
Alex Russell

Controlling Inclusion of CSS for Widgets?

> I am creating buttons and am using 
> "inheritance". My base button requires a css file, and each child
> type will need an additional stylesheet. I can work around it in the
> fillInTemplate method and just call dojo.style.insertCssFile, however
> then this is called for all instances of the widget on the page. I
> assume that the templateCssPath is only included once during the
> first widget of that type creation.

there's an optional 3rd argument to insertCssFile which flags whether or not it should check for duplicates. It's false by default, but if you pass true, a CSS file will only get included once no matter how many times it's called.

Programmatic questions

How Can I convert a DOM tree into widgets?

To convert a dynamically created element into an inlineEditBox:

dojo.widget.createWidget(nodeRef);

should work. (nodeRef should have dojoType="InlineEditBox" etc.)

How Can I Access Widgets from Scripts?

Use methods provided by the "dojo.widget.manager" object to get a reference to your widget, like so:

 var myWidget = dojo.widget.byId('myWidgetId');

How to Define Widget IDs

>> BTW, can Dojo reuse id as widgetId? Or something similar? It is kind of weird and redundant to write: <<

Yes, I've been thinking about that too. I talked to Alex and he thought it would be ok, so I modified widget.Manager.js (in the trunk) so that 'id' will be used for 'widgetId' (unless there is an explicit 'widgetId').

How to Parse Widgets out of a String

On Thursday 15 December 2005 4:19 pm, Fabian Dittrich wrote:

>> Hi everybody,
>>
>> i can parse a node in DOJO like this:
>>
>> var testObjects = new dojo.xml.Parse();
>> testItems = testObjects.parseElement(document.getElementById("test"));
>>
>> where the "test" node is a part of my html, but what if i just a a
>> variable containing some xml. Let´s say i get some XML from the
>> server and i dont want to do the workaround to first create a dom
>> node from it and then parse it, i want to directly parse it.
>>  . . .

So in this case, you're passing in a string and not a DOM node, which is 
what the Dojo first-pass parser expects. To create a document out of 
this string, use dojo.dom.createDocumentFromText(), like this:
	
	var some_javascript_var = "<xmltest>test_value</xmltest>";
	var testDoc = dojo.dom.createDocumentFromText(some_javascript_var);
	var testObjects = new dojo.xml.Parse();
	// might need to pass testDoc.documentElement or similar
	var testItems = testObjects.parseElement(testDoc);
        dojo.widget.getParser().createComponents(testItems); // Added, Cris Perdue

It would be good if the parser tried to do this for you. Perhaps a bug 
should be filed to this effect?

-- Alex Russell

How to specify size of widgets when creating from scripts?

You just need to specify the size of the TabPane in a non-intuitive way... indirectly via a domnode. Here's the domnode:

	<div id="tabDiv" style="width: 300px; height: 600px;"></div>

And here's the code:

	var srcDiv= dojo.byId("tabDiv");
	var myTabPane= dojo.widget.createWidget("TabPane", {id: "myTabPane"}, srcDiv); 

Note that the TabPane will replace tabDiv

- Bill

Creating a widget attached to another widget

Chris (FeedTagger) wrote:
> Hi,
> 
> I have created two separate HTML Widgets that have HTML templates, say
> widget A and widget B. Widget A needs to be able to create instances
> of widget B and attach them to an already defined attach point on
> Widget A.
> 
> I have tried to play with "attachTemplateNodes", "buildFromTemplate",
> "buildAndAttachTemplate" - but suspect that's barking up the wrong
> tree.
> 
> What's the proper dojo way to achieve this?

Chris,

Here's what I do:

In widget A's templateString, say you have a node like this:

<div dojoAttachPoint="widgetBNode"></div>

Then, in the fillInTemplate for widgetA, you add something like this:

var widgetBProps = {} // flat object containing properties to initialize
widgetB with...
this.widgetBRef = dojo.widget.fromScript(this.widgetBNode, "WidgetB",
widgetBProps)[0];

There are other ways, probably some that are more elegant, but I have a
lot of success with this approach.

- -Dylan

Equivalence of identifiers for Dojo widgets

>  I like it.  Can I trigger the behavior by specifying classname,
> dojoType, and or the tag name itself?
>
> 1. <button class="dojo-mouseoverbehavior">
> 2. <button dojoType="mouseoverbehavior">
> 3. <dojo:mouseoverbehavior>

That's correct. You can use any/all of the above.

How can I create/destroy widgets on the fly?

Creation:

var properties = {/* ... */};
var parentNode = document.getElementById("id");
dojo.widget.fromScript("WidgetType", properties, parentNode, "last");

Or, shortening a bit and replacing an element with a new widget:

var replacedNode = document.getElementById("id");
dojo.widget.fromScript("WidgetType", {}, replacedNode);

Or just creating a widget and adding it to the document later:

var tmpWidget = dojo.widget.fromScript("WidgetType", {}, replacedNode);
document.getElementById("id").appendChild(tmpWidget.domNode);

Destruction:

tmpWidget.destroy();

Regards
Alex Russell

Can I retrieve a widget from its DOM node?

var unaryFunc = function(x){
	if(x.domNode == replacedNode){
		return true;
	}
}
var widgetRef = dojo.widget.getWidgetsByFilter(unaryFunc);

should do the trick...

-Dylan

Miscellaneous

Defining Widgets Outside the dojo.* Namespace

See this Dojo blog article.

Does Dojo have a WYSISYG HTML editor?

On Wednesday 28 September 2005 11:19 pm, David Schontzler wrote:
> So as of rev 1639, Dojo has a pre-built WYSIWYG editor complete with
> toolbar support. It isn't anywhere near perfect yet, but it should
> work out well for the basics. Feel free to dink around with it and
> provide feedback as you do. It's new, so there's no doc for it, and
> it hasn't been thoroughly tested (it isn't done!), but you should be
> able to get started with tests/widget/test_Editor.html.

Paul and David have done an amazing job in getting this out the door, 
and Jot has been tremendously generous in Open Sourcing all of this 
work. The RichText component that the Editor is based on works on IE, 
Firefox, and Safari, and the Editor (RichText+Toolbar) makes it much, 
much easier to use.

It's hard to emphasize enough how important a great rich-text editor is 
to the project. Thanks guys.

Regards

-- 
Alex Russell

How do I set the width/height of the editor, or make it have a scrollbar?

Currently the editor's size changes as you type in text. There is a min-height property, but there is no way to make it have a scrollbar, or to set cols/rows property. We talked about doing this, so that

<div dojoType="Editor">...</div>

would size dynamically, based on the content, and

<div dojoType="Editor" style="height: 5em; overflow: auto">...</div>

would have a scrollbar... but it hasn't been implemented yet.

Problems Using TR or TD as Widget Main Tag?

On Sunday 20 November 2005 1:11 pm, Rogers Reilly wrote:
>> Apologies for asking what amounts to a debugging question.  I'm
>> having a ton of trouble getting Dojo to handle a widget with 'tr' or
>> 'td' as its top-level (i.e. domNode) tag.  Cruising around other
>> widgets, I see folks using 'div,' 'table', 'ul,' and 'li' as
>> top-level tags.  Is there anything in Parse or the Widget hierarchy
>> that would preclude using 'tr' or 'td'?  I've tried placing their
>> dojo tags inside 'table' tags within the actual HTML page with no
>> luck.  The exact same code with 'div' or 'span' inserted everywhere
>> produces no errors, but as soon as I use these table sub-elements at
>> the top of my template, the widget.create() routine bombs out
>> somewhere in the middle and my .domNode 'has no properties' and the
>> Widget doesn't exist to the manager.
>> I would (and will) keep banging on this myself, but it occurs to me
>> there may be some structural reason why a sub-element couldn't form
>> the basis of a widget.  This ring a bell to anyone?
>>
Other than that many browsers enforce parent-child typing for table 
elements, it shouldn't be a problem. Essentially, if you're trying to 
replace a td w/ a div, it won't work since tr's wont accept 
div's as direct descendants. This is a browser limitation and not 
something Dojo can (or should) do much about.

-Alex Russell

The kitchen sink package doesn't have the widget XXXX in it, should I expect that to be there?

The kitchen sink build doesn't contain any widgets; there are so many widgets, and you probably will only want to use a small subset of them, so it didn't make sense. Unfortunately the name "kitchen sink" is really misleading.

Anyway, you should always keep the src/ directory in your distribution, next to dojo.js, and the widget you want will be pulled from there.

Alternately, you can make a custom build that includes the widgets you want (see the main FAQ for instructions).

Bill

My widget includes a form element. How do I prevent it from submitting?

Sometimes, when the user clicks a submit button or presses Enter, you don't want your form to submit. In standard HTML you can have your onsubmit handler return false, but this doesn't work when you use dojoAttachEvent. Here's the solution:

In your template HTML, create the form element as you would normally:

<form name="myForm" dojoAttachEvent="onSubmit:mySubmitHandler">

Then, in your submit handler method, call dojo.event.browser.stopEvent(theEvent), like this:

mySubmitHandler: function(theEvent) {
    /* do some stuff */
    dojo.event.browser.stopEvent(theEvent);
    /* do some other stuff */
},

-DF