Embed Size (px)
Citation preview
DOJO
Introduction
• Dojo is a framework for developing ajax based applications. Dojo is selected by Struts 2 for providing ajax support in applications. Dojo is one of the most powerful language for constructing Rich Internet Applications.
• Dojo is actually based on JavaScript and HTML, so its easy to learn. We can learn Dojo very fast and start developing our highly interactive web
applications.
Introduction contd.
• We can use Dojo toolkit to develop dynamic web applications. Dojo toolkit will put life in our web application and turn it into highly interactive application. We can turn your web application into desktop like web application.
• Dojo offers many widgets, utilities and ajax libraries to develop our application.
• Dojo is free and can be used to develop free or commercial application.
Features of Dojo• Dojo is based on HTML and JavaScript, so its easy for the developers
to learn it fast.
• There is no requirement of learning new programming language. Just HTML and JavaScript knowledge if sufficient.
• Dojo provides higher abstraction layer to the programmer. So, it helps the programmers to develop powerful functions very easily.
• Dojo has already invented the wheels for the programmers and now programmers just have to use the Dojo api into their application.
Benefits of Dojo• Associative arrays
• Loosely typed variables
• Regular expressions
• Objects and classes
• Highly evolved date, math, and string libraries
• W3C DOM support in the Dojo
Dojo packages
• The Dojo Toolkit is divided into several main packages that would constitute a full distribution of Dojo Toolkit.
• The main packages are :• Dojo• Dijit (dojo widgets)• dojox• util
dojo
• dojo - Also referred to as the “core”. This is the main part of Dojo. The most generally applicable packages and modules are contained in this.
Functionality of dojo
• AJAX• DOM manipulation• class-type programming• Events• Promises• data stores• drag-and-drop• Internationalization libraries.
dijit
• dijit - An extensive set of widgets (user interface components) and the underlying system to support them. It is built fully on-top of the Dojo core.
dojox
• dojox - A collection of packages and modules that provide a vast array of functionality that are built upon both the Dojo core and Dijit. Packages and modules contained in DojoX will have varying degrees of maturity, denoted within the README files of each package. Some of the modules are extremely mature and some are highly experimental.
util
• util - Various tools that support the rest of the toolkit, like being able to build, test and document code.
• Once extract go to the extracted folder. • We will find the following folders:• dojo• dijit• dojox
HelloWorld Demo
Dojo Config
• The dojoConfig object (formerly djConfig) allows us to set options and default behavior for various aspects of the toolkit.
• The dojoConfig object is the primary mechanism for configuring Dojo in a web page or application. It is referenced by the module loader, as well as Dojo components with global options. It can further be used as a configuration point for custom applications, if desired.
dojoConfig• Example :• <script>• dojoConfig= {• has: {• "dojo-firebug": true• },• parseOnLoad: false,• foo: "bar",• async: true• };• </script>• <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>• • <script>
dojoConfig
• dojoConfig is purely for input purposes—this is how we communicate configuration parameters to the loader and modules. During the bootstrap process, dojo/_base/config is populated from these parameters for later lookup by module code.
Configuration
• There are three ways to pass configuration data to the loader:
• Before the loader is defined, via the global dojoConfig object
• On the <script> element for the loader, via the data-dojo-config attribute
• After the loader is defined, via the global require function
Using dojoConfig
• <script> • var dojoConfig = { async:true,• cacheBust:new Date(),• waitSeconds:5 };• </script> • <script src="path/to/dojo/dojo.js"></script>
Using data-dojo-config
• <script data-dojo-config="async:true, cacheBust:new Date(),
• waitSeconds:5“• src="path/to/dojo/dojo.js">• </script>
Using require
• require(• { cacheBust:new Date(),• waitSeconds:5 • }• );
Loader configuration parameters
• async: Defines if Dojo core should be loaded asynchronously.
• Values can be true, false• async: true
• parseOnLoad: If true, parses the page with dojo/parser when the DOM and all initial dependencies have loaded.
• parseOnLoad: true• It is recommended that parseOnLoad be left at
false (it defaults to false, so you can simply omit this property), and that developers explicitly require dojo/parser and call parser.parse().
• deps: An array of resource paths which should load immediately once Dojo has loaded:
• deps: ["dojo/parser"]
• callback: The callback to execute once deps have been retrieved:
• callback: function(parser) {• // Use the resources provided here• }
• waitSeconds: Amount of time to wait before signaling load timeout for a module; defaults to 0 (wait forever):
• waitSeconds: 5
• cacheBust: If true, appends the time as a querystring to each module URL to avoid module caching:
• cacheBust: true
DOM, Events and Effects
Dojo – DOM Manipulation
• Dojo aims to make working with the DOM easy and efficient by providing a handful of convenience functions that fill some awkward cross-browser incompatibilities and make common operations simpler and less verbose.
DOM Retrieval
• We need to know how to get elements from the DOM, in order to work with them. The easiest way to do that is by using the dojo/dom resource's byId method. When you pass an ID to dom.byId, you will receive the DOM node object with that ID. If no matching node is found, a null value will be returned.
• This is the equivalent of using document.getElementById, but with two advantages: it is shorter to type, and it works around some browsers' buggy implementations of getElementById. Another nice feature of dom.byId is that when it is passed a DOM node, it immediately returns that node. This helps to create APIs that take both strings and DOM nodes.
Retrieval demo
/dom/two.html
DOM Creation• Another thing you will be doing often is creating elements. Dojo
doesn't prevent you from using the native document.createElement method to create elements, but creating the element and setting all the necessary attributes and properties on it can be verbose. Furthermore, there are enough cross-browser quirks to attribute setting to make dojo/dom-construct's create method a more convenient and reliable option.
• The arguments to domConstruct.create are as follows: node name as a string, properties of the node as an object, an optional parent or sibling node, and an optional position in reference to the parent or sibling node (which defaults to "last"). It returns the new DOM element node.
• Demo • /dom/create.html
Dom Creation contd.
• A simple list item is created with the content of "Six" and appended to the list. Next, another list item is created with the content of "Seven", its className property is set to "seven", it's styled so it has a bold font, and then appended to the list. Finally, a list item is created with the contents "Three and a half" and is inserted after the list item with the ID "three".
Placement
• If you already have a node and want to place that node, you will need to use domConstruct.place. The arguments are as follows: a DOM node or string ID of a node to place, a DOM node or string ID of a node to use as a reference, and an optional position as a string which defaults to "last" if not provided.
Demo
• /demo/place.html
Possible values
• The possible values for the placement argument are "before", "after", "replace", "only", "first", and "last".
DOM Destruction
• Most often you'll be creating nodes, but occasionally, you'll want to remove nodes as well. There are two ways to do this in Dojo: domConstruct.destroy which will destroy a node and all of its children, while domConstruct.empty will only destroy the children of a given node. Both take a DOM node or a string ID of a node as their only argument.
Demo
• /dom/destroy
Query
• When working with the DOM, it's important to be able to retrieve nodes quickly and efficiently. We've covered one option: dom.byId. However, coming up with unique IDs for every interesting node in your application can be a daunting and impractical task. It would also be inefficient to find and operate on multiple nodes by ID alone.
• there is another solution: dojo/query. The dojo/query module uses familiar CSS queries to retrieve a list of nodes, including support for advanced CSS3 selectors!
Demo• <ul id="list">• <li class="odd">• <div class="bold">• <a class="odd">Odd</a>• </div>• </li>• <li class="even">• <div class="italic">• <a class="even">Even</a>• </div>• </li>• <li class="odd">• <a class="odd">Odd</a>• </li>• <li class="even">• <div class="bold">• <a class="even">Even</a>• </div>• </li>• <li class="odd">• <div class="italic">• <a class="odd">Odd</a>• </div>• </li>• <li class="even">• <a class="even">Even</a>• </li>• </ul>• • <ul id="list2">• <li class="odd">Odd</li>• </ul>
• require(["dojo/query", "dojo/domReady!"], function(query) {
• // retrieve an array of nodes with the ID "list"
• var list = query("#list")[0];• })• var odds = query(".odd");
Restricting query
• // retrieve an array of nodes with the class name "odd"• // from the first list using a selector• var odds1 = query("#list .odd");• • // retrieve an array of nodes with the class name "odd"• // from the first list using a DOM node• var odds2 = query(".odd",
document.getElementById("list"));
• When query is executed without a second parameter, it will search the entire DOM structure, going through effectively every node under <html>. When a DOM node is specified as the second argument, it restricts the query to that node and its children.
• If your DOM is relatively small, such as in our example, omitting the second argument is acceptable. However, for pages with a larger DOM structure, it's preferable to restrict your query calls with the second argument. It makes for more specific selections that execute more quickly than searches across the full document.
Nodelist
• query returns an array of nodes that match the selector; this array is actually a dojo/NodeList and has methods for interacting with the nodes contained in it.
• <div id="list">• <div class="odd">One</div>• <div class="even">Two</div>• <div class="odd">Three</div>• <div class="even">Four</div>• <div class="odd">Five</div>• <div class="even">Six</div>• </div>
• NodeList has methods that match the Dojo array helper methods. One such method is forEach, which will execute a function for each node in the array:
• require(["dojo/query", "dojo/dom-class", "dojo/domReady!"],• function(query, domClass) {• • query(".odd").forEach(function(node, index, nodelist){• // for each node in the array returned by query,• // execute the following code• Add "red" to the className of each node matching• // the selector ".odd"
• domClass.add(node, "red");• });• });
• require(["dojo/query", "dojo/NodeList-dom", "dojo/domReady!"], function(query) {
• // Add "red" to the className of each node matching• // the selector ".odd"• query(".odd").addClass("red");• // Add "blue" to the className of each node matching• // the selector ".even"• query(".even").addClass("blue");• });
• The DOM methods are executed for each node in the NodeList and return a NodeList for easy chaining:
• // Remove "red" from and add "blue" to the className
• // of each node matching the selector ".odd"• query(".odd").removeClass("red").addClass("blu
e");
• / Change the font color to "white" and add "italic" to
• // the className of each node matching the selector ".even"
• query(".even").style("color", "white").addClass("italic");
Events
• Doesn’t the DOM already provide a mechanism for registering event handlers?”
• The answer is yes—but not all browsers follow the W3C DOM specification.
• Between the various DOM implementations from major browser vendors there are three ways to register event handlers:
• addEventListener, • attachEvent, • and DOM. • Dojo improves the way you work with DOM events by normalizing
differences between the various native APIs, preventing memory leaks, and doing it all in a single, straightforward event API called dojo/on.
Click Event Demo
• Syntax• On(element,eventname,handler)• Notice that the dojo/mouse resource was also
required. Not all browsers natively support mouseenter and mouseleave events, so dojo/mouse adds that support. You can write your own modules like dojo/mouse to enable support for other custom event types.
• /pages/events/click.html
• Remove event listener.
• Demo
Lang.hitch
• By default, on will run event handlers in the context of the node passed in the first argument.
• However, you can use lang.hitch (from the dojo/_base/lang module) to specify the context in which to run the handler. Hitching is very helpful when working with object methods:
• Demo
Nodelist Events
• The on method is included with dojo/query
• Need not require Nodelist.on• Demo• Dojo/pages/events/nodelist.html
Event Delegation
• The on method of NodeList makes it easy to hook up the same handler to the same event of multiple DOM nodes. dojo/on also makes this achievable through a more efficient means known as event delegation.
• The idea behind event delegation is that instead of attaching a listener to an event on each individual node of interest, you attach a single listener to a node at a higher level, which will check the target of events it catches to see whether they bubbled from an actual node of interest; if so, the handler's logic will be performed.
• syntax on(parent element, "selector:event name", handler).
Demo
• /events/event_delegation
Pub/ sub
• All of the examples up until this point have used an existing object as an event producer that you register with to know when something happens. But what do you do if you don't have a handle to a node or don't know if an object has been created?
• This is where Dojo's publish and subscribe (pub/sub) framework comes in, exposed via the dojo/topic module Pub/sub allows you to register a handler for (subscribe to) a "topic" (an event that can have multiple sources, represented as a string) which will be called when the topic is published to.
• Demo pub/sub • /events/pubsub.html
KeyBoard events
• Keyboard events fire when keys are pressed on the keyboard. This includes all keys, letters, numbers, symbols, punctuation, as well as the Escape, function, Enter, Tab, and keypad keys. Every keypress fires an event which may be captured and handled.
• Browser support and implementations of keyboard event handling varies. Using Dojo to handle keyboard events allows you to write code that will run properly across virtually all browsers.
Keyboard events contd.
• Listening for keyboard events in the browser allows you to implement a user interface that not only feels like a native application, it gives you a greater control over the UI.
• onkeypress Fires when any key is pressed and repeats until the key is released. onkeypress can be used for the majority of keyboard event handling.
• onkeydown Fires when any key is pressed and repeats until the key is released. onkeypress will fire after onkeydown in most cases.
• onkeyup Fires when the key is released.
Effects
• Fading• Wiping• Sliding• Animation events• Chaining• Combining
Fading Effect
Wiping
•changing the height of a node while leaving the content alone. This makes it look like someone is using a windshield wiper on the node. Often, wiping could be a useful effect to create something like a pulldown on a page, where you might have some sort of infrequently accessed content or settings, or perhaps you just prefer the shrinking to fading.
Demo
• Effects/wipe
Sliding
• Shifting a node around could be useful to create an appearance of movement or progression on a page, and fx.slideTo creates a smooth animation of the node in the page, moving it around by specifying the coordinates of the top and left position of the node in pixels.
Demo
• Effects/slide
Animation
• all of these animation methods return a dojo/_base/fx::Animation object. These objects all provide not just controls to play or pause the animation, but they also provide a set of events that we can listen to, in order to perform some sorts of actions before, during, and after the animation. Two of the most important and commonly-used event handlers are beforeBegin and onEnd:
Demo
• You might have noticed that beforeBegin is being passed as a property of the arguments object. The reason for passing it in more directly is that certain animations connect to beforeBegin when they are created.
• Therefore, if you connect to beforeBegin after the animation is created, your handler will be executed after the animation's beforeBegin handler, which may not be what you want to happen. By passing your handler as a property of the arguments object, you guarantee that your handler will execute first.
Chaining
• What if we want to fire animations in sequence? We could use the End event that we just talked about to set up the next effect, but that's not very convenient. This sort of pattern is common enough that the dojo/fx module gives us a couple of great convenience methods to set up effects to run in sequence or in parallel, and each method returns a new dojo/_base/fx::Animation object with its own set of events and methods that represent the entire sequence.
Demo
• /effects/chaining
• As you can see ,we create a few effects directly inline the call to fx.chain, and immediately call play on the returned dojo/_base/fx::Animation to start the chained animation. We don't start playing each individual effect within the chain: fx.chain handles that for us.
Ajax with dojo/request
• dojo/request allows us to send and receive data to and from the server without reloading the page (commonly known as AJAX).
• The new features introduced make written code more compact and the execution lightning fast. dojo/promise and dojo/Deferred, which dojo/request uses for asynchronous programming.
• promises and Deferreds allow for easier programming of non-blocking asynchronous code.
• Demo • /pages/ajax/request.html
ajax
• In a browser, the previous code will execute an HTTP GET request using an XMLHttpRequest to helloworld.txt and return a dojo/promise/Promise.
• If the request is successful, the first function passed to then() is executed with the text of the file as its only argument; if the request fails, the second function passed to then() will execute with an error object as its only argument.
• The dojo/request API• Every request needs one thing: an end-point. Because of this,
dojo/request's first parameter is the URL to request. • Web developers need flexibility in their tools in order to adapt them
for their applications and for multiple environments. The dojo/request API takes this into account: the first, non-optional, parameter to dojo/request is the URL to request. A second parameter can be specified to customize a request using an Object. Some of the most-used options available are:
• method - An uppercase string representing the HTTP method to use to make the request. Several helper functions are provided to make specifying this option easier (request.get, request.post, request.put, request.del).
• sync - A boolean that, if true, causes the request to block until the server has responded or the request has timed out.
• query - A string or key-value object containing query parameters to append to the URL.
• data - A string, key-value object, or FormData object containing data to transfer to the server.
• timeout - Time in milliseconds before considering the request a failure and triggering the error handler.
• handleAs - A string representing how to convert the text payload of the response before passing the converted data to the success handler. Possible formats are "text" (the default), "json", "javascript", and "xml".
• headers - A key-value object containing extra headers to send with the request.
• require(["dojo/request"], function(request){ • request.post("post-content.php", { • data: { • color: "blue", • answer: 42 • }, • headers: { • "X-Something": "A value"• } • }).then(function(text){ • console.log("The server returned: ", text); • }); • });
Post method
• This example executes an HTTP POST request to post-content.php; a simple object (data) is also serialized and sent as POST data with the request as well as an "X-Something" header. When the server responds, the payload is used as the value of the promise returned from request.post.
Get method
• Ajax/get
Login
• Ajax/login
Headers
• To access the headers, use the promise.response.getHeader method of the original Promise (The Promise returned from the XHR will not have this property). Additionally, when using promise.response.then, the response will not be the data, but an object with a data property.
• demo
Promises
• A promise is an object that represents the eventual value returned from the completion of an operation. The dojo/promiseAPI has the following characteristics:
• Can be in one of three states: unfulfilled, resolved, rejected • May only change from unfulfilled to resolved or unfulfilled to
rejected • Implements a then method for registering callbacks for
notification of state change • Callbacks cannot change the value produced by the promise • A promise's then method returns a new promise, to provide
chaining while keeping the original promise's value unchanged
Promises contd.
• As we said before, request.get (and all of Dojo's Ajax helpers) returns a promise. You could say that this Deferred represents the eventual value returned from the completion of the request from the server. Initially, it will be in an unfulfilled state and will change to either resolved or rejected depending on the result from the server.
Forms and Validation
• dojox/validate is a set of utility functions for common validation tasks, such as checking for a valid e-mail address, valid ZIP code (both the US and Canada), valid phone numbers, and more. It was designed for pure programmatic use—but also for use by various validation-based Dijits.
• we'll look at what's available in dojox/validate, how to use the functionality directly, and how to use the functionality with widgets such as dijit/form/ValidationTextBox.
• require(["dojox/validate"], function(validate) { • • });
• validate.isInRange(test, options); • validate.isNumberFormat(test, options); • validate.isText(test, options); • Example:• var test =
validate.isNumberFormat(someNum, { format: "(###) ###-####" });
• It can also take an array of formats to check against, like so:
• var test = validate.isNumberFormat(someNum, {
• format: ["### ##", "###-##", "## ###"] • });
• the dojox/validate codebase also includes a number of additional validation rules that can be included in your code by specifying the kind of validation you want to use. The additional validations are:
• validate.creditCard • validate.isbn • validate.web
Dijit Themes, Buttons, TextBoxes
AMD
• Dojo supports modules written in the Asynchronous Module Definition (AMD) format, which makes code easier to author and debug.
Email validation
• require(["dojox/validate/web"], function(validate) {
• validate.isEmailAddress(someAddress); • });
Dojo object store
• Separation of concerns is a fundamental aspect of organized, manageable programming, and an essential separation in web applications is that of data modeling from the user interface (where a user interface is typically defined as a view and controller in model-view-controller (MVC) architecture).
• The Dojo object store architecture establishes a consistent interface for data interaction inspired by the HTML5 object store API. This API was developed to facilitate loosely coupled development where different widgets and user interfaces could interact with data from a variety of sources in a consistent manner.
Dojo store
• The Dojo Object Store interface allows you to develop and use well-encapulsated components that can be easily connected to various data providers. Dojo Object Store is an API, and has multiple implementations called stores. Stores include a simple in-memory store, a JSON/REST store, legacy dojo.data stores, and store wrappers that provide additional functionality.
• The easiest store to get started with is dojo/store/Memory. We can simply provide an array of objects to the constructor, and we can start interacting with it. Once the store is created, we can query it with the query method. An easy way to query is to provide an object with name/value pairs that indicate the required values of matched objects. The query method always returns an object or array with a forEach method (as well as map and filter):
Add and delete
• // add a new employee • employeeStore.add({name:"George",
department:"accounting"}); • // remove Bill • employeeStore.remove("Bill");
update• // retrieve object with the name "Jim" • var jim = employeeStore.get("Jim"); • // show the department property • console.log("Jim's department is " + jim.department); • // iterate through all the properties of jim: • for(var i in jim){ • console.log(i, "=", jim[i]); • } • // update his department • jim.department = "engineering"; • // and store the change • employeeStore.put(jim);
• Going back to querying, we can add additional parameters to a query. These additional parameters allow us to limit the query to a specific number of objects, or to sort the objects, using the second argument to the query method. This second argument can be an object with start and count properties that define the limit on the number of objects returned. Limiting the result set can be critical for large-scale data sets that are used by paging-capable widgets (like the grid),
• where new pages of data are requested on demand. The second argument can also include a sort property, to specify the property and direction to sort on in the query:
Module
• A module is a value that can be accessed by a single reference. If you have multiple pieces of data or functions that you want to expose in a module, they have to be properties on a single object that represents the module.
• Modules start to make a lot more sense for modularizing your code - splitting it up into logical subsets for handling specific functionality. If you want to represent a person with information like name and address, perhaps even add some methods to your person, it starts to make sense to put all that code in a single location. A module is stored in your file system in a single file.
Benefits of AMD
• Asynchronous operation• Package portability• Better dependency management• and improved debugging support
Creating Module
• Creating a module requires registerin• with the loader. • Loader is a javascript code that handles the
logic behind defining and loading modules.• When we load dojo.js or require.js, we get an
AMD loader. The loader defines functions for interacting with it - require and define..
Creating module contd.
• The global function define allows you to register a module with the loader.
• Example :• define({• library: 'dojo',• version: 1.9• });• when this module is loaded, we get an object
with 2 properties.
Creating module contd.• Example:• define(function(){• var privateValue = 0;• return {• increment: function(){• privateValue++;• },• • decrement: function(){• privateValue--;• },• • getValue: function(){• return privateValue;• }• };• });
Creating module contd.
• In this case, we've passed a function to define. The function is evaluated and its result is stored by the loader as the module. This code uses a closure to create a private value that is not directly accessible by external code, but can be examined and manipulated by methods provided on the object that is returned as the module's value.
• Similar to the module/package systems of other programming languages, an AMD module is identified by its path and file name. Let's save the code from the above example in a folder:
• app/counter.js
