quarta-feira, 4 de novembro de 2020

DICAS 3172 -WINDEV MOBILE TUTORIAL 2 - 19-11-2020-10_00Hrs- Lição 1.1. Descubra WINDEV Mobile



https://youtu.be/FHoxLSG9tDQ



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3172 -WINDEV MOBILE TUTORIAL 2 - 19-11-2020-10_00Hrs- Lição 1.1. Descubra WINDEV Mobile
https://help.windev.com/?1410087562&name=lesson_11_discover_windev_mobile
https://windevdesenvolvimento.blogspot.com/2020/11/dicas-3172-windev-mobile-tutorial-2-19.html


ASSUNTOS


Descubra WINDEV Mobile
visão global
Iniciando WINDEV Mobile
Abrindo Projeto exemplo 
Ambiente de desenvolvimento
O Editor 
Control + E - Abre Pagina 
Control + W - Fecha painel
A barra de menu (fita) em detalhes
Os diferentes elementos da fita
A fita inclui 3 áreas:
A área do botão (1)
A área do painel (2)
A área de opção (3)
As cores do ambiente

 

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 1.1. Descubra WINDEV Mobile
Esta lição vai te ensinar os seguintes conceitos
  • Iniciando WINDEV Mobile.
Duração da aula

Tempo estimado: 10 min
ÍndicePróxima lição
visão global
WINDEV Mobile é um ambiente de desenvolvimento integrado DevOps completo voltado para o desenvolvimento de aplicativos Android, iOS, Windows Universal (Windows 10) e Windows Mobile, ... em diversos campos: empresarial, industrial, médico, hoteleiro, ... Os aplicativos desenvolvidos podem dar acesso às informações armazenadas nos bancos de dados.
Ao longo deste tutorial, você aprenderá como criar seus aplicativos (com ou sem banco de dados) e como enriquecê-los usando os muitos recursos oferecidos pelo WINDEV Mobile.
Iniciando WINDEV Mobile
  • Inicie o WINDEV Mobile 25 (se necessário).
  • Um assistente de boas-vindas é iniciado se o WINDEV Mobile 25 nunca tiver sido iniciado antes . Este assistente é usado para:
    • Se você trabalhou com uma versão anterior do WINDEV Mobile, este assistente permite recuperar as configurações existentes.
    • Se você for um novo usuário, este assistente permite que você configure seu ambiente. Isso permite que você escolha a configuração da tela usada e configure os Centros de Controle.
  • Se você já iniciou o WINDEV Mobile 25 , faça o login, se necessário. O ambiente de desenvolvimento é iniciado. A página inicial é exibida.
    Pagina inicial
    Esta página inicial é usada para:
    • criar um projeto,
    • abrir um projeto existente,
    • abra um exemplo,
    • abra um dos projetos do tutorial.
  • Vamos dar uma olhada no ambiente de desenvolvimento do WINDEV Mobile. Para fazer isso, na página inicial:
    • Clique em "Tutorial".
    • Clique duas vezes em "Aplicativo iOS / Android (Resposta)".
      Exercícios tutoriais
    • O projeto correspondente é aberto no editor. O painel do projeto é exibido. O painel do projeto permite que você verifique o andamento de um projeto por meio de vários elementos (chamados widgets).
      Painel do projeto
Ambiente de desenvolvimento

O editor

O ambiente de desenvolvimento do WINDEV Mobile inclui uma interface específica e vários editores que lhe permitem criar os diferentes elementos das suas aplicações.
Por exemplo, o editor de janela é usado para criar janelas, o editor de relatórios é usado para criar relatórios, ...
  • Para descobrir o WINDEV Mobile, vamos abrir a janela "Formulário do produto":
    1. Pressione Ctrl + E.
    2. Na janela exibida, digite o nome da janela a ser aberta: WIN_Product_form.
    3. Validar. A janela é exibida no editor.
Todos os editores usam o mesmo ambiente:
Editor WINDEV Mobile
  1. Menu de editores , exibido em formato de fita (veremos como usá-lo no próximo parágrafo).
  2. Editor atual ( editor de janela neste caso). Este espaço permite que você veja o elemento atualmente criado ou modificado em WYSIWYG (o que você vê é o que você obtém).
  3. Painéis . A interface do WINDEV Mobile inclui vários painéis que lhe permitem aceder rapidamente a diferentes tipos de informação.
    Alguns exemplos:
    • o painel "Explorador de projetos" (exibido à direita) é usado para listar todos os elementos do projeto por categoria.
    • o painel de pesquisa (exibido na parte inferior) é usado para realizar pesquisas em todo o projeto e em seus elementos.
    Esses painéis podem ser ocultados pressionando Ctrl + W, se necessário.
  4. Barra de documentos abertos . Esta barra é usada para ver rapidamente todos os elementos abertos. Um simples clique no botão correspondente ao elemento o exibe em seu próprio editor.

A barra de menu (fita) em detalhes

