Rapidly Prototyping Widgets in Markup

Now that you have a feel for exactly how the widget lifecycle works and have seen plenty of examples, it's time to demonstrate a tool that you can use for quick, lightweight prototyping. Declaration is a Dijit resource that allows you to declare a widget in markup without resorting to a separate JavaScript file; this approach can be a tremendous boon during a development cycle when you need to rapidly capture or test out an idea.

Example 12-7 shows our very first HelloWorld widget using Declaration to create a widget in a completely self-contained page.

Example 12-7. HelloWorld (Take 6: Declaration)

<html>
    <head>
        <title>Hello World, Take 6</title>

        <script
            type="text/javascript"
            src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
            djConfig="isDebug:true,parseOnLoad:true">
        </script>

        <link
            rel="stylesheet"
            type="text/css"
            href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css">
        </link>

        <!-- define your CSS inline -->
        <style type="text/css">
            span.hello_class {
                color: #009900;
                cursor: pointer;
            }
        </style>

        <script type="text/javascript">
            dojo.require("dijit.Declaration");
            dojo.require("dojo.parser");
        </script>
    </head>
    <body>

        <!-- delcare the widget completely in markup -->
        <div
            dojoType="dijit.Declaration"
            widgetClass="dtdg.HelloWorld"
            defaults="{greeting:'Hello World'}">
                <span class="hello_class"
                dojoAttachEvent='onmouseover:onMouseOver, onmouseout:onMouseOut'>
                    ${greeting}
                </span>

                <script type="dojo/method" event="onMouseOver" args="evt">
                    dojo.addClass(this.domNode, 'hello_class');
                    console.log("applied hello_class...");
                    console.log(evt);
                </script>

                <script type="dojo/method" event="onMouseOut" args="evt">
                    dojo.removeClass(this.domNode, 'hello_class');
                    console.log("removed hello_class...");
                    console.log(evt);
                </script>
        </div>

        <!-- now include it into the page like usual -->
        <div dojoType="dtdg.HelloWorld"></div>
    </body>
</html>

Hopefully you made the immediate connection that Declaration is terrific for quickly working up an example with no hassle. There's no switching between and keeping track of multiple files, declaring module paths, and otherwise spending time on anything except the core task—so you can stay focused on the task at hand and get your work done as effectively as possible. Table 12-2 shows the Declaration API.

Table 12-2. Attributes of Declaration

Attribute

Comment

widgetClass

The widget's class

defaults

Attribute values that you'd normally pass in as parameters for construction

mixins

An Array that defines any mixin ancestors

Warning

The mixins attribute for a Declaration declared in markup must be an Array. This is different from dojo.declare, which allows for the possibility of either an Object ancestor or an Array of Object ancestors.

You'll generally want to refactor the work you do with Declaration after your idea settles, but there's really no faster way to mock-up a good idea in a hurry.

Get Dojo: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial