quarta-feira, 11 de novembro de 2020

DICAS 3180 -WINDEV MOBILE TUTORIAL 6 - 27-11-2020-08_00Hrs- Lição 2.2. INTERFACE



https://youtu.be/5NbKUxJ3pCs



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

Esse Video Ao Vivo vai estrear as 08:00 do dia 27/11/2020-

DICAS 3180 -WINDEV MOBILE TUTORIAL 6 - 27-11-2020-08_00Hrs- Lição 2.2. INTERFACE  - PARTE A

ASSUNTOS

Interface (UI)
visão global
Escolher a resolução de acordo com o dispositivo
Entrando na descricao da janela em UI
Exemplo pratico
Como Centralizar controle 
Alinhamento  centralizar - Horizontal
Gerenciamento de touchscreen
Exemplo prático
Criando uma imagen
escolhendo uma imagen 
em detais, marcar automatic scroll and zoom
Gerando apk
Mostrando funcionamento no celular
os diferentes tipos de controles 
Proxima Licao : Distribuindo o aplicativo

Samsun , Android 10 , dpi 420 , 1080x2340




PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
PlayList Windev Mobile 
Amarildo
Donwloads Windev
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Inscricao Evento Pcsof
Site forum Google 
Video sobre 3 Mil Videos Windev 
Video sobre Alfaserver servidor 











Lição 2.2. Interface (UI)
Esta lição vai te ensinar os seguintes conceitos
  • Escolher a resolução de acordo com o dispositivo.
  • Orientação da janela.
  • Gerenciamento de tela sensível ao toque.
Duração da aula

Tempo estimado: 30 min
Lição AnteriorÍndicePróxima lição
visão global
O Android está disponível em telefones e tablets. WINDEV Mobile permite criar interfaces que se adaptam facilmente ao dispositivo utilizado.
Escolher a resolução de acordo com o dispositivo
Ao criar um projeto, você deverá escolher a resolução que será utilizada nas janelas do projeto. Dois casos podem ocorrer:
  • Você está usando um único dispositivo de destino : neste caso, tudo o que você precisa fazer é selecionar este dispositivo na lista proposta pelo assistente.
  • Você está usando vários dispositivos de destino com diferentes resoluções de tela : neste caso, você deve escolher a menor resolução comum a todos os dispositivos. Através da ancoragem de controles na janela, o conteúdo será adaptado à resolução.
Orientação da janela
No Android, uma janela pode ter uma das seguintes orientações:
  • Livre: a janela segue a orientação do dispositivo,
  • Bloqueado no modo retrato,
  • Bloqueado no modo paisagem.
Esta orientação é definida na guia "UI" da descrição da janela ("Descrição" no menu pop-up da janela).
Descrição da janela
Nos dois últimos casos, nenhuma operação específica é necessária.
Para uma janela livre, a organização dos controles e seu tamanho devem se adaptar à orientação. O mecanismo de ancoragem deve ser usado para obter um resultado adequado.

Exemplo prático

  • Abra (se necessário) o projeto "My_Android_Project" que foi criado na lição anterior.

    Responda

    Um projeto corrigido está disponível. Para abrir este projeto, na página inicial do WINDEV Mobile (Ctrl + <), clique em "Tutorial" e selecione "Meu projeto Android (Resposta)".
