Introdução ao App Builder - Aula 4: A camada de UI

Esta é a quarta aula da série de tutoriais Introdução ao App Builder.

A camada de UI

Como sugerido pelo nome, a camada de UI é onde os desenvolvedores do App Builder definem o que será mostrado aos usuários finais das aplicações, incluindo as páginas que serão usadas para navegá-los.

Nas aulas anteriores, começamos com a camada de dados, onde nossos dados residem, e os organizamos em tabelas. Em seguida, na camada de negócios, criamos os objetos de negócios, ou regras, que nos permitirão recuperar os dados para ler, mostrar e modificá-los. Agora que essa estrutura subjacente está pronta, podemos trabalhar na UI da nossa aplicação.

A UI de uma aplicação do App Builder é composta por três partes: páginas, painéis e controles. Vamos definir esses três termos:

Página: Uma página é apenas a estrutura. Ela não possui dados e contém apenas um ou vários painéis.
Painel: Um painel é uma seção ou área que fica sobre a página. Os painéis contêm dados derivados das regras às quais você os conecta. Existem vários tipos de painéis no App Builder, mas nestas aulas, usaremos apenas dois:
- Formulário: Eles mostram informações de um único registro por vez.
- Grade: Eles mostram informações de múltiplos registros.
Controle: Um controle identifica qual componente específico de dados de uma fonte de dados você deseja exibir ou visualizar.

Vamos ver como esses conceitos funcionam na prática criando uma página.

Crie sua primeira página: Categorias

Vamos criar e adicionar à nossa aplicação uma página que exibirá todos os registros na tabela Categoria. Siga estes passos:

Acesse o App Workbench. Você pode fazer isso clicando no ícone de menu hambúrguer no canto superior direito de qualquer página, que revela o painel de ações, e em seguida selecionando App Workbench.
Existem várias maneiras de criar páginas no App Builder. Vá para a aba Páginas e clique no botão + Página lá. O assistente Criar uma Nova Página se abre:
Digite Categorias como o nome da página. Usaremos um nome no plural para esta página porque ela mostrará múltiplos registros de categorias. Clique em Próximo.
Em Selecionar um Menu, você deve escolher o menu em que deseja que sua nova página apareça. Selecione Configuração.
Em Selecionar um Layout, escolha um layout para a nova página. Embora possa ser alterado posteriormente, você deve escolher um para criar a página. Selecione Página Completa e clique em Próximo.
Clique em Concluir e o App Builder criará a página. Após alguns momentos, você verá a página Edição de Página, onde poderá continuar configurando o conteúdo da página.

Você acabou de criar sua primeira página no App Builder. Ela ainda não tem nada, mas você pode ver como ela fica clicando no botão Visualizar Página na página Edição de Página. O App Builder abrirá uma nova aba no seu navegador para mostrar o estado atual da página. Você pode manter essa aba aberta e atualizá-la periodicamente enquanto continua trabalhando.

Adicionar conteúdo à sua página

Vamos continuar configurando a página Categorias. Escolhemos um layout para ela e decidimos onde ela pode ser encontrada, mas precisamos adicionar conteúdo a ela.

Vá para App Workbench > Páginas e encontre a página Categorias que você acabou de criar. Clique no ícone de caneta no final da sua linha para entrar no modo de edição.

Uma vez no modo de edição, siga estas etapas:

No painel Layout do Painel da Página, clique em Escolher Tipo de Painel. O assistente Criar um Painel se abre:
Estamos tentando mostrar todos os registros de uma tabela específica, então selecione Grade como o Tipo de Painel e clique em Próximo.
Selecione Categoria (Fonte) como a Fonte do Painel, uma vez que essa é a regra que se conecta à tabela que contém os dados que queremos. Clique em Próximo.
O App Builder perguntará se você deseja que ele adicione controles automaticamente ao seu painel. Será útil fazer isso manualmente quando houver muitas colunas em uma tabela e você não precisar de todas elas, mas no caso desta página que estamos criando agora, selecione Auto Build e clique em Next.
Clique em Finish.

Após alguns momentos, o Layout do Painel da Página será atualizado, mostrando os controles que o App Builder criou para a página. Se você clicar em View Page, a pré-visualização deve parecer com isso:

Página de Categorias 1

Criar uma segunda página: Clientes

Vamos criar outra página, mas desta vez selecionaremos seus controles manualmente:

Repita as Etapas 1 e 2 de quando você criou a página Categorias.
Dê a esta nova página o nome Clientes. Clique em Next.
Em Select a Menu, escolha Home.
Em Select a Layout, escolha Full Page.
Clique em Finish e aguarde o App Builder criar a página. Quando terminar, você estará na tela de edição da nova página.
Clique em Choose Panel Type e selecione Grid como o Tipo de Painel da nova página. Clique em Next.
Desta vez, em vez de deixar o App Builder adicionar controles ao seu painel automaticamente, selecione Choose Manually e clique em Next. Um passo extra no assistente aparece, pedindo que você selecione quais colunas do objeto Customer (Source) deseja usar:

Não precisamos mostrar todas essas em nossa interface. Selecione as colunas Customer, Address, City, State, PostalCode e Country. Clique em Next e depois em Finish.

