Dojo training
- 2. • 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
- 3. 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 companies IBM, AOL, Sun,… Professional support is available too Uxebu, Sitepen What is Dojo
- 4. Core Basic libraries: Ajax , events, DOM querying, animation, dnd, i18n and localization, data abstraction Dijit Fully accessible and localized predefined set of widgets Widgetcrafting - mechanisms to create your own widgets Dojox Numerous 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
- 5. The DOM is the internal representation of the page within the browser Can be manipulated using JavaScript APIs These APIs are not consistent in all of the browsers (IE…) Dojo provides a layer that hides this shame Handling 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.destroy Attributes handling: Setting and gettting - dojo.attr Removing and quering - dojo.removeAttr, dojo.hasAttr Core: Dom buffering
- 6. Dojo provides a layer that hides this shame Getting and setting styles – dojo.style Class management – dojo.hasClass, dojo.addClass, dojo.removeClass, dojo.toggleClas s Position –querying for the location of a DOM node dojo.position Layout – getting and setting the layout properties of a DOM node: dojo.marginBox, dojo.contentBox Core: CSS Buffering
- 7. Handling arrays dojo.forEach, dojo.some, dojo.every, dojo.filter, dojo.indexOf Extending strings dojo.trim, dojo.replace General utilities Type checking dojo.isString, dojo.isArray, dojo.isFunction, dojo.isObject Core: Enhancements to JS
- 8. The dojo component that is responsible for handling widgets Fully accessible Fully localized Provides a rich set of widgets • General usage widgets • Layout widgets • Form widgets Provides several themes and allows developers to provide themes of their own Provides 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
- 9. 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
- 10. 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
- 11. The experimental part of dojo Many projects are included within it (~50) Some of them may be removed on later releases Not likely, though Extending the core functionality More widgets More behaviors What is DojoX
- 12. • 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
- 13. QUESTIONS?
Editor's Notes
- #2: This template can be used as a starter file for presenting training materials in a group setting.SectionsRight-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors.NotesUse the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production)Coordinated colors Pay particular attention to the graphs, charts, and text boxes.Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale.Graphics, tables, and graphsKeep it simple: If possible, use consistent, non-distracting styles and colors.Label all graphs and tables.
- #3: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #4: This is another option for an Overview slides using transitions.
- #8: This is another option for an Overview slide.