Context and Properties
​Context represents a stack of assignments (e.g. [object]="user", operation="create", layout="Inspect").
Just like in our example we used inside the src/app/user-detail/user-detail.component.html template.
<m-context [object]="object" [operation]="operation" layout="Inspect"><m-include-component></m-include-component></m-context>
The current values are run against the Meta rule set to compute the effective property map. The property map holds property key/value pairs that directly affects the UI (eg: component="CheckboxComponent", editable="false")
This is similar to how CSS works. HTML elements can have classes to provide context. For example:
<div class="box"><h1>Hey</h1></div><div class="X"><div class="box"><h1>There</h1></div></div>
Then you have rules that depending on the context and how the elements are nested, you get different styling properties:
.box {border:1px solid red;width:100px;float:left;color:green;}/*if an element with class "box" that is containedin an element with class "X",then applies these properties*/.X .box {border:3px solid blue;background-color:yellow;}/*if a h1 element is containedin an element with class "box" that is containedin an element with class "X",then applies these properties*/.X .box h1 {color:orange;}
If multiple rules match, properties are merged and overridden. In this example,the "There" element merged the width and float properties, but overrode the border and color properties from more specific rules.
In MetaUI, context values are set using MetaContextComponent:
<m-context [object]="user" operation="create" layout="Inspect"><m-include-component></m-include-component></m-context>​​<m-context [object]="user" operation="view" layout="Inspect"><m-include-component></m-include-component></m-context>
Then you have rules that depending on the m-context and how they are nested, you get different UI properties:
If selectors [operation=create, field=any]match the current context values,then apply the properties[editing:true]If selectors [operation=view, field=any]match the current context values,then apply the properties[editing:false]
MetaIncludeComponent (<m-include-component)and various Meta components takes the effective property map to generate programatically the UI.
​
Following table shows some of the interesting context keys you can use. You can also come up with your own.
Remember - Context keys are those you set with <m-context> component
Context Key name | Context Value |
module | Global navigation tab |
layout | Define a named layout (e.g.: "Inspect", "SearchForm") |
operation | "view", "edit", "create", "search", "list" |
class | Class name |
object | Object instance (e.g. a User object) |
action | An action (e.g. could be fired from a button) |
field | Current field of class |
elementType | If type is collection, the type of its elements |
editing | Currently editing? Derived from operation |
trait | Current traits in effect (like CSS classes) |
​
Following table shows some of the interesting property keys you can use. You can also come up with your own.
Remember - Property keys are those you set inside your OSS rule file within the context of a selector (after: name).
class=User {field=description {after: name;}}
​
Property Key | Property Value |
trait | List of traits to apply |
after | Name of item (or zone) that this item should follow (for layout order) |
visible | Should current item be shown |
component | Component name to use for current rendering |
bindings | Map of bindings to pass to component |
wrapperComponent | Name of component to wrap around this component (it also has wrapperBindings) |
​
Property Key | Property Value |
fieldsByZone | Map of List for the layout zones (e.g. "zTop", "zLeft", ...) |
zonePath | Zone key path for sub map to render |
zNone | Special zone which makes field invisible |
zLeft | Specific named zone that renders fields in the Left zone (the same applies for other zones: zRight, zBottom, zMiddle, zTop) |
​
Property Key | Property Value |
label | Display key |
​
Property Key | Property Value |
editable | Should current field be editable |
valid | Is current value valid |
Property Key | Property Value |
layoutsByZone | List of sub-layout names grouped by zone (zTop, zLeft, ...) |
​
Property Key | Property Value |
actionResults | Executes js code that can fire any action |
Here are some of the interesting context keys that are explicitly set into the context:
However, some are implicitly set by the MetaUI engine. It's time to talk about chaining...
