dojo.basix
   Wolfram Kriesing
  wolfram@uxebu.com
dojo.basics
• namespaced (dojo.lang, dojo.fx,
  dijit.form)

• dojo, dijit, dojox, yournamespace
• package system
• build ...
out of the box
• dojo.*
 • lang, string, array, dom, coords, data,
    back, behaviour, date, dnd, i18n, io,
    rpc, ...
...
dojo basics (system)
• dojo.require(), dojo.declare(),
  dojo.provide()

• dojo.hitch(), dojo.mixin(), dojo.extend()
• doj...
namespace, class
           Create namespace and singleton
dojo.provide(quot;phprquot;);
// Register namespace relative to...
dojo.hitch
dojo.connect(
  domNode, quot;onclickquot;,
  dojo.hitch(this, quot;handleClickquot;)
);

dojo.xhr({
  load:
  ...
dojo basics (dom)

• dojo.byId(), dojo.query(), dojo.attr()
• dojo.coords()
• dojo.addClass(), dojo.removeClass(),
  dojo....
dijit
dijit - dojo widgets




http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
written vs. rendered
                              you write
<input id=“cb1“ name=“cb1“ type=“checkbox“
dojoType=“dijit.fo...
DOM to dijit and back

• dojo.byId(domNodeId) - node
• dojo.query(string) - [node, node, node]
• dijit.byId(widgetId) - wi...
Events (DOM, dijit)
• dojo.connect(domNode, „onclick“, ...)
• dojo.connect(widget, „onClick“, ...)
• dojo.connect(widget,
...
build
• svn co http://svn.dojotoolkit.org/dojo/util/
    trunk
•   cd util/buildscripts/profiles

•   cp standard.profile.js...
fx
• dojo.fadeIn(), dojo.fadeOut()
• dojo.fx.wipeIn(), dojo.fx.wipeOut()
• dojo.toggleClass()
• dojox.fx
 • sizeTo(), slid...
grid



• various stores (dojo.data)
• sortable, filterable, dynamic paging
• editable
COPY with pride
• Examples archive.dojotoolkit.org/nightly
  http://archive.dojotoolkit.org/nightly



• Search dojotoolki...
thx




http://blog.uxebu.com
Upcoming SlideShare
Loading in...5
×

dojo.basix

3,831

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
3,831
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
175
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×