|
|
|
|
|
|
|
|
|
|
- Lección 2 - Desarrollo web y WEBDEV
- Principio de Navegador/Servidor
- ¿Cómo funciona?
- ¿Y en WEBDEV?
- Ejemplo práctico
- En resumen
Tutorial - Presentación de WEBDEVLección 2 - Desarrollo web y WEBDEV Abordaremos los siguientes temas: - Principio de Navegador/Servidor.
- Cómo crear un sitio.
 10 min Principio de Navegador/Servidor ¿Cómo funciona? Un sitio de Internet o intranet funciona de la siguiente manera: - El cliente (usuario de Internet) utiliza un navegador para acceder al sitio.
- El navegador envía una solicitud al servidor que aloja el sitio. En esta solicitud, se indica la página que debe mostrarse y los diferentes parámetros que permiten al servidor construir la página correspondiente.
- El servidor recibe la solicitud, la procesa y devuelve la página "HTML" correspondiente. HTML (HyperText Markup Language) es el lenguaje utilizado por todos los navegadores para mostrar páginas web.
Por lo tanto, hay dos tipos de eventos: - Eventos que se ejecutan a nivel del navegador, en el equipo del usuario.
- Eventos que se ejecutan a nivel del servidor.
El código que se ejecuta a nivel del navegador se llama código JavaScript. Los navegadores solo pueden ejecutar código JavaScript. ¿Y en WEBDEV? Con WEBDEV, todo se desarrolla: - en un editor WYSIWYG ("What You See Is What You Get"). Esto significa que el contenido de las páginas aparece en el editor exactamente como se verá en el resultado final.
- en código WLanguage.
WEBDEV convierte la página creada en el editor en una página HTML que puede ser leída por los navegadores. Los eventos ejecutados a nivel del servidor se escriben en WLanguage.
Los eventos ejecutados a nivel del navegador se escriben en WLanguage y se convierten a Javascript. Para crear un sitio WEBDEV, solo necesita desarrollarlo en WLanguage. WEBDEV utiliza dos tipos de código: código en el lado del servidor y código en el lado del navegador. La distinción entre servidor y navegador se hace por razones de rendimiento. La conexión a Internet se interpone entre el navegador y el servidor, lo que implica tiempos de respuesta, latencia, etc. Algunas operaciones sencillas pueden realizarse directamente en el navegador, sin volver al servidor. Para entender mejor la diferencia entre los eventos Servidor y Navegador, hemos preparado un ejemplo sencillo: - En la página de inicio, haga clic en "Tutorial" y, a continuación, en "Tutorial - Presentación de WEBDEV", haga clic en "Abrir el proyecto de ejercicio".
 Si el UAC está activado en Windows, puede que se muestre una ventana específica. Esta ventana indica que el programa WD300Admin.exe se ejecutará en el equipo actual. Conceda la autorización. Este programa corresponde al administrador local de WEBDEV que permite probar los sitios desarrollados con WEBDEV. Veremos sus funcionalidades más adelante en este tutorial. - Abra la página "PAGE_Product_form" en el editor:
- En el panel "Explorador de proyectos", despliegue "Páginas" y, a continuación, despliegue "Administration_pages".
- Haga doble clic en "PAGE_Product_form".
- La página aparece en el editor.
Esta página es un formulario para crear y editar productos.
Desplace la página hacia abajo.
Esta página contiene controles Campo de entrada y un botón "OK" en la parte inferior. El control Botón "OK" debe hacer dos cosas: - Comprobar que se han rellenado todos los campos obligatorios.
- Guardar los valores de los controles en la base de datos.
Estas acciones se ejecutan en el código del botón. Código del botón "OK": - Seleccione el botón "OK". El control aparece con controladores de tamaño azules.
- Presione F2 para abrir el editor de código. Los eventos WLanguage del control Botón se muestran con el código WLanguage asociado.
Analicemos el código WLanguage: - El control Botón tiene tres eventos: Inicialización, clic en el lado del navegador y clic en el lado del servidor.
- Los distintos tipos de código se identifican mediante colores:
- El código Navegador, que se ejecutará en el equipo del usuario final, tiene un encabezado verde.
- El código Servidor, que se ejecutará en el servidor, tiene un encabezado amarillo.
En nuestro ejemplo, todas las verificaciones de entrada se realizan en código Navegador (encabezado verde). Por ejemplo, el control EDT_Reference no debe estar vacío. El código correspondiente es el siguiente:
Clic en BTN_OK (evento onclick navegador) IF EDT_Reference ~= "" THEN
Error("Enter a reference.")
SetFocusAndReturnToUserInput(EDT_Reference)
END
Esta verificación se realiza en código Navegador porque no hay necesidad de volver al servidor para comprobar que los controles están completos. Esto evita solicitudes innecesarias al servidor, reduce los tiempos de espera y mejora la navegación por el sitio web. Una vez que se ejecuta el código Navegador, la página envía los valores introducidos al servidor. Luego, el servidor ejecuta el código Servidor. En el código Servidor, se puede procesar la información recibida. En nuestro ejemplo, la información recibida se agrega a la base de datos mediante el siguiente código:
Clic en BTN_OK (servidor) PageToFile()
IF ImagePath<>"" THEN
Product.Visual = fLoadBuffer(ImagePath)
END
IF Product..NewRecord THEN
Product.Add()
ELSE
Product.Modify()
END
PAGE_List_of_products.Display()
Esta operación no se puede realizar en el código Navegador porque la base de datos es común a todos los usuarios del sitio y se encuentra en el servidor. Hemos cubierto los conceptos básicos de un sitio web. Abrimos un proyecto y vimos los diferentes tipos de código disponibles. En el siguiente tutorial, crearemos un sitio web. Hemos terminado esta lección. Recuerde cerrar el proyecto actual: - En la pestaña "Inicio", en el grupo "General", despliegue "Cerrar" y seleccione "Cerrar proyecto".
- Guarde los cambios si es necesario.
La página de inicio de WEBDEV aparece. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|