MoreMotion Face Elements

Top  Previous  Next

MoreMotion Face elements are designated with special "mo:" attributes attached to standard elements in a HTML document.

  <input name="NAME" type="text" mo:type="MyElement" mo:name="NAME" mo:props="color:'red'" />

After the HTML document is loaded on the browser, OMgr.initialize() method of MoreMotion Face traverses all the DOM nodes of the document to find nodes marked with these special attributes. If a node has mo:needsInit attribute then MoreMotion Face instantiates the javascript function class associated with it and lets it initialize by calling its init() method.

The special attributes that turns a standard HTML element into a MoreMotion Face Element are as follows:

mo:type attribute

Defines the type of the element. Usually there is a wrapper Javascript class with this type that extends MoreMotionObject base class.

mo:name attribute

The name of the element and the instantiated Javascript object. This attribute optional and if omitted the name of the instantiated object is taken from the name attribute of the HTML element.

mo:needsInit attribute

This attribute should be set to true if the init() method of the Javascript class needs to be called right after the document is loaded.

mo:props attribute

This attribute keeps the properties of the element in "propA: 'valueA', propB: 'valueB'" format.
Example: props="nonBlank:true; digits:6, handler:'MyHandler'"

The properties of a MoreMotion object can also be supplied as Javascript objects or functions. In that case the first character of the attribute value must be "*" followed by the object of the function name.

Example:

<script type="text/javascript">
  function getProps() {
    return {
      propA : 'ValueA',
      propB : 'ValueB',
      propC : true,
      propD : 123 
    };
  }
// </script>
 
<input name="NAME" type="text" mo:type="MyElement" mo:name="NAME" mo:props="*getProps()" />

mo:iValue attribute

The initial value of the element if applicable.

 

Example:

Below is a MoreMotion Face element called UpperCaseBox. The purpose of this element is to convert the initial or changed value of a standard HTML INPUT element to uppercase. The element has only one property that defines whether only the first letters of the words or all the letters are to be converted to uppercase.

 

  <input name="TITLE" type="text" onchange="repaint(this)" value="test test"
        mo:name="TITLE" mo:type="UpperCaseBox" mo:needsInit="true"
        mo:props="firstLettersOnly:false" />

 
Here is the javascript function class UpperCaseBox that extends the MoreMotionObject base class. Since the element has a mo:needsInit attribute the class should implement the init() method. This method will be called after the document is loaded to format the initial value of the INPUT element.

  function UpperCaseBox(node) {

    this.base = MoreMotionObject;  
    this.base(node);
    this.isUpperCaseBox = true;

 
    this.init = function() {
      this.node.value = this.format(this.node.value);
    };

    this.repaint = function() {
      this.node.value = this.format(this.node.value);
    };

    this.format = function(value) {
      if (!this.boolProp('firstLettersOnly')) {
        return value.toUpperCase();
      }

      var words = value.split(" ");
      var result = "";
      for (var i = 0; i < words.length; i++) {
        if (i > 0) result += " ";
        var word = words[i];
        result += word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
      }
      return result;
    };

  };

  function repaint(node) {
    var box = OMgr.getObject(node);
   box.repaint();
  };

Note that there is a call to a static function repaint() in the onchange event of the element to reformat the updated value. See how this function instantiates the UpperCaseBox class and calls its repaint() method.