domingo, 6 de setembro de 2020

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

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



PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
Playlist windev Franca PcSoft
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.


      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


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:
    First nameText30
    AddressMulti-line text
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:
  • 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).


      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)".


      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


      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.


      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:

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.

Nenhum comentário:

Postar um comentário