https://youtu.be/fg9Dv-3rXFk
Bom Dia/Boa Tarde/Boa Noite
Esse Ao Vivo vai estrear as 16:00 do dia 14/09/2020
DICAS 3069 -WEBDEV TUTORIAL 3-Licao 1.2-14-09-2020 16hrs-Web development and WEBDEV - PARTE B
Lesson 1.2. Web development and WEBDEV
ASSUNTOS
ABRIR EXEMPLO CONCEITOS
MOSTRANDO ONDE APARECE PROJECT EXPLORER
ABRINDO PAGINA PAGE_REGISTRATION
EXPLICANDO OS EVENTOS DO BOTAO
EXPLICANDO CODIGO NO LADO BROWSER
EXPLICANDO CODIGO NO LADO SERVIDOR
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
DICAS 3070 -WEBDEV TUTORIAL 4-Licao 1.2-14-09-2020 17hrs-Web development and WEBDEV - PARTE C
// btn registro BROWSER
// Verifique se o controle "EDT_LastName" é igual a uma string vazia (excluindo espaços e pontuação)
// Check whether the "EDT_LastName" control is equal to an empty string (excluding spaces and punctuation)
// Vérifie si le champ "EDT_LastName" est égal à une chaîne vide (hors espaces et ponctuation)
// Verifica si el control "EDT_LastName" es igual a una cadena vacía (excluidos los espacios y la puntuación)
IF EDT_Ultimo_nome ~= "" THEN
//O controle está vazio, exibe uma mensagem de erro para o usuário
// The control is empty, display an error message to the user
//Le champ est vide, affiche un message d'erreur à l'utilisateur
//El control está vacío, muestra un mensaje de error al usuario
Error("Digite seu Ultimo nome")
//Retorne em edição para o controle "EDT_LastName" (sem executar o resto do código)
// Return in edit into the "EDT_LastName" control (without running the rest of code)
//Retour en edit dans le champ "EDT_LastName" (sans exécuter le reste du code)
//Regrese en la edición al control "EDT_LastName" (sin ejecutar el resto del código)
ReturnToCapture(EDT_Ultimo_nome)
END
IF EDT_Primeiro_Nome ~= "" THEN
Error("Digite seu primeiro nome")
ReturnToCapture(EDT_Primeiro_Nome)
END
IF EDT_email ~= "" THEN
Error("Insira o seu endereço de email")
ReturnToCapture(EDT_email)
END
IF EDT_Senha ~= "" THEN
Error("Coloque sua senha")
ReturnToCapture(EDT_Senha)
END
// O código do navegador é finalizado, a página irá enviar os valores dos controles para o servidor e irá
// peça a ele para executar o código do servidor do botão
// The browser code is ended, the page will send the values fo controls to the server and will
// lui demande d'exécuter le code serveur du bouton
// Le code navigateur est terminé, la page enverra les valeurs des contrôles au serveur et
// ask it to run the server code of the button
// El código del navegador finaliza, la página enviará los valores de los controles al servidor y
// pedirle que ejecute el código de servidor del botón
===========================
// BTN REGISTRO SERVER
// Reinicialize a estrutura do cliente
// Reset the customer structure
// Réinitialiser la structure client
// Restablecer la estructura del cliente
HReset(Customer)
// Recupere os valores dos controles na estrutura do cliente diretamente
// Retrieve the values of controls in the customer structure directly
// Récupère directement les valeurs des champs dans la structure client
// Recuperar los valores de los controles en la estructura del cliente directamente
ScreenToFile()
// Agrega el cliente a la base de datos
// Add the customer into the database
// Ajout du client dans la base de données
// Agrega el cliente a la base de datos
HAdd(Customer)
Practical example
- To better understand the difference between server and browser events, we have prepared a simple example:
- Start WEBDEV 25 (if necessary). Display the WEBDEV home page if necessary: press Ctrl + <.
- Open the "WEBDEV concepts" project. To do so, in the home page, click "Tutorial" and select the project named "WEBDEV concepts (Exercise)".
Remark
If the UAC is enabled in Windows, a specific window may be displayed. This window indicates that the WD250Admin.exe program will be run on the current computer. Grant the authorization. This program corresponds to the local WEBDEV administrator that is used to run the test of sites developed with WEBDEV. Its features will be presented later in this tutorial.
- Open the "PAGE_Registration" page in the editor: double-click its name in the "Project explorer" pane.
Remark
The "Project explorer" pane allows you to display in the environment a list of all the elements found in the project. These elements are grouped by theme: Pages, Procedures, ... To display the "Project explorer" pane:- On the "Home" pane, in the "Environment" group, expand "Panes".
- In the list of panes that is displayed, select "Project explorer".
- This page contains edit controls and a "REGISTER" Button control. The "REGISTER" Button control must do two things:
- Check that all controls have been filled.
- Save the values of controls in the database.
- Let's see the WLanguage code associated with the Button control:
- Select the "Register" Button control.
- Display the popup menu of the control (right click) and select "Code".
- The code editor is displayed with the different events linked to the Button control. To see all the events associated with the Button control, press the Page Up key.
| Remark | The code editor allows you to write the WLanguage code of your processes. The code editor presents the events associated with each control, which means the events on which a specific process can be run. Remark: Events are displayed in the order in which they will be run. For example, the events associated with the Button control are:
|
- Let's study the WLanguage code displayed: the server code and the browser code are identified by different colors:
- The browser code, that will be run on the computer of Web user, is displayed in green.
- The server code, that will be run on the server, is displayed in yellow.
In our example, all input checks are performed in browser code (green code). For example, the EDT_LastName control must not be empty. The corresponding code is as follows:
This check is performed in browser code because there is no need to go back to the server to check that the controls are filled.
// Check whether the "EDT_LastName" control is equal to empty string
// (excluding spaces and punctuation)
IF EDT_LastName ~= "" THEN
// The control is empty, display an error message to
// the user
Error("Type your last name")
// Return in edit into the "EDT_LastName" control (without running
// the rest of code)
ReturnToCapture(EDT_LastName)
END
// (excluding spaces and punctuation)
IF EDT_LastName ~= "" THEN
// The control is empty, display an error message to
// the user
Error("Type your last name")
// Return in edit into the "EDT_LastName" control (without running
// the rest of code)
ReturnToCapture(EDT_LastName)
END
This check is performed in browser code because there is no need to go back to the server to check that the controls are filled.
This is used to avoid useless round trips and to reduce the wait for the Web user: the navigation is more fluid.
Once the browser code was run, the page sends the values typed to the server. Then, the server runs the server code. In the server code, you have the ability to process the information received.
In our example, the information received is added into the database via the following code:
This operation cannot be performed in browser code because the database is common to all site users and therefore it is located on the server.
// Reset the customer structure
HReset(Customer)
// Get the values of controls in
// the customer structure
ScreenToFile()
// Add the customer into the database
HAdd(Customer)
HReset(Customer)
// Get the values of controls in
// the customer structure
ScreenToFile()
// Add the customer into the database
HAdd(Customer)
- Close the code window (click the cross in the top right corner).
- Close the page displayed in the editor (click the cross in the top right corner).
