|
|
|
|
- Presentación
- Uso de planos
- Efectos de carga
- Visualización retardada
- Uso de ventanas emergentes
- Autenticación
- Gestión de la tecla Atrás
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. 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: - 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.
- 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".
- 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.
- 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. 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. 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: - 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
- 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:
| | BrowserHistoryAdd | Añade una entrada en la historia de la navegación asociando datos. Estos datos se transmitirán al volver a esta entrada. | BrowserHistoryModify | Modifica 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|