domingo, 8 de novembro de 2020

DICAS 3176 -WINDEV MOBILE TUTORIAL 4 - 23-11-2020-08_00Hrs- Lição 2.1. Meu Primeiro Projeto Android - Primeira Janela - PARTE B



https://youtu.be/lYQcDyUXlRs



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3176 -WINDEV MOBILE TUTORIAL 4 - 23-11-2020-08_00Hrs- Lição 2.1. Meu Primeiro Projeto Android - Primeira Janela - PARTE B


ASSUNTOS


Minha primeira janela
visao global
criando a janela 
Exibindo uma mensagem
Criando um botao 
o Nome do botao sera exibicao
mostrar uma mensagem em uma caixa de diálogo
Entrar no codigo do botao 
digigar info para mostrar alguma informacao
Salvar 
Primeiro teste
Proxima Licao: Primeira Implantação no dispositivo



DICAS 3169 -WINDEV MOBILE TUTORIAL 1 - 17-11-2020-10_00Hrs- INTRODUCAO 




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 












Minha primeira janela

visão global

A primeira janela permite ao usuário exibir uma mensagem de boas-vindas através do botão "Exibir".
Você pode achar que isso é muito básico, mas recomendamos que você crie esta janela. Você pode se surpreender com o quão intuitivo e fácil é usar o editor do WINDEV Mobile. Além disso, esta janela permitirá que você descubra conceitos fundamentais para o restante deste tutorial e veja todo o processo de desenvolvimento de um aplicativo Android com WINDEV Mobile.

Criando a janela

  • Para criar a janela:
    1. Na janela de criação de um novo elemento, clique em "Janela" e depois em "Janela".

      Observação

      Conforme um novo projeto é criado, a janela para criação de um novo elemento é exibida automaticamente.
      Para exibir a janela de criação de um novo elemento, basta clicar Crie um novo elementoentre os botões de acesso rápido do WINDEV Mobile:
      Botões de acesso rápido
    2. O assistente de criação de janela é iniciado.
    3. Na lista de janelas propostas, selecione "Em branco". O modelo de skin usado é exibido na parte inferior direita do assistente. "Material Design Blue 2", o modelo de skin que foi selecionado ao criar o projeto é selecionado por padrão.

      Observação

      Os modelos de skin permitem que você crie rapidamente interfaces excelentes. Um modelo de capa define o estilo da janela, bem como o estilo de todos os controles que serão usados ​​nesta janela. Assim, não há risco de obter uma interface feia.
    4. Validar. A janela é criada automaticamente no editor. A janela para salvar um elemento é exibida. Esta janela é usada para especificar:
      • o título do elemento. Para uma janela, este título será exibido na Barra de ação da janela.
      • o nome do elemento que corresponde ao nome da janela. Este nome será usado na programação.
      • a localização do elemento. Esta localização corresponde ao diretório no qual o arquivo físico correspondente ao elemento é salvo. A janela é um arquivo "WDW", salvo no diretório do projeto.
    5. Especifique o título do elemento: "Bem-vindo". O nome do elemento é proposto automaticamente: "WIN_Welcome".
      Salvando um elemento

      Observação

      Vejamos o nome da janela proposto pelo WINDEV Mobile: este nome começa com as letras "WIN_". Este prefixo é adicionado automaticamente porque o projeto usa um estilo de código.
      O estilo de código é usado para definir um prefixo para cada tipo de objeto, permitindo que você identifique rapidamente o elemento:
      • uma janela começa com "WIN_",
      • um botão começa com "BTN_",
      • etc.
      Se você não quiser usar este estilo de código, você pode simplesmente desativá-lo: no painel "Projeto", no grupo "Outras ações", expanda "Estilo de código" e desmarque "Usar estilo de código".
    6. Salve a janela clicando em "OK".

Exibindo uma mensagem

Agora você vai criar um controle de botão usado para exibir uma mensagem.
  • Para criar o controle do botão "Exibir":
    1. No painel "Criação", no grupo "Controles usuais", clique em Criação de um controle de botão. O controle aparece no modo de criação sob o ponteiro do mouse.
    2. Mova o mouse em direção à posição onde o controle será criado na janela (no topo da janela, por exemplo). Para soltar o controle na janela, basta clicar na janela.
    3. Clique com o botão direito no controle que acabou de ser criado. O menu pop-up de controle é exibido. Selecione "Descrição" neste menu pop-up. A janela de descrição do controle de botão é exibida.
  • Modifique as características de controle inserindo as seguintes informações:
    Descrição do controle de botão
    1. Este controle é denominado: "BTN_Display".
    2. A legenda do controle é: "Display".

