Introduction

The Dojo framework is a javascript library that Wave Maker is built on top of. In addition to providing a set of libraries useful for building applications, it also provides sets of widgets. WaveMaker tries to take the best of dojo’s widgets and where we weren’t satisfied with what dojo had to offer, we provided some of our own widgets as well. WaveMaker is built using the dojo javascript toolkit all classes are declared using dojo’s object oriented class management system and in this sense, WaveMaker and any project built with wavemaker is
built using the dojo toolkit.

Prerequisties

• All attendees should be experienced HTML and JavaScript developers. Prior knowledge of CSS is helpful but not required.

Course Content

1. Intro to Dojo

• What Dojo is and isn’t
• Our first, basic Dojo script
• How to do things the Dojo way
• Asynchronous Modules and AMD
• Requiring the code you need
• Loading Dojo
• Baseless Dojo
• dojoConfig: Configuring how Dojo is loaded

2. Retrieving elements

• dojo/dom: Asking for an element by name
• What do I get back? DOMNodes and Nodes
• Creating nodes
• Placing nodes
• Removing nodes

3. dojo/query

• A different way of retrieving elements
• Using CSS Selectors (up to CSS3)
• Processing NodeLists
• Basic styling
• Accessing style information
• Changing style settings

4. Dojo and JavaScript

• Array enhancements
• Function enhancements
• Working with dates
• Working with numbers and strings

5. Dojo and Events

• Hooking up events with dojo/on
• Removing event handlers
• Distributing events across a NodeList
• Using dojo’s publish/subscribe model

6. Dojo and Ajax

• Ajax architecture
• Dojo and Ajax: dojo/request
• Typical Ajax tasks
• Changing the content of a node
• Form processing
• Processing data with Ajax
• JSON data
• XML data
• Other dojo/request capabilities

7. Dojo and Classes

• dojo/declare(): Creating classes
• Defining methods and properties
• Inheritance and Mixins
• Constructors

8. Dijit Widgets

• Declarative vs programmatic UI
• Form widgets
• Layout widgets
• Other widgets

9. Styling Widgets

• Using customizable properties
• On-the-fly

10. Creating your own widget

• From scratch
• Using a template
• Creating attributes, getters and setters

11. Subclassing a widget

• Using OO
• Adding capabilities

12. Dojo and JavaScript

Array Enhancements
Working with Dates
Working with Numbers and Strings
Other Utilities Within dojo/_base/lang

13. Advanced Dojo Topics

• Aspect-oriented Programming with dojo/aspect
• Aspect-oriented Concepts
• Running Functions before() and after()
• Wrapping a Function around() Another Function
• Working with Functions
• JavaScript Execution Contexts
• apply() and call()
• Binding a Function with lang.hitch
• Modifying a Function’s Signature with lang.partial

14. Promises and Deferreds

• A Review of a Typical Use Case: Ajax
• The General Promise API
• Promises Realized: Deferreds
• then() in Detail
• then() vs when()
• Accessing All Promises

15. Customizing a Widget

• Using customizable CSS properties
• On-the-fly
• Subclassing Widgets
• Adding Capabilities to Existing Widgets

16. Creating Your Own Widget

• From Scratch
• Using a Template
• Creating Attributes, Getters and Setters

17. MVC with Dojo

• Looking at Dojo from the MVC Perspective
• Establishing a Page-level Controller
• Dojo/data and Models
• Creating views with Dijit Widgets

18. Data, Stores and Grids

• Using dojo/store to Store Data
• Introducing the DataGrid
• Better Data Storage with dojo/data
• Putting it all together: plugging a store into dojo components

19. Charting with dojox/charting

• Configuring dojox/charting
• Creating a Simple Chart
• Providing a Theme For Your Chart
• Organizing data: Plots, Axes and Series

20. Debugging Dojo Apps

• Inspecting the DOM
• JavaScript Debugging
• Dojo Logging
• Dojo Unit Testing with DOH