AribaWeb MetaUI Explained - Part 2(Rule Syntax. Time to Understand them)

In my previous post, AribaWeb MetaUI Explained - Part 1, we tried to get the basics of AribaWeb MetaUI going. Now its time to learn the syntax so we can write our own rules. As I said before, this is just my own exploration into MetaUI based on my understanding of this document MetaIU-InDepth and the official MetaUI Tutorial.You are free to correct me where my understanding is wrong or can be expanded on. Enjoy.

RULE SYNTAX
The rules syntax is inspired by W3C's Cascading Style Sheet syntax but it is extended to support nesting and chaining and also tweaked to deal with identifiers containing periods. This means as you read this tutorial/article/whatever you call it, think style sheets. These rules as we call them are written in OBJECT STYLE SHEETS files.(.oss). The concept is to style your Domain  Object Model with OSS just as you style your Document Object Model in HTML with CSS.

Lets use a simple CSS Style for illustration. Lets say we have defined this very unintelligent style.

.container input[type="text"] {
    /* Please never write this. You can loose ur business with this color combination!*/ 
    color: green;
    background-color:pink;
}

In CSS terms, the part before the '{' is known as the SELECTORS. These typically are html elements for which this declaration block affects. The selectors are used for matching (decision making) after which the
various properties are assigned their corresponding values.

In OSS, the paradigm is the same. SELECTORS are used for matching (decision making)  after which the
various properties are assigned their corresponding values and its is done in a very similar fashion.
Now let us take a typical OSS rule declaration and break it apart.

        class=busobj.User {
            field=(email, password) {
               visibility:false;
            }
       }

Think of this just like you would in CSS.
The meaning of the above code is 'for the Class busobj.User, never display the email and password.'
The part before the first '{'

class=busobj.User 

is the top level Selector. If that selector evaluates to TRUE then the code in the declaration block would apply. In CSS, this would typically be a combination of HTML elements with their associated attributes. In OSS, this is a CONTEXT KEY(See context key list in Part 1 of this tutorial). The context keys are what is used for decision making just as you use HTML elements for decision making in your CSS.
 In the Code above, we also see a second level matching being done. The key used there ie field is also a Context Key.

Assignment
After a decision has beed made, a property of the current context may be assigned a value or some more 'sub context keys' eg feild if top context is a class, may be used to make further selection before an assignment is made. Just like in CSS, assignment is made by the use of the the colon operator

:

A typical assignment is like this

    label:"Get it now!";

The assignment must end with a semicolon(;).

DataTypes for Assignments
The datatype for the value of an assignment depends on the property key in question. While most of the property keys take a String value, some are very strict with their datatype. Examples for some of the common property keys include the following:

component: Must be an AribaWeb Component 
bindings: Map 
trait: List of Strings
visibility: boolean (true|false)
edittable: boolean (true|false)

Also AW Expression language can be used. The AribaExpr interpreter is used to evaluate the expression and the returned value inserted. The returned value must conform to the datatype expected by the property key.
Example:

/* if they're linking off our site, target a different window */
        linkTarget:${page.startsWith("http") ? "_blank" : null}; 

Another feature of OSS is the ability to call methods from the OSS file allowing you to define your own formatters and extensions.
Example:

   label:${ariba.ui.meta.core.UIMeta.beautifyFileName(properties.resourceName)}; 

As you can see, the OSS syntax is very much like CSS synrax. It is even more powerful because it allows you to dynamically affect the output by allowing expressions and method invocations.

Next Up
As I keep reading the above mentioned documents, I will write down my notes just as you do if you have to study some subject on your own and periodically write them on this blog.


Coming up: Properties, Traits and Layouts