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 a HTML document is loaded on the browser, the OMgr.initialize() method of MoreMotion Face traverses all the DOM nodes of the document to find nodes marked with these special attributes. mo:type attribute defines the type of the object. If there is a corresponding type definition object in the OMgr.types[] array and if the object has a init() function then MoreMotion Face call this function and passes the current DOM node object to it to let it initialize.

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 is optional and if omitted the name of the instantiated object is taken from the name attribute of the HTML element.

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:value 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 the 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:props="firstLettersOnly:false" />

 
Here is the javascript function class UpperCaseBox that extends the MoreMotionObject base class. Since the type definition object has a init() method it will be called  after the document is loaded to format the initial value of the INPUT element.

  function UpperCaseBox(node) {
    MoreMotionObject.prototype.constructor.call(this,node);  
  }
 
  UpperCaseBox.prototype = new MoreMotionObject;
 
  UpperCaseBox.prototype.init = function() {
    this.node.value = this.format(this.node.value);
  };

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

  UpperCaseBox.prototype.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;
  };
 
  OMgr.types["UpperCaseBox"] = {
    field: true,
    init: function(node) {
      (new UpperCaseBox(node)).init();
    }
  };

  function repaint(node) {
    (new UpperCaseBox(node)).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.