Habiendo desarrollado hace poco unos proyectos de gestión financiera, siempre estaba la discusión de que estilo que colores en la UI se iba a utilizar, el framework a usar para Front End, Back End, etc temas a discutir con maquetadores, diseñadores, áreas de usabilidad que casi siempre brillan por su ausencia ... etc etc etc.
así que investigando vi como un grande de los ERP, como SAP a evolucionado su plataforma hasta llegar a la web, y han creado OpenUI5 y UI5 Web Components, y me pareció muy útil , buena legibilidad, en su diseño, los tipos de fuentes, entre otras cosas
aquí dejo el link : UI5 Web Components
Ahora para usarlo en Angular, hay que instalar lo siguiente:
npm install @ui5/webcomponents
npm i @ui5/webcomponents-fiori
Para data binding, se ayuda de la librería Origami
npm install @codebakery/origami
Luego importamos los módulos dentro de app.module.ts
y para terminar de configurar hay que setear el schema CUSTOM_ELEMENTS_SCHEMA
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule,
OrigamiFormsModule,
HttpClientModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
LayoutsModule,
AuthModule,
SharedModule,
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: onAppInit,
multi: true
},
],
bootstrap: [AppComponent]
})
export class AppModule { }
Para el header de la página podemos usar el componente Shellbar
<ui5-shellbar id="shellbar" (click)="onShellBar($event)" primary-title="Optimus ERP"
secondary-title="ESoftware" show-co-pilot show-notifications
show-product-switch>
<ui5-avatar id="userInfo" slot="profile"
image="./../../../../assets/avatar/empty-user.jpg">
</ui5-avatar>
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
</ui5-shellbar>
y para la navegación usamos el side-navigation
<ui5-side-navigation>
<ui5-side-navigation-item text="Home" icon="home" ></ui5-side-navigation-item>
<ui5-side-navigation-item expanded *ngFor="let item of UI_MENU_LIST"
[text]="item.Description" expanded [icon]="item.image">
<ui5-side-navigation-sub-item *ngFor="let menu of item.items"
[text]="menu.Description"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation>
como pueden observar nos valemos de *ngFor, para mostrar los datos que vienen del servicio y obtenemos el poder de reactividad
en los input, para que funcione bien la reactividad al momento que usamos el :
formControlName="UserName"
se debería usar el atributo ngDefaultControl
<ui5-input style="width: 100%" id="UserName"
placeholder="Enter your Name" required formControlName="UserName"
ngDefaultControl origami></ui5-input>
y vamos a obtener una interfaz de este tipo:
personalmente veo una buena opción para no batallar mucho con el tema de estilos, formas, etc etc ya que aquí tenemos una presentación muy estilizada, profesional ..
ahora un tema en contra, es que el equipo de UI5, esta trabajando en mejorar los componentes y la forma de trabajar con los eventos, no es como lo hacemos nativamente en Angular, si no como las viejas apps con java script.
en el ejemplo, en el componente ShellBar (Header), si quiero capturar el evento click , en Angular seria (click)="funcion()", si bien es cierto esto funciona, pero no capturamos el Handler del $event y lo tenemos que hacer en un js por separado y luego tenemos que inyectarlo
El archivo .js quedaría como lo siguiente:
const load = function(){
shellbar.addEventListener("profile-click", function (event) {
//console.log(event.detail.targetRef);
popover.openBy(event.detail.targetRef);
});
}
module.exports = {load : load};
y en mi componente header.ts hacemos lo siguiente:
var h = require('./../header/header.js');
ngOnInit(): void {
h.load();
}
espero sirva de ayuda
