Projeto Low Code Mobile
Criação do projeto mobile
Dentro do projeto criado, na opção Mobile ir no icone de ‘+’ para criar um mobile.
Informar o nome e título do projeto mobile que será criado.
Inserir o ícone e imagem splash. Para criar basta ir em Recusos > Imagens.
Por fim, basta gravar as informações.
Criação das telas
Localizar o mobile que deseja editar no menu do projeto e clicar no ícone ‘</>’ para abrir o editor.
No menu superior há as seguintes opções:
- Salvar tela para salvar as alterações que fizer, no menu suspenso dessa opção tem a opção para salvar o projeto como um todo.
- Se estiver trabalhando com outras pessoas no mesmo projeto, priorize apenas salvar a tela que está fazendo para não correr o risco de perder o que foi feito.
- Desenho é a opção para a visualização da edição da tela.
- Visualizar é para testar o funcionamento da tela.
- Quando selecionado, Esquerda mostra o menu esquerdo, que possui as configurações de telas e componentes.
- Quando selecionado, Direita mostra o menu direito, que possui as configurações de propriedades e estilos.
- Ajuda.
No menu lateral esquerdo mostra as opções de telas e elementos.
- Em telas há a opção de criar uma tela no ícone de ‘+’, visualizar as que já existem e ao clicar no ícone de ‘:’ na tela selecionada é possível copiar, substituir, duplicar ou excluir uma tela.
- Em elementos mostra a lista dos elementos presentes na tela selecionada, caso deseje excluir ou modificar a ordem de algum elemento é possível através dessa lista.
No menu lateral esquerdo, na opção do ícone de caixa há os componentes que podem ser utilizados na tela, para adicionar basta arrastar para a tela o componente desejado.
- Button – componente para um botão, em que se adiciona um evento clicável para realizar alguma ação
- Câmera - abre a camera do celular
- Carousel – componente de carrosel.
- Flex – Se comporta como uma div que usamos no html.
- Form
- Get – facilita o processo de uma requisição de get, utilizando as propriedades você colocará a url onde deve ser chamado o get.
- Icon – componente de ícones.
- Image – componente de imagem.
- Input – componente de campo em que será possivel o usuario escrever algo.
- Text – componente de texto.
- ListFetcher – componente que vai consultar uma lista de dados e mostrar na tela.
- Maps.
- Select – componente que mostrará opções para o cliente selecionar uma.
- Text Area - área de texto para se inserir informações.
- Webview.
No menu lateral direito, há a opção de propriedades e estilo, que podem se referir tanto à tela como um todo quando a um elemento, a depender do que esteja selecionado.
- É possível colocar em relação à tela um pathname para se referir à tela de outro local, colocá-la como inicial ou inserir uma tela de loading.
- Em relação a um elemento as propriedades vão variar de acordo com o tipo de elemento.
- Em events é possível adicionar um evento, como de Mount ou de Click. Para adicionar um código é preciso primeiro criar o evento em ‘+’ e colocar o tipo do evento.
- Em estilos, colocar o css que deseja.
No segundo ícone do menu lateral direito é o local em que será adicionado o código em relação ao evento criado anteriormente.
- Primeiro selecione o evento e no espaço do editor coloque o código para o evento. Já vem automaticamente a base do código, só basta adicionar o que deseja.