Observação

Para modificar o nome e a legenda do controle Button, usamos a janela de descrição do controle (também chamada de "janela de 7 guias").
O nome do controle e a legenda também podem ser modificados na janela que está sendo editada:
  1. Clique no controle para selecioná-lo.
  2. Pressione a tecla Enter ou Espaço: a legenda se torna editável.
  3. Digite a nova legenda e valide.
  • Valide a janela de descrição do controle (botão "OK"). A nova legenda de controle aparece no editor de janela.
  • Vamos mostrar uma mensagem em uma caixa de diálogo (uma pequena janela proposta pelo sistema). Para fazer isso, usaremos nossa primeira função WLanguage: Info .

    Observação

    A linguagem de programação fornecida com WINDEV Mobile é denominada WLanguage. É uma linguagem de 5ª geração (5GL) que inclui comandos altamente sofisticados.
    1. Selecione o controle, se necessário.
      Observações:
      • Quando o controle é selecionado, várias alças aparecem ao redor do controle.
      • Para selecionar um controle, basta clicar nele.
    2. Abra o menu popup do controle (clique com o botão direito).
    3. Selecione "Código". Esta opção abre o editor de código do WINDEV Mobile, no qual todas as instruções WLanguage podem ser digitadas.

      Observação

      O editor de código propõe eventos diferentes para cada tipo de controle. Estes são os eventos relacionados ao controle.
      Portanto, dois eventos são exibidos para o controle "Botão":
      • "Inicializando", execute quando a janela for exibida.
      • "Clique", executado quando o usuário clicar no controle.
      Observação: eventos adicionais podem ser adicionados, se necessário.
    4. Escreva o seguinte código WLanguage no evento "Click" do controle "BTN_Display":
      Informações ( "Olá" )
Nota sobre a entrada assistida : Assim que os primeiros dois caracteres são digitados, o WINDEV Mobile propõe todas as palavras do vocabulário WLanguage que contenham esses caracteres. O desenvolvimento assistido é um recurso muito poderoso. Chega de erros ao inserir o nome de um elemento: os erros de sintaxe são reduzidos. Basta selecionar a palavra desejada e pressionar Enter para validar. Você pode se concentrar no algoritmo.

Observação

Ao digitar este código WLanguage no editor de código, você provavelmente notou que os diferentes elementos usam cores diferentes. Isso é chamado de realce de sintaxe. O editor de código permite que você identifique facilmente os diferentes elementos manipulados pelo código:
  • as funções WLanguage são coloridas em azul,
  • as cadeias de caracteres (entre aspas) são coloridas em roxo,
  • os nomes dos controles são coloridos em ciano.
Estas cores podem ser modificadas elemento a elemento nas opções do editor de código (no painel "Home", no grupo "Ambiente", expanda "Opções" e selecione "Opções do editor de código").
Info exibe a mensagem passada como parâmetro.
  • Salve as modificações clicando Salve o elementono botão de acesso rápido ou pressionando Ctrl + S.
  • Feche o editor de código (cruze no canto superior direito do editor de código). O editor de janela é exibido novamente.
Primeiro teste
Para um aplicativo Android, WINDEV Mobile permite que você execute o teste do aplicativo no computador de desenvolvimento por meio do modo de simulação. Este teste simula um dispositivo Android no computador de desenvolvimento. Este teste é útil quando nenhum dispositivo Android pode ser usado pelo desenvolvedor. No entanto, este teste não permite a utilização dos componentes de hardware do dispositivo (GPS, SMS, câmera, ...).

Observação

