sexta-feira, 6 de novembro de 2020

DICAS 3174 -WINDEV MOBILE TUTORIAL 3 - 21-11-2020-10_00Hrs- Lição 2.1. Meu Primeiro Projeto Android - PARTE A



https://youtu.be/3eAGfN4Cjgg



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

Esse Video Ao Vivo vai estrear as 10:00 do dia 21/11/2020-

DICAS 3174 -WINDEV MOBILE TUTORIAL 3 - 21-11-2020-10_00Hrs- Lição 2.1. Meu Primeiro Projeto Android - PARTE A

ASSUNTOS


Meu primeiro projeto Android
visão global
Configuração necessária para Android
Meu primeiro projeto
Criando o projeto
Criado Mobile_meu_primeiro_projeto_amarildo
Explicando cada passo da primeira criação do projeto 
Proxima Lição: Minha primeira janela 








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.1. Meu primeiro projeto Android
Esta lição vai te ensinar os seguintes conceitos
  • Configuração necessária.
  • Criando um projeto Android.
  • Minha primeira janela.
  • Meu primeiro teste.
  • Primeira implantação.
Duração

Tempo estimado: 1 h
Lição AnteriorÍndicePróxima lição
visão global
Para começar a desenvolver com WINDEV Mobile para uma plataforma Android, vamos criar um primeiro projeto. Este projeto conterá uma janela usada para exibir uma mensagem.
Este primeiro exemplo apresentará os principais conceitos de desenvolvimento para Android com WINDEV Mobile.
Antes de criar nosso primeiro projeto para Android, o computador de desenvolvimento deve ser configurado.
Configuração necessária para Android
Para desenvolver um aplicativo para a plataforma Android, os seguintes elementos devem ser instalados no computador de desenvolvimento:
  • O JDK: O JDK (Java Development Kit) distribuído pela Oracle é usado para compilar os arquivos Java gerados.
  • O Android SDK do Google: O Android SDK (Software Development Kit) é um conjunto de arquivos e aplicativos distribuídos pelo Google com o objetivo de permitir a compilação de aplicativos para o sistema operacional Android.
    Cuidado : O Android SDK inclui seções correspondentes às versões das plataformas do dispositivo (5, 6, 7, ...).
    O download e a configuração do Android SDK são propostos se necessário ao gerar o aplicativo Android a partir do WINDEV Mobile.
  • Ferramenta Gradle: esta ferramenta é necessária para compilar e gerar aplicativos Android. O Gradle pode ser baixado e instalado, se necessário, ao gerar o aplicativo Android do WINDEV Mobile.
Consulte Instalando ferramentas para desenvolvimento Android para obter mais detalhes (endereços de download, ...).
Aconselhamos você a reiniciar o computador após a instalação do JDK e do SDK.
Meu primeiro projeto

Criando o projeto

Agora vamos criar nosso primeiro projeto para Android.

Responda

