terça-feira, 15 de setembro de 2020

DICAS 3099 -WEBDEV TUTORIAL 33 - 25-09-2020-10_00Hrs-SEX-Licao 3.3.MODIFICANDO PRODUTOS MODO SESSAO - PARTE E




https://youtu.be/C5jigyqSR4U



Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 10:00 do dia 25/09/2020-Sex

DICAS 3099 -WEBDEV TUTORIAL 33 - 25-09-2020-10_00Hrs-SEX-Licao 3.3.MODIFICANDO PRODUTOS MODO SESSAO - PARTE E
Lesson 3.3. Pages for addition and modification


ASSUNTOS

criar uma página para mostrar os detalhes do produto para poder modificá-los
Digite o título da página: "Formulário do produto"
O que esta página deve fazer?
Entrar no codigo da pagina 
PROCEDURE MyPage(gnProductID is 8-byte int)
Proximo Conteudo - Criacao de controles de edicao 


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




==========================

PROCEDURE MyPage(gnProdutoId is 8-byte int)
// global declaration of page_formulario_do_produto


===========================

PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
Playlist windev Franca PcSoft
Amarildo
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Site forum Google 
Video sobre 3 Mil Videos Windev 
PlayList Pedrosao
Video sobre Alfaserver servidor 
Ultimo Video manipulacao arquivos












Modificando produtos por meio de uma página "Formulário de produto" no modo de sessão
Agora que a lista de produtos é exibida, você pode querer modificar um produto. Vamos agora criar uma página para mostrar os detalhes do produto para poder modificá-los.

Criação da página

  • Para criar uma página usada para exibir os detalhes do produto:
    1. Crie uma nova página em branco.
      • Clique Crie um elementoentre os botões de acesso rápido.
      • A janela de criação de elemento aparece: clique em "Página" e depois em "Página".
      • O assistente de criação de página é iniciado.
      • Na área "Baseado em um modelo de projeto", escolha "PAGETPL_Menu" e valide o assistente.
    2. A janela para salvar a página é exibida. Digite o título da página: "Formulário do produto". O nome da página "PAGE_Product_form" é proposto automaticamente.
    3. Validar.

O que esta página deve fazer?

Esta página tem como objetivo modificar as características do produto atualmente selecionado no controle Looper. Este tipo de página é denominado "Formulário" porque corresponde a uma forma descritiva do elemento pretendido.
No nosso caso, esta página será usada para exibir o conteúdo de diferentes itens encontrados no arquivo de dados "Produto".
Em primeiro lugar, vamos indicar na página o produto que será exibido. Para isso, basta declarar um parâmetro na página.
  • Para declarar um parâmetro na página:
    1. Pressione F2. O editor de código exibe os diferentes eventos de página.
    2. Escreva o seguinte código WLanguage no evento "Declarações globais":
      PROCESSO MyPage ( gnProductID é byte int )
    3. Vamos dar uma olhada neste código WLanguage:
      • A palavra-chave PROCEDURE no evento "Declarações globais" é utilizada para associar um procedimento à abertura da página.
      • O procedimento é denominado "MyPage". No tempo de execução, esta palavra-chave será substituída automaticamente pelo nome da página atual.
      • O procedimento espera a variável gnProductID (inteiro de 8 bytes) como parâmetro. Esta variável corresponde ao identificador do produto que será exibido na página. O tipo desta variável é idêntico ao tipo de item ProductID correspondente descrito no arquivo de dados do produto.
    4. Feche o editor de código.




DICAS 3098 -WEBDEV TUTORIAL 32 - 24-09-2020-11_30Hrs-QUI-Licao 3.3. Criar Pagina - MODIFICAR_MENU_TEMPLATE - PARTE D



https://youtu.be/LTyB9McuGic


Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 11:30 do dia 24/09/2020-Qui
DICAS 3098 -WEBDEV TUTORIAL 32 - 24-09-2020-11_30Hrs-QUI-Licao 3.3. Criar Pagina - MODIFICAR_MENU_TEMPLATE - PARTE D
Lesson 3.3. Pages for addition and modification


ASSUNTOS

