Dojo Web Application Tools- April 2011

SitePen: We help our clients build great apps. Desktop and Mobile Web App Development, Design, Advice Support & Training Strong advocates and contributors of FOSS Works with some amazing companies and organizations:© SitePen, Inc. All Rights Reserved

Dojo Toolkit: Project Goals Fill Web Gaps (browsers, platforms) Fast & Eﬃcient Modular, Small Base, Extensible Professional & Sophisticated Powerful Developer productivity and tools Push the limits (vector graphics, oﬄine, html5, etc.) Open, free, & liberally licensed© SitePen, Inc. All Rights Reserved

Evolution Web 1.0 Dumb client, smart server Focus on HTML & CSS, "separation of markup and presentation" Web 2.0 Smarter client, smart server, conflict Initial break of many paradigms Search indexing, history, navigation Didnt really account for mobile DOM-centric Ajax: sort of real-time© SitePen, Inc. All Rights Reserved

Revolution: Separation of Data and UX You want access to your data, and information in a variety of experiences relevant to your current context Aggregation User Interfaces and experiences Challenging past assumptions statelessness, truly embracing REST abusing markup for "separation of markup and presentation" control and federation of data© SitePen, Inc. All Rights Reserved

Data Access: Dojo Object Store Work on HTML5 IndexedDB recommendation key/value approach to data access local storage but useful in other contexts accessing data stores (JSON, XML, REST, etc.) matches nicely with NoSQL implemented in Persevere (middleware for SSJS, Node or Narwhal+Jack) very clean approach to getting and setting data modular layering of functionality like notifications© SitePen, Inc. All Rights Reserved

Dojo Object Store API get(id, options) - Gets an object by identity query(query, options) - Performs a query put(object, options) - Stores/updates an object add(object, options) - Adds an object to the store remove(id, options) - Deletes an object getIdentity(object) - Get the identity from an object© SitePen, Inc. All Rights Reserved

