Permalink
Browse files

Changes paths for some exercies and made new for custom widgets

  • Loading branch information...
1 parent 901b084 commit c227425f70a8613cc60137e3ac8372d6eade070c @psvensson committed Oct 6, 2011
Showing with 565 additions and 0 deletions.
  1. +11 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Description
  2. +49 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Exercise/exercise.html
  3. +8 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Exercise/mycustom/foobar.html
  4. +36 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Exercise/mycustom/foobar.js
  5. +8 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Sample/mycustom/foobar.html
  6. +36 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Sample/mycustom/foobar.js
  7. +50 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Sample/sample.html
  8. +8 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Solution/mycustom/foobar.html
  9. +36 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Solution/mycustom/foobar.js
  10. +51 −0 2. Custom Widgets/Exercise 1 - Minimal custom widget/Solution/solution.html
  11. +6 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Description
  12. +56 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Exercise/exercise.html
  13. +9 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Exercise/mycustom/dialog.html
  14. +58 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Exercise/mycustom/dialog.js
  15. +17 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Exercise/mycustom/specialdialog.js
  16. +9 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Sample/mycustom/dialog.html
  17. +58 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Sample/mycustom/dialog.js
  18. +56 −0 2. Custom Widgets/Exercise 2 - Use and re-use of widgets/Sample/sample.html
  19. 0 {1. Basics/Exercise 1 → 3. Layout/Exercise 1 - Layout basics}/1.Sample/sample.html
  20. 0 {1. Basics/Exercise 1 → 3. Layout/Exercise 1 - Layout basics}/2.Exercise/exercise.html
  21. 0 {1. Basics/Exercise 1 → 3. Layout/Exercise 1 - Layout basics}/3.Solution/solution.html
  22. 0 {1. Basics/Exercise 1 → 3. Layout/Exercise 1 - Layout basics}/Description
  23. +3 −0 README
