dojox'wire

1
dojox.wire

• Declarative and Programmatic Data Wiring in dojo.
• Ajax World, Santa Clara, September 23-26th, 2007
• Presented by Jared Jurkiewicz
• Dojo Contributor, Software Engineer IBM.

2
Application Interactions

• In the Web 2.0 space, the name of the game is
  highly interactive applications running in the
  browser. For example, consider the following
  type of form application

3
So, what is dojox.wire?

• An event driven data linking (wiring) library
  that consists of two functional parts
• A set of dojo widgets that can be instantiated
  using the dojo markup syntax and declaratively
  link together dojo widgets, raw HTML objects,
  form fields and generic JavaScript objects to
  each other.
• An extendable programmatic library that can link
  up data from a wide variety of sources (XML DOM,
  dojo.data data items, raw JavaScript objects,
  dojo widgets, and so on) to a wide variety of
  targets.
• In other words, it is an API and markup language
  for the client. Graphically speaking

4
Why use dojox.wire?

• dojox.wire is designed to provide the following
  benefits to the application developer.
• Provides an MVC (Model-View-Controller)-like
  architecture for the client side of Web
  development.
• Reduction of the amount of code that a developer
  must write to link up widgets to data, data to
  data, and services to data. This benefits both
  application maintainability as well as memory
  footprint.
• Simplification of changes to applications. When
  the source or target objects in a wiring change,
  the developer does not have to go recode the data
  linking functions, as may occur with custom data
  wiring code declared in separate .js files or
  script tags
• Opens up the possibility for having DOM based
  development tools for dojo that can quickly build
  applications through the markup, instead of
  requiring both markup and code intermixed in a
  page.
• Opens the possibility up for having analysis
  tools that can read the DOM of an application and
  determine exactly how an application has
  connected up its fields, services, topics, and so
  on directly from the markup. Determining similar
  information from raw JavaScript code can be
  exceedingly difficult.

5
dojox.wire.mlThe Declarative Markup for
dojox.wire

• What declarative tags does dojox.wire provide for
  linking up data, widgets, events, and services?
• dojox.wire.ml.Action
• The basic action container widget that supports
  filtering of actions. When some event/function
  is invoked on Object X and all filters match, do
  A,B,C. This widget can contain sub-widgets of
  type
• dojox.wire.ml.Transfer
• dojox.wire.ml.Invocation
• dojox.wire.ml.ActionFilter
• dojox.wire.ml.Transfer
• The data wiring widget. On some event, copy
  property/value X from object A to property/value
  Y on object B. This widget can contain sub
  widgets of type
• dojox.wire.ml.ChildWire (and all subclasses.)
• dojox.wire.ml.Invocation
• The method invocation widget. When action X
  occurs, invoke Y on object B.
• dojox.wire.ml.Data
• Declarative data variables. Think of this as a
  way to declare a new data object (JavaScript
  object, array, etc), completely in markup, no
  nested script tags.
• dojox.wire.ml.Service
• Declarative service invocation. This widget
  allows you to define services to invoke when
  specific actions occur and where to route the
  results. It knows how to handle various services
  through mappings. Currently, it maps the
  following service types to dojo service classes

6
Declarative Examples

• The dojo toolkit extensions project (dojox)
  contains a variety of samples that demonstrate
  the declarative markup of dojox.wire.
• dojox/wire/demos/markup/demo_ActionChaining.html
• Demonstration of how dojox.wire.ml.Action widgets
  can be chained together through their onComplete
  actions.
• dojox/wire/demos/markup/demo_TopicWiring.html
• Demonstration of how topics can be wired to
  declaratively and used to drive events and data
  wiring on a page.
• dojox/wire/demos/markup/demo_ConditionalActions.ht
  ml
• Demonstration of using conditional actions
  through dojox.wire.ml.ActionFilter to build a
  billing and shipping address page, where
  behaviors are changed by the values of the
  checkbox on the page.
• dojox/wire/demos/markup/demo_FlickrStoreWire.html
• Demonstration showing how the same application as
  shown in dojox/data/demos/demo_FlickrStore.html
  can be done using dojox.wire instead of script
  tags.
