Mudanças entre as edições de "UIFactory"
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
O '''UIFactory''' nada mais é do que uma classe com diversos recursos para agilizar a produção da UI mantendo um padrão de desenvolvimento e criação por toda a aplicação. Ela não é obrigatória nem necessária, mas em muitos casos utilizar esta classe fará com que você faça muito mais com bem menos linhas de código. | O '''UIFactory''' nada mais é do que uma classe com diversos recursos para agilizar a produção da UI mantendo um padrão de desenvolvimento e criação por toda a aplicação. Ela não é obrigatória nem necessária, mas em muitos casos utilizar esta classe fará com que você faça muito mais com bem menos linhas de código. | ||
= | = Funcionamento do UIFactory = | ||
Para facilitar o entendimento, o '''UIFactory''' precisa ser compreendido suas diferentes funções e depois a utilização delas em conjunto: | |||
Os métodos com o prefixo '''createField_*''' são responsáveis por criar | == Criação de Blocos == | ||
A primeira função do '''UIFactory''' é concentrar métodos para simplificar a construção de componentes da UI. Blocos que são utilizados com muita frequência e que demandam várias linhas de código para configura-los ganharam alguns métodos que criam o componente conforme sua necessidade. | |||
Em geral esses métodos de criação são estáticos, pois apenas criam, configuram e devolvem o bloco desejado pronto (ou quase) uso. | |||
Há alguns métodos de criação que não são estáticos, e já são vinculados ao estado de gerenciamento do '''UIFactory''', que serão explicados mais a frente. | |||
=== createField_* === | |||
Os métodos com o prefixo '''createField_*''' são responsáveis por criar campos de entrada de dados. Como TextBox, ComboBox, ou outros componentes mais elaborados. O diferencial destes métodos é configurar o componente desejado de forma mais "automatizada" passando como parâmetro a classe do VO e o atributo para qual queremos o campo. Ao ler as [[RFWMetaAnnotations]] o campo será personalizado para melhor atender as definições. | |||
== Gerenciamento da UI == | |||
A segunda função da '''UIFactory''' é o gerenciamento da interface. O '''UIFactory''', quando instanciado, ganha a habilidade de gerenciamento dos objetos. Sua função é gerenciar um [[RFWVO]] que esteja em edição na UI. Entre suas funções, temos: | |||
* Criar campos automaticamente baseando-se no tipo do atributo e nos valores informados nas [[RFWMetaAnnotations]] do atributo; | |||
* Associar os campos criados para a tela com os atributos dos VOs. Assim, quando o usuário informar algum valor no campo ele é automaticamente atribuído ao VO e vice-versa. | |||
* Capaz de realizar validações simples automaticamente, como a de obrigatoriedade de preenchimento e consistência de valores como se um Integer é válido, uma String tem o tamanho máximo respeitado, etc. | |||
* Associar os '''RFWValidationException''' aos campos criados quando eles têm a informação do atributo e esse atributo tem um campo associado à ele. | |||
* Criação de campos de busca e geração automática do [[RFWMO]] para busca no banco de dados. | |||
O gerenciamento da tela, desde a listagem e filtro até a adição de objetos se tornam bem mais simples utilizando o UIFactory. | |||
=== Criação de Campos com o UIFactory Gerenciado === | |||
Quando instanciado e já com o [[RFWVO]] de edição (referência) definido, o UIFactory foca no objeto e passa a oferecer funcionalidades mais objetivas. | |||
Por exemplo, novos métodos de '''createVOField*''' são disponibilizados. Já sem a necessidade de passar a classe do VO, e permitindo diversas configurações. Ao criar o campo por estes métodos, o field criado já é vinculado ao [[RFWVO]] corrente e qualquer alteração realizada neles será refletida diretamente no [[RFWVO]]. | |||
=== Anexando um Campo Externo Ao UIFactory === | |||
É possível utilizar qualquer componente criado pelo Vaadin com o UIFactory, integrando o componente às funcionalidades do FrameWork. Para isso são necessários 2 passos: | |||
# Crie seu componente como desejar, deve implementar a interface '''com.vaadin.ui.Component''' | |||
# Passe o componente para o '''UIFactory''' através do método '''registerField()''' | |||
O método '''registerField()''' realizará duas funções internamente, registrará o componente associando-o ao atributo do VO que está em edição no UIFactory e criará o objeto de Bind que transfere o valor do VO para o Componente e vice-versa. | |||
{{java|Exemplo de Criação de RFWComboBoxCity|<syntaxhighlight lang="java"> | |||
// Cria o componente personalizado | |||
final Component myComponent = createMyFancyComponent(); | |||
// Chama o método de registro passando os argumentos necessários de acordo com sua configuração | |||
uiFac.registerField(MyVO_._myAttribute, (HasValue<?>) myComponent, myRFWFormatter, isRequired, myNullValue); | |||
</syntaxhighlight>}} | |||
= Gerencimento da Tela = | = Gerencimento da Tela = |
Edição atual tal como às 14h43min de 30 de agosto de 2023
O UIFactory nada mais é do que uma classe com diversos recursos para agilizar a produção da UI mantendo um padrão de desenvolvimento e criação por toda a aplicação. Ela não é obrigatória nem necessária, mas em muitos casos utilizar esta classe fará com que você faça muito mais com bem menos linhas de código.
Funcionamento do UIFactory
Para facilitar o entendimento, o UIFactory precisa ser compreendido suas diferentes funções e depois a utilização delas em conjunto:
Criação de Blocos
A primeira função do UIFactory é concentrar métodos para simplificar a construção de componentes da UI. Blocos que são utilizados com muita frequência e que demandam várias linhas de código para configura-los ganharam alguns métodos que criam o componente conforme sua necessidade.
Em geral esses métodos de criação são estáticos, pois apenas criam, configuram e devolvem o bloco desejado pronto (ou quase) uso.
Há alguns métodos de criação que não são estáticos, e já são vinculados ao estado de gerenciamento do UIFactory, que serão explicados mais a frente.
createField_*
Os métodos com o prefixo createField_* são responsáveis por criar campos de entrada de dados. Como TextBox, ComboBox, ou outros componentes mais elaborados. O diferencial destes métodos é configurar o componente desejado de forma mais "automatizada" passando como parâmetro a classe do VO e o atributo para qual queremos o campo. Ao ler as RFWMetaAnnotations o campo será personalizado para melhor atender as definições.
Gerenciamento da UI
A segunda função da UIFactory é o gerenciamento da interface. O UIFactory, quando instanciado, ganha a habilidade de gerenciamento dos objetos. Sua função é gerenciar um RFWVO que esteja em edição na UI. Entre suas funções, temos:
- Criar campos automaticamente baseando-se no tipo do atributo e nos valores informados nas RFWMetaAnnotations do atributo;
- Associar os campos criados para a tela com os atributos dos VOs. Assim, quando o usuário informar algum valor no campo ele é automaticamente atribuído ao VO e vice-versa.
- Capaz de realizar validações simples automaticamente, como a de obrigatoriedade de preenchimento e consistência de valores como se um Integer é válido, uma String tem o tamanho máximo respeitado, etc.
- Associar os RFWValidationException aos campos criados quando eles têm a informação do atributo e esse atributo tem um campo associado à ele.
- Criação de campos de busca e geração automática do RFWMO para busca no banco de dados.
O gerenciamento da tela, desde a listagem e filtro até a adição de objetos se tornam bem mais simples utilizando o UIFactory.
Criação de Campos com o UIFactory Gerenciado
Quando instanciado e já com o RFWVO de edição (referência) definido, o UIFactory foca no objeto e passa a oferecer funcionalidades mais objetivas.
Por exemplo, novos métodos de createVOField* são disponibilizados. Já sem a necessidade de passar a classe do VO, e permitindo diversas configurações. Ao criar o campo por estes métodos, o field criado já é vinculado ao RFWVO corrente e qualquer alteração realizada neles será refletida diretamente no RFWVO.
Anexando um Campo Externo Ao UIFactory
É possível utilizar qualquer componente criado pelo Vaadin com o UIFactory, integrando o componente às funcionalidades do FrameWork. Para isso são necessários 2 passos:
- Crie seu componente como desejar, deve implementar a interface com.vaadin.ui.Component
- Passe o componente para o UIFactory através do método registerField()
O método registerField() realizará duas funções internamente, registrará o componente associando-o ao atributo do VO que está em edição no UIFactory e criará o objeto de Bind que transfere o valor do VO para o Componente e vice-versa.
![]() |
Exemplo de Criação de RFWComboBoxCity |
// Cria o componente personalizado
final Component myComponent = createMyFancyComponent();
// Chama o método de registro passando os argumentos necessários de acordo com sua configuração
uiFac.registerField(MyVO_._myAttribute, (HasValue<?>) myComponent, myRFWFormatter, isRequired, myNullValue);
|
Gerencimento da Tela
A função mais avançada do UIFactory é gerenciar os campos e dados da tela. Podendo ser utilizado para criar telas de filtro e exibição de dados, ou telas para edição e entrada de dados.
Para essas funções você precisa instanciar a classe, que será responsável por manter o ciclo de vida dos componentes da tela. Para recomendo que crie um field na sua janela, podendo ser final ou não de acordo com sua implementação:
![]() |
Instanciação da UIFactory |
private UIFactory<SeuVO> uiFac = new UIFactory<>(SeuVO.class);
|
Gerenciando Tela de Listagem
Para criar uma tela de listagem de dados gerenciada pelo UIFactory temos de criar os campos de filtro utilizando o UIFactory. Ao criar os campos com a instância do UIFactory ele fará automaticamente o bind entre os campos criados e os campos do RFWMO], assim, toda vez que o usuário solicitar que os dados sem filtrados o próprio UIFactory criará o RFWMO para realizar essa busca.
Vejamos alguns exemplos:
![]() |
Instanciação da UIFactory |
// Cria um campo para filtrar a listagem do SeuVO pelo atributo 'name'
TextField textField = this.uiFac.createMOField(SeuVO_._name, "100px", "200px");
textField.focus(); // Coloca o foco no primeiro campo da tela de busca
// Cria um campo para filtrar a listagem do SeuVO pelo atributo 'description'
this.uiFac.createMOField(SeuVO_._description, "100px", "400px");
|
Criando Painel com os Campos
Se você criou os campos para filtrar com o UIFactory ele cria um modelo de painel com os campos de busca, botão de busca, botão de limpeza, etc.. para ser colocado na tela. para isso utilize o seguinte método:
![]() |
Instanciação da UIFactory |
private void doLayout() {
try {
// Atualiza o conteúdo do searchPanel
searchPanel.setContent(uiFac.createSearchPanel(1, null, getDBProvider()));
} catch (RFWException e) {
TreatException.treat(e);
}
}
|
O painel criado por este método utiliza o tamanho do componente pai para distribuir os componentes na tela, e atualmente não é responsivo. Assim, se o usuário mudar o tamanho do browser a tela precisará ser corrigida. Como solução até que este painel seja responsivo, é fazer a janela implementar a interface BrowserWindowResizeEvent que recebe um evento caso o painel precise ser refeito. Note que este evento é lançado a partir do RFWFrame, se você não o utilizar o evento não será recebido.