Um projeto corrigido está disponível. Para abrir este projeto:
  1. Exibir a página inicial do WINDEV Mobile (Ctrl + <).
  2. Clique em "Tutorial" e selecione "Meu projeto Android (Resposta)".
  • Para criar um projeto:
    1. Inicie o WINDEV Mobile 25 (se necessário).
    2. Exiba a página inicial do WINDEV Mobile se necessário (Ctrl + <).
    3. Na página inicial, clique em "Criar um projeto" e depois em "Aplicativo Android ou iOS".
      Pagina inicial
    4. O assistente de criação de projeto é iniciado. As diferentes etapas do assistente ajudam você a criar seu projeto. As informações especificadas neste assistente podem ser modificadas posteriormente.

      Observação

      Dica: Outro método para criar um projeto:
      1. Clique Crie um elementoentre os botões de acesso rápido do menu WINDEV Mobile.
      2. A janela de criação do elemento aparecerá: clique em "Projeto".
    5. A primeira etapa do assistente permite definir a plataforma de execução do projeto:
      Plataforma de execução
      Em nosso caso, selecione "Somente Android" e vá para a próxima etapa do assistente.
    6. O assistente propõe a criação de um projeto em branco ou baseado em um exemplo. Escolha "Criar um projeto em branco" e vá para a próxima etapa.
    7. O assistente propõe escolher o tipo de dispositivos Android afetados pelo projeto:
      • Gere um aplicativo para celulares e tablets.
      • Gere um aplicativo para telefones.
      • Gere um aplicativo para tablets.
      • Gere um aplicativo para um dispositivo específico.

        Observação

        Se o aplicativo se destina a operar em vários dispositivos Android (telefones com diferentes tamanhos ou resoluções, por exemplo), recomendamos que você use uma das seguintes opções:
        • “Gerar um aplicativo para celulares e tablets”,
        • "Gerar um aplicativo para telefones".
        Neste caso, WINDEV Mobile propõe a menor resolução para criar as janelas da aplicação. O uso de âncoras (consulte a Lição 2.2 Interface (IU) e a Lição 5.2 Desenvolvendo o aplicativo ) permitirá que o aplicativo opere em todos os dispositivos.
        Escolhendo dispositivos
    8. Neste exemplo, vamos gerar um aplicativo para telefones. Selecione "Gerar um aplicativo para telefones" e vá para a próxima etapa.

      Observação

      Você possui um dispositivo Android e deseja executar o teste de aplicativo neste dispositivo? Selecione "Gerar um aplicativo para um dispositivo específico". A próxima etapa do assistente permite selecionar o dispositivo desejado.
    9. O assistente propõe digitar o nome do projeto, sua localização e sua descrição. No nosso caso, este projeto será denominado "My_Android_Project". O WINDEV Mobile propõe a criação deste projeto no diretório "\ My Mobile projects \ My_Android_Project". Você pode manter este local ou modificá-lo através [...] do botão.
      Assistente de criação de projeto
    10. Vá para a próxima etapa.
    11. O assistente propõe adicionar documentos. Vá para a próxima etapa.
    12. Esta etapa permite que você use o Source Code Manager (SCM). Não o usaremos neste exemplo. Selecione "Não, não use SCM". Vá para a próxima etapa.

      Expressar

      Observação: O Source Code Manager (SCM) não está disponível na versão Express.
    13. Esta etapa é usada para definir o estilo do código. Não modifique as opções sugeridas. Vá para a próxima etapa.
    14. Esta etapa é usada para definir o livro de estilos do aplicativo. Manteremos o "Material Design Blue 2".
      Escolha do livro de estilo
    15. As outras etapas do assistente não são importantes para nosso primeiro projeto. Clique em "Concluir" diretamente. O projeto é criado automaticamente.
    16. A janela de criação de elemento é exibida. Esta janela é usada para criar todos os elementos que podem ser associados a um projeto.

quinta-feira, 5 de novembro de 2020

DICAS 3173 -WEBDEV TUTORIAL 104 - 20-11-2020-10_00Hrs- Conceitos Avançados - Web Design Responsivo - PARTE B - FINAL



https://youtu.be/MSfWvBI8nAk



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

Esse Video Ao Vivo vai estrear as 10:00 do dia 20/11/2020-

DICAS 3173 -WEBDEV TUTORIAL 104 - 20-11-2020-10_00Hrs- Conceitos Avançados - Web Design Responsivo - PARTE B

ASSUNTOS


Dica Top - Como criar celula a partir de controles 


Ordem dos controles no modo Web Design Responsivo
Selecionando as 3 imagens e selecionar ancora 
Nova Dica, podemos selecionar varios controles 
no mode mobile, colocar os controles que sairam fora para baixo
Por que esses erros ocorrem?
Explicando o que tem de ser feito
Criando celular para imagen mais estatico
Voltar o que tinhamos feito com control Z
e voltar para desktop e criar as celular 
Como criar Celula?
Painel Modificacao , Transformacoes , Refatoracao e troca,
Criar controle celula a partir selecao
Alterar a ancoda das celular para fixo
voltar mobile e fazer novamente a alteracao 
Consideracoes finais 
proxima licao: Gerenciando layouts


DICAS 3067 -WEBDEV TUTORIAL 1-Licao 1.1-14-09-2020 11hrs-DESCUBRA WEBDEV
DICAS 3068 -WEBDEV TUTORIAL 1-Licao 1.2-14-09-2020 15hrs-Web development and WEBDEV - PARTE A
DICAS 3069 -WEBDEV TUTORIAL 3-Licao 1.2-14-09-2020 16hrs-Web development and WEBDEV - PARTE B






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 












