AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Características específicas de WEBDEV
  • Presentación
  • Uso de planos
  • Efectos de carga
  • Visualización retardada
  • Uso de ventanas emergentes
  • Autenticación
  • Gestión de la tecla Atrás
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación
Una "Single Page App" es una aplicación Web (Internet o INTRANET) cuyos todos los Page s están agrupados en un único Page.
Con WEBDEV, este tipo de aplicación puede ser fácilmente reutilizada a través de planos, popups, cookies, etc.
Uso de planos
A partir de la versión 22, WEBDEV permite utilizar planos en una Web Page. El uso de planos evita tener que ir y volver con el servidor cada vez que se cambia la Page: las aplicaciones son más fluidas, más "nativas".
El modo de operación de los planos en WEBDEV es similar al modo de operación de los planos en WINDEV/WINDEV Mobile.
Sin embargo, se observan algunas diferencias:
  1. Los planos están disponibles de forma independiente para cada elemento del contenedor: la Page, un área de diseño, un área de texto enriquecido, una celda. Esta característica le permite realizar varias combinaciones de visualización.
  2. La gestión de aviones debe estar explícitamente habilitada en el elemento. Desde el elemento description del contenedor, pestaña "UI", basta con activar la opción "Habilitar la gestión de planos".
  3. No hay plano "0".
    • En WINDEV, una control que debe mostrarse en todos los planos es relacionado al plano "0".. Es el plano por defecto, que siempre es Visible.
    • En WEBDEV, un control que siempre debe ser Visible debe ser colocado explícitamente en todos los aviones con contenido.
  4. El plano de un control no se puede modificar mediante programación. La asociación entre una control y uno o más aviones se realiza sólo en edición.
Para cambiar el plano mostrado , use el Tela impermeable Property en el elemento contenedor.
// Go to Dashboard plane
CELL_Plane.Plane = 2

Efectos de carga

Uno o más efectos pueden ocurrir al pasar de un avión a otro. Los efectos pueden definirse desde la ventana description del elemento, pestaña "Estilo".. Se pueden definir los efectos:
  • en el elemento de contenedor que gestiona el avión. Todo lo que tienes que hacer es añadir un efecto con un release adaptado (cambiar de plano, ir al plano anterior, etc.). 6 efectos disponibles para gestionar el cambio de avión: barrido de planos, secuencia de planos Blur, fundido de planos (%), superposición de planos, pliegue de planos, volteo de planos.
  • en el control encontrado en el avión. Sólo hay que añadir un efecto con activación de aparición (mostrar el plano donde se encuentra la control) o desaparición (mostrar otro plano).

Visualización retardada

Por Default, la Page es cargada íntegramente por el navegador, con el contenido completo de cada plano. En una aplicación en la que todos los elementos se encuentran en una única Page, este modo de funcionamiento puede ralentizar considerablemente la visualización de la Page.
Para evitar esta lentitud, los aviones pueden ser cargados en modo retrasado: el contenido del plano se cargará efectivamente cuando se realice una solicitud de carga del plano:
  • al cargar la página si el avión es mostrado por Default,
  • al cambiar el plano a través de la Tela impermeable Property.
Para retrasar la carga de los planos, basta con marcar "Carga diferida del contenido de los planos" en la pestaña "UI" del elemento contenedor description. Esta opción habilita dos nuevos eventos "Retraso en la carga del plano", disponibles en el editor de código:
  • un servidor AJAX Event llamado cuando se muestra un avión,
  • un navegador llamado Event una vez que el avión está cargado.
El plano debe programarse en estos eventos para que se cargue realmente..
// -- Event "Defer loading of a plan (server)"
// According to plane
SWITCH MySelf.Plane
// Dashboard
CASE 2
LoadWidget()
LoadChart()
// Products
CASE 3
...
END