A barra de menu do WINDEV Mobile é apresentada em formato de fita. Essa faixa de opções inclui painéis nos quais as diferentes opções de editores são agrupadas.
Vamos dar uma olhada mais de perto nos principais elementos da faixa de opções, bem como em como vamos usá-los neste tutorial.
Faixa de opções do WINDEV Mobile
Os diferentes elementos da fita
A fita inclui 3 áreas:
  • a área do botão, à esquerda (1).
  • a área do painel, na parte superior (2).
  • a área de opção (3).
Vamos examinar mais de perto essas áreas.
A área do botão (1)
Área do botão
A área dos botões agrupa os botões de acesso rápido . Estes botões são usados ​​para realizar as operações mais usuais, comuns a todos os editores: salvar, abrir, criar, ...
O logotipo do produto é usado para exibir a janela "Sobre", os menus personalizados e os menus suspensos encontrados na interface anterior dos editores.
A seta no canto superior direito da área do botão permite que você encontre as barras de ferramentas e menus suspensos da interface do editor antigo.
A área do painel (2)
Área do painel
Os diferentes painéis da faixa de opções são usados ​​para acessar as opções de diferentes editores para o projeto atual. Vários tipos de painéis estão disponíveis:
  • o painel atual: O nome do painel aparece em negrito e sublinhado por uma linha laranja.
  • os painéis pop-up, específicos para o elemento atual: O nome do painel é exibido em azul.
  • os painéis disponíveis: O nome do painel é exibido em preto.
A área de opção (3)
Área de opções
As opções exibidas na faixa de opções variam de acordo com o painel selecionado. Vários tipos de opções estão disponíveis:
  • Opções para verificar,
  • Botões para clicar,
  • Botão com seta usado para expandir as opções. Dois tipos de botões com setas estão disponíveis:
    • os botões com seta usados ​​para expandir um menu
    • os botões com seta são usados ​​para expandir um menu (clique na seta) ou para realizar uma ação padrão (clique no ícone do botão).
As opções são organizadas por grupo. Cada grupo de opções possui um nome e também pode incluir um botão de grupo Botão de grupoEste botão é usado para realizar uma ação específica de acordo com o grupo atual: exibir a descrição do elemento atual, exibir a ajuda, ...
Neste tutorial, para identificar uma opção de menu, falaremos sobre painéis e grupos. Por exemplo: Para exibir a ajuda, no painel "Página inicial", no grupo "Ajuda online", clique em "Ajuda".

As cores do ambiente

O ambiente usa um tema claro por padrão.
Vários outros temas também estão disponíveis:
  • Tema claro, fita cinza. Neste modo, a barra de menu não é mais colorida: está acinzentada.
  • Tema cinza. Neste modo, o ambiente e as janelas de interface são exibidos em um fundo cinza claro.
  • Tema escuro. Neste modo, o ambiente e as janelas de interface são exibidos em um fundo preto ou cinza escuro.
  • Para modificar o tema usado pelo ambiente:
    1. No painel "Home", no grupo "Ambiente", expanda "Opções" e selecione "Opções gerais do WINDEV Mobile".
    2. Na guia "Editor", na área "Temas", selecione o tema a ser usado.
    3. Validar. O tema será levado em consideração na próxima inicialização do WINDEV Mobile.
Observação: Para melhorar a legibilidade deste manual, o tema claro será usado para as diferentes imagens que ilustram as operações a serem realizadas.

terça-feira, 3 de novembro de 2020

DICAS 3170 -WEBDEV TUTORIAL 103 - 18-11-2020-10_00Hrs- Conceitos Avançados - PARTE A



https://youtu.be/skF1VASPSUo



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3170 -WEBDEV TUTORIAL 103 - 18-11-2020-10_00Hrs- Conceitos Avançados - PARTE A

ASSUNTOS


Conceitos avançados
Controles específicos para Web Design Responsivo
controle da Barra de navegação
As âncoras
tipos de âncoras
Posição âncoras
Âncoras de tamanho, em altura e largura
Proxima Licao: Ordem dos controles no modo Web Design Responsivo
 


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 











Lição 8.3. Conceitos avançados
Esta lição vai te ensinar os seguintes conceitos
  • Controle específico: Controle da barra de navegação com menu "Hambúrguer".
  • As âncoras.
  • Gerenciando a ordem dos controles.
Duração da aula

