domingo, 6 de setembro de 2020

DICAS 3074 -WEBDEV TUTORIAL 8-Licao 1.3-16-09-2020 11hrs-Lesson 1.3. Minha Primeira Pagina - SALVANDO DADOS - ENGENHARIA REVERSA - PARTE D




https://youtu.be/tT4i7u0No9I


Bom Dia/Boa Tarde/Boa Noite


Esse Ao Vivo vai estrear as 11:00 do dia 16/09/2020 

DICAS 3074 -WEBDEV TUTORIAL 8-Licao 1.3-16-09-2020 11hrs-Lesson 1.3. Minha Primeira Pagina - SALVANDO DADOS - ENGENHARIA REVERSA - PARTE D
Lesson 1.3. My first pages

ASSUNTOS

--- TOP DEMAIS --- 
SALVANDO DADOS
ENGENHARIA REVERSA 
PAGE
OTHRE ACTIONS
GERAR ARQUIVO EM CIMA DO FORMULARIO
OLHANDO A ANALISE FEITA



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 



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













Salvando os dados em um arquivo de dados
Ao criar um formulário, a primeira coisa que queremos fazer é salvar os dados digitados. Esses dados podem ser salvos em um arquivo de texto, em um arquivo XML ou até mesmo em um banco de dados.
Nós escolhemos a última opção.
No WEBDEV, a descrição do banco de dados é realizada em um editor específico, o editor de modelo de dados. Este editor será apresentado em detalhes na próxima seção.
Neste exemplo, vamos definir o banco de dados vinculado aos controles criados por meio de um recurso simples: a engenharia reversa.

Criação do arquivo de dados

  • Para criar automaticamente o arquivo de dados:
    1. Na faixa de opções, no painel "Página", no grupo "Editar", expanda "Outras ações" e selecione "Gerar uma descrição de arquivo".
    2. Um novo editor aparece: o editor de modelo de dados. O editor do modelo de dados contém a descrição de todos os arquivos de dados que serão usados ​​pelo projeto.
    3. O assistente de geração de arquivo de dados é iniciado.
      Assistente de criação de arquivo de dados
    4. O nome do arquivo de dados é preenchido automaticamente com o nome da página. Agora vamos modificar alguns elementos:
      • Digite "Registro" no nome.
      • Digite "Registro" na legenda.
      • Digite "um registro" no último controle.
    5. Vá para a próxima etapa (botão "Avançar" na parte inferior do assistente).
    6. Escolha os controles a serem recuperados. Em nosso caso, todos os controles de página correspondem a um item.
      Assistente de criação de arquivo de dados
    7. Vá para a próxima etapa.
    8. Esta etapa é usada para definir as chaves (também chamadas de índices).

      Observação

      Uma chave fornece acesso mais rápido durante as pesquisas (chave com duplicatas) e / ou garante que o valor de um item pode ser salvo apenas uma vez (chave única).
    9. Neste exemplo, o item "Last_name" será uma chave com duplicatas e o item "Login" será uma chave única. Portanto, o arquivo de dados pode conter duas pessoas com o mesmo nome, mas não com o mesmo login.
      Assistente de criação de arquivo de dados
    10. Vá para a próxima etapa.
    11. Valide o resumo. A descrição do arquivo aparece no editor de modelo de dados.
    12. Salve a análise: clique Salvar um elementoentre os botões de acesso rápido (ou pressione Ctrl + S).
    13. Feche o editor de modelo de dados.
    14. Uma janela é exibida, propondo a sincronização do projeto. É usado para verificar as diferenças entre as páginas criadas e os dados definidos na análise. Esta etapa é realizada sempre que a análise for modificada, ao retornar às páginas do projeto.
    15. Clique em "Sim".
Não vamos perder mais tempo no editor de modelo de dados. Ele será apresentado em detalhes em outra lição.




DICAS 3073 -WEBDEV TUTORIAL 7-Licao 1.3-15-09-2020 16hrs-Lesson 1.3. Minha Primeira Pagina - CRIANDO CONTROLES - PARTE C




https://youtu.be/rmOaqIGUI4U


Bom Dia/Boa Tarde/Boa Noite

Esse Ao Vivo vai estrear as 16:00 do dia 15/09/2020 

DICAS 3073 -WEBDEV TUTORIAL 7-Licao 1.3-15-09-2020 16hrs-Lesson 1.3. Minha Primeira Pagina - CRIANDO CONTROLES - PARTE C
Lesson 1.3. My first pages


ASSUNTOS

CRIANDO CONTROLES 
CRIANDO EDT ULTIMO NOME 
ALTERANDO TAMANHO PARA 30 NOME
DEFINIR OS OUTROS CAMPOS 
COLOCANDO TODOS OS CAMPOS FORMULARIO 
MOSTRANDO LINHA MULTI LINHA
MUDANDO COR LOGIN CSS 
ADICIONANDO STYLE PARA PROJETO
APROVEITANDO O MESMO STYLE 
EXPLICANDO F4 - ULTIMA MODIFICACAO COPIA 
TESTANDO FORMULARIO 



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 



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















Creating controls

Let's create the different form controls. These controls will allow the user to fill the data required for the registration.
The form includes the following controls:
  • Last name.
  • First name.
  • Address.
  • Email.
  • Login.
  • Password.
