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:
Na faixa de opções, no painel "Página", no grupo "Editar", expanda "Outras ações" e selecione "Gerar uma descrição de arquivo".
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.
O assistente de geração de arquivo de dados é iniciado.
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.
Vá para a próxima etapa (botão "Avançar" na parte inferior do assistente).
Escolha os controles a serem recuperados. Em nosso caso, todos os controles de página correspondem a um item.
Vá para a próxima etapa.
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).
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.
Vá para a próxima etapa.
Valide o resumo. A descrição do arquivo aparece no editor de modelo de dados.
Salve a análise: clique entre os botões de acesso rápido (ou pressione Ctrl + S).
Feche o editor de modelo de dados.
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.
Clique em "Sim".
Não vamos perder mais tempo no editor de modelo de dados. Ele será apresentado em detalhes em outra lição.
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:
On the "Creation" pane, in the "Usual controls" group, click .
The control currently created follows the mouse movement.
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:
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.
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.
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:
Click the "Address" control.
Handles appear.
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:
Select the "Password" control.
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.
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.
entre os botões de acesso rápido (ou pressione Ctrl + S).
.
icon among the quick access buttons). You have the ability to type data but this data will be neither processed, nor saved.