WINDEV Mobile também permite que você execute um teste do aplicativo por meio do emulador Android (AVD) fornecido com o SDK.
Consulte Testar com emulador Android para obter mais detalhes.
  • Vamos agora executar o teste de janela no modo de simulação.
    1. Clique Executando o teste da janelaentre os botões de acesso rápido (ou pressione F9).
    2. Valide (se necessário) a mensagem informativa sobre o modo simulador.
    3. Escolha (se necessário) o modo de gerenciamento do editor durante o teste (editor minimizado ou não).
    4. A janela criada é iniciada em execução.
    5. Clique no botão "Exibir".
    6. Valide a janela do sistema que é exibida.
      Teste de janela
  • Qualquer desenvolvedor sabe que executar um teste de programa pode ser um trabalho longo e cansativo. No WINDEV Mobile, um ÚNICO CLIQUE permite executar o teste da janela, relatório ou procedimento enquanto o está criando. Isso é simples e rápido!
  • Clique em "x" no menu acima da caixa do simulador para fechar a janela.

    sábado, 7 de novembro de 2020

    DICAS 3175 -WEBDEV TUTORIAL 105 - 22-11-2020-10_00Hrs- Gerenciando Layouts -



    https://youtu.be/I-UOuGutLYk




    Bom Dia Boa Tarde Boa Noite

    Seja Membro do Canal

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

    DICAS 3175 -WEBDEV TUTORIAL 105 - 22-11-2020-10_00Hrs- Gerenciando Layouts - Parte A

    ASSUNTOS

    Gerenciando layouts

    visão global
    Implementação
    Criando uma pagina layout 
    Em Page,Layout,Criando um layout na pagina 
    Manipulação de layouts
    Gerenciando controles nos layouts
    manipular um controle de forma independente nos diferentes layouts
    Características dos 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 











    Gerenciando layouts
    visão global
    Os layouts são usados ​​para definir várias visualizações de uma janela / página no mesmo projeto sem duplicar esta janela / página.
    WINDEVWINDEV MobileAssim, numa aplicação WINDEV ou WINDEV Mobile , pode definir, por exemplo:
    • uma visão específica para o modo retrato,
    • uma visão específica para o modo paisagem,
    • uma visão específica do telefone,
    • uma visão específica para o tablet,
    • ...
    Em tempo de execução, você pode:
    Novo na versão 25
    WEBDEV - Código do servidor WEBDEV oferece várias soluções para criar sites compatíveis com dispositivos móveis: Web Design Responsivo (ou RWD), Servidores e layouts dinâmicos.
    Em um site WEBDEV , você pode definir:
    • uma visão específica para o modo Desktop,
    • uma visualização específica para o modo móvel, etc.
    Em tempo de execução, você pode:
    Layouts são outra maneira de tornar um site otimizado para celular . Ao contrário do modo Responsive Web Design (RWD), os layouts não têm restrições na ordem dos controles.
    Assim, os layouts permitem que você:
    • faça designs que não podem ser feitos facilmente em RWD.
    • Crie facilmente elementos em um layout e os oculte em outro layout.
    Esta página de ajuda apresenta:
    Implementação
    AndroidiPhone / iPadAplicativo universal do Windows 10 

    Criando um novo layout para uma janela móvel

    Para criar um novo layout para uma janela:
    1. Abra a janela relevante no editor.
    2. No painel "Janela", no grupo "Layouts", expanda "Layouts" e selecione "Adicionar layouts".
      Adicionar layouts
    3. O assistente para adicionar um layout é iniciado. Passe na etapa de apresentação, se necessário.
    4. O assistente se propõe a gerenciar as diferenças entre o telefone e o tablet.
      Diferenças entre tablet / telefone
      Você pode:
      • Escolha a plataforma atual apenas (apenas telefone ou apenas tablet).
      • Crie layouts (porque os controles são organizados de forma diferente no tablet e no telefone).
      • Use apenas as âncoras (porque as âncoras são suficientes para reposicionar os controles na janela de acordo com seu tamanho).
    5. Vá para a próxima etapa do assistente.
    6. O assistente propõe gerenciar a orientação Retrato / Paisagem do aplicativo.
      Foto em paisagem
      Você pode:
      • Crie layouts (porque os controles são organizados de forma diferente no tablet e no telefone).
      • Use apenas as âncoras (porque as âncoras são suficientes para reposicionar os controles na janela de acordo com sua orientação).
    7. Vá para a próxima etapa do assistente.
    8. O assistente propõe o uso de uma apresentação diferente para cada plataforma usada (por exemplo, uma apresentação para iOS e uma apresentação para Android).
      Sistema operacional
    9. Selecione a opção desejada e vá para a próxima etapa do assistente.
    10. Valide o assistente.
    11. Os diferentes layouts são criados, se necessário.
      Layouts
    12. O editor exibe (à direita) os diferentes layouts que podem ser usados ​​para a janela. Clicar duas vezes no emblema do layout desejado permite abri-lo no editor e modificá-lo.
    Dica:
    • A criação de um layout é baseada na plataforma de edição atual. É mais rápido posicionar no layout que é o mais próximo graficamente para limitar as modificações.
    • Para personalizar os controles encontrados nos diferentes layouts, recomendamos que você comece com o layout maior e mais completo e, em seguida, crie os outros layouts reduzindo ou ocultando elementos.
    WINDEV 

    Criação de um novo layout para uma janela

    Para criar um novo layout para uma janela:
    1. Abra a janela relevante no editor.
    2. No painel "Janela", no grupo "Layouts", expanda "Layouts" e selecione "Adicionar layouts".
    3. Se o projeto WINDEV não contiver plataforma móvel , será exibida a janela para criação de layout. Clique em "Adicionar" para adicionar um novo layout.
    4. Se o projeto WINDEV contiver pelo menos uma plataforma móvel , o assistente para adicionar um layout será iniciado. Passe na etapa de apresentação, se necessário.
      1. O assistente se propõe a gerenciar as diferenças entre o telefone e o tablet.
        Você pode:
        • Escolha a plataforma atual apenas (apenas telefone ou apenas tablet).
        • Crie layouts (porque os controles são organizados de forma diferente no tablet e no telefone).
        • Use apenas as âncoras (porque as âncoras são suficientes para reposicionar os controles na janela de acordo com seu tamanho).
      2. Vá para a próxima etapa do assistente.
      3. O assistente propõe gerenciar a orientação Retrato / Paisagem do aplicativo.
        Você pode:
        • Crie layouts (porque os controles são organizados de forma diferente no tablet e no telefone).
        • Use apenas as âncoras (porque as âncoras são suficientes para reposicionar os controles na janela de acordo com sua orientação).
      4. Vá para a próxima etapa do assistente.
      5. O assistente propõe o uso de uma apresentação diferente para cada plataforma usada (por exemplo, uma apresentação para iOS e uma apresentação para Android).
      6. Selecione a opção desejada e vá para a próxima etapa do assistente.
      7. Valide o assistente.
    5. O editor exibe (à direita) os diferentes layouts que podem ser usados ​​para a janela. Clicar duas vezes no emblema do layout desejado permite abri-lo no editor e modificá-lo.
    WINDEVWINDEV Mobile 

    Criação de um novo layout para uma janela interna

    No celular, as janelas internas são utilizadas por vários recursos: janela detalhada em uma tabela, compromisso em um controle Scheduler, ...
    O uso de layouts nas janelas internas permite propor uma interface para o modo retrato e para o modo paisagem.
    Para criar um novo layout para uma janela interna:
    1. Abra a janela interna relevante no editor.
    2. No painel "Janela", no grupo "Layouts", expanda "Layouts" e selecione "Adicionar layouts".
    3. A janela para adicionar layouts é exibida.
      Clique em "Adicionar" para adicionar um novo layout.
    4. Valide a janela.
    5. O editor exibe (à direita) os diferentes layouts que podem ser usados ​​para a janela interna.
      • Clicar duas vezes no emblema do layout desejado permite abri-lo no editor e modificá-lo.
      • A opção "Descrição" no menu popup da barra de título do layout permite definir os parâmetros do layout.
    Novo na versão 25
    WEBDEV - Código do servidor 

    Criação de um novo layout para uma página

    Para criar um novo layout para uma página:
    1. Abra a página relevante no editor.
    2. No painel "Página", no grupo "Layouts", expanda "Layouts" e selecione "Adicionar layout da visualização ativa".
    3. A janela de criação de layout é exibida:
    4. Especifique o tipo de tela para a qual o layout deve ser criado. Você também pode especificar a largura mínima da tela.
    5. Validar.
    6. À direita, o editor exibe os diferentes layouts disponíveis para a página. Clicar duas vezes no emblema do layout desejado permite abri-lo no editor e modificá-lo.

    Layouts de comentários não estão disponíveis:
    • nas páginas no modo Web Design Responsivo.
    • nas páginas internas.
    • em modelos de página.
    Manipulação de layouts

    Gerenciando controles nos layouts

    Por padrão:
    • Um controle criado em um layout é criado em todos os layouts.
    • Um controle é posicionado no mesmo local em todos os layouts. Inclui as mesmas propriedades de largura e altura.
    • Um controle movido em um layout é movido em todos os layouts.
    Para que um controle tenha propriedades e posições específicas de acordo com os layouts, ele deve ser dissociado. Várias opções estão disponíveis.
    Para manipular um controle de forma independente nos diferentes layouts :
    1. Selecione o controle.
    2. Exibir o menu pop-up (clique com o botão direito).
    3. No menu "Layouts" são apresentadas as diferentes possibilidades:
      • Dissociar a posição : usado para modificar a posição de controle em um ou mais layouts.
      • Dissociar o tamanho : usado para modificar o tamanho do controle em um ou mais layouts.
      • Dissociar a âncora : usado para dissociar a âncora em um ou mais layouts.
      • Dissociar a fonte : usado para dissociar a fonte em um ou mais layouts. Você pode, por exemplo, usar uma fonte específica para Android e outra fonte para iOS. Também é possível especificar um tamanho de fonte para cada layout.
      • Tornar invisível neste layout : usado para tornar o controle visível ou invisível em um ou mais layouts.
    Observações:
    • Este menu pop-up está disponível para uma seleção de controles.
    • você também pode usar o ícone encontrado na barra de título do layout editado atualmente. Um clique neste ícone é usado para dissociar automaticamente o tamanho e / ou posição do controle selecionado durante a primeira modificação (realizada com o mouse ou com o teclado).
    Limite: para os controles de gráfico, as propriedades do título e as propriedades da legenda não podem ser dissociadas entre vários layouts.
    AndroidiPhone / iPad 

    Caso especial da barra de ação

    O controle da barra de ação está disponível no Android e iOS.
    Ao gerar a aplicação, o controle nativo correspondente à plataforma atual será selecionado automaticamente.

    Características dos layouts

    O menu pop-up de miniaturas para os layouts disponíveis é usado para gerenciar os layouts:
    Você pode:
    • Visualize a descrição do layout e modifique-o. Consulte Parâmetros de layout para obter mais detalhes.
    • Ativar o layout, que significa exibi-lo para modificá-lo.
    • Ative o layout no modo de visualização dupla: os dois layouts podem ser exibidos e modificados em paralelo.
    • Crie um novo layout.
    • Exclua o layout selecionado.
    • Exibir miniaturas proporcionais.
    • Atualizar automaticamente: usado para atualizar o layout assim que uma modificação é realizada na janela.
    • Atualizar este layout: usado para atualizar imediatamente o layout.
    • Atualizar tudo: usado para atualizar imediatamente todos os layouts.

    Comparando janelas ou páginas com layouts

    WINDEV Mobile permite-lhe comparar dois projetos, dois elementos de projeto, ... Ver Comparador de projetos para mais detalhes.
    Ao comparar janelas contendo layouts, as diferenças encontradas para cada layout são listadas.
    Gerenciando layouts em tempo de execução

    Modo de operação padrão

    O layout inicial é escolhido automaticamente de acordo com:
    • o sistema,
    • a orientação,
    • o tamanho da plataforma,
    • WEBDEV - Código do servidor o tamanho do navegador,
    • o tamanho da janela ou página (no editor).
    O layout muda automaticamente:
    • WINDEV Mobile quando o dispositivo muda do modo retrato para paisagem.
    • Novo na versão 25 de
      WEBDEV - Código do servidoracordo com o tamanho do navegador.
    Os parâmetros de layout podem ser definidos ("Descrição" no menu pop-up da barra de título do layout):
    • WINDEVWINDEV Mobile para cada plataforma:
    • WEBDEV - Código do servidor de acordo com o tamanho do navegador.
    Esses parâmetros são levados em consideração para escolher o layout em tempo de execução:
    • Tamanho mínimo do dispositivo no qual o layout pode ser iniciado.
    • WINDEVAndroidiPhone / iPadSistema operacional. Se "Multi OS" for selecionado, o layout pode ser iniciado em todos os sistemas operacionais. Você tem a capacidade de selecionar sistemas específicos (os sistemas propostos correspondem às plataformas definidas para o projeto).
    • AndroidiPhone / iPad Orientação da janela.
    • WINDEVAndroidiPhone / iPad Editar plataforma.
    WINDEVAndroidiPhone / iPadA ordem dos parâmetros considerados depende do tipo de execução da janela. Portanto:
    • Se a janela for uma janela móvel maximizada, os seguintes critérios são levados em consideração: o sistema, a orientação e o tamanho da plataforma.
    • Se a janela for uma janela do Windows, os seguintes critérios são levados em consideração: o sistema. A maior janela é escolhida. Se várias janelas tiverem o mesmo tamanho, a escolha é feita de acordo com a orientação.
    • Se a janela for uma janela móvel não maximizada, são considerados os seguintes critérios: o sistema, a orientação e o tamanho da plataforma.

    Programação

    Você pode:
    • forçar o uso do layout ( WinChangeLayout ou PageChangeLayout ). Basta indicar o número do layout a ser usado como parâmetro. Este número é especificado na barra de título do layout.
    • descubr

    Teste

    Teste
    teste