Simple Example foodStore = new dojo.store.JsonRest({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle"); foodStore = dojo.store.Observable(foodStore); var query = foodStore.query({color:"red"}); query.forEach(function(food){...}); query.observe(function(object, oldIndex, newIndex){...});© SitePen, Inc. All Rights Reserved

Comet Notifications with Observable Observable also adds notify() method Call notify() to notify of changes from server WebSockets API support socket.on("message", function(event){ store.notify(event.object, event.existingId); });© SitePen, Inc. All Rights Reserved

JSON Schema schema: {"description":"A person", "type":"object", "properties": {"name": {"type":"string"}, "age" : {"type":"integer", "maximum":125}} } instance: {“name”: ”Kris”, “age”: 30}© SitePen, Inc. All Rights Reserved

JSON Schema driven UI Start with schema Document interfaces and Validate JSON/object-style data provide API contracts Enforce data constraints on the Can also be used in SMDs (for client side in JsonRestStore RPC) Generate UI with generic clients© SitePen, Inc. All Rights Reserved

Querying Web-safe portability important SQL extremely hard to make secure and too complicated in the browser RQL JavaScript-style syntax Language agnostic Easy to secure© SitePen, Inc. All Rights Reserved

Overview Dojo and others have Dijits, or templating like DTL or Mustache Convenient way to pull data into encapsulated reusable components Grids, Trees, Charts, Accordions, News Feed Items, etc. Presents better building blocks, but still has a bunch of ugly markup underneath even with HTML5 Open question: could we do this with CSS and JSON only? Perhaps with CSSX© SitePen, Inc. All Rights Reserved

What’s a widget Encapsulation of functionality Controller for DOM’s View State management Upgrading markup (progressive enhancement) Markup as configuration and placeholder© SitePen, Inc. All Rights Reserved

Dijit Drop-in replacements for the standard HTML web controls. Leverages existing machinery from Core and Base Conforms to accessibility (a11y) standards in accordance with the ARIA (Accessibility for Rich Internet Applications) Maintains a coherent API so that developers can transfer knowledge across multiple widgets and reuse patterns for solving problems Supports a consistent look and feel with stylesheets which makes widgets easily customizable (Themes and Less) Supports the most common browsers across multiple platforms Creation of widgets in markup is just as easy as with JavaScript (or easier)© SitePen, Inc. All Rights Reserved

Dijit Precepts CSS, HTML, and JavaScript should be easily separated Dijits should act like a bundle of resources A controller object should be associated with the DOM it represents Making connections between DOM and the controller object should be easier Dijits should be easily extended© SitePen, Inc. All Rights Reserved

Layout Widgets Made up of containers and panes Dijit Panes fit inside of the containers Containers add controls for how panes are viewed Excellent for dealing with height-related design issues© SitePen, Inc. All Rights Reserved

Layout & dijit.layout._LayoutWidget Top Top Left Center Right Center Right Left Bottom Bottom “Having Layout” Demonstrating the power of Dijit layout http://dante.dojotoolkit.org/static/xd/layout.html resize() layout()© SitePen, Inc. All Rights Reserved

Dialogs and Tooltips Modal Dialog Fixes iframe/Flash/Java/etc bleed through problem Dialogs can launch dialogs Tooltips can self-size and display where there’s a best fit Great for in-place content detail© SitePen, Inc. All Rights Reserved

Dojo, Dijit, DojoX, and HTML Forms Forms are an essential component to most websites Form validation can be tedious, time-consuming Dojo, Dijit, and DojoX enhance forms by: providing an expansive set of form widgets to make form elements more usable and attractive providing a validation library to allow developers to work more eﬃciently and avoid writing common validation functions and regular expressions providing a form manager to manage widget life cycle providing a framework by which developers may create their custom widgets© SitePen, Inc. All Rights Reserved

Dijit Form Widgets Button RadioButton CheckBox Select ComboBox Textarea CurrencyTextBox TextBox DateTextBox TimeTextBox DropDownButton FilteringSelect ...and more! MultiSelect NumberSpinner© SitePen, Inc. All Rights Reserved

Text Boxes and Text Areas Keeps INPUT element’s checked state Acts as a base for many other widgets Access widget value via get(‘value’) / set(‘value’) ValidationTextBox allows for basic required=true validation // Get required classes dojo.require(dijit.form.TextBox); dojo.require(dijit.form.ValidationTextBox); dojo.require(dijit.form.Textarea); // Create text box widgets var myTextBox = new dijit.form.TextBox({},myTextBoxId); var myVTextBox = new dijit.form.ValidationTextBox({require:true},myVBoxId); var myTextarea = new dijit.form.Textarea({},myTextareaId);© SitePen, Inc. All Rights Reserved

DojoX Enhanced Form Widgets BusyButton RadioStack CheckedMultiSelect Rating FileInput TimeSpinner FileUploader VerticalRangeSlider HorizontalRangeSlider Manager ..and more! MultiComboBox PasswordValidator© SitePen, Inc. All Rights Reserved

RangeSlider Two diﬀerent classes: HorizontalRangeSlider and VerticalRangeSlider Allows unrestricted or incremental dragging // Require classes dojo.require(dojox.form.RangeSlider); // Create horizontal range slider var rangeSlider = new dojox.form.HorizontalRangeSlider({ showButtons: false, minimum: 50, maximum: 100, discreteValues: 10 }, myRangeSliderId);© SitePen, Inc. All Rights Reserved

Form Validation with dojox.validate Contains numerous regular expressions to validate common input formats, including: E-mail URL Phone Number Credit Card Validation regular expressions may be locale-specific Highly extendable; add your own validations! Allows you to quickly implement validation; no need to start from scratch. Displays error icon and tooltip for invalid fields© SitePen, Inc. All Rights Reserved

dojox.validate Example - Programmatic // Get required classes dojo.require(dijit.form.ValidationTextBox); dojo.require(dojox.validate.web); // Create ValidationTextBox widget with email address validator var emailField = new dijit.form.ValidationTextBox({ required: true, validator: dojox.validate.isEmailAddress }, emailField); // Create ValidationTextBox widget with url validator var urlField = new dijit.form.ValidationTextBox({ required: true, validator: dojox.validate.isUrl }, urlField); // Create ValidationTextBox widget with regExp validator var urlField2 = new dijit.form.ValidationTextBox({ required: true, regExp: (https?|ftp)://[A-Za-z0-9-_]+.[A-Za-z0-9-_%&?/.=]+ }, urlField2);© SitePen, Inc. All Rights Reserved

dojox.validate Example - Declarative <script> // Get required classes dojo.require(dijit.form.ValidationTextBox); dojo.require(dojox.validate.web); </script>  <input type="text" required="true" name="email" id="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" />  <input type="text" required="true" name="website" id="website" placeholder="Your Website" dojoType="dijit.form.ValidationTextBox" regExp= "(https?|ftp)://[A-Za-z0-9-_]+.[A-Za-z0-9-_%&?/.=]+">© SitePen, Inc. All Rights Reserved

Form Manager Provides seamless key-value access to form widgets, DOM form elements, and attached DOM nodes Adds custom event handling blocks and observers; this.validate() validates the entire form based on its child element validation setting Observers monitor child elements Avoids the need to keep numerous field variables in a given scope -- simply reference by ID within the Manager instance Requires child widgets to have a “name” property to be grouped into child widgets collection.© SitePen, Inc. All Rights Reserved

dojo.Stateful Provides new methods for Stateful objects: get - accesses a stateful object’s named property set - sets a stateful object’s named property watch - listens to a change in property value unwatch - releases property value change listener watch method is based on Mozilla’s watch function Dijit widgets implement get and set, not watch yet Very useful in organizing and watching object values More information available on the SitePen blog: http://bit.ly/bNqUah© SitePen, Inc. All Rights Reserved

Basic dojo.Stateful Usage // Create Stateful object var obj = new dojo.Stateful({ color: red }); // Watch the label for changes obj.watch(color,function(property,oldValue,newValue) { console.log(The new color is: + newValue); }); // Get the object’s current color var originalColor = label.get(color); // Set the color to something different; watcher is notified obj.set(color,blue); // Unwatch! obj.unwatch(color);© SitePen, Inc. All Rights Reserved

dojo.Stateful and Forms Can be used with Form Manager or independently Extremely useful when using XHRs or likewise technologies to periodically update data that eﬀects form values and calculations. Using dojo.Stateful objects can keep form values and calculations in sync, both ways. Use basic node events on form fields to update Stateful object values and trigger watchers Use Dijit widget events to update Stateful object values and trigger watchers Building block for MVC/MVP with Dojo (dojox.app in Dojo 1.7)© SitePen, Inc. All Rights Reserved

Overview: Resource Loading Package Management Modularity of code as well as ease of cross-project sharing while reducing side eﬀects and testing complexity Optimization Reduced size balanced with number of requests Feature Detection vs. User-agent optimized builds has.js vs. optimized builds for common user agents CommonJS Modules and AMD© SitePen, Inc. All Rights Reserved

Modules First and most important work of CommonJS Very widely implemented NodeJS (V8) Narwhal (Rhino) RingoJS (Rhino) Yabble (browser) Allows components to declare and use dependencies Allows components to export functionality to other modules© SitePen, Inc. All Rights Reserved

Modules Basics Three "free variables" free variable is a variable that is part of the scope chain above the current module require - Used to load and reference other modules exports - The object that is exported module - Module metadata© SitePen, Inc. All Rights Reserved

require() Module IDs System modules ("sys", "net") Relative IDs resolved relative to current module require(“./sibling”); require(“../parent-sibling”); should be used when possible, improves portability Package/module pattern widely used: require(“some-package/some-module”); Used by NPM, Nodules, RequireJS, Backdraft, others© SitePen, Inc. All Rights Reserved

require() greeting.js: exports.getGreeting = function(){ return “Hello, World”; }; hello.js: var getGreeting = require(“./greeting”).getGreeting; exports.hello = function(){ console.log(getGreeting()); }; require(“./hello”).hello();© SitePen, Inc. All Rights Reserved

AMD - Asynchronous Module Definition CommonJS modules arent optimized for browser use (possible to use them, but non optimal) AMD defines an API to call to register a module Allows modules to execute in a <script> Loader can generate script tags Benefits of script tag based: speed - <script> tags are fast debuggability - real stack traces, named scripts in all debuggers x-domain - No extra work for x-domain, works the same© SitePen, Inc. All Rights Reserved

AMD Formats // addTen.js define(["math"], function(math){ return function(x){ return math.add(x, 10); }); }); // commonjs-style addTen.js define(function(require, exports){ var math = require("math"); exports.addTen = function(x){ return math.add(x, 10); }); }); // Explicit (used by build): define("addTen", ["math"], function(math){ /*...*/}); // Data: define({message: "Hello, World"});© SitePen, Inc. All Rights Reserved

AMD - Asynchronous Module Definition Implementations RequireJS, Backdraft, curl.js New libraries, Dojo 1.6 can run on top of all of them Dojo All Dojo and Dijit modules are in AMD as of 1.6 Works with dojo.require/dojo.provide with default sync loader Nodules Supports plugins “text!template.html” to load HTML/text “i18n!message” to load locale specific data© SitePen, Inc. All Rights Reserved

CommonJS Packages A set of modules that work together in a package Specification suggests directory structure Defines metadata for a set of modules Very widely used in numerous projects Package manager/package registry NPM Dojo Foundation registry for Dojo 1.7 (CPM/CPR)© SitePen, Inc. All Rights Reserved

WebSockets Enables real-time web, or Comet WebSocket is a technology providing for bi-directional, full- duplex communications channels, over a single TCP socket. Standardized by the W3C: http://dev.w3.org/html5/websockets/ Uses the ws (unsecure) or wss (secure) protocol Provides open, close, error, and message events Provides send and close methods Browser support will emerge in 2011 once secured© SitePen, Inc. All Rights Reserved

Basic WebSocket Sample // Open the socket var socket = new WebSocket("ws://localhost:8080/services/infoPusher"); // Create open event listener socket.onopen = function(e){ console.log("Socket opened successfully!"); } // Create message event listener socket.onmessage = function(event) { console.log("Message received!", event.data); } // Create close event listener socket.onclose = function(e){ console.log("Socket closed!"); } // Create error event listener socket.onerror = function(e){ console.log("Ooops! Error!",e); } // Send a message to the server socket.send("This is my message!"); // Close the socket socket.close();© SitePen, Inc. All Rights Reserved

dojox.socket Wraps the WebSocket API with an API consistent with the rest of the Dojo Toolkit Provides fallback for servers that don’t support WebSockets: dojox.socket.LongPoll Provides dojox.socket.Reconnect to automatically reconnect if disconnected Provides an on method which aliases socket.connect© SitePen, Inc. All Rights Reserved

dojox.socket Sample // Create dojox.socket instance var socket = new dojox.socket("/comet"); // Create open event listener socket.on("open",function(event){ console.log("Socket opened successfully!"); }); // Create message event listener socket.on("message",function(event){ console.log("Message received!", event, event.data); // Send a message back! socket.send("Received your message!"); }); // Customized headers var socket2 = new dojox.socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } });© SitePen, Inc. All Rights Reserved

dojox.socket.Reconnect Sample // Create dojox.socket instance var socket = new dojox.socket("/comet"); // Make the socket reconnect if necessary socket = dojox.socket.Reconnect(socket);© SitePen, Inc. All Rights Reserved

dojox.socket and Object Stores dojox.socket instances can notify Object Store when messages are received Observable store (on the server side) provides notification events that work very well with Comet driven updates. Notify the store of changes from the server by calling the notify method on the store Signal a new object by calling store.notify() and omitting the id, and a deleted object by omitting the object A changed/updated object should include both.© SitePen, Inc. All Rights Reserved

dojox.socket & Object Stores Sample // Create Object Store define("my-module", function(require){ var JsonRest = require("dojo/store/JsonRest"); var Observable = require("dojo/store/Observable"); var store = new JsonRest({data:myData}); store = Observable(store); }); // Inform store of message received socket.on("message", function(event){ var existingId = event.data.id; var object = event.data.object; store.notify(object, existingId); });© SitePen, Inc. All Rights Reserved

Force Long-Polling Not all servers support WebSockets You can force Long-Polling with dojox.socket.LongPoll var socket = dojox.socket.LongPoll({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json", "Client-Id": Math.random() } });© SitePen, Inc. All Rights Reserved

dojox.socket with Comet var socket = dojox.socket("/cometd"); function send(data){ return socket.send(dojo.toJson(data)); } socket.on("connect", function(){ // Send a handshake send([ { "channel": "/meta/handshake", "version": "1.0", "minimumVeresion": "1.0beta", "supportedConnectionTypes": ["long-polling"] } ]).then(function(data){ // response handled on next slide }); });© SitePen, Inc. All Rights Reserved

dojox.socket with Comet (cont.) // Wait for response so we can connect with the provided client id data = dojo.fromJson(data); if(data.error){ throw new Error(error); } // Get the client id for all future messages clientId = data.clientId; // Send a connect message send([ { "channel": "/meta/connect", "clientId": clientId, "connectionType": "long-polling" }, { // also send a subscription message "channel": "/meta/subscribe", "clientId": clientId, "subscription": "/foo/**" } ]); socket.on("message", function(){ // Handle all messages from the server });© SitePen, Inc. All Rights Reserved

dojox.socket and Comet Servers dojox.socket works with CometD, Socket.IO, Tunguska, Hookbox, Orbited, etc. More information about specific Comet servers at the SitePen blog: http://www.sitepen.com/blog/2010/10/31/dojo-websocket/© SitePen, Inc. All Rights Reserved

Wink Toolkit Most Experimental Completely separate code Started by Orange Labs base iPhone and Android apps, Innovative UI elements (3D consistent look and feel, useful for tight screen other platforms coming space© SitePen, Inc. All Rights Reserved http://winktoolkit.org/

EmbedJS Most Complete Core Dojo APIs, stripped down Target each platform with for mobile and its native look & feel embedded TouchScroll, geolocation, Started by Uxebu etc.© SitePen, Inc. All Rights Reserved http://github.com/uxebu/embedjs/

DojoX Mobile Mix and Match with Dojo, Rich Set of Components Started in Dojo 1.5 Simple mobile UI paradigms, Support for many HTML5 same data interactions features and beyond Native or general themes Grids, charts, maps, gauges© SitePen, Inc. All Rights Reserved

Result: Modular Tools Tools to mix and match to Modular enough for very create your app simple projects, flexible and Separate data from UI logic consistent enough to handle simple and seamlessly the most challenging, feature- rich web apps© SitePen, Inc. All Rights Reserved

Dojo Web Application Tools- April 2011

by SitePen

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Dojo Web Application Tools- April 2011 Presentation Transcript