Nessa parte do tutorial iremos tratar da aplicação mobile, configurar suas telas e componentes.

O processo de desenvolvimento de sistemas mobile no Cronapp é semelhante ao desenvolvimento web, a maior diferença está em alguns componentes visuais, que possuem diferenças para se adequar a usabilidade do smartphone ou tablet.

Passos

Tela Minha reservas

Abra a tela minhasReservas.view.html (localizada em src / main / mobileapp / www / views / logged / ) para seguir os próximos passos.

Internacionalização do Cabeçalho

Selecione o componente Cabeçalho da tela (destaque 1 da Figura 1.1), clique no ícone Traduzir logo acima da propriedade Conteúdo (2) para abrir a janela de internacionalização e informe "minhasReservas" no campo Chave, como já criamos essa chave anteriormente, os campos português e inglês serão automaticamente preenchidos.

Figura 1.1 - Internacionalização do cabeçalho da tela Minhas reservas

Alterar a Fonte de dados

Vamos alterar a fonte de dados principal da página com a que criamos anteriormente em Fontes de dados, exibindo somente os registros do próprio usuário.

Figura 1.2 - Alterando a fonte de dados da Lista avançada

1. Selecione o componente Fonte de dados que se encontra logo abaixo do Cabeçalho do formulário na área de edição da view;

2. Clique no botão "..." da propriedade Origem dos Dados para abrir a janela Lista de Fonte de Dados;

3. Selecione a fonte ReservasAlunosLogado que criamos anteriormente;
4. Clique em OK para salvar.

Configuração da Lista avançada

Assim como fizemos com a Grade (web), vamos realizar alguns ajustes na Lista Avançada. 

Figura 1.3 - Configurações do campo data reserva da Lista

1. Selecione o componente Lista Avançada na área de edição da view.
2. Clique no botão "…" da propriedade Configurações para abrir a janela de Opções da Lista.
3. Selecione a aba Colunas.
4. Clique no ícone Editar do campo datareserva para abrir a janela de configuração.
5. Selecione a opção "DD/MM/YYYY" do campo Máscara ({0:d}).
6. Desmarque também a opção Pesquisável.

Clique em OK para retornar à janela de Opções da Lista.

Figura 1.4 - Configurações dos botões de comando da Lista

1. Clique agora no ícone Editar do campo Botão de comando para abrir a janela de configuração.
2. Selecione a opção "Excluir (Registro) no campo Selecione o tipo.

Clique em OK nas duas janelas para retornar a janela do editor de views e salve.