To create an edit control:
1. On the "Creation" pane, in the "Usual controls" group, click .
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.
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.


	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:

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:
Caption Type Size
First name Text 30
Address Multi-line text
Email Text 255
Login Text 10
Password Password 10

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:

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.

Display the "Alignment" pane of WEBDEV menu. This pane contains all alignment options available for the controls.

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.

Save the page: click 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:

Select the "Login" control.
Open the control description window (double-click the control for example).
In the "Style" tab, select the "Caption (CSS)" element.

Expand the "Color" combo box and select the red color.

Remark

This style can be added to the style sheet of project in order to be re-used. To do so:

Click "Add this style to the project" in the "WEBDEV style" pane on the right of description window.
Give a name to the style.
Click the "Add" button.

To re-use the created style and to associate it with another control:

Select the control whose style must be modified.
Open the popup menu of the control (right click) and select "Choose a WEBDEV style".
In the window that appears, select the desired style and validate.

Remark: Choosing an existing style will be performed in lesson 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:

Page test

Run the test of this page (click the 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.

Páginas

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

https://youtu.be/rmOaqIGUI4U

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

Nenhum comentário:

Postar um comentário

Teste

Marcadores


	Remark	You must create a control? Display the "Creation" pane of WEBDEV: all available controls are accessible in this pane.

Caption	Type	Size

First name	Text	30
Address	Multi-line text
Email	Text	255
Login	Text	10
Password	Password	10


	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.