StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I am not an expert in Dojo widgets, but this is what I know:</p> <ol> <li><p>All Dojo widget constructors have signature:</p> <p>var widget = new Widget(params, node);</p></li> <li><p>The best way to discover params is to look at the source code — don't get scared, they would be documented variables at the beginning of a relevant class.</p></li> <li><p>The relevant file is usually simple to find using the name of the widget because they are named by their path.</p></li> <li><p>The best way to look up this stuff is to use a Dojo checkout with your favorite text editor. But <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/" rel="noreferrer">the nightly checkout</a> works too (if you follow the trunk). Or <a href="http://bugs.dojotoolkit.org/browser/dijit/trunk/" rel="noreferrer">the Trac source browser</a>.</p></li> <li><p>Don't underestimate the power of looking at tests and demos.</p></li> </ol> <p>Example: dijit.layout.TabContainer ⇒ <a href="http://bugs.dojotoolkit.org/browser/dijit/trunk/layout/TabContainer.js" rel="noreferrer">dijit/layout/TabContainer.js</a>. If the file is missing look into directories of the hierarchy for _base.js, or some similarly sounding files — the latter can bundle related classes together. But in most cases (like with TabContainer) you'll find it immediately. Let's go and look.</p> <p>There are two public documented parameters in the top of the class:</p> <ul> <li>tabPosition — String. Defines where tabs go relative to tab content. "top", "bottom", "left-h", "right-h". Default: "top".</li> <li>tabStrip — bool. Defines whether the tablist gets an extra class for layouting. Default: false.</li> <li>_controllerWidget — just ignore it, no public parameters start with the underscore — it is a common JavaScript convention to designate protected members.</li> </ul> <p>But it is not all. TabContainer is based on <a href="http://bugs.dojotoolkit.org/browser/dijit/trunk/layout/StackContainer.js" rel="noreferrer">dijit.layout.StackContainer</a> (just look at the dojo.declare() header). We can use StackContainer's public parameters as well:</p> <ul> <li>doLayout — Boolean. If true, change the size of my currently displayed child to match my size. Default: true.</li> <li>persist — Boolean. Remembers the selected child across sessions. Default: false.</li> </ul> <p>As you can see the code and parametrs are nicely documented, yet not always reflected in the API tool. Now we can create the tab container with confidence.</p> <p>But let's see it in action first. All Dijit tests are always in <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/" rel="noreferrer">dijit/tests</a>. Any dijit.layout.* widget will be tested in <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/" rel="noreferrer">dijit/tests/layout</a>. The relevant test file would be named something like test_TabContainer.html, and in fact I see 5 files for that:</p> <ul> <li><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer.html" rel="noreferrer">test_TabContainer.html</a>.</li> <li><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer_noLayout.html" rel="noreferrer">test_TabContainer_noLayout.html</a>.</li> <li><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer_prog.html" rel="noreferrer">test_TabContainer_prog.html</a>.</li> <li><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer_remote.html" rel="noreferrer">test_TabContainer_remote.html</a>.</li> <li><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainerTitlePane.html" rel="noreferrer">test_TabContainerTitlePane.html</a>.</li> </ul> <p>For example, let's recreate the first TabContainer of <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer.html" rel="noreferrer">test_TabContainer.html</a>:</p> <pre><code>var tc = new dijit.layout.TabContainer( {persist: true, tabStrip: true}, "mainTabContainer"); </code></pre> <p>Or we can do it like in the test inline:</p> <pre><code><div id="mainTabContainer" dojoType="dijit.layout.TabContainer" persist="true" tabStrip="true" style="width: 100%; height: 20em;"> ... </div> </code></pre> <p>Coming back to your original question: now you can see that width and height are specified simply as styles, no special attributes, nothing fancy, just some intuitive CSS. So if you want to do it programmatically, just set them on a node before creating a new instance of TabContainer.</p> <p>Yeah, I wish the API doc got all these small details too, but the whole setup is intuitive, and relevant parts are documented right in the file. We did go to the source code, but we didn't try to decipher the source code, just read human-readable comments on the top of the class.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload