m
m
metaui.io
Search…
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.
Last modified 1yr ago