dojo training
Post on 26-Jan-2015
142 Views
Preview:
DESCRIPTION
TRANSCRIPT
DOJO TRAINING
Vadivelan.K
• What is Dojo• Dojo Toolkits (Dojo built with)• Core– Core: DOM Handling– Core: CSS Handling– Core: Enhancements to JS
• Dijit– What is Dijit– What is a Widget– Using Widget
• DojoX– What is DojoX– Inside DojoX
A toolkit that enables the creation of modern interactive web applications
An open source project
Friendly license
Developed by a community of experts
Used by many companiesIBM, AOL, Sun,…
Professional support is available tooUxebu, Sitepen
What is Dojo
CoreBasic libraries: Ajax , events, DOM querying, animation, dnd, i18n and localization, data abstraction
DijitFully accessible and localized predefined set of widgetsWidgetcrafting - mechanisms to create your own widgets
DojoxNumerous experimental modules that extend the core functionality
Grid , wiring, client side templating, charting, more widgets, specific data stores and more and more…
Dojo built with
The DOM is the internal representation of the page within the browser
Can be manipulated using JavaScript APIsThese APIs are not consistent in all of the browsers (IE…)
Dojo provides a layer that hides this shameHandling the DOM tree
Querying using css selector syntax: dojo.query Locating elements by id – dojo.byId
Lifecycle of a DOM element: dojo.create , dojo.place, dojo.destroyAttributes handling:
Setting and gettting - dojo.attr Removing and quering - dojo.removeAttr, dojo.hasAttr
Core: Dom buffering
Dojo provides a layer that hides this shameGetting and setting styles – dojo.styleClass management – dojo.hasClass, dojo.addClass, dojo.removeClass, dojo.toggleClassPosition –querying for the location of a DOM node dojo.positionLayout – getting and setting the layout properties of a DOM node:
dojo.marginBox, dojo.contentBox
Core: CSS Buffering
Handling arraysdojo.forEach, dojo.some, dojo.every, dojo.filter,
dojo.indexOfExtending strings
dojo.trim, dojo.replaceGeneral utilities
Type checkingdojo.isString, dojo.isArray, dojo.isFunction, dojo.isObject
Core: Enhancements to JS
The dojo component that is responsible for handling widgetsFully accessibleFully localizedProvides a rich set of widgets• General usage widgets• Layout widgets• Form widgets
Provides several themes and allows developers to provide themes of their ownProvides mechanisms for developers to develop new widgets using dojo’s OO approach for modules• By extending existing widgets• By creating brand new widgets
What is Dijit
A widget is an object, that contains not just logic, but also a way to be presented on the screen
The way a widget is presented is the widget’s template
Widget can contain other widgets
Dijit: What is a Widget
Declarative - using widgets in the markup<button dojoType=“dijit.form.Button”></button><div dojoType=“dijit.form.Button”></div>
Programmatic creation:var theButton = new dijit.form.Button();someNode.appendChild(theButton.domNode);
Dijit: Using Widget
The experimental part of dojo
Many projects are included within it (~50)Some of them may be removed on later releasesNot likely, though
Extending the core functionalityMore widgetsMore behaviors
What is DojoX
• Many widgets – general, form and layout• Syntax highlighting• Many data stores• Grid• UUID• Xml handling• File uploading• Client side templating• Json handling• Editor plugins
Inside DojoX
QUESTIONS?
top related