Tempo estimado: 30 min
Lição AnteriorÍndicePróxima lição
Controles específicos para Web Design Responsivo
O WEBDEV inclui um controle específico para Web Design Responsivo: o controle Barra de Navegação.
O controle da barra de navegação é usado para criar uma área de menu que pode se adaptar facilmente ao tamanho do navegador. Esta área pode conter todos os tipos de controles.
  • Vamos estudar o modo de operação do controle da barra de navegação.
    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_NavigationBar.
  • O controle da Barra de navegação é o controle localizado na parte superior que contém o menu.
    Controle da barra de navegação
    Este controle da Barra de Navegação é dividido em 3 seções:
    • À esquerda, o logotipo do site.
    • No meio, o menu do site.
    • À direita, um controle de pesquisa com um controle de imagem para iniciar a pesquisa.
  • Vamos mudar para o modo Tablet:
    1. Clique no cabeçalho da fatia do Tablet.
    2. Clique no controle da Barra de Navegação para selecioná-lo: a seção do meio é hachurada.
      Controle da barra de navegação no modo de edição
  • A partir da fatia do Tablet, o controle da Barra de Navegação torna a seção intermediária invisível e adiciona um menu Hambúrguer na seção esquerda.
    O menu "hambúrguer" expande um pop-up contendo os controles da seção intermediária. Este pop-up pode ser personalizado, tudo o que você precisa fazer é clicar no painel central. Em seguida, esse pop-up pode ser modificado de acordo com suas necessidades.
  • Vamos estudar o conteúdo da seção intermediária:
    1. Clique dentro da seção intermediária hachurada. O pop-up é exibido:
      Área central do controle da Barra de Navegação
    2. Você pode ver o menu do site. O menu está vertical agora. Na verdade, o controle da Barra de Navegação substitui automaticamente o controle do Menu para que seja exibido verticalmente.
    3. Para sair do modo de edição do pop-up, pressione a tecla Esc.
As âncoras
A gestão de âncoras já foi apresentada nos capítulos anteriores. No entanto, as âncoras operam de maneira diferente em uma página de Web Design Responsivo.
  • Vamos estudar o modo de operação das âncoras no modo Responsive Web Design.
    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_Anchor.
    3. Selecione o controle de imagem usado para iniciar a pesquisa no canto superior direito:
      Selecionando o controle de botão usado para iniciar a pesquisa
    4. Abra o menu pop-up (clique com o botão direito) e selecione "Ancorar".
    5. A janela para gerenciamento de âncoras é exibida:
      Janela de gerenciamento de âncora
O WEBDEV propõe vários tipos de âncoras:
  • as âncoras de posição,
  • as âncoras em largura.
  • as âncoras em altura.

Posicionar âncoras

A âncora de posição propõe as seguintes opções:
  • Uma âncora à esquerda.
  • Uma âncora centralizada.
  • Uma âncora à direita.
  • Vamos estudar essas diferentes possibilidades:
    • A âncora centralizada deve ser selecionada para que o controle permaneça centralizado ao redimensionar o navegador.
    • A âncora à esquerda é usada para especificar que o tamanho entre o controle e a borda esquerda da página será sempre o mesmo proporcionalmente ao tamanho da página. A seção encontrada à direita do controle pode ser truncada se a redução do navegador for muito importante.
      Gerenciando a âncora esquerda
    • A âncora à direita executa a mesma ação que a âncora à esquerda, mas à direita.
  • Em nosso exemplo, o botão de pesquisa localizado no canto superior direito da página está ancorado à direita. O que significa que o espaçamento entre a borda direita do controle e a borda direita da página sempre será o mesmo proporcionalmente à largura da página.
  • Execute o teste de página ( Execute o teste de uma páginaentre os botões de acesso rápido).
    • A página aparece em teste como estava no editor no modo Desktop.
    • Reduza o tamanho do seu navegador.
    • A área à esquerda do botão de pesquisa é reduzida, enquanto a área à direita permanece a mesma.
  • Feche o navegador.

Âncoras de tamanho, em altura e largura

  • Vamos agora estudar o tamanho das âncoras.
    1. Na página PAGE_Anchor, selecione o controle de edição denominado "Pesquisar" ao lado do botão de pesquisa.
    2. Abra o menu pop-up (clique com o botão direito) e selecione "Ancorar".
    3. A janela para gerenciamento de âncoras é exibida.
  • Vamos estudar as diferentes possibilidades:
    Janela de gerenciamento de âncora
    • Para as âncoras em largura, as opções são as seguintes:
      • Largura fixa: o controle mantém suas dimensões definidas no editor.
      • Ajustar ao conteúdo e puxar outros controles: a largura do controle se adapta ao conteúdo. Nesse caso, você pode especificar a largura mínima e a largura máxima.
      • Amplie ou reduza como o navegador: a largura do controle é modificada proporcionalmente à largura do navegador. Nesse caso, você pode especificar a largura mínima e a largura máxima.
    • Para as âncoras em altura, as opções são as seguintes:
      • Altura fixa: o controle mantém suas dimensões.
      • Ajustar ao conteúdo e puxar outros controles: a altura do controle é adaptada ao conteúdo. Nesse caso, você pode especificar a altura mínima.
    • Também é possível definir o comportamento do controle quando seu conteúdo é maior do que é. Você pode:
      • Aumente o controle e pressione os outros controles.
      • Trunque o conteúdo.
      • Ative uma barra de rolagem que sempre estará visível.
      • Exibir uma barra de rolagem.
  • Em nosso exemplo, o controle de edição e os botões de pesquisa são definidos para manter seu tamanho de edição (opções "Largura fixa" e Altura fixa ").
  • Execute o teste de página ( Execute o teste de uma páginaentre os botões de acesso rápido).
    • A página aparece em teste como estava no editor no modo Desktop.
    • Reduza o tamanho do seu navegador.
    • O controle de edição e o botão de pesquisa não são redimensionados.

    Teste

    Teste
    teste