Ordem dos controles no modo Web Design Responsivo
Vimos que as páginas no modo Responsive Web Design se adaptam de acordo com o tamanho do navegador. O mecanismo de override por slice permite modificar a interface de acordo com o slice desejado, principalmente a posição dos controles.
Você deve prestar muita atenção a esta modificação de posição. Na verdade, em uma página responsiva, você não pode alterar a ordem dos controles na página .
  • Para entender a gestão da ordem dos controles:
    1. Abra o projeto "WW_Responsive" se necessário. Para isso, na página inicial do WEBDEV, clique em "Tutorial" e selecione "Web Design Responsivo (Exercício)".
    2. Abra a página PAGE_ControlOrder.
  • Vamos estudar esta página:
    1. Na fatia Desktop, 3 produtos são apresentados horizontalmente.
    2. Clique no cabeçalho da fatia móvel.
    3. Na fatia Mobile, as imagens do produto são muito pequenas.
  • No Mobile, os controles devem ter o mesmo tamanho que na fatia da área de trabalho e uma imagem deve ser movida.
  • Volte para a fatia da área de trabalho para modificar as âncoras de controle.
    1. Selecione os controles de imagem e os controles estáticos associados.
    2. Exiba o menu pop-up e selecione "Ancorar".
    3. Na janela exibida, selecione "Largura fixa".
    4. Valide a janela de ancoragem.
    5. Salve a página (Ctrl + S). Ocorrem dois erros de compilação.
      Esses erros indicam que os controles IMG_Product_3 e RTA_The_traditional_French_dishes estouram a página no final da fatia do Tablet.
    6. Clique na fatia do Tablet. Mova o cursor "Largura do navegador" para a esquerda. Na verdade, de uma dimensão específica do navegador, a imagem e a legenda do terceiro produto não cabem mais na página.
    7. Selecione esses dois controles na fatia do Tablet e mova-os abaixo dos dois primeiros.
    8. Salve a página (Ctrl + S).
    9. Novos erros de IU ocorrem no painel de erros de compilação.
    10. Esses erros são erros relacionados à ordem de exibição.
Por que esses erros ocorrem?
Este caso de uso é bastante comum e é importante entender o princípio usado.
Cada controle é posicionado em relação ao seu controle anterior.
Em nosso exemplo, cada imagem é posicionada em relação à imagem anterior. É o mesmo para os controles estáticos.
A primeira estática à esquerda (número 4 no exemplo) é posicionada em relação à última imagem (número 3 em nosso exemplo).
Quando a imagem e sua estática associada foram movidas para a fatia do Tablet (imagem 3 e estática 6 em nosso exemplo), a estática 4 foi posicionada "acima" de seu controle de "referência" (imagem 3, ao lado do qual deveria estar).
Este posicionamento não é possível no Responsive Web Design. Portanto, novos erros de IU foram exibidos.
Para guiá-lo, a área onde a ordem de exibição foi alterada é delimitada por pontos vermelhos.
  • Para corrigir esse problema, basta especificar a semântica em nível de texto. No nosso caso, cada controle Image deve estar vinculado ao seu estático: basta criar células ao redor de cada "produto" (imagem + estático). A célula deve ter uma âncora de "largura fixa".

    Observação

    Na maioria dos casos, no modo Responsive Web Design, para agrupar controles e obter o mesmo modo de operação para cada controle do grupo, aconselhamos incluí-los em uma célula.
  • Para aplicar essas correções em nossa página, vamos excluir todas as substituições realizadas na fatia do Tablet:
    1. Exiba o menu pop-up do Tablet slice (clique com o botão direito no cabeçalho da seção).
    2. Selecione "Lista de substituições de fatias".
    3. Na janela que aparece, selecione todas as substituições e clique em "Excluir".
    4. Valide a janela.
  • Para criar uma célula contendo um ou mais controles existentes:
    1. Exiba a fatia da área de trabalho, se necessário.
    2. Selecione os controles (a primeira imagem à esquerda e sua estática, por exemplo).
    3. No painel "Modificação", no grupo "Transformações", expanda "Refatoração e troca" e selecione "Criar um controle de célula a partir da seleção".
    4. Selecione a célula. Selecione "Âncora" no menu pop-up.
    5. Na janela de ancoragem, selecione "Largura fixa" para ancorar na largura.
    6. Validar.
    7. Execute essas operações novamente para os outros dois grupos de controles.
  • Agora vamos reposicionar os controles na fatia do Tablet:
    1. Mude para a fatia do Tablet.
    2. Selecione a célula que contém os dois últimos controles e mova esta célula abaixo dos dois primeiros controles.
    3. Salve a página (Ctrl + S). Nenhum erro de compilação é exibido.

Teste

Teste
teste