What is MetaUI

Introduction

MetaUI is new, innovative way that allows you to build highly customizable front-end applications without writing HTML markup. Not only can MetaUI make your applications more consistent, but additionally it can reduce amount of overall code you need to write. This reduction in code reduces overall development cost.

To give you better idea let's take a look at following example, where we have page for the Invoice creation:

In traditional approach you probably use your UI Components library of choice to layout field by field and this could look look like something like this.

Invoice Page
<fdp-form-group #fg [multiLayout]="true" [formGroup]="form" [object]="invoice" [editable]="true">
<fdp-form-field #ffl1 [id]="'name'" label="Title" zone="zLeft" fluid="true" required="true"
placeholder="Title" rank="10">
<fdp-input [formControl]="ffl1.formControl"></fdp-input>
</fdp-form-field>
<fdp-form-field #ffl2 [id]="'requestor'" required="true" placeholder="Requestor" zone="zLeft"
rank="20">
<fdp-combo-box [formControl]="ffl2.formControl" [dataSource]="userDataSource"
[readonly]="true"
displayKey="toString" lookupKey="fullName"></fdp-combo-box>
</fdp-form-field>
<fdp-form-field #ffl3 [id]="'billingAddress'" label="Bill To" zone="zLeft" rank="30"
placeholder="Bill To" required="true">
<fdp-combo-box [formControl]="ffl3.formControl" [dataSource]="addressDataSource"
displayKey="toString"></fdp-combo-box>
</fdp-form-field>
<fdp-form-field #ffl4 [id]="'shippingAddress'" label="Ship To" zone="zLeft" rank="40"
placeholder="Ship To" required="true">
<fdp-combo-box [formControl]="ffl4.formControl" [dataSource]="addressDataSource"
displayKey="toString"></fdp-combo-box>
</fdp-form-field>
<fdp-form-field #ffl5 [id]="'needBy'" label="Need By" zone="zLeft" rank="40"
placeholder="Need By" required="true">
<fdp-date-picker [formControl]="ffl5.formControl">
</fdp-date-picker>
</fdp-form-field>
<fdp-form-field #ffl6 [id]="'accountCategory'" label="Account Category" zone="zLeft" rank="40"
>
<fdp-radio-group [list]="['Asset', 'Order', 'Cost Center', 'Project']"
[formControl]="ffl6.formControl"
>
</fdp-radio-group>
</fdp-form-field>
<fdp-form-field #ffl7 [id]="'isShared'" label="Is Shared?" zone="zLeft" rank="50"
noLabelLayout="true">
<fdp-checkbox [formControl]="ffl7.formControl" isBinary="true" value="Share?">
</fdp-checkbox>
</fdp-form-field>
<fdp-form-field #ffr1 [id]="'totalAmount'" zone="zRight" rank="10" columns="6">
<fdp-money [formControl]="ffr1.formControl"></fdp-money>
</fdp-form-field>
<fdp-form-field #ffr2 [id]="'supplier'" zone="zRight" rank="20" required="true">
<fdp-combo-box [formControl]="ffr2.formControl" entityClass="Supplier"
displayKey="name"></fdp-combo-box>
</fdp-form-field>
<fdp-form-field #ffr3 [id]="'paymentTerms'" zone="zRight" rank="40" required="true">
<fdp-select [formControl]="ffr3.formControl" [list]="paymentTerms"
[noSelectionString]="'(no value)'">
</fdp-select>
</fdp-form-field>
<fdp-form-field #ffr4 [id]="'taxInvoiceNumber'" label="Tax Invoice Number"
zone="zRight"
rank="60">
<fdp-input [formControl]="ffr4.formControl"></fdp-input>
</fdp-form-field>
<fdp-form-field #ffr5 [id]="'purchaseOrder'"
[placeholder]="'Purchase Order'" zone="zRight" rank="40">
<fdp-select [formControl]="ffr5.formControl" [list]="['PO20022', 'PO1110', 'PO3456', 'PO987']"
[noSelectionString]="'(no value)'">
</fdp-select>
</fdp-form-field>
<fdp-form-field #ffb1 [id]="'description'" label="Purpose" zone="zBottom"
placeholder="Describe the reason">
<fdp-text-area [formControl]="ffb1.formControl">
</fdp-text-area>
</fdp-form-field>
</fdp-form-group>

From this example you can see the verbosity of the HTML markup required just to generate this first example.

Instead with the use of MetaUI (as you see in above picture) which is set of API and minimum set of components that can take your model (e.g. above invoice domain class) and some metadata that could describe this class, which we call rules, pretty similar to CSS rules we can derive fully functional user interface on the fly without letting you layout fields by field for every single use case.

In the next chapters we will look more under the hood and see everything in action.