metaui.io
Search…
Your first App
In this section we will introduce the MetaUI framework with with simple application where we generate
User form with ability to view, edit and create. The final app should look like following picture.
User detali page
It is recomended to have practical expirience in writing Angluar application so you could understand all the key aspects of the framework and to be able to answer at the end of this tutorial "How do I start?" and "How do I do X in MetaUI?".
1. Create new Angular application
1
$ ng new my-metaui-app --style=scss
2
$ cd my-metaui-app/
Copied!
Follow instruction on the screen given to you by
ng new command.This tutorial is made for Angular version 9. Make sure you have latest Angular CLI.
2. Add @ngx-metaui/rules to your app
@ngx-metaui/rules to your app- Now let's use schematics and integrate MetaUI with the project.
1
$ ng add @ngx-metaui/rules
Copied!
Select Fiori.
Once this
ng add command finishes you are fully configured to start some rule driven development. Besides updating standard project files such angular.json and package.json it also:- Imports MetaUI modules inside
app.module.ts - Creates main
Application.ossrule file- This is rule file similar to the
src/styles.cssjust like having global styles in the project
- Creates
user-rules.tsto export the content of our rules to be later on imported inside our module.
src/app/app.module.ts
src/app/rules/Application.oss
src/app/rules/user-rules.ts
1
@NgModule({
2
declarations: [
3
AppComponent
4
],
5
imports: [
6
BrowserModule,
7
BrowserAnimationsModule,
8
MetaUIRulesModule.forRoot({}),
9
FioriRulesModule.forRoot()
10
],
11
providers: [],
12
bootstrap: [AppComponent]
13
})
14
export class AppModule {}
Copied!
1
/**
2
* Module represent Global Top level application app rules. Modules are used in combination with
3
* <m-app> component.
4
*
5
* Application.oss is used for all global settings and OSS definitions
6
*/
7
module {
8
}
9
Copied!
1
/**
2
* Content of this file is automatically populated by oss compiler
3
*/
4
5
export {ApplicationRule} from './ts/Application.oss';
6
Copied!
MetaUI has two parts the Rule Engine
(MetaUIRulesModule) that glues everything and UI layer (FioriRulesModule)that brings in all the UI components.
The .oss file extension stands for object style sheet just like you have cascading stylesheet and they are pretty similar. src/app/rules is the main folder where are stylesheets are stored.
3. Generate User page
To speed up everything we will use
generate schematics to create UserDetail page already setup with different editing modes: - Create
- Edit
- View
1
$ ng g @ngx-metaui/rules:mPage --modelClass=User --name=UserDetail
Copied!
It will create following files:
src/app/user-detail/user-detail.component.html
src/app/user-detail/user-detail.component.ts
src/app/model/user.ts
src/app/rules/User.oss
1
<div class="page">
2
<h2>Object Detail</h2>
3
4
<button fd-button (click)="operation='create'">Create</button>
5
<button fd-button (click)="operation='edit'">Edit</button>
6
<button fd-button (click)="operation='view'">View</button>
7
8
<hr/>
9
10
<m-context [object]="object" [operation]="operation" layout="Inspect">
11
<m-include-component></m-include-component>
12
</m-context>
13
14
</div>
15
Copied!
1
import {Component, OnInit} from '@angular/core';
2
import {User} from '../model/user' ;
3
4
5
@Component({
6
selector: 'app-user-detail',
7
templateUrl: './user-detail.component.html',
8
styleUrls: ['./user-detail.component.scss']
9
})
10
export class UserDetailComponent implements OnInit {
11
12
object: User;
13
operation = 'view';
14
15
constructor() {
16
}
17
18
ngOnInit(): void {
19
20
this.object = new User('R0001', 'Frank Kolar',
21
'This is my user record', new Date());
22
}
23
}
Copied!
1
import {Entity} from '@ngx-metaui/rules';
2
3
/**
4
* This is generated class
5
*/
6
export class User implements Entity {
7
8
9
constructor(public uniqueName?: string, public name?: string,
10
public description?: string, public created?: Date) {
11
}
12
13
identity(): string {
14
return this.uniqueName;
15
}
16
17
18
getTypes(): any {
19
return {
20
uniqueName: String,
21
name: String,
22
description: String,
23
created: Date
24
};
25
}
26
27
28
/**
29
* Used by MetaUI to identify the name of the class once everything is minified
30
*/
31
className(): string {
32
return 'User';
33
}
34
35
36
toString(): string {
37
return this.name;
38
}
39
}
40
Copied!
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!
There is always a .oss (rules file) per your domain class and once we have this we can create a meta context that takes our model and metadata to genare the UI.
To get some basic understand of OSS syntax please check out next chapter.
4. Compile rules
Now we need to run following command to compile our sample rule. This just takes the rule file and turns it into typescript file so we can import it in the application.
1
$ npm run compile:oss
Copied!
It will output following file:
src/app/rules/ts/User.oss.ts
1
/**
2
* This is generated file. Do not edit !!
3
*
4
* @formatter:off
5
*
6
*/
7
/* tslint:disable */
8
export const UserRule = '/* User rules.oss -- Meta-data rules. Generated file Default definition */ class=User { field=uniqueName { label:"Id"; } field=name { label:"Name"; } field=description { trait:longtext; } zNone => *; zLeft => uniqueName => name => description => created; } /* Sample definition for operations edit and create */ class=User { operation=(edit, create) { zNone => *; zLeft => name => description; } operation=(create) { zNone => *; zLeft => name => description => created; } } ';
9
/* tslint:disable */
10
/**
11
* @formatter:on
12
*
13
*/
14
Copied!
5. Update app.component.html
Add our newly created component from step 3 to the main page
app.component.htmsrc/app/app.component.html
1
<app-user-detail></app-user-detail>
Copied!
4. Run it
1
$ ng serve
Copied!
Now you should see a simple form where UI is assembed on the fly, driven by our rule files, where you can switch between different operation mode, for each the UI a big different.
Last modified 2yr ago