sábado, 26 de setembro de 2020

DICAS 3123 -WEBDEV TUTORIAL 57 - 06-10-2020-09_00Hrs-TER-Licao 4.3. AWP - GESTAO ESTILOS - PARTE M



https://youtu.be/WbJTZF8qRp8



Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 09:00 do dia 06/10/2020-TER

DICAS 3123 -WEBDEV TUTORIAL 57 - 06-10-2020-09_00Hrs-TER-Licao 4.3. AWP - GESTAO ESTILOS - PARTE M
Lição 4.3. Criação de páginas no modo AWP

ASSUNTOS

GESTAO DE ESTILHOS 

MOSTRANDO ONDE IMPORTA CSS 
NOME EXEMPLO CSS - CUSTOMSTYLES
EXEMPLO DE CSS - DENTRO CSS_AMARILDO
EXEMPLO DE CSS - DENTRO TUTORIAL PCSOFT FULL_WEBDEV_SITE 
IMPORTANDO CSS 
PROXIMA AULA - Aplicando estilos CSS


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











Gestão de estilos
Para melhorar nossa página, vamos modificar os estilos de controles. Se você está trabalhando com um designer gráfico ou se um livro de estilos foi definido para o seu site (livro de estilos da empresa por exemplo), os estilos foram definidos previamente em uma folha de estilos CSS. Vamos importar esta folha de estilo em nosso projeto WEBDEV para usar esses estilos.

Observação

WEBDEV propõe dois tipos de estilos:
  • os estilos WEBDEV.
  • os estilos CSS.
Um estilo WEBDEV é um conjunto de estilos CSS usados ​​para definir um estilo global em objetos de alto nível.
Por exemplo, um estilo WEBDEV para um controle de edição conterá dois estilos CSS:
  • um estilo para a legenda.
  • um estilo para o texto da área de entrada.

Observação

Lembrete: ao criar o site, você pode escolher um tema. As skins são usadas para padronizar o aspecto visual de um site e permitem que você mude facilmente o estilo.
O skin fornece as imagens, as fontes, a textura, a forma dos botões e os estilos disponíveis para o projeto.
Você cria sites com um estilo profissional a partir dos estilos fornecidos por padrão. A importação de estilos CSS é usada, por exemplo, para adicionar um novo estilo encontrado na Internet.

Importando uma folha de estilo CSS

  • Para importar a folha de estilo CSS para o projeto:
    1. Na faixa de opções, no painel "Projeto", no grupo "Projeto", expanda "Importar" e selecione "Uma folha de estilo CSS".
    2. O assistente de importação é iniciado e propõe duas opções:
      Assistente de importação de estilo
      • Importar estilos CSS para WEBDEV: Esta opção importa os estilos CSS para o projeto WEBDEV. Em seguida, os estilos podem ser modificados no WEBDEV.
      • Use uma folha de estilo CSS externa: esta opção permite que você use uma folha de estilo existente. Esta opção deve ser escolhida quando uma folha de estilo é definida para uma empresa e quando deve ser compartilhada entre vários sites (livro de estilo da empresa).
    3. Selecione "Importar os estilos CSS para WEBDEV" e clique em "Avançar".
    4. Selecione o arquivo "customstyles.css". Este arquivo se encontra no diretório "\ Tutorial \ WB \ Exercises \ Full_WEBDEV_Site". Os vários estilos encontrados na folha de estilo são exibidos.
      Selecionando estilos para importar
      • Uma prévia do site selecionado é exibida à direita.

        Dica

        Os retângulos de cores encontrados na visualização são usados ​​para alterar a cor de fundo. Isso permite que você obtenha uma visualização em outra cor que não o branco.
      • O prefixo "class-" significa que é uma classe CSS. Este atributo significa que este estilo será aplicado aos elementos com o atributo HTML "class".


DICAS 3122 -WEBDEV TUTORIAL 56 - 05-10-2020-09_00Hrs-SEG-Licao 4.3. AWP - EXIBINDO O FORMULARIO DA LISTA DE PRODUTOS - PARTE L



https://youtu.be/PcnWy8UKUcQ



Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 09:00 do dia 05/10/2020-SEG

DICAS 3122 -WEBDEV TUTORIAL 56 - 05-10-2020-09_00Hrs-SEG-Licao 4.3. AWP - EXIBINDO O FORMULARIO DA LISTA DE PRODUTOS - PARTE L
Lição 4.3. Criação de páginas no modo AWP

ASSUNTOS

MUITO TOP ESSA AULA - PARAMETROS AWP - 

EXIBINDO O FORMULARIO DA LISTA DE PRODUTOS
MUDANDO O NOME DAS PROCEDURES COM AWP 
PAGE_LISTA_DE_NOVOS_PRODUTOS PARA PAGE_AWP_LISTA_DE_NOVOS_PRODUTOS
PAGE_PRODUTOS_DETALHE PARA PAGE_AWP_PRODUTOS_DETALHE
MOSTRAR COMO FICOU 
ENTRANDO NAS PROPRIEDADES DO LINK 
CHAMANDO A PAGINA PAGE_AWP_PRODUTOS_DETALHE
MOSTRAR COMO COLOCA OS PARAMETROS 
EXPLICAR QUE QUEM TEM O VALOR É O ATRIBUITO
FAZENDO TESTE PAGINA 
PROXIMA LICAO GESTAO DE ESTILHOS 


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











Exibindo o formulário da lista de produtos