• dojox/wire/demos/markup/demo_ActionWiring.html
• Demonstration of wiring actions such as key
  events in a text box to the updating of query
  statements passed to a dojo.data datastore.

7
Declarative Examples(Continued)

• Simple Data Binding (Copy data values between
  objects when an event occurs.)
• ltdiv dojoTypedojox.wire.ml.Transfer
• triggerbutton1 triggerEventonclick
• sourceobject1.prop1.prop2
• targetobject2.prop3.prop4 /gt
• Data Binding with Simple Type Conversion
  (Modifying the data value that is passed to the
  target property when the trigger occurs using a
  built in converter for a basic type)
• ltdiv dojoTypedojox.wire.ml.Transfer
• triggerbutton1 triggerEventonclick
• sourceobject1.prop1.prop2
• typenumber
• targetobject2.prop3.prop4 /gt
• Data Binding with Custom Converter (Modifying the
  data value that is passed to the target property
  when the trigger occurs using a custom
  converter.)
• ltdiv dojoTypedojox.wire.ml.Transfer

8
Declarative Examples(Continued)

• Simple Service Invocation (Basic invoke of a JSON
  based service)
• ltdiv dojoTyperpc.JsonService idservice1
• serviceUrl/service1 /gt
• ltdiv dojoTypedojox.wire.ml.Invocation
• triggerbutton1 triggerEventonclick
• objectservice1 methodget
• parametersinput1.value resultobject1.prop
  1 /gt
• Cascading Service Invocation (Basic chained
  services. The return of service A triggers the
  invoke of service B)
• ltdiv dojoTyperpc.JsonService idservice1
• serviceUrl/service1 /gt
• ltdiv dojoTyperpc.JsonService idservice2
• serviceUrl/service2 /gt
• ltdiv dojoTypedojox.wire.ml.Invocation
  idinvocation1
• triggerbutton1 triggerEventonclick
• objectservice1 methodget
• parametersinput1.value resultobject1.prop
  1 /gt

9
Declarative Examples(Continued)

• Composite Action (Event triggering multiple
  events, such as data transfers and an invoke.)
• ltdiv dojoTypedojox.wire.ml.Action
  triggerbutton1 triggerEventonclickgt
• ltdiv dojoTypedojox.wire.ml.Transfer
  sourceobject1.prop1 targetobject2.prop2 /gt
• ltdiv dojoTypedojox.wire.ml.Invocation
  objectobject3 methodmethod3
• parametersobject2.prop2
  resultobject4.prop4 /gt
• ltdiv dojoTypedojox.wire.ml.Transfer
  sourceobject4.prop4 targetobject5.prop5 /gt
• lt/divgt
• Conditional Action (Invoking a method only when a
  certain condition is met)
• ltdiv dojoTypedojox.wire.ml.Invocation
  triggerbutton1 triggerEventonclick
  objectobject1 methodmethod1
  parametersinput1.value/gt
• ltdiv dojoTypedojox.wire.ml.ActionFilter
  requiredinput1.value messageNo input value
  /gt
• lt/divgt

10
Programmatic dojox.wire

• While the declarative markup of dojox.wire is
  extremely useful and helpful, it is not the only
  way to perform wiring. Dojox.wire also has a
  programmatic API, which allows users to create
  new Wire classes and register them with the wire
  engine.
• The general programmatic API
• dojox.wire.Wire super-class and basic
  JavaScript property handler (object, property,
  type, converter). This is the class that handles
  how a value on a particular object is accessed.
  In a nutshell, it is wrapper logic to map any
  variety of attribute setting methods to a single
  API. The wire objects can then be used in a
  generic way by the wiring actions (transfer,
  etc). The default set of wires that dojox.wire
  provides are
• DataWire - (dataStore, attribute)
• Where dataStore is an instance of a store
  conforming to the dojo.data apis and attribute is
  the attribute on store items that should be
  connected to.
• XmlWire - (path)
• CompositeWire - (children)
• TableAdapter - read-only (columns. JavaScript
  Array binding or named column value to some
  property binding)
• TreeAdapter - read-only (nodes Think mapping of
  Data to Tree labels and child elements and the
  like.)
• TextAdapter - read-only (segments. Text
  manipulation binding, for creating of various
  path formats)
