dojo.basix

4,047 views

Published on

A quick overview of dojo and some in depth things.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,047
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
176
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

dojo.basix

  1. 1. dojo.basix Wolfram Kriesing wolfram@uxebu.com
  2. 2. dojo.basics • namespaced (dojo.lang, dojo.fx, dijit.form) • dojo, dijit, dojox, yournamespace • package system • build system (incl. your namespaces) • i18n
  3. 3. out of the box • dojo.* • lang, string, array, dom, coords, data, back, behaviour, date, dnd, i18n, io, rpc, ... • dijit.* - stable widgets • form.*, Editor, Tree, Dialog, ProgressBar, ... • dojox.* - dojo extended (experimental)
  4. 4. dojo basics (system) • dojo.require(), dojo.declare(), dojo.provide() • dojo.hitch(), dojo.mixin(), dojo.extend() • dojo.[dis]connect(), dojo.publish/ subscribe() • dojo.xhr(), dojo.xhrPost(), dojo.xhrGet() • dojo.forEach(), dojo.map(), dojo.filter()
  5. 5. namespace, class Create namespace and singleton dojo.provide(quot;phprquot;); // Register namespace relative to dojo.js dojo.registerModulePath(quot;phprquot;, quot;../../phprquot;); phpr.send = function(params) {}; Declare a class dojo.provide(quot;phpr.Mainquot;); dojo.declare(quot;phpr.Mainquot;, phpr.Component, { constructor:function() {}, render:function() {} });
  6. 6. dojo.hitch dojo.connect( domNode, quot;onclickquot;, dojo.hitch(this, quot;handleClickquot;) ); dojo.xhr({ load: dojo.hitch(this, function() { // handle onLoad stuff }) })
  7. 7. dojo basics (dom) • dojo.byId(), dojo.query(), dojo.attr() • dojo.coords() • dojo.addClass(), dojo.removeClass(), dojo.hasClass() • dojo.addOnLoad()
  8. 8. dijit
  9. 9. dijit - dojo widgets http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
  10. 10. written vs. rendered you write <input id=“cb1“ name=“cb1“ type=“checkbox“ dojoType=“dijit.form.Checkbox“ /> you get <div class=quot;dijitReset dijitInline dijitCheckBoxquot; wairole=quot;presentationquot; role=quot;wairole:presentationquot; widgetid=quot;cb1quot;> <input id=quot;cb1quot; class=quot;dijitReset dijitCheckBoxInputquot; type=quot;checkboxquot; dojoattachevent=quot;onmouseover:_onMouse, onmouseout:_onMouse,onclick:_onClickquot; dojoattachpoint=quot;focusNodequot; name=quot;cb1quot; value=quot;fooquot; tabindex=quot;0quot; style=quot;-moz-user-select: none;quot;/> </div>
  11. 11. DOM to dijit and back • dojo.byId(domNodeId) - node • dojo.query(string) - [node, node, node] • dijit.byId(widgetId) - widget • dijit.byNode(node) - widget • dijit.getEnclosingWidget(node) - widget
  12. 12. Events (DOM, dijit) • dojo.connect(domNode, „onclick“, ...) • dojo.connect(widget, „onClick“, ...) • dojo.connect(widget, „onCustomEvent“, ...) DEMO dojo.query, dojo.connect: onmouseover vs. onMouseOver, dijit.byId/Node, dijit.getEnclosingWidget closure
  13. 13. build • svn co http://svn.dojotoolkit.org/dojo/util/ trunk • cd util/buildscripts/profiles • cp standard.profile.js phpr.profile.js • adjust phpr.profile.js > cd util/buildscripts >./build.sh profile=quot;phprquot; action=quot;clean,releasequot; localeList=quot;en,dequot; optimize=quot;shrinksafequot; releaseDir=quot;../../dojo-buildquot; releaseName=quot;quot;
  14. 14. fx • dojo.fadeIn(), dojo.fadeOut() • dojo.fx.wipeIn(), dojo.fx.wipeOut() • dojo.toggleClass() • dojox.fx • sizeTo(), slideBy(), crossFade(), highlight(), wipeTo(), smoothScroll(),
  15. 15. grid • various stores (dojo.data) • sortable, filterable, dynamic paging • editable
  16. 16. COPY with pride • Examples archive.dojotoolkit.org/nightly http://archive.dojotoolkit.org/nightly • Search dojotoolkit.org (valueable forum) • Dojo feature explorer http://dojocampus.org/explorer/ • API browser (in progress) http://api.dojotoolkit.org • dojo book http://docs.dojocampus.org
  17. 17. thx http://blog.uxebu.com

×