Dijit 0.9: Tour of New Features

1
Dijit 0.9 Tour of New Features

• Bill Keese

2
Size and Performance

• Dijit apps about ½ the size compared to 0.4
• Page load time much faster no javascript sizing
  in widget code

3
Themes

• Consistent look and feel across all dijit widgets
• Tundra theme color neutral, to work with any
  site
• Styling fully adjustable via CSS. No HTML or JS
  changes necessary

4
Themes Tundra and Soria
5
Themes CSS files

• dojo.css for CSS reset and general page styling,
  not related to widgets
• dijit.css contains essentials needed to make
  widgets render, but nothing styling related like
  colors / font sizing. (Applies to all dijits.)
• tundra.css CSS for all the dijits (for tundra
  theme)

6
Themes Architecture
index.html
tundra.css
.tundra .dojoButton ...
ltlink relstylesheet hreftundra.css"
type"text/css"gt ltbody classtundragtltdiv
dojoTypedijit.Buttongt lt/bodygt
Button template
ltbutton classdojoButtongt
7
Themes two-theme layout

• Can use multiple themes on a page (ex left
  column, right column
• ltdiv classbeach stylefloatleftgtltbutton
  dojoTypedijit.form.Buttongt
• lt/divgt
• ltdiv classoceangt
• ltbutton dojoTypedijit.form.Buttongt
• lt/divgt

8
New/Enhanced widgets
Slider with labels and tickmarks
Tooltip Dialog
Bubble tooltips and validation errors
9
Dojo.data

• Unified interface to connect (any) widgets to
  (any) data format
• Changes to data reflected to widgets

ltdiv dojoType"dojo.data.ItemFileReadStore"
jsId"stateStore" url"comboBoxData.json"gtlt/divgt
ltinput dojoType"dijit.form.FilteringSelect" store
"stateStore" ....gt ltinput dojoType"dijit.Tree"
store"stateStore" ....gt
Could be any type store, like XML
10
Parser and Markup

• Performance Parser is faster than 0.4
  (especially on FF/Safari, due to dojo.query()
  using native xpath functions)
• New features
• inline script tags (next page)
• dojo.declaration (page after that)

11
Markup Inline method definition
ltdiv dojoType"dijit.Tree" ...gt ltscript
type"dojo/method" event"getIconClass"
args"item"gt var specifiedIcon
mailStore.getValue(item, "icon") return
specifiedIcon "mailIconFolderDocuments"
lt/scriptgt lt/divgt
12
Markup dijit.Declaration

• Define macros in markup to eliminate repeated
  code

ltdiv dojoType"dijit.Declaration"
widgetClass"Employee" defaults" empid 123,
name '' "gt ltspangtnamelt/spangt lta
href"update.php?idempid"gtupdatelt/agt lta
href"delete.php?idempid"gtdeletelt/agt lt/divgt lt
div dojoType"Employee" empid"100" name"Alan
Allen"gtlt/divgt ltdiv dojoType"Employee"
empid"101" name"Bob Brown"gtlt/divgt ltdiv
dojoType"Employee" empid"102" name"Cathy
Cameron"gtlt/divgt
13
Markup dijit.Declaration

• Using ltscriptgt inline method definition can
  define full widgets

ltdiv dojoType"dijit.Declaration"
widgetClass"HideMe""gt XXXltbutton
dojoAttachEvent"onclick" dojoAttachPoint"contain
erNode"gtlt/buttongtXXX ltscript type'dojo/method'
event'onclick'gt this.domNode.style.display"no
ne" lt/scriptgt lt/divgt ltbutton
dojoType"HideMe"gtClick to hidelt/buttongt
ltdiv dojoType"dijit.Declaration"
widgetClass"Employee" defaults" empid 123,
name '' "gt ltspangtnamelt/spangt lta
href"update.php?idempid"gtupdatelt/agt lta
href"delete.php?idempid"gtdeletelt/agt lt/divgt lt
div dojoType"Employee" empid"100" name"Alan
Allen"gtlt/divgt ltdiv dojoType"Employee"
empid"101" name"Bob Brown"gtlt/divgt ltdiv
dojoType"Employee" empid"102" name"Cathy
Cameron"gtlt/divgt
14
Markup dijit.Declaration

• Use ltscriptgt inline method definition to define
  full widgets

ltdiv dojoType"dijit.Declaration"
widgetClass"HideMe""gt XXXltbutton
dojoAttachEvent"onclick" dojoAttachPo
int"containerNode"gt lt/buttongtXXX ltscript
type'dojo/method' event'onclick'gt this.domNod
e.style.display"none" lt/scriptgt lt/divgt ltbutto
n dojoType"HideMe"gtClick to hidelt/buttongt
15
A11Y

• For accessibility, dijit provides
• keyboard support for users that can't use a
  mouse
• screen reader support identifies trees, tabs,
  etc.
• high-contrast support make interface usable when
  CSS background-images disabled

16
A11Y High Contrast

• Replaces icons with characters so that something
  shows up even though background-images disabled.

Normal mode
High contrast mode
17
I18N

• Translated strings
• Values displayed in localized format but sent to
  server in canonical format

ltinput dojoType"dijit._Calendar" lang"zh-cn"gt
ltinput value"54775.53" dojoType"dijit.form.Cur
rencyTextBox" currency"USD"/gt
18
I18N BiDi

• Support RTL (right-to-left) display

19
Notable API changes...
20
Programmatic Creation

• dojo.require(dijit.form.Button)
• var nodedojo.byId(myButton)
• new dijit.form.Button(disabled true, node)
• OR to create a new node
• new dijit.form.Button(disabled true)

Replaces dojo.widget.createWidget() since
multiple renderers not supported
21
Markup

• dojo.require(dojo.parser)
• dojo.require(dijit.form.Button)
• ltbutton dojoTypedijit.form.Button disabledtruegt

For parsing
No auto- require
Replaces namespaces. Case sensitive
22
Declare widget

• dojo.declare(
• "dijit.ProgressBar",
• dijit._Widget, dijit._Templated,

dojo.widget.defineWidget() removed
No svg/vml/html distinction
Special mixin for widgets with templates
23
Widget base classes

• Widget.js, Domwidget.js, HtmlWidget.js --gt
  _Widget
• _Templated mixin
• creation postMixInProperties(), buildRendering()
  and postCreate().
• When postCreate() is called the widget children
  don't yet exist.
• onResized() removed
• templateCssPath ignored. User must manually
  include tundra.css file

24
Popup/Dropdown Changes

• Any arbitrary widget can be used as a
  popup/dropdown (doesn't have to implement
  special interface)
• dijit.popup.open(...)

25
Focus manager

• Tracks stack of active widgets
• Calls _onBlur/_onFocus() when widget becomes
  active/inactive

Focused on MenuItem. Active widgets
ContentPane --gt ComboButton -gt Menu --gt MenuItem
26
Form widgets

• Standard attributes
• id, name, value, etc.
• Standard methods
• setValue(), getValue()
• getTextValue()

27
Hierarchical widgets

• Mixes in
• _Container (has children)
• _Contained (has parent)
• Startup() is called after the widget is in the
  DOM, and it's children have been created.

Menu
MenuItem
MenuItem
28
Layout widgets

• public function resize(layout) - resizes widget
  to specified size
• Custom layout widgets must inherit from
  LayoutWidget, and implement layout()

SplitContainer
resize
ContentPane
Accordion
ContentPane
ContentPane