@@ -0,0 +1,11 @@
+This is a very simple exercise where one learns how custom widgets works in Dojo.
+Good walkthrough can be found here: http://dojotoolkit.org/documentation/tutorials/1.6/recipes/custom_widget/
+
+The Exercise is as follows;
+
+1. Open and study the file Sample/sample.html
+2. Note that it creates a new custom widget and places it under an existing DOM node using its 'domNode' property and the standard appendChild DOM function.
+3. Create several new custom widgets of the same type, either using the same method or using a loop.
+4. Use the browser debugging tool of your choice to observe the automatic id's given to certain DOM nodes
+
+
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Custom Dojo Widget Exercise - Exercise</title>
+
+ <!-- required: the default dijit theme: -->
+ <link id="themeStyles" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
+
+
+ <script>
+ var dojoConfig =
+ {
+ isDebug : true, // Create a 'firebug-lite' debug console for older or unknown browsers at the bottom of the page
+ debugAtAllCosts: true, // Use a slower unrolled-loading strategy for loading resources, so that errors are easier to locate
+ baseUrl : "./Exercise/", // Where the loader should start to look for stuff
+ modulePaths : // Where, realtive the baseURL, each non-dojo class can be found
+ {
+ custom : "mycustom/"
+ }
+ };
+ </script>
+
+ <!-- required: dojo.js -->
+ <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
+
+ <script type="text/javascript">
+ // Use dojo.require to choose which parts of dojo to load
+ dojo.require("mycustom.foobar");
+
+
+ // addOnLoad calls registered functions after the page is fully loaded
+ dojo.addOnLoad(function()
+ {
+ var foo = new mycustom.foobar({username: "Bosse"});
+ dojo.byId("main").appendChild(foo.domNode);
+
+ });
+
+ </script>
+</head>
+<body class="claro">
+
+ <h2>Basic Custom Widget</h2>
+ <div id="main"></div>
+
+</body>
+</html>
+
@@ -0,0 +1,8 @@
+<div style="border: 1px solid grey">
+ <div>
+ <strong>Selected:</strong> <span dojoAttachPoint="selected">${username} </span>
+ <div>
+ Enter username: <input dojoAttachPoint="thetextbox" dojoType="dijit.form.TextBox">
+ <button dojoAttachpoint="theokbutton" dojoType="dijit.form.Button">OK</button>
+ </div>
+</div>
@@ -0,0 +1,36 @@
+// Provide registers the class with dojo, so that it is not loaded twice
+dojo.provide("mycustom.foobar");
+
+// All other classes that are used either as superclasses, as constructors or in other ways referred to must be 'required'
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit.form.Button");
+dojo.require("dijit.form.TextBox");
+
+// The declare statement actually creates the new class, named after the first argument. Superclasses are declared in the second argument,
+// and the class body (an object literal with all properties, functions as non-functions) is the third argument.
+dojo.declare("mycustom.foobar", [ dijit._Widget, dijit._Templated ],
+{
+ // Here is the HTML template/snippet for the widget.
+ templateString: dojo.cache("mycustom", "foobar.html"),
+ // This enables us to define widgets inside our widget using 'dojoType'
+ widgetsInTemplate: true,
+ // This is just a custom property which is subtituted in using '${}' in the template
+ username: "none",
+
+ // The postCreate function is called after the template is rendered, but before it is inserted into the DOM
+ postCreate: function()
+ {
+ console.log("mycustom.foobar postCreate called.");
+ // Wire up the event handler of the button widget to call our internal function
+ console.log("button is "+this.theokbutton);
+ dojo.connect(this.theokbutton, "onClick", this, this._onOkClicked);
+ },
+
+ _onOkClicked: function(e)
+ {
+ console.log("mycustom.foobar _onOkClicked called.");
+ var thename = this.thetextbox.get('value');
+ this.selected.innerHTML = thename;
+ }
+});
@@ -0,0 +1,8 @@
+<div style="border: 1px solid grey">
+ <div>
+ <strong>Selected:</strong> <span dojoAttachPoint="selected">${username} </span>
+ <div>
+ Enter username: <input dojoAttachPoint="thetextbox" dojoType="dijit.form.TextBox">
+ <button dojoAttachpoint="theokbutton" dojoType="dijit.form.Button">OK</button>
+ </div>
+</div>
@@ -0,0 +1,36 @@
+// Provide registers the class with dojo, so that it is not loaded twice
+dojo.provide("mycustom.foobar");
+
+// All other classes that are used either as superclasses, as constructors or in other ways referred to must be 'required'
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit.form.Button");
+dojo.require("dijit.form.TextBox");
+
+// The declare statement actually creates the new class, named after the first argument. Superclasses are declared in the second argument,
+// and the class body (an object literal with all properties, functions as non-functions) is the third argument.
+dojo.declare("mycustom.foobar", [ dijit._Widget, dijit._Templated ],
+{
+ // Here is the HTML template/snippet for the widget.
+ templateString: dojo.cache("mycustom", "foobar.html"),
+ // This enables us to define widgets inside our widget using 'dojoType'
+ widgetsInTemplate: true,
+ // This is just a custom property which is subtituted in using '${}' in the template
+ username: "none",
+
+ // The postCreate function is called after the template is rendered, but before it is inserted into the DOM
+ postCreate: function()
+ {
+ console.log("mycustom.foobar postCreate called.");
+ // Wire up the event handler of the button widget to call our internal function
+ console.log("button is "+this.theokbutton);
+ dojo.connect(this.theokbutton, "onClick", this, this._onOkClicked);
+ },
+
+ _onOkClicked: function(e)
+ {
+ console.log("mycustom.foobar _onOkClicked called.");
+ var thename = this.thetextbox.get('value');
+ this.selected.innerHTML = thename;
+ }
+});
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Custom Dojo Widget Exercise - Sample</title>
+
+ <!-- required: the default dijit theme: -->
+ <link id="themeStyles" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
+
+
+ <script>
+ var dojoConfig =
+ {
+ isDebug : true, // Create a 'firebug-lite' debug console for older or unknown browsers at the bottom of the page
+ debugAtAllCosts: true, // Use a slower unrolled-loading strategy for loading resources, so that errors are easier to locate
+ baseUrl : "./Sample/", // Where the loader should start to look for stuff
+ modulePaths : // Where, realtive the baseURL, each non-dojo class can be found
+ {
+ custom : "mycustom/"
+ }
+ };
+ </script>
+
+ <!-- required: dojo.js -->
+ <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
+
+ <script type="text/javascript">
+ // Use dojo.require to choose which parts of dojo to load
+ dojo.require("mycustom.foobar");
+
+ // addOnLoad calls registered functions after the page is fully loaded
+ dojo.addOnLoad(function()
+ {
+ // Any arguments passed to the widget class is in the first argument (an object literal, where property names must match those defined in the class)
+ // The second argument is the DOM node where the widget is to be put. The original DOM node will be destroyed. If none are given a new DOM node
+ // is created, but the widget must then be placed explicitly somewhere in the DOM tree using the widgets 'domNode' property.
+ var foobar = new mycustom.foobar({}, dojo.byId("main"));
+
+ });
+
+ </script>
+</head>
+<body class="claro">
+
+ <h2>Basic Custom Widget</h2>
+ <div id="main"></div>
+
+</body>
+</html>
+
@@ -0,0 +1,8 @@
+<div style="border: 1px solid grey; margin:10px;">
+ <div>
+ <strong>Selected:</strong> <span dojoAttachPoint="selected">${username} </span>
+ <div>
+ Enter username: <input dojoAttachPoint="thetextbox" dojoType="dijit.form.TextBox">
+ <button dojoAttachpoint="theokbutton" dojoType="dijit.form.Button">OK</button>
+ </div>
+</div>
@@ -0,0 +1,36 @@
+// Provide registers the class with dojo, so that it is not loaded twice
+dojo.provide("mycustom.foobar");
+
+// All other classes that are used either as superclasses, as constructors or in other ways referred to must be 'required'
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit.form.Button");
+dojo.require("dijit.form.TextBox");
+
+// The declare statement actually creates the new class, named after the first argument. Superclasses are declared in the second argument,
+// and the class body (an object literal with all properties, functions as non-functions) is the third argument.
+dojo.declare("mycustom.foobar", [ dijit._Widget, dijit._Templated ],
+{
+ // Here is the HTML template/snippet for the widget.
+ templateString: dojo.cache("mycustom", "foobar.html"),
+ // This enables us to define widgets inside our widget using 'dojoType'
+ widgetsInTemplate: true,
+ // This is just a custom property which is subtituted in using '${}' in the template
+ username: "none",
+
+ // The postCreate function is called after the template is rendered, but before it is inserted into the DOM
+ postCreate: function()
+ {
+ console.log("mycustom.foobar postCreate called.");
+ // Wire up the event handler of the button widget to call our internal function
+ console.log("button is "+this.theokbutton);
+ dojo.connect(this.theokbutton, "onClick", this, this._onOkClicked);
+ },
+
+ _onOkClicked: function(e)
+ {
+ console.log("mycustom.foobar _onOkClicked called.");
+ var thename = this.thetextbox.get('value');
+ this.selected.innerHTML = thename;
+ }
+});
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Custom Dojo Widget Exercise - Exercise</title>
+
+ <!-- required: the default dijit theme: -->
+ <link id="themeStyles" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
+
+
+ <script>
+ var dojoConfig =
+ {
+ isDebug : true, // Create a 'firebug-lite' debug console for older or unknown browsers at the bottom of the page
+ debugAtAllCosts: true, // Use a slower unrolled-loading strategy for loading resources, so that errors are easier to locate
+ baseUrl : "./Exercise/", // Where the loader should start to look for stuff
+ modulePaths : // Where, realtive the baseURL, each non-dojo class can be found
+ {
+ custom : "mycustom/"
+ }
+ };
+ </script>
+
+ <!-- required: dojo.js -->
+ <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
+
+ <script type="text/javascript">
+ // Use dojo.require to choose which parts of dojo to load
+ dojo.require("mycustom.foobar");
+
+
+ // addOnLoad calls registered functions after the page is fully loaded
+ dojo.addOnLoad(function()
+ {
+ for(var i = 0; i < 5; i++)
+ {
+ var foo = new mycustom.foobar({username: "Bosse_"+i});
+ dojo.byId("main").appendChild(foo.domNode);
+ }
+ });
+
+ </script>
+</head>
+<body class="claro">
+
+ <h2>Basic Custom Widget</h2>
+ <div id="main"></div>
+
+</body>
+</html>
+
@@ -0,0 +1,6 @@
+This exercise shows how to split up custom Dojo widgets into base- and sub-classes.
+
+1. Check out the sample code and make sure you understand how it works. It uses just one custom dialog widget.
+2. The exercise uses a custom widget which has the former widget as a superclass and overrides one of its functions ('_onOkClicked')
+3. Override the event handler for the cancel button as well, and make sure you log something different.
+4. (Optional) Copy the tempalte file from the base widget to the subclassed widget and modify it. make sure you override and change the 'templateString' property in the subclass.
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Reusing Custom Dojo Widget Exercise</title>
+
+ <!-- required: the default dijit theme: -->
+ <link id="themeStyles" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
+
+
+ <script>
+ var dojoConfig =
+ {
+ isDebug : true, // Create a 'firebug-lite' debug console for older or unknown browsers at the bottom of the page
+ debugAtAllCosts: true, // Use a slower unrolled-loading strategy for loading resources, so that errors are easier to locate
+ baseUrl : "./Sample/", // Where the loader should start to look for stuff
+ modulePaths : // Where, realtive the baseURL, each non-dojo class can be found
+ {
+ custom : "mycustom/"
+ }
+ };
+ </script>
+
+ <!-- required: dojo.js -->
+ <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
+
+ <script type="text/javascript">
+ // Use dojo.require to choose which parts of dojo to load
+ dojo.require("mycustom.specialdialog");
+ dojo.require("dijit.form.Button");
+
+ // addOnLoad calls registered functions after the page is fully loaded
+ dojo.addOnLoad(function()
+ {
+ // Any arguments passed to the widget class is in the first argument (an object literal, where property names must match those defined in the class)
+ // The second argument is the DOM node where the widget is to be put. The original DOM node will be destroyed. If none are given a new DOM node
+ // is created, but the widget must then be placed explicitly somewhere in the DOM tree using the widgets 'domNode' property.
+ var dialog = new mycustom.specialdialog({caption_text: "Hi there, special<br/><br/>"});
+ var button = new dijit.form.Button({}, dojo.byId("main"));
+ dojo.connect(button, "onClick", function()
+ {
+ dialog.show();
+ });
+ });
+
+ </script>
+</head>
+<body class="claro">
+
+ <h2>Reuse and Inheritance for Custom Widgets</h2>
+ <div id="main">Clickme</div>
+
+
+</body>
+</html>
+
@@ -0,0 +1,9 @@
+<div>
+<div dojoAttachPoint="thedialog" dojoType="dijit.Dialog">
+ <div dojoAttchPoint="caption">${caption_text}</div>
+ <div>
+ <button dojoAttachPoint="theokbutton" dojotype="dijit.form.Button">OK</button>
+ <button dojoAttachPoint="thecancelbutton" dojotype="dijit.form.Button">Cancel</button>
+ </div>
+</div>
+</div>
Oops, something went wrong.

0 comments on commit c227425

Please sign in to comment.