Understand your rules

In Previous chapter we created User.oss file which is our object stylesheet to drive our user interface. The same way you would use your .css cascading style sheet to adjust your UI.
Let's look little bit close on this file:
src/app/rules/User.oss 
Defines basic object styles for Domain class User
1
class=User {
2
​
3
   field=uniqueName {
4
       label:"Id";
5
   }
6
​
7
   field=name {
8
       label:"Name";
9
   }
10
​
11
   field=description {
12
       trait:longtext;
13
   }
14
​
15
   zNone => *;
16
       zLeft => uniqueName => name => description => created;
17
}
18
​
19
/*
20
  Sample definition for operations edit and create
21
​
22
*/
23
class=User {
24
   operation=(edit, create) {
25
      zNone => *;
26
      zLeft => name => description;
27
   }
28
​
29
  operation=(create) {
30
      zNone => *;
31
      zLeft => name => description => created;
32
   }
33
​
34
}
Copied!
The rule format is inspired by CSS and just like CSS it can be additive where more common rules can be overriden by more specific fules but extended to support nesting (just like .sass) and chaining and tweaked to deal with identified containing the . (e.g. field path  user.address.city).
​
CSS and OSS are similar
Both have selectors and properties.
CSS example
1
div#toc a {
2
  text-decoration:underline;
3
}
Copied!
If an a  tag appears in a div named toc set property text-decoration:underline
MetaUI OSS example
1
class=User field=firstName {
2
   hint:"Your email";
3
 }
Copied!
If the field name email appears in the class named  User set property hint:"You email address".
Basic syntax
Nesting
These are equivalent:
Nested
Inlined
Mix
1
class=User {
2
  field=firstName {
3
    editing=true { 
4
      visible:true; 
5
    }
6
  }
Copied!
1
class=User field=firstName editing { visible:true; }
Copied!
1
class=User field=firstName {
2
  editing { visible:true; }
3
}
Copied!
As you go over different rules files (.oss), you could see there is no'=' inside the selector  (field=firstName),  but there is just field {.. } or editing { ... }. 

It same as as writing field=*: This applies to all the field (common rule)
For editing (boolean value) , its the same as editing=true
Values
Properties can work with types such as Boolean, Integer, String, List, Map and Expression.
1
field=password {
2
    // boolean
3
    editable:true;
4
    
5
    //String literal quoted
6
    toolTip:"This is required";
7
    
8
    // This is how specify list of values 
9
    trait:required, secret;
10
    choices:['Extra cheese', 'Mushroom'];
11
    
12
    // String literal (unquoted)
13
    component:AWPasswordField;
14
    
15
    // Map
16
    bindings: {
17
        size:20;
18
    };
19
    
20
    // Expression
21
    valid: ${ value.length > 5 } 
22
}
Copied!
​
Traits
Traits is MetaUI feature which is simlar to  mixins in the SASS. It can help us reuse some of the functionality.
For example trait longtext is just another rule that expands defined properties into current place.
1
​
2
field=description {
3
     trait:longtext;    
4
}
Copied!
Such trait can look like this
1
@trait=longtext {
2
    after:zBottom;
3
    editable {
4
      component:TextAreaComponent;
5
    }    
6
}
Copied!
It  moves description to the bottom of our Form Layout and if we are editing (Create or Edit operation), then we set TextAreaComponent as current rendering component.

Declaration
Not always we render fields from our domain class sometimes in the enterprise we want to have some ad-hoc fields some calculated fields that are created in runtime such as:
1
class=User {
2
  @field=fullName {
3
      value:${object.firstName + " " + object.lastName};
4
  }
5
}
Copied!
Here the @, creates new field and sets the value that can be combination of multiple fields like in above example. The @ means create (declare). This is the reason why we used above the @ when defining new trait.
Advanced syntax
Traits
These are equivalent
As Property
As # assignment
1
field=firstName {
2
    trait:required;
3
}
Copied!
1
field=firstName#required {}
Copied!
Field rank
To apply layout rules to position field in the page. These are equivalent
As Property
As Predecessor operator
1
field=firstName {
2
    after:zLeft;
3
    trait:required;
4
}
5
field=lastName {
6
    after:firstName;
7
    trait:required;
8
}
9
field=password {
10
   after:lastName;
11
   trait:required,secret;
12
}
Copied!
1
zLeft => firstName#required => lastName#required => password#required,secret
Copied!
Expressions
Expressions are wrapped in ${…} and use the JS syntax and are executed using eval function.
1
field=budget{
2
    valid: ${value >= 0 ? true : "Budget must be non-negative" }
3
}
Copied!
​
By default when working with rules you have access to two implicit properties the object and value.