• dojox.wire.create(args) Creates a Wire based on
  the parameters provided. The arguments may
  contain fully qualified wire names to use for the
  wire instance, otherwise it tries to determine
  the wire class to use based on the arguments
  provided.
• dojox.wire.register(wireClass, key) - for
  extension. Allows registering new Wire types and
  associated short names for the Wire.
• dojox.wire.connect() - event/topic (trigger,
  source, target)
• Intended for linking together data fields between
  to artifacts and synchronizing data between them
  on specific triggers (function calls, onblur
  events, topic publishes, and so forth)

11
Why use programmatic dojox.wire?

• Since dojo be used without dojox.wire to do data
  linking and copying, what value add does the
  programmatic API bring to the developer?
• Common method of accessing data values.
  Simplifies the application development by keeping
  things consistent.
• Allows for changing a source or target data
  location quickly and easily without having to
  rewrite your copy function to handle the changes
  in the structure (or what methods to invoke), on
  the target object when assigning the value.
• Allows for the development of shorthand object
  structures to speed up the linking of data. All
  the dojox.wire.create() need know explicitly is
  the wireClass property. The rest is passed on
  to the instantiated wire and can be interpreted
  however the wire developer wants.

12
Programmatic Examples

• Simple Data Binding (field to field copy)
• ltbutton idbutton1gtSetItlt/buttongt
• ltinput idinput typetextgtlt/inputgt
• ltinput iddisplay typetext
  disabledtruegtlt/inputgt
• ltscriptgt
• //Whenever the button above is clicked, sync
  data between the two fields.
• //Note, binding should be retained to call
  dojox.wire.disconnect(binding) cleanup later
• var binding dojox.wire.connect(scope
  dojo.byId(button1), event onclick",
• object dojo.byId(input) /source/,
  property value,
• object dojo.byId(display) /target/,
  property value)
• //Lots of other stuff.
• lt/scriptgt
• Simple Data Binding (topic to field copy)
• ltinput iddisplay typetext
  disabledtruegtlt/inputgt
• ltscriptgt
• //Whenever data of format quote someString
  is

13
Programmatic Examples

• Data Binding with Simple Type Conversion
• ltbutton idbutton1gtSetItlt/buttongt
• ltinput idinput typetextgtlt/inputgt
• ltinput iddisplay typetext
  disabledtruegtlt/inputgt
• ltscriptgt
• //When button1 is clicked, the numeric data is
  read from the input
• //text box and converted to a number data type.
• //The number is used to set the size of the
  display field
• //Note, binding should be retained to call
  dojox.wire.disconnect(binding) cleanup later
• var binding dojox.wire.connect(scope
  dojo.byId(button1), event onclick",
• object dojo.byId(input) /source/,
  property value, typenumber,
• object dojo.byId(display) /target/,
  property size)
• //Lots of other stuff.
• lt/scriptgt
• Data Binding with Simple Type Conversion and
  Custom Converter
• ltbutton idbutton1gtSetItlt/buttongt

14
Programmatic Examples

• Table Data Binding (Remapping data into named
  columns)
• ltdiv dojoTypedijit.SomeTableWidget
  idtable1gtlt/divgt
• ltbutton idbutton1gtSetItlt/buttongt
• ltscriptgt
• var data
• a "A1", b "B1", c "C1",
• a "A2", b "B2", c "C2",
• a "A3", b "B3", c "C3"
• var columns x property "a", y
  property "b", z property "c"
• //On clicking of the button, button1, populate
  the property table.tableData with data from the
  array, remapping it as defined by the columns
  wiring.
• //Note, binding should be retained to call
  dojox.wire.disconnect(binding) cleanup later
• var binding dojox.wire.connect(scope
  dojo.byId(button1), event "onclick",
• object data, columns columns,
• object dojo.byId(table1), property
  store.tableData )
• //Lots of stuff
• lt/scriptgt

15
References

• The current references for using dojox.wire are
  the demo files and test cases provided with the
  dojox.wire project. Those can be located at
• dojox/wire/demos/markup/ (Declarative demos)
• dojox/wire/tests/ The unit tests for
  dojox.wire, both declarative and programmatic.
  They exercise all the basic functions of the API.