Skip to main content

Data2 Porcelain

O que é o Data2 Porcelain?​

O Data2 Porcelain é uma biblioteca de componentes prontos que facilita e acelera o desenvolvimento da sua aplicação.

Com o Porcelain, você tem acesso a uma variedade de componentes reutilizáveis, como:

  • Button
  • PaginationControl
  • AutoField
  • FormView
  • ListView
  • SearchField

...entre muitos outros que já estão disponíveis — e outros que ainda serão lançados.

Como usar os componentes do Porcelain​

Utilizar os componentes do Porcelain é rápido e fácil. Basta seguir os passos abaixo:

  1. Crie um novo bloco e selecione-o.
  2. No canto superior direito do Builder, clique em data2-core-primitive@Block.
  3. Escolha o componente Porcelain que deseja adicionar.
  4. Defina os pârametros necessarios de sua aplicação, que estão listados sempre na parte inferior do Inspector.

✅ Pronto! O seu componente Porcelain pronto para uso.

Agora que você já sabe como utilizar os componentes do Porcelain no seu projeto, vamos explorar alguns deles na prática e entender como cada um pode ajudar no seu desenvolvimento.

FormView​

No tutorial de Primeiros Passos, vimos como criar um CRUD passo a passo. Com o componente FormView, esse processo pode ser feito de forma muito mais rápida e prática.

Como usar o FormView​

  1. Crie um novo bloco.
  2. No canto superior do Inspector, clique em data2-core-primitives@Block.
  3. Substitua por: data2-porcelain@FormView.
  4. Ative o pârametro Dataset e selecione o Dataset desejado.

FormView

Na imagem acima, vemos o FormView sem nenhum Dataset selecionado. Ele dispõe de cinco botões principais: Insert, Edit, Delete, Save e Cancel.

Funções dos botões​

  • Insert Cria um novo item no Dataset. Após clicar, preencha todos os campos necessários e finalize clicando em Save para salvar o registro.

  • Edit Permite alterar um registro já existente. Clique em Edit, realize as modificações desejadas e, em seguida, clique em Save para confirmar as alterações.

  • Cancel Durante os modos Insert ou Edit, caso queira descartar as mudanças feitas, clique em Cancel para cancelar a operação.

  • Delete Remove permanentemente o registro selecionado do Dataset.

Quando selecionamos um Dataset, o FormView gera dinamicamente todos os campos, exibindo-os de acordo com a estrutura do Dataset, conforme podemos ver abaixo.

FormView

Pronto! Você tem a primeira parte para fazer um CRUD funcional e integrado com seu Dataset, de forma rápida e eficiente usando o FormView.

Principais propriedades​

  • Hide Dataset Controls Oculta os cinco botões de gerenciamento de registros (Insert, Edit, Delete, Save e Cancel).

  • Omit Fields Define quais campos do Dataset não serão exibidos no FormView.

  • TextArea Fields Por padrão, os campos de texto no FormView são destinados a informações curtas e não exibem corretamente conteúdos com quebras de linha. Ao adicionar o campo nesta propriedade, ele passará a ser renderizado como uma área de texto (textarea), permitindo a visualização e edição adequada de frases ou textos maiores.

ListView​

Vimos anteriormente como o FormView pode acelerar a criação de um CRUD. No entanto, ele possui uma limitação: exibe sempre os dados de apenas um item do Dataset — e não oferece uma forma direta de navegar entre os itens.

Para resolver isso, usamos o componente ListView, que complementa o FormView e permite visualizar e selecionar diferentes registros de um Dataset.

Como usar o ListView​

  1. Crie um novo bloco.
  2. No canto superior do Inspector, clique em data2-core-primitives@Block.
  3. Substitua por: data2-porcelain@listview.
  4. Ative a propriedade Dataset e selecione o Dataset desejado.

ListView

Na imagem acima, podemos ver três itens listados. O primeiro está selecionado, o que significa que o cursor.current está apontando para ele. Se clicarmos em outro item, o cursor será atualizado para refletir a nova seleção.

Principais propriedades​

  • Label Define o identificador principal de cada item exibido no ListView. No exemplo da imagem acima, para o primeiro item o Label seria João.

  • Identification Exibe o identificador complementar logo abaixo da Label. No exemplo, o valor exibido seria 688a4d3aa3e974d07ff9fab4.

  • On Item Select Permite configurar uma ação ou comportamento que será executado sempre que um novo item do ListView for selecionado.

  • Searchable Adiciona um campo de busca que pesquisa pelo valor definido na Label.

Usando FormView + ListView​

Ao combinar o ListView com o FormView, conseguimos criar uma interface de CRUD completa, onde é possível:

  • Visualizar todos os itens do Dataset.
  • Selecionar um item para edição.
  • Criar novos registros.
  • Excluir os registros que não forem mais necessários.

