sexta-feira, 20 de novembro de 2020

DICAS 3186 -WINDEV MOBILE TUTORIAL 9 - 03-12-2020-08_00Hrs- Lição 3.2. Interface - Licao 3.3. Distribuindo aplicativo



https://youtu.be/K3wyVXjuDds



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

Esse Video Ao Vivo vai estrear as 08:00 do dia 03/12/2020-
DICAS 3186 -WINDEV MOBILE TUTORIAL 9 - 03-12-2020-08_00Hrs- Lição 3.2. Interface - Licao 3.3. Distribuindo aplicativo  - PARTE A

ASSUNTOS


Interface (UI)
visão global
Escolher a resolução de acordo com o dispositivo
Orientação da janela
Exemplo prático
Centralizar botao mostra 
Ancorar botao 
Gerenciamento de touchscreen
criando controle imagen 
Mudando a rolagem e zoom automatico da imagen 
Os diferentes tipos de controles
Distribuindo o Aplicativo
Desdobramento, desenvolvimento
Proxima Licao : Lição 4.1. Conceitos e terminologia








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 3.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: 20 min
Lição AnteriorÍndicePróxima lição
visão global
O sistema iOS está disponível nos telefones (iPhone), nos tablets (iPad) e no iPod. 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ê deve escolher o dispositivo no qual o aplicativo será implantado:
  • Iphone,
  • iPad,
  • iPhone e iPad.
Dois casos podem ocorrer:
  • Você conhece o dispositivo de destino : neste caso, tudo o que você precisa fazer é selecioná-lo. O assistente para criação de janela permitirá que você crie janelas para este dispositivo de destino.
  • Você não conhece o dispositivo de destino : neste caso, no assistente para criação do projeto, selecione "iPhone e iPad". Ao criar as janelas, você pode:
    • desenvolva suas janelas para o iPhone. Através da ancoragem de controles na janela, o conteúdo será adaptado para o iPad (solução recomendada).
    • use os layouts para criar diferentes interfaces de acordo com a plataforma de tempo de execução e sua resolução.
    • desenvolver 2 conjuntos de janelas, um para iPhone e outro para iPad.
Orientação da janela
No iPhone ou iPad, 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. Essa 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_iOS_Project" que foi criado na lição anterior.

    Responda

    Um projeto corrigido está disponível. Este projeto contém as diferentes janelas criadas nesta lição. Para abrir o projeto corrigido, na página inicial do WINDEV Mobile (Ctrl + <), clique em "Tutorial" e selecione "Meu projeto iOS (Resposta)".
Em nosso exemplo, o projeto foi criado para um telefone e o testamos no modo retrato no simulador.
Agora vamos executar seu teste em modo paisagem no simulador.
  • Execute o teste do projeto no modo simulador:
    1. Na área do botão de acesso rápido, expanda (se necessário) " Executar teste de projeto" e selecione " Depurar no simulador iPhone xxxDebug on iPhone xxx simulator".
      Modos de teste

      Observação

      Por padrão, o teste do projeto em um dispositivo móvel é proposto entre os botões de acesso rápido. Após selecionar " Depurar no simuladorDepurar no simulador" pela primeira vez, o ícone correspondente ( Depurar no simulador) será automaticamente proposto entre os botões de acesso rápido.
    2. Valide (se necessário) a janela que se abre.
    3. A janela é exibida no modo retrato.
    4. O simulador mostra um menu baseado em ícones: Menu do simulador.
    5. Modifique a orientação da janela com a opção "Rotação". 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 Botão (clique no controle).
    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:
      Janela de gerenciamento de âncora
    4. Selecione "Centrado horizontalmente" e valide (botão "OK").

Observação

Na janela exibida no editor, você notará as pequenas setas vermelhas no controle. Essas setas indicam que o controle está ancorado.
  • Execute o teste do projeto no modo simulador ( Executar teste de projetoentre os botões de acesso rápido):
    • O botão está centralizado no modo retrato.
    • Mude a orientação do simulador.
    • O botão permanece centralizado no modo paisagem.