modificar o menu da nossa página para mostrar a opção de listar os produtos
Entrar no Modelo da pagina
Selecione o menu.
substitua "Home" por "Lista de produtos
atualizar as páginas - Sicronizar
Vamos fazer o teste da página que acabou de ser criada.


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 Franca PcSoft
Amarildo
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Site forum Google 
Video sobre 3 Mil Videos Windev 
PlayList Pedrosao
Video sobre Alfaserver servidor 
Ultimo Video manipulacao arquivos












  • Agora vamos modificar o menu da nossa página para mostrar a opção de listar os produtos. O menu é encontrado no modelo de página. Portanto, vamos modificar o modelo da página.
    1. Exiba o menu pop-up do menu (clique com o botão direito em "INÍCIO", por exemplo) e selecione "Abrir o modelo".
      Exibindo o modelo da página
    2. Selecione o menu.
    3. Clique em "INÍCIO". Uma borda amarela aparece ao redor do menu. Esta borda amarela indica que o menu está no modo "Editar": ele pode ser modificado.
      Menu de modelo no modo Editar
    4. Abra a janela de descrição da opção (selecione "Descrição da opção" no menu pop-up).
    5. Na guia "Geral":
      • Digite a legenda da opção: substitua "Home" por "Lista de produtos".
      • Na área "Ação da opção":
        • Selecione "Exibir uma página do site".
        • Selecione a página "PAGE_List_of_products".
      • Valide a janela de descrição da opção.
    6. Se necessário, amplie o controle para que a legenda da opção apareça em uma única linha (use as alças de controle).
    7. Pressione Esc para sair do modo de edição.

      Observação

      Modificamos o menu exibido no modelo. Você também pode modificar outros elementos do modelo, como o logotipo ou a legenda "Empresa".
  • Para atualizar as páginas que usam o modelo:
    1. Na barra laranja do modelo, clique em Propagar modificações do modelo de página: este botão é usado para propagar as modificações do modelo para todas as páginas que usam o modelo.

      Observação

      Se as modificações feitas no modelo não forem aplicadas às suas páginas, uma sincronização de modelos será proposta durante o teste de sua página (e também antes de uma implantação).
    2. No nosso caso, uma única página é proposta.
      Seleção de páginas para as quais o modelo deve ser atualizado
    3. Valide a janela de atualização do modelo (botão "OK").
    4. Feche o modelo da página.
  • No modelo de página "Menu" que usamos, a opção de menu selecionada é "ITENS": esta opção de menu aparece em azul. No entanto, a página que acabamos de criar exibe a lista de produtos. Queremos que a opção selecionada para esta página seja "LISTA DE PRODUTOS".
    Para fazer isso, substituiremos a opção de menu no modelo de página para alterar a opção de menu selecionada. Para fazer essa alteração, substituiremos o menu e, a seguir, a opção de menu desejada.
  • Execute as seguintes ações:
    1. Abra o menu popup do menu (clique com o botão direito em "LISTA DE PRODUTOS", por exemplo) e selecione "Substituir controle".
    2. Abra o menu pop-up do menu novamente e selecione "Modificar este menu". O menu entra no modo de edição: um contorno amarelo aparece ao redor do menu.
    3. Abra o menu pop-up de "LISTA DE PRODUTOS" e selecione "Substituir controle".
    4. Abra o menu popup de "LISTA DE PRODUTOS" e selecione "Colocar esta opção de menu no status selecionado".
    5. Pressione Esc para sair do modo de edição.
    6. Salve a página (Ctrl + S).
Nossa página está pronta para ser verificada.

Teste de página

  • Vamos fazer o teste da página que acabou de ser criada.
    1. Clique Execute o teste de uma páginaentre os botões de acesso rápido.
    2. A página é exibida automaticamente no navegador.
      Página da web para listar os produtos
    3. Você pode percorrer os produtos com a barra de rolagem da página.
  • Feche o navegador. O editor WEBDEV é exibido novamente.



DICAS 3097 -WEBDEV TUTORIAL 31 - 24-09-2020-11_00Hrs-QUI-Licao 3.3. Criar Pagina - CONTROLER LOOPER - PARTE C



https://youtu.be/PT1PAIpPDjo


Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 11:00 do dia 24/09/2020-Qui

DICAS 3097 -WEBDEV TUTORIAL 31 - 24-09-2020-11_00Hrs-QUI-Licao 3.3. Criar Pagina - CONTROLER LOOPER - PARTE C
Lesson 3.3. Pages for addition and modification


ASSUNTOS

Criando controles
O que é um controle Looper?
Gerando o Looper e explicando cada passo 
reposicionar o controle
Ocultar Stc_produto id 
Mostrando a Pagina como esta ficando


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 Franca PcSoft
Amarildo
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Site forum Google 
Video sobre 3 Mil Videos Windev 
PlayList Pedrosao
Video sobre Alfaserver servidor 
Ultimo Video manipulacao arquivos












