Como desenvolvedor, você sabe que criar uma aplicação CRUD pode ser uma tarefa tediosa, exigindo que você crie vários componentes para cada operação. No entanto, com o PO-UI, um framework de UI baseado do Angular, você pode facilmente criar aplicativos CRUD com componentes dinâmicos. Neste post, discutiremos como você pode usar os componentes dinâmicos do PO-UI, especificamente o Page Dynamic Edit e o Page Dynamic Table, para construir rapidamente poderosas aplicações CRUD.

Componentes dinâmicos do PO-UI

Os componentes dinâmicos do PO-UI são componentes criados com base em metadados. Esses metadados contêm informações sobre os componentes, como os campos e os tipos de dados, o que permite que o PO-UI crie os componentes dinamicamente. Essa característica torna fácil a criação de aplicativos CRUD, já que você pode definir os metadados e deixar o PO-UI criar os componentes para você.

Page Dynamic Table

O componente Page Dynamic Table é uma tabela dinâmica que pode ser usada para exibir dados. Esse componente é criado com base em metadados, tornando fácil a criação de tabelas dinamicamente. Os metadados contêm informações sobre os campos, como o rótulo e o tipo de dados. Com essas informações, o PO-UI pode criar a tabela dinamicamente.

Para usar o componente Page Dynamic Table, você precisa definir os metadados para a tabela. Esses metadados podem ser definidos em formato JSON e você pode especificar os campos e os tipos de dados para cada coluna. Depois de definir os metadados, você pode passá-los para o componente Page Dynamic Table e o PO-UI criará a tabela para você.

Exemplo com Page Dynamic Table

O primeiro passo é definir os metadados para a tabela que desejamos criar. Esses metadados podem ser definidos em um arquivo JSON.

{
  "fields": [
    {
      "property": "id",
      "label": "ID",
      "type": "string",
      "key": true,
      "visible": true
    },
    {
      "property": "name",
      "label": "Nome",
      "type": "string",
      "visible": true
    },
    {
      "property": "email",
      "label": "Email",
      "type": "string",
      "visible": true
    }
  ]
}

No seu componente Angular, você pode passar os metadados para o componente Page Dynamic Table do PO-UI como mostrado abaixo:

<po-page-dynamic-table
  p-title="Lista de Clientes"
  [p-fields]="tableMetadata.fields">
</po-page-dynamic-table>

import { Component } from '@angular/core';
import tableMetadata from './table-metadata.json';

@Component({
  selector: 'app-client-table',
  templateUrl: './client-table.component.html',
})
export class ClientTableComponent {
  tableMetadata = tableMetadata;
}

Page Dynamic Edit

O componente Page Dynamic Edit é um formulário dinâmico que pode ser usado para criar, editar ou visualizar dados. Esse componente é criado com base em metadados, tornando fácil a criação de formulários dinamicamente. Os metadados contêm informações sobre os campos, como o rótulo, o tipo de dados e as regras de validação. Com essas informações, o PO-UI pode criar o formulário dinamicamente.

Para usar o componente Page Dynamic Edit, você precisa definir os metadados para o formulário. Esses metadados podem ser definidos em formato JSON e você pode especificar os campos, os tipos de dados e as regras de validação para cada campo. Depois de definir os metadados, você pode passá-los para o componente Page Dynamic Edit e o PO-UI criará o formulário para você.

Exemplo com Page Dynamic Edit

Similar ao exemplo anterior, primeiro definimos os metadados para o formulário em um arquivo JSON.

{
  "fields": [
    {
      "property": "name",
      "label": "Nome",
      "type": "string",
      "required": true
    },
    {
      "property": "email",
      "label": "Email",
      "type": "string",
      "required": true,
      "email": true
    }
  ]
}

No seu componente Angular, você pode passar os metadados para o componente Page Dynamic Edit do PO-UI como mostrado abaixo:

<po-page-dynamic-edit
  p-title="Editar Cliente"
  [p-fields]="formMetadata.fields">
</po-page-dynamic-edit>

import { Component } from '@angular/core';
import formMetadata from './form-metadata.json';

@Component({
  selector: 'app-client-edit',
  templateUrl: './client-edit.component.html',
})
export class ClientEditComponent {
  formMetadata = formMetadata;
}

Conclusão

O PO-UI é um framework de UI poderoso que facilita a criação de aplicativos CRUD com componentes dinâmicos. Os componentes Page Dynamic Edit e Page Dynamic Table permitem que você crie formulários e tabelas dinamicamente com base em metadados, tornando fácil a criação rápida de poderosas aplicações CRUD. Se você procura um framework de UI que possa ajudá-lo a criar aplicativos CRUD facilmente, o PO-UI definitivamente vale a pena conferir.