Essa combinação proporciona uma forma rápida, prática e visual de gerenciar dados diretamente na interface.

FormView e ListView

SearchField​

Agora que já temos nosso CRUD funcionando, imagine a seguinte situação: Você possui um Dataset com muitos registros e precisa permitir que o usuário encontre rapidamente um item específico.

Para isso, usamos o componente SearchField, que funciona como um filtro integrado ao seu Dataset.

Como usar o SearchField​

  1. Crie um novo bloco.
  2. No canto superior do Inspector, clique em data2-core-primitive@Block.
  3. Substitua por: data2-porcelain@searchfield.
  4. Ative a propriedade Dataset e selecione o Dataset desejado.
  5. Na propiedade field escolha qual por qual campo deseja que seja filtrado.

No exemplo abaixo, usamos um ListView junto com o SearchField e realizamos uma busca pelo nome Lucas:

SearchField

Principais propriedades​

  • Filter Operation Define o tipo de operação que será realizada pelo filtro. Por exemplo, ao selecionar lesser than e escolher o campo idade em field, será possível filtrar todos os registros cuja idade seja menor do que o valor informado.

  • Disabled Desabilita o filtro se o booleano for true.

Usando a propriedade FieldDefinition​

Uma das funcionalidades mais interessantes do SearchField é a propriedade FieldDefinition.

Para configurá-la:

  1. Clique no botão f() ao lado da propriedade.
  2. Escolha a opção field.
  3. No campo OneOf, digite os valores que deseja exibir no seletor (por exemplo: Lucas,Pedro).

Isso cria uma lista de sugestões que ajuda o usuário a escolher o que deseja filtrar:

Utilização do FieldDefinition

Com isso, você melhora significativamente a experiência de navegação em Datasets maiores, permitindo filtros mais rápidos e precisos.

MultiSearchField​

Imagine que você deseja aplicar vários filtros diferentes ao mesmo tempo para refinar a busca em um Dataset. Embora seja possível usar múltiplos SearchField para isso, existe uma solução mais prática e eficiente: o componente MultiSearchField.

Esse componente agrupa vários campos de busca em um único bloco, permitindo filtrar os dados com maior precisão e menos esforço.

Como usar o MultiSearchField​

  1. Crie um novo bloco.
  2. No topo do Inspector, clique em data2-core-primitive@Block.
  3. Substitua por: data2-porcelain@MultiSearchField.
  4. Ative a propriedade Dataset e selecione o Dataset que deseja utilizar.
  5. No campo fields, clique em Add Item para adicionar um novo filtro.

Cada item adicionado será um novo campo de busca.

No exemplo abaixo, foram adicionados dois filtros:

  • No primeiro, o campo Fields foi configurado como Nome e o Label também definido como Nome.
  • No segundo, usamos Idade como campo e Idade como rótulo.

Exemplo de MultiSearchField

Com isso, conseguimos criar uma interface de busca mais dinâmica, poderosa e fácil de usar, permitindo aplicar múltiplos filtros sobre um Dataset de forma eficiente.

Button​

O Porcelain também oferece um componente do tipo botão, ideal para acionar ações dentro da sua aplicação.

Como usar o Button​

  1. Crie um novo bloco.
  2. No topo do Inspector, clique em data2-core-primitive@Block.
  3. Substitua por: data2-porcelain@Button.

Principais propriedades​

  • Label: Define o texto que será exibido no botão.
  • OnClick: A ação que será executada quando o botão for clicado.
  • Loading: Quando ativado, exibe uma animação de carregamento após o clique, útil para indicar que o botão está processando alguma ação.
  • Disabled: Um valor booleano (true ou false) que, quando verdadeiro, desativa o botão, impedindo que ele seja clicado.

Esses recursos são excelentes para melhorar a experiência do usuário e evitar múltiplos cliques ou interações indesejadas durante processos assíncronos.

PorcelainTheme​

Imagine que você está construindo um sistema gigante e usando vários componentes do Porcelain. Em vez de configurar cada componente individualmente com a mesma padronização, você pode usar o PorcelainTheme para agilizar esse processo.

Com ele, você define cores, bordas e outros padrões visuais para todos os componentes do Porcelain de uma só vez.

PorcelainTheme

Como usar o PorcelainTheme​

  1. Dê dois cliques no fundo do seu Builder.
  2. Clique no terceiro ícone da barra lateral esquerda.
  3. Selecione a opção PorcelainTheme.

Como criar um PorcelainTheme

Aplicando o tema aos componentes​

Depois de configurar o seu PorcelainTheme, vá até o componente desejado e ative o parâmetro theme e selecione-o.

Pronto! O componente vai automaticamente seguir o padrão visual definido no seu PorcelainTheme.