Em nosso exemplo, o projeto foi criado para um telefone e foi testado no modo retrato no simulador.
We are now going to run its test in landscape mode in the simulator.
  • Run the project test in simulator mode:
    1. In the quick access button area, expand "GO" if necessary and select " Teste no modo simulador Debug on XXX simulator".
      Teste no modo simulador

      Remark

      By default, the project test on a mobile device is proposed among the quick access buttons. After selecting " Depurar no simulador Debug on simulator" for the first time, the corresponding icon ( Depurar no simulador ) will be automatically proposed among the quick access buttons.
    2. Validate (if necessary) the window that opens up.
    3. The window is displayed in portrait mode.
    4. The simulator shows an icon-based menu: Menu do simulador.
    5. Modify the window orientation with the "Rotation" option. Mudando a orientação da janela
    6. A orientação da janela muda na tela. Em nosso exemplo, a localização do botão não muda: ele não se adapta à orientação da tela.
      Janela em modo retrato
      Janela em modo paisagem
  • Agora vamos modificar nossa janela para que o controle do botão "Exibir" seja centralizado e permaneça centralizado independentemente da orientação do dispositivo.
  • Pare o teste e volte para o editor.
  • Para centralizar o controle de botão na janela:
    1. Selecione o controle (clique no controle Botão).
    2. No painel "Alinhamento", no grupo "Centralização e distribuição", clique em "Centralizar no pai (Horz.)".
  • Para que o controle Button permaneça centralizado na janela, usaremos a ancoragem de controle:
    1. Selecione o controle, se necessário.
    2. Abra o menu pop-up (clique com o botão direito).
    3. Selecione "Âncora": a janela para definir as âncoras é exibida:
      Gerenciando âncoras
    4. Select "Horizontally centered" and validate ("OK" button).

      Remark

      In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
  • Run the project test on simulator ( Executar teste de projeto among the quick access buttons):
    • The button is centered in portrait mode.
    • Change the orientation of simulator.
    • The button remains centered in landscape mode.
Touchscreen management
One of the most important aspects of the interface for a mobile application is the touchscreen management.
A "multi-touch" feature is a technique allowing the user to interact with a device via several contact points.
Handling images is one of the most common multi-touch features. The display size on a phone being reduced, it is often necessary to zoom an image and/or to move inside an image.
This allows you to perform a zoom on an image via the contact of 2 fingers moving apart.
To manage the "multi-touch", WINDEV Mobile proposes:
  • Specific options available in the Image control.
  • Specific WLanguage functions.
  • Specific optional processes.
See Managing the multi-touch for more details.

Practical example

  • Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.

    Answer

    A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)".
  • Na janela "WIN_Welcome", crie um controle de imagem:
    1. No painel "Criação", no grupo "Controles usuais", clique em "Imagem".
    2. O controle de imagem aparece no modo de criação sob o cursor.
    3. Mova o mouse na janela em direção à posição onde o controle será criado. Para soltar o controle na janela, basta clicar novamente.
    4. Clique duas vezes no controle Imagem: a janela de descrição do controle é exibida.
    5. Na guia "Geral", selecione uma imagem do seu disco no controle de edição "Imagem" (via Menu pop-up de uma imagem"Navegar").
    6. Se a imagem estiver localizada em um diretório diferente do diretório do projeto, o WINDEV Mobile propõe a cópia do arquivo de imagem para o diretório do projeto. Aceite clicando em "Copiar arquivo para o diretório sugerido".
    7. Display the "Details" tab: the options for multi-touch management are displayed:
      Descrevendo o controle de imagem
    8. Select "Automatic scroll and zoom".
    9. Validate the control description window.
    10. Save the window (click Salve o elemento among the quick access buttons).
    11. A UI error appears in the error pane: the automatic window scrollbars are in conflict with the scrolling features of Image control.
    12. To avoid this UI error, disable the window scrollbars:
      • Open the window description ("Description" in the popup menu).
      • In the "UI" tab, uncheck "Automatic Scrollbars".
      • Validate the description window.
    13. Save the window (click Salve o elemento among the quick access buttons). The UI error disappears.

      Remark

      O gerenciamento multi-touch não pode ser verificado no simulador. Para verificar esse recurso, o aplicativo deve ser testado (ou implantado) no dispositivo móvel.
    14. Feche o projeto.
Os diferentes tipos de controles
WINDEV Mobile propõe vários controles. Esses controles são usados ​​para exibir ou inserir dados. Alguns controles são projetados especificamente para uma interface móvel.
Para desenvolver seus aplicativos, você pode usar os controles padrão (controles de edição, imagens, botões de opção e caixas de seleção), mas também controles mais específicos, como:
  • o controle Multiline Zone para criar interfaces (UI) semelhantes às janelas nativas do Android,
  • o controle de mapa para visualizar uma posição em um mapa ou itinerário,
  • o controle de anúncio para exibir um banner de publicidade,
  • o menu em forma de "Barra de ação".
Alguns desses controles serão apresentados na lição “ Desenvolvimento de um aplicativo para Android e iOS ”.

Teste

Teste
teste