Criando controles

Para criar a lista de produtos, estaremos usando um controle Looper. Este controle estará vinculado ao arquivo de dados "Produto".

Observação

O que é um controle Looper?
A melhor maneira de exibir elementos em formato de lista em uma página da Web é usar um controle Looper. Um controle Looper inclui uma área (contendo vários controles) que é repetida um determinado número de vezes.
Cada área pode, é claro, conter dados diferentes.
  • Para criar o controle Looper:
    1. No painel "Criação", no grupo "Dados", expanda "Looper" e selecione "Looper".
    2. Clique no canto superior esquerdo da página, logo abaixo do menu: o assistente de criação de controle Looper é iniciado.
    3. O assistente quer saber como o controle Looper será preenchido:
      • do banco de dados, de um arquivo de dados ou de uma consulta,
      • de uma variável WLanguage,
      • por programação (este recurso será apresentado em uma próxima lição).
      Neste caso, o controle Looper deve exibir todos os produtos: selecione "Exibir os dados provenientes de um arquivo ou de uma consulta".
      Criando um controle Looper - Preencher
    4. Vá para a próxima etapa ("Avançar" no assistente).
    5. A próxima etapa do assistente propõe os diferentes arquivos de dados e consultas encontradas no projeto atual. Expanda "Análise" se necessário e selecione o arquivo de dados "Produto".
      Criando um controle Looper - arquivo de dados associado
    6. Vá para a próxima etapa.
    7. O assistente propõe a lista de itens encontrados no arquivo de dados. Por padrão, todos os itens são verificados para serem exibidos no controle Looper. No nosso caso, vamos mostrar todos os itens EXCETO a descrição do produto.
      Desmarque "Descrição":
      Criando um controle Looper - Itens a serem exibidos
      Vá para a próxima etapa.
    8. Em seguida, o assistente propõe selecionar a chave de pesquisa, que define como os dados exibidos no controle Looper serão classificados por padrão. Os itens propostos no assistente correspondem aos itens definidos como itens-chave na análise. Os produtos serão classificados de acordo com a legenda.
      Criação de um controle Looper - tecla de pesquisa
      Selecione "Legenda" e vá para a próxima etapa.
    9. Agora vamos selecionar parâmetros adicionais para criar o controle Looper:
      • O controle Looper está no modo Clássico: todos os dados serão exibidos ao carregar a página.
        Selecione o modo de operação "Clássico".
      • O controle Looper usa um número ilimitado de linhas. Na verdade, todos os produtos devem estar acessíveis diretamente na página. A página será ampliada para exibir todos os produtos.
        Selecione "Sem limite" em "Número máximo de linhas por página".
        Criação de um controle Looper - modo operacional
    10. Vá para a próxima etapa. O controle Looper exibirá os produtos em 3 colunas.
      • Mantenha a opção padrão: "Número fixo de linhas, preencher linha".
      • Na área "Número de colunas", substitua 1 por 3.
    11. Valide o assistente. O controle Looper é criado automaticamente na página.
  • Vamos reposicionar o controle na página:
    1. Selecione o controle.
    2. Mova o controle com o mouse para posicioná-lo no canto superior esquerdo da página. Quando o controle atinge o limite da área de exibição no modelo de página, as linhas verdes são exibidas: essas linhas são usadas para posicionar o controle dentro da área de exibição.
      Movendo um controle Looper
    3. Se necessário, reduza:
      • o tamanho das linhas (o tamanho das colunas) para o controle a ser exibido em sua totalidade na página.
      • o tamanho dos controles nas linhas para que caibam (coluna).
Vejamos por um momento o controle Looper que acabamos de criar: os dados já estão exibidos no controle, até mesmo no editor.
Este conceito é denominado "Dados ao vivo" : o conteúdo dos arquivos de dados encontrados no computador de desenvolvimento é utilizado nas páginas ou relatórios tratados no editor. Este recurso é muito útil para definir o tamanho dos controles encontrados em uma página, por exemplo.
  • Vamos ocultar o controle que contém o identificador do produto. Por que ocultá-lo em vez de excluí-lo? Porque este identificador será útil no resto do nosso desenvolvimento.
    1. Selecione o controle "STC_ProductID". Este controle corresponde ao identificador (controle com um número no topo do looper).
    2. Abra a janela de descrição do controle ("Descrição" no menu pop-up).
    3. Na guia "UI", desmarque "Visível".
    4. Valide a janela de descrição do controle.


    Teste

    Teste
    teste