Agora, vamos ver como exibir a forma do produto selecionado na lista de produtos. O princípio é simples: o usuário selecionará o produto no controle Looper e exibirá os detalhes por meio de um link. Este link já existe no controle Looper.
  • Primeiro, modificaremos a página "PAGE_List_of_new_products" para que o controle Link abra a janela de descrição do produto.
    1. Posicione o cursor na página "Lista de produtos": clique em "PAGE_List_of_products" na barra de documentos aberta.
    2. Exiba a janela de descrição do controle de Link: clique duas vezes no controle.
    3. Na guia "Geral" da janela de descrição, em "Ação do link":
      • Selecione "Exibir uma página do site".
      • Selecione a página "PAGE_Product_details".
      • Clique no botão "Parâmetros". Agora vamos definir o parâmetro que será passado para a página para mostrar os detalhes do produto selecionado.
    4. Na janela que aparece, você encontrará o nome do parâmetro declarado no evento "Declarações globais" da página (gnProductID). Tudo o que você precisa fazer é selecionar o controle que contém o valor do parâmetro. Em nosso caso, o identificador do produto é encontrado no atributo "ATT_ID".
    5. Expanda e selecione "ATT_ID":
      Selecionando o parâmetro da página
    6. Clique em "OK" e valide a janela de descrição dos parâmetros.

      Observação

      Cuidado: Em um controle Looper, o valor não está contido no controle, mas no atributo que está associado a ele para a característica de valor.
    7. Valide a janela de descrição do controle Link.
    8. Salve as modificações ( Salvar um elementoou Ctrl + S).
  • Vamos fazer um teste para verificar se tudo está funcionando.
    1. Se necessário, abra "PAGE_List_of_new_products" no editor de página (use a barra de documentos).
    2. Clique Execute o teste de uma páginaentre os botões de acesso rápido.
    3. A página é exibida automaticamente no navegador.
    4. Clique no link para exibir os detalhes do produto.
      Detalhes de um produto (em tempo de execução)
  • F

DICAS 3121 -WEBDEV TUTORIAL 55 - 04-10-2020-11_00Hrs-DOM-Licao 4.3. AWP - EXIBINDO DADOS PAGINA - PARTE J



https://youtu.be/yW_kbEHxr3Q


Bom Dia Boa Tarde Boa Noite

Esse Ao Vivo vai estrear as 11:00 do dia 04/10/2020-DOM

DICAS 3121 -WEBDEV TUTORIAL 55 - 04-10-2020-11_00Hrs-DOM-Licao 4.3. AWP - EXIBINDO DADOS PAGINA - PARTE J
Lição 4.3. Criação de páginas no modo AWP

ASSUNTOS

Explicando Exibindo dados na pagina 
escrevendo o codigo para ler o produto
HReadSeekFirst(Product,ProductID,gnProductID)
IF HFound(Product) THEN
   FileToScreen()
END
Explicando detalhadamente o codigo acima
Explicando proxima Licao - 
Exibindo o formulario da lista de produtos


=========================
// GLOBAL DECLARATION OF PAGE_PRODUTOS_dETALHE (SERVER)
// PROCEDURE MyPage(gnPRODUTO_ID IS 8-BYTE INT)

// HReadSeekFirst é usado para localizar o primeiro registro no arquivo de dados do Produto para o qual
// o item ProductID é igual ao valor de gnProductID, correspondendo ao parâmetro passado para a página.
// HReadSeekFirst is used to find the first record in the Product data file for which the item ProductID 
// is equal to the value of gnProductID, corresponding to the parameter passed to the page.
// HReadSeekFirst is used to find the first record in the Product data file for which the item ProductID 
// is equal to the value of gnProductID, corresponding to the parameter passed to the page.  
// HReadSeekFirst se utiliza para buscar el primer registro en el archivo de datos del producto para el cual 
// el ProductID del artículo es igual al valor de gnProductID, correspondiente al parámetro pasado a la página. 

HReadSeekFirst(Product,ProductID,gnPRODUTO_ID)

// HFound é usado para verificar se um registro foi realmente encontrado.
// HFound is used to check whether a record was actually found.
// HFound est utilisé pour vérifier si un enregistrement a été réellement trouvé.
// HFound se utiliza para comprobar si se encontró realmente un registro.

IF HFound(Product) THEN
// FileToScreen é utilizado para exibir nos controles os dados encontrados no arquivo de dados, para o registro atual.
// FileToScreen is used to display in the controls the data found in the data file, for the current record.
// FileToScreen permet d'afficher dans les champs les données présentes dans le fichier de données, pour l'enregistrement courant.
// FileToScreen se usa para mostrar en los controles los datos encontrados en el archivo de datos, para el registro actual.

FileToScreen()
END

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

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











Exibindo dados na página

A página "Formulário" deve exibir o produto que está selecionado no controle Looper. No código da página, vamos digitar o código usado para:
  • encontre o produto a ser exibido.
  • exibir dados na página.
  • Para exibir dados na página:
    1. Pressione F2. O editor de código exibe os diferentes eventos WLanguage da página.
    2. No evento "Declarações globais", escreva o seguinte código abaixo do código escrito anteriormente:
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) THEN
      FileToScreen()
      END
    3. Vamos dar uma olhada neste código WLanguage:
      • HReadSeekFirst é usado para localizar o primeiro registro no arquivo de dados do Produto para o qual o item ProductID é igual ao valor de gnProductID, correspondendo ao parâmetro passado para a página.
      • HFound é usado para verificar se um registro foi realmente encontrado. Esta função é necessária principalmente para sites multiusuário. É utilizado para evitar erros causados ​​por exclusões realizadas por outros usuários.
      • FileToScreen é utilizado para exibir nos controles os dados encontrados no arquivo de dados, para o registro atual. Em nosso caso, o registro atual corresponde ao registro encontrado por HReadSeekFirst .





Teste

Teste
teste