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

Esta página é parte de um tutorial, para ter acesso a documentação do conteúdo acesse: Editor de views.

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.

Visão Geral

Por padrão, após o usuário logar no aplicativo recém criado no Cronapp, ele será direcionado para a tela Home.view.html (Figura 1.1), nessa tela existem dois botões "sanduíche" nos cantos superiores que chamam a tela menu.view.html (Figura 1.2). Adicionaremos o link para a página CRUD reservaAlunoMobile.view.html no menu e na página, configuraremos a lista avançada, que equivale a grade no mobile.

Figura 1.1 - Tela home na área de edição

Figura 1.2 - Tela menu na área de edição

Passos

A versão mobile será destinada somente aos usuários do grupo de acesso Alunos, como estes não poderão acessar a lista de usuários, alteraremos a chamada desse link para a tela de reservas.

Abra a tela menu.view.html (localizada em src / main / mobileapp / www / views / logged / ) e selecione o item com ícone {Users} para alterar as propriedades abaixo:

Figura 2.1 - Alteração do menu

1. Selecione o componente Item com ícone "{Users}" e acesse suas propriedades;

2. clique na propriedade Icone e pesquise pelo ícone "ion-ios-book";

3. na propriedade Conteúdo, internacionalize o termo "Minhas reservas" e

4. por fim, na propriedade Referência indique a tela reservaAlunoMobile.view.html (localizada em src / main / mobileapp / www / views / logged /).

Configuração da tela de reservas

Vamos alterar o vínculo da fonte de dados do componente Lista avançada para a Fontes de dados que criamos anteriormente, assim como fizemos com a Grade, exibindo somente os registros do aluno logado.

Abra a tela reservaAlunoMobile.view.html (localizada em src / main / mobileapp / www / views / logged / )

Internacionalização do Cabeçalho

Selecione o componente cabeçalho no início da tela e clique no botão de internacionalização da propriedade Conteúdo, internacionalize o termo "Minhas reservas" como na figura 2.2.

Figura 2.2 - Alterando o cabeçalho da tela

Fonte de dados

Seguindo os passos da Figura 3.1:

1. selecione o componente Lista avançada na área de edição;
2. clique no botão "..." da propriedade Configurações para abrir a janela Opções da Lista;
3. na aba Geral da Janela Opções da Lista, selecione o botão "..." do campo Fonte de dados para abrir a janela Configuração de Fonte de Dados;
4. clique no botão "..." do campo Origem dos Dados na Janela de Configurações de Fonte de Dados e
5. na janela Lista de Fonte de dados selecione a fonte ReservasAlunoLogado que criamos anteriormente.

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

Após isso, clique em OK em todas as janelas para salvar as alterações.

Campos da lista

Precisamos agora configurar as colunas da lista avançada para ajustá-la as nossas necessidades.

Coluna Livro

Para a configuração das colunas da Lista avançada, siga os passos informado na figura 3.2:

1. Selecione o componente Lista avançada na área de edição;
2. clique no botão "..." da propriedade Configurações para abrir a janela de configurações;
3. na janela Opções da Lista, clique no botão de edição da coluna;
4. no Campo exibição, selecione a opção "livro_nome" e 
5. em Cabeçalho, Insira o termo "Livro" e internacionalize no botão lateral ao campo;

Não é necessário internacionalizar o conteúdo do campo Cabeçalho, pois ele só serve de referência para a lista e não será exibido para o usuário.

Figura 3.2 - Alterando a coluna livro da Lista avançada

Clique em OK para salvar e voltar para janela de Opções da Lista.

Coluna data da reserva

Após clicar no botão de edição da coluna dataReserva, configure seguindo os passos da figura 3.2:

1. no Campo exibição, selecione a opção "dataReserva"; 
2. em Cabeçalho, Insira o termo "Data da Reserva" e internacionalize no botão lateral ao campo;
3. Mascara ({0:d}): escolha o padrão usado no Brasil para datas: DD/MM/YYYY;
4. desmarque a opção Visível no crud.

Não é necessário internacionalizar o conteúdo do campo Cabeçalho, pois ele só serve de referência para a lista e não será exibido para o usuário.

Figura 3.3 - Alterando a coluna data da reserva

Clique em OK para salvar e voltar para janela de Opções da Lista.

Coluna Botão Editar / Excluir

Clique na edição da coluna Botão de comando para alterar o campo Selecione o Tipo para "Excluir (Registro)", impedindo que o usuário edite o registro posteriormente.

Figura 3.4 - Retirando a permissão de edição do registro

Clique OK na janela de configurações de coluna na Grade, na janela de Opções da Grade e salve o arquivo.