Gerenciamento de touchscreen
Um dos aspectos mais importantes da interface de um aplicativo móvel é o gerenciamento da tela de toque.
Um recurso "multitoque" é uma técnica que permite ao usuário interagir com um dispositivo por meio de vários pontos de contato.
O tratamento de imagens é um dos recursos multitoque mais comuns. O tamanho da tela de um telefone sendo reduzido, muitas vezes é necessário ampliar uma imagem e / ou mover dentro de uma imagem.
Isso permite que você aplique zoom em uma imagem por meio do contato de 2 dedos se afastando.
Para gerir o "multitoque", o WINDEV Mobile propõe:
  • Opções específicas disponíveis no controle Imagem.
  • Funções específicas do WLanguage.
  • Eventos opcionais específicos.
Consulte Gerenciando o multi-touch para obter mais detalhes.

Exemplo prático

  • Abra (se necessário) o projeto "My_iOS_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 iOS (Resposta)".
  • 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 popup"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 no botão "Copiar o arquivo para o diretório sugerido".
    7. Exiba a guia "Detalhes": as opções para gerenciamento multitoque são exibidas:
      Descrevendo o controle de imagem
    8. Selecione "Rolagem e zoom automáticos".
    9. Valide a janela de descrição do controle.
    10. Salve a janela (clique Salve o elementoentre os botões de acesso rápido).
    11. Um erro de IU aparece no painel de erro: as barras de rolagem da janela automática estão em conflito com os recursos de rolagem dos controles de imagem.
    12. Para evitar esse erro de IU, desative as barras de rolagem da janela:
      • Abra a descrição da janela ("Descrição" no menu pop-up).
      • Na guia "UI", desmarque "Barras de rolagem automáticas".
      • Valide a janela de descrição.
    13. Salve a janela (clique Salve o elementoentre os botões de acesso rápido). O erro da IU desaparece.

      Observação

      O gerenciamento multi-touch não pode ser verificado no simulador. Para verificar esse recurso, o aplicativo deve ser implantado no dispositivo móvel. Veremos como proceder na seção "Android e iOS: Implementando um aplicativo" .
    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 iOS.
  • o controle de mapa para visualizar uma posição em um mapa ou um itinerário.
Alguns desses controles serão apresentados na lição "Android e iOS: desenvolvendo um aplicativo" .

Lição 3.3. Distribuindo o aplicativo
Esta lição vai te ensinar os seguintes conceitos
  • Modos de distribuição disponíveis.
Duração da aula

Tempo estimado: 5 minutos
Lição AnteriorÍndicePróxima lição
visão global
WINDEV Mobile permite desenvolver aplicativos para iOS.
Uma vez que os aplicativos são criados, desenvolvidos e verificados, tudo que você precisa fazer é implantá-los.
Desdobramento, desenvolvimento
Três métodos podem ser usados ​​para implantar o aplicativo em um dispositivo (iPhone ou iPad).
  • Via App Store: Este tipo de distribuição permite que você distribua seu aplicativo por meio da App Store sem quaisquer restrições. Seu aplicativo incluirá a assinatura vinculada ao seu certificado, mas não será vinculado a um único dispositivo.
  • Via rede interna: este tipo de distribuição permite distribuir seu aplicativo por meio de um servidor Web a um grupo de usuários que trabalham para a mesma empresa. Para usar este tipo de distribuição, você deve se registrar no Apple Developer Enterprise Program. Seu aplicativo incluirá a assinatura vinculada ao seu certificado, mas não será vinculado a um único dispositivo.
  • Via rede Ad Hoc: Este tipo de distribuição permite instalar o aplicativo em uma rede Ad Hoc com até 100 dispositivos (iPhone e iPad). O aplicativo deve ser recompilado para o dispositivo de destino, incluindo o certificado para a assinatura, bem como o identificador exclusivo do dispositivo.
Cuidado : Para testar e / ou implantar o aplicativo em um iPhone ou iPad, você deve se inscrever no Apple Developer Program. Este registro não é gratuito. Para mais informações, siga os links abaixo:
Existem diferentes tipos de associação:
  • Apple Developer Program - Indivíduos
  • Programa para Desenvolvedores Apple - Organizações
  • Apple Developer Program - Enterprise
Esta associação inclui um certificado de desenvolvedor que permite assinar aplicativos para compilá-los e distribuí-los. Este certificado não é gratuito. Este certificado de desenvolvedor é necessário até mesmo para uma configuração simples de teste (depuração) em um dispositivo.

Teste

Teste
teste