En estos dos eventos, el número del avión que acaba de ser visualizado está disponible a través de la Tela impermeable Property.
Si quieres saber el número del avión que se mostró antes, sólo tienes que guardarlo en un Variable.
Para más detalles sobre los aviones, véase Los aviones en WEBDEV.
Uso de ventanas emergentes
Para que el usuario Web tenga la sensación de utilizar una aplicación nativa, tiene la posibilidad de utilizar cuadros de diálogo, para proponer una autenticación, por ejemplo.
Para obtener este tipo de UI con WEBDEV, simplemente use las páginas Popup.
Para crear una página Popup, en la pestaña "Creación", en el grupo "Contenedores", haga clic en "Popup".
Una ventana emergente Page se muestra desde un código de navegador, a través de PopupDisplay. Esta función espera que se muestre el nombre del popup y su posición (posición específica o posición relativa a una control) como parámetro.
// Displays the connection popupPopupDisplay(POPUP_Connection, popupTopLeft, 0, 0)
Para obtener más información, consulte La Control Popup.
Autenticación
La autenticación es un elemento importante en una aplicación Web.
La autentificación no debe realizarse en un navegador Event: una persona maliciosa podría fácilmente pasar por alto la autenticación.
Sin embargo, debe evitar el uso de retornos de servidor en una sola aplicación de Page App.. Por lo tanto, se debe utilizar un Ajax Process:
  • llamando a la función WLanguage AjaxExecute.
    // Checks the information// for user authentication
    let sConnectionIdentifier = AJAXExecute(CheckConnectionInformation, EDT_Login, EDT_Password)
  • activando el botón de conexión en modo Ajax (si el código de conexión se encuentra directamente en el botón).
Para que el usuario no tenga que teclear sus identificadores en cada conexión, su autenticación puede ser almacenada a través de un Cookie.
Durante el próximo inicio de la aplicación, si el Cookie se encuentra y es correcto, el usuario se autenticará automáticamente y accederá el contenido de la aplicación directamente.
Para realizar este comportamiento, debes:
  1. Almacenar una Cookie durante la autenticación a través de CookieWrite. El Cookie no almacena el nombre de usuario directamente, sino un valor aleatorio generado durante su conexión y que fue almacenado en la base de datos.
    //-- Server procedure run via AjaxExecute
    PROCEDURE CheckConnectionInformation(...
    sLogin is string, sPassword is string)
    // Finds the user in database
    HReadSeekFirst(User,  Login, sLogin)
    ...
    // Stores a connection identifier
    User.ConnectionGUID = GetGUID()
    HModify(User)
    // The identifier is returned (to be stored)
    RETURN User.ConnectionGUID
    //-- Browser code of connection button// Generates a cookie if necessary
    IF CBOX_RememberMe THEN
    CookieWrite("Connection", sConnectionIdentifier)
    END
  2. En la página de carga de Event( OnLoad), si se encuentra la Cookie, el popup de autenticación no se muestra y el usuario se conecta directamente.
    //-- Browser code to load a page
    let sConnectionGUID = CookieRead("Connection")
    // Finds the user
    let bKnownUser = AJAXExecute(CheckConnectionInformation, sConnectionGUID)
    //-- Server procedure
    PROCEDURE CheckConnectionIdentifier(LOCAL sConnectionIdentifier)
    // Finds the user
    HReadSeekFirst(User, ConnectionGUID, sConnectionIdentifier)
    RETURN HFound(User)
Consejo: Para una aplicación Web con autenticación, no olvide utilizar una conexión HTTPS para que el nombre de usuario y la contraseña no sean interceptados.
Gestión de la tecla Atrás
Cuando el usuario de la Web pulsa el botón "Atrás" del navegador, éste vuelve a la página anterior de Page. ¡Una única aplicación Page incluye un único Page! Por lo tanto, ¡el botón Atrás vuelve al Page que aparecía antes de iniciar la aplicación!
WEBDEV permite asignar un comportamiento estándar al botón de retroceso.
  • El historial de navegación se rellena automáticamente e intercepta la Event "Atrás" (o "Siguiente") para control la pantalla.
  • La aplicación Page de Single Page App se muestra en su estado anterior.
Esta gestión se realiza mediante programación:
  • a través de las funciones:
    BrowserHistoryAddAñade una entrada en la historia de la navegación asociando datos. Estos datos se transmitirán al volver a esta entrada.
    BrowserHistoryModifyModifica los datos de la entrada actual en el historial de navegación. Estos datos se transmitirán al volver a la entrada actual.
  • a través de la opción Event "Desplazarse al historial de navegación", que se activa cuando el usuario hace clic en "Atrás" o "Siguiente".. Para obtener más información, consulte Eventos opcionales associated con páginas
Versión mínima requerida
  • Versión 22
Comentarios
Obs


Os planes normalmente se usa uma quantidade limitada no máximo 3 onde pode por na plane 1 o table grid, na plane 2 os campos do formulário e na plane 3 o select view.

Lembro que a janela só vai abrir se todo o oconteudo for carregado na memória, deve ser usado com extrema prudência.


A limited number of planes are normally used, at most 3, where you can put the table grid on plane 1, the form fields on plane 2 and the select view on plane 3.

Remember that the window will only open if all the content is loaded into memory, it must be used with extreme caution.
Boller
15 03 2024

Última modificación: 15/06/2023

Señalar un error o enviar una sugerencia | Ayuda local