All these controls are edit controls, allowing the user to type data.
  • To create an edit control:
    1. On the "Creation" pane, in the "Usual controls" group, click Creating an edit control.
      Creating an edit control
    2. The control currently created follows the mouse movement.
    3. Click inside the blank page to create the control. The control is created and handles are displayed to indicate that the control is selected.

      Remark

      You must create a control? Display the "Creation" pane of WEBDEV: all available controls are accessible in this pane.
  • To modify the control caption:
    1. Click the control (simple click): the caption becomes editable. If you prefer to use the keyboard, press the Space key or the Enter key in order for the caption to become editable.
      Caption of an edit control in edit mode
    2. Type "Last name" and press Enter to validate. The caption is immediately modified. The control name is also modified: it appears in the tooltip when hovering over the control: EDT_Last_name.
      Tooltip of an edit control

Remark

Study the control name proposed by WEBDEV: this name starts with the letters "EDT_". This prefix is automatically added because the project uses a code style.
The code style is used to define a prefix for each type of object, allowing you to quickly identify the element:
  • a page starts with "PAGE_" (we saw it when saving the page).
  • an edit control starts with "EDT_".
  • a button starts with "BTN_", etc.
If you do not want to use this code style, you can simply disable it: in the ribbon, on the "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
  • To modify the detailed control characteristics, all you have to do is double-click the control. A control description window appears:
    Describing an edit control
  • We are going to modify the maximum input size: all you have to do is type the new size (30 in our case) in the "Input size (characters)" control. Several other characteristics can be modified. Click "OK" to save the changes.
  • Now, it's your turn. Use the same method to create the following edit controls, below the "Last name" control:
    CaptionTypeSize
    First nameText30
    AddressMulti-line text
    EmailText255
    LoginText10
    PasswordPassword10
You may have noticed that these controls do not have the same type. To modify the type of edit control, simply open the description window.
Edit control description (Available types)
The form base is created. We are now going to improve it.
Let's see the page that we want to get:
Form
  • The "Address" edit control is used to type several lines.
  • The different edit controls are aligned.
  • The "Login" and "Password" controls have a red caption.

Improving the page

We are going to make some changes to the interface of this page.
First of all, let's take a look at the "Address" control. This control must display several lines on the screen. We are going to enlarge it.
Then, we are going to align the controls in the page.
Finally, we will modify the style of "Login" and "Password" controls.
  • To enlarge the "Address" control:
    1. Click the "Address" control.
    2. Handles appear.
    3. With the mouse, grab the handle at the bottom of input area and enlarge the area.
  • This allows you to increase the width of different page controls.
  • To align the controls in the page:
    1. Select the "Last name" control then all edit controls found in the window (hold the Ctrl key down while clicking the different controls).

      Remark

      Caution: the first selected control is essential. Indeed, the alignment options are based on:
      • The size of first selected control: it will be used as reference for the size of other controls.
      • The position of first selected control: all selected controls will be aligned in relation to the first selected control.
    2. Display the "Alignment" pane of WEBDEV menu. This pane contains all alignment options available for the controls.
      Alignment options
    3. We want the left and right sides of controls to be aligned. Click "Justify (Ins and Out)".

      Remark

      If you don't know which alignment to choose, hover the different options proposed by the "Alignment" pane of WEBDEV. When an option is hovered by the mouse cursor, the controls selected in the page are automatically positioned according to the hovered option.
      If the positioning suits you, all you have to do is click the option.
      If the positioning does not suit you, all you have to do is click inside the page: the controls move back to their initial position.
    4. Save the page: click Saving an element among the quick access buttons (or press Ctrl + S).

Modifying the style of "Login" and "Password" controls

To display the caption of "Login" and "Password" controls, we are going to modify the default style associated with these controls.
  • To modify the default style:
    1. Select the "Login" control.
    2. Open the control description window (double-click the control for example).
    3. In the "Style" tab, select the "Caption (CSS)" element.
    4. Expand the "Color" combo box and select the red color.
      Style of a control

      Remark

      This style can be added to the style sheet of project in order to be re-used. To do so:
      1. Click "Add this style to the project" in the "WEBDEV style" pane on the right of description window.
      2. Give a name to the style.
      3. Click the "Add" button.
        Adding a style
      To re-use the created style and to associate it with another control:
      1. Select the control whose style must be modified.
      2. Open the popup menu of the control (right click) and select "Choose a WEBDEV style".
      3. In the window that appears, select the desired style and validate.
      Remark: Choosing an existing style will be performed in lesson 5.
    5. Validate the description window of the "Login" control.
  • To apply the same style to the "Password" control:
    1. Select the "Password" control.
    2. Press F4.

      Remark

      The F4 key is used to apply the last modifications performed to the selected controls. In our case, the change of color is automatically applied to the "Password" control.
    3. You get the following interface:
      Form

Page test

  • Run the test of this page (click the Run the test of a page icon among the quick access buttons). You have the ability to type data but this data will be neither processed, nor saved.
  • Close the browser.
Saving the data in a data file
When creating a form, the first thing that we want to do is save the data typed. This data can be saved in a text file, in an XML file or even in a database.
We have chosen the last option.
In WEBDEV, the database description is performed in a specific editor, the data model editor. This editor will be presented in details in the next section.
In this example, we are going to define the database linked to the created controls via a straightforward feature: the reverse engineering.


Teste

Teste
teste