Adding Dynamic Faces Support to a jMaki widget

Therefore, when line 5 of listing 2 executes, the value of
container is the div element with id
table:n:j_id_id34, where n, of course, is the
current row in the table.

Line 6 of listing 2 uses the dojo createWidget to create
an instance of the inline edit box inside of the container

Lines 14 - 25 of listing 2 declares the JavaScript function that will
be called when the user presses the "save" button in the widget UI.

Now, let's take a look at the changes to component.js necessary to
add Dynamic Faces support, expressed as a diff.

Listing 3, the diffs to component.js to add Dynamic Faces support

  1. --- component-pre-DF.js 2006-12-07 10:32:25.000000000 -0500
  2. +++ component.js 2006-12-07 10:31:19.000000000 -0500
  3. @@ -12,6 +12,16 @@
  4. // add a saveState function
  5. if (typeof widget.valueCallback != 'undefined') {
  6.      w.onSave = function(newValue, oldValue) {  
  7. +
  8. +      if (typeof _globalScope.DynaFaces != 'undefined') {
  9. +   DynaFaces.fireAjaxTransaction(container,
  10. + {
  11. + execute: widget.uuid,
  12. + render: "none",
  13. + postBody: widget.uuid + "=" + newValue
  14. + });
  15. +      }
  16. +      else {
  17.          // we need to be able to adjust this
  18.          var url = widget.valueCallback;
  20. @@ -22,7 +32,8 @@
  21.                  // do something if there is an error
  22.              }
  23.          });
  24. +      }
  25.      }
  26. }
  27. w.saveState = w.onSave;
  28. -jmaki.attributes.put(widget.uuid, w);
  29. \ No newline at end of file
  30. +jmaki.attributes.put(widget.uuid, w);

The only change is a conditional within the onSave
function. jMaki defines a _globalScope global variable
that allows you to access all things globally defined in the page. It
so happens that the scripts included by virtue of line 11 of listing 1
define a global variable called DynaFaces. This JavaScript
object has all the functions exposed by the Dynamic Faces JavaScript
library. Therefore, you can safely test for the existing of Dynamic
Faces in a page as shown on line 8 of listing 3. If Dynamic faces is
not being used in the page, then the normal jMaki operation of the
widget takes place, as shown on lines 17 - 23 of the diff.

Lines 9 - 14 of listing 3 cause a Dynamic Faces Ajax transaction to
be made back to the JSF page currently being viewed in the browser.
This transaction includes all the view state for the current
f:view. The first argument to
fireAjaxTransaction is the DOM element from which the
transaction should be fired. It is important that this be the DOM
element that corresponds to the actual JSF UIComponent in
the view. The second argument to fireAjaxTransaction is a
JavaScript associative array. In this case, we're saying three things:

Note that newValue, on line 6 of listing 3, is an
argument to the onSave function. It is the new value
entered by the user.

For more information on the JavaScript functions exposed from Dynamic
Faces, see href="">the
Dynamic Faces Reference.


jMaki gives you cool widgets. Dynamic Faces + jMaki gives you cool
widgets you can use in a real enterprise web application.

Technorati Tags: [11]

Related Topics >>