Quando o App Builder terminar de adicionar os controles, clique em View Page novamente para ver o resultado. A página Clientes deve parecer com isso:

Página de Clientes 1

Hora da prática: Criar mais páginas

Nossa aplicação Northwinds precisará de mais do que apenas duas páginas para funcionar corretamente, então vamos criar mais algumas. Antes de começar, mantenha o seguinte em mente:

Ao selecionar as fontes do painel, certifique-se de selecionar os objetos de origem, não os objetos de lista.
Quando solicitado a selecionar um menu para cada página, selecione o menu Configuração.
Cada página deve ter entre cinco e seis controles para ainda ser lida confortavelmente, então escolha sabiamente quais colunas você acha mais essenciais para serem exibidas na interface!

Adicione páginas semelhantes às que acabamos de construir para os objetos de negócios Produtos e Regiões.

Nota

Você pode encontrar outro botão + Página na página inicial do App Workbench. Ele funciona da mesma forma que o da aba Páginas.

As páginas popup aparecem sobre uma página base e podem exibir dados adicionais por meio de seus próprios controles. Elas são úteis porque permitem mostrar muito mais do que apenas cinco ou seis controles em uma determinada página. Podem conter quantos dados você quiser e podem rolar infinitamente.

Vamos guiá-lo sobre como adicionar uma página popup a uma página base existente usando a página Clientes.

Vá para App Workbench > Páginas e clique em + Página.
Digite o nome Cliente. Desta vez usaremos um nome no singular porque esta página mostrará apenas um registro.
Clique em Próximo.
Em Selecionar um Menu, escolha Nenhum.
Na etapa Selecionar um Layout, no entanto, selecione Formulário Popup. Clique em Próximo e depois em Concluir.
Quando o App Builder terminar de criar a página, clique em + Escolher Tipo de Painel e selecione Formulário, pois o popup mostrará apenas dados de uma única linha. Clique em Próximo.
Selecione Cliente (Fonte) como a Fonte do Painel.
Você pode deixar o App Builder selecionar as colunas automaticamente, já que este popup será usado sobre a página Clientes para mostrar todos os detalhes de um determinado cliente. Selecione Construção Automática e clique em Próximo.
Clique em Concluir.
Agora que criamos nossa página popup, precisamos vinculá-la à página base onde queremos que ela seja acessível. Retorne à tela de edição da página Clientes na aba Páginas do App Workbench.
Vá para o painel Métodos de Atualização.
No campo Link Para Página, selecione Cliente, a página popup que acabamos de criar.
Clique em Salvar.

Após alguns segundos, o App Builder será atualizado. Se você clicar em Ver Página agora para ver a página Clientes, verá que cada linha da lista tem um botão no final. Clique no botão e a página Cliente aparecerá em primeiro plano, contendo informações detalhadas sobre o cliente listado naquela linha.

Para praticar a criação de páginas popup, vamos criar mais duas:

Crie um popup para o objeto de negócio Produtos, mostrando detalhes sobre uma entrada individual na página base.
Crie uma página popup chamada Parâmetro com base na regra Parâmetro (Fonte). Lembre-se de que Parâmetro é uma tabela única que armazena apenas um registro, composta por uma chave primária e quaisquer outros valores que você precise armazenar com esse parâmetro. Este popup deve ir no menu Configuração em vez de ser acessível a partir de uma página base.

Acelerador de criação de páginas

O App Builder oferece uma maneira mais rápida de criar páginas simples com base em objetos de origem, semelhante ao acelerador que auxilia na criação dos próprios objetos. Vamos ver como você pode usá-lo para acelerar seu processo de criação:

Navegue até a aba App Workbench > Tabelas e abra a tabela Funcionário.
No painel Tabela, há uma seção intitulada Aceleradores. Clique no botão Publicar na Camada de UI. O App Builder abrirá um assistente muito semelhante ao que aparece quando você cria uma página a partir da página Páginas, com os seguintes passos:
1. Primeiro, o App Builder perguntará de qual menu a nova página deve ser acessível. Selecione Configuração e clique em Próximo.
2. Em seguida, o App Builder perguntará sobre o layout. Selecione Grade e Formulário, porque duas páginas serão criadas seguindo o padrão que fizemos acima manualmente: Funcionários e Funcionário, sendo a primeira uma lista de todos os registros e a segunda um popup que mostra detalhes sobre um registro individual. Clique em Próximo.
3. Clique em Criar Páginas. O App Builder levará alguns momentos para criar as páginas. Assim que terminar, você pode encontrar as páginas recém-criadas indo para App Workbench > Páginas e visitando suas prévias.

Agora que você sabe como o acelerador funciona, use-o para criar páginas para as tabelas restantes em nossa camada de dados: Transportadoras e Fornecedores.

Revisão e conclusão

Vamos revisar o que aprendemos nesta lição. Nos familiarizamos com a camada de UI do App Builder e começamos a criar nossas primeiras páginas. Essas páginas derivam seus dados dos objetos de negócios e das tabelas que criamos nas lições anteriores.

Nas próximas lições, aprofundaremos nossa compreensão das camadas e aprenderemos como realizar várias outras tarefas básicas em cada uma delas. Comece avançando para Lição 5: Controles.