Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
controles:twebpage [15/03/2020 15:30] pedro |
controles:twebpage [04/05/2023 19:26] (actual) pedro [Métodos] |
||
---|---|---|---|
Línea 17: | Línea 17: | ||
</html> | </html> | ||
- | Materialize añade otras, todas dentro de <body> | + | Materialize añade **header**, **main** y **footer**, todas dentro de <body>. |
+ | |||
+ | Como Néfele se creo basándonos en Materialize mantiene esta estructura, por lo que tenemos propiedades para incluir contenido en cualquiera de las secciones. | ||
+ | |||
+ | Néfele añade en el <head> **script** para agrupar todos los códigos JS y JQuery que tienen que estar necesariamente en el <head> y **style** para agrupar los stilos CSS que hemos añadido directamente a tWebPage. | ||
+ | |||
+ | También añadimos **script** al final del <body> para los códigos JS y JQuery que no necesitan estar en el <head>. | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script> /* Códigos JS y JQuery que necesitan cargarse al principio de la página */ | ||
+ | . | ||
+ | . | ||
+ | </script> | ||
+ | <style> /* Estilos CSS que hemos añadido a tWebPage */ | ||
+ | . | ||
+ | . | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
Línea 35: | Línea 49: | ||
. | . | ||
</footer> | </footer> | ||
+ | <script> /* Códigos JS y JQuery del resto de la página */ | ||
+ | . | ||
+ | . | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
| | ||
De esta manera todo el contenido de la página esta dentro de <body> pero estructurado en tres areas para facilitar el tratamiento con las librerías JS de Materialize. | De esta manera todo el contenido de la página esta dentro de <body> pero estructurado en tres areas para facilitar el tratamiento con las librerías JS de Materialize. | ||
- | |||
- | Como Néfele se creo basándonos en Materialize mantiene esta estructura, por lo que tenemos propiedades para incluir contenido en cualquiera de las secciones. | ||
- | |||
===== Propiedades ===== | ===== Propiedades ===== | ||
Línea 48: | Línea 63: | ||
|cClassId | "wpg" | | 0.1| | |cClassId | "wpg" | | 0.1| | ||
| **Contenido de la Página** |||| | | **Contenido de la Página** |||| | ||
- | |cInMain | | Contenido para incluir en el <Main> de la página | 0.1| | ||
- | |cInHeader | | Contenido para incluir en el <Header> de la página | 0.1| | ||
- | |cCSS | | Contenido de Estilo CSS para incluir en el <Head> de la página| 0.1| | ||
|cInHead | | Contenido a Añadir en el <Head> de la página| 0.1| | |cInHead | | Contenido a Añadir en el <Head> de la página| 0.1| | ||
- | |cInFooter | | Contenido a Añadir en el <Footer>, si contiene algo NO se pone el estándar de Materileze| 0.1| | + | |cCSS | | Contenido de Estilo CSS para incluir en el <Head> de la página| 0.1| |
- | |aScript | {} | Array de Script para incluir al Pie| 0.1| | + | |aHeadScript | {} | Array de Script para incluir en el <Head>| 0.1| |
- | |aHeadScript | {} | Array de Script para incluir en el Head| 0.1| | + | |aHeadLinks | {} | Array de Links para incluir en el <Head>| 0.1| |
- | |aHeadLinks | {} | Array de Links para incluir en el Head| 0.1| | + | |aHeadMetas | {} | Array de Meta para incluir en el <Head>| 0.5| |
+ | |cHeadMeta | | Método rápido de añadir un elemento a aHeadMetas | 0.5| | ||
+ | |cInHeader | | Contenido para incluir en el <Header> de la página | 0.1| | ||
+ | |cInMain | | Contenido para incluir en el <Main> de la página | 0.1| | ||
+ | |cInFooter | | Contenido a Añadir en el <Footer>, si contiene algo **NO** se utiliza el Footer estándar de [[https://materializecss.com/footer.html|Materialize]]| 0.1| | ||
+ | |aScript | {} | Array de Script para incluir en la sección <Script> del <Body>| 0.1| | ||
+ | |cScript | | Método rapido de añadir un elemento a aScript | 0.3| | ||
+ | | **Control de Versiones** |||| | ||
|cVersionMaterialize | | Versión del MaterializeCSS a utilizar "1.0.0"| 0.1| | |cVersionMaterialize | | Versión del MaterializeCSS a utilizar "1.0.0"| 0.1| | ||
|cVersionJquery | | Versión del JQuery que vamos a utilizar "3.4.1.min"| 0.1| | |cVersionJquery | | Versión del JQuery que vamos a utilizar "3.4.1.min"| 0.1| | ||
|cVersionCoreFiles | | Versión a usar de nefelecorecss.css y nefelecorejs.js| 0.1| | |cVersionCoreFiles | | Versión a usar de nefelecorecss.css y nefelecorejs.js| 0.1| | ||
| **Automatizaciones de la Página** |||| | | **Automatizaciones de la Página** |||| | ||
- | |aOnReady | {} | Código a Ejecutar cuando este lista la página| 0.1| | + | |[[propiedades:cOnReady|aOnReady]] | {} | Código a Ejecutar cuando este lista la página| 0.1| |
+ | |[[propiedades:cOnReady]] | | Método rapido de añadir un elemento a aOnReady| 0.3| | ||
|cAutoJS | | Función del proyecto a llamar en la cabecera para cargar funciones JS| 0.1| | |cAutoJS | | Función del proyecto a llamar en la cabecera para cargar funciones JS| 0.1| | ||
|lAutoReloaded | .t. | Obliga a que la página se recargue al ir atrás en el navegador| 0.1| | |lAutoReloaded | .t. | Obliga a que la página se recargue al ir atrás en el navegador| 0.1| | ||
Línea 74: | Línea 94: | ||
|cClrPane | "white" | Color del fondo de la Página| 0.1| | |cClrPane | "white" | Color del fondo de la Página| 0.1| | ||
|cIcon | | [[https://es.wikipedia.org/wiki/Favicon|Favicon]] de la página| 0.1| | |cIcon | | [[https://es.wikipedia.org/wiki/Favicon|Favicon]] de la página| 0.1| | ||
+ | |cLanguage | "es-ES" | Idioma de la página| 0.4| | ||
|lFullScreen | .f. | Muestra la página a pantalla completa| 0.1| | |lFullScreen | .f. | Muestra la página a pantalla completa| 0.1| | ||
|lNoBackButton | .f. | Anula el botón back del navegador| 0.1| | |lNoBackButton | .f. | Anula el botón back del navegador| 0.1| | ||
Línea 81: | Línea 102: | ||
|aLinks | {} | Lista de Links en el Footer Estandar, es un array de arays {cURL,cText}| 0.1| | |aLinks | {} | Lista de Links en el Footer Estandar, es un array de arays {cURL,cText}| 0.1| | ||
|cTitleFooter | | Titulo en el Footer| 0.1| | |cTitleFooter | | Titulo en el Footer| 0.1| | ||
- | |cClrFotText | "white" | Color del Titulo del Footer| 0.1| | + | |cClrFootText | "white" | Color del Titulo del Footer| 0.1| |
- | |cClrFotPane | "pink" | Color del fondo del Footer| 0.1| | + | |cClrFootPane | "pink" | Color del fondo del Footer| 0.1| |
|cSubTitle | | Subtitulo del Footer| 0.1| | |cSubTitle | | Subtitulo del Footer| 0.1| | ||
|cClrSubText | "grey" | Color del texto del Subtitulo del Footer| 0.1| | |cClrSubText | "grey" | Color del texto del Subtitulo del Footer| 0.1| | ||
Línea 88: | Línea 109: | ||
|cClrCrText | "white" | Color del Texto del Copyright| 0.1| | |cClrCrText | "white" | Color del Texto del Copyright| 0.1| | ||
|cClrCrPane | | Color del fondo del Copyright| 0.1| | |cClrCrPane | | Color del fondo del Copyright| 0.1| | ||
+ | |aBreadCrumbs | | Array de path para un [[https://materializecss.com/breadcrumbs|BreadCrumbs]] en el footer | 0.3| | ||
| **ShadowSheet - Bloqueo temporal de la página mientras se realizan procesos** |||| | | **ShadowSheet - Bloqueo temporal de la página mientras se realizan procesos** |||| | ||
|lShadowSheet | .t. | Si queremos activar el Shadowsheet| 0.1| | |lShadowSheet | .t. | Si queremos activar el Shadowsheet| 0.1| | ||
Línea 101: | Línea 123: | ||
|lAlerts | .f. | Carga js de [[https://sweetalert.js.org/|SweetAlert]]| 0.1| | |lAlerts | .f. | Carga js de [[https://sweetalert.js.org/|SweetAlert]]| 0.1| | ||
|lGoogleChart | .F. | Inicializa la página para que pueda contener [[https://developers.google.com/chart/|Google Chart]]| 0.1| | |lGoogleChart | .F. | Inicializa la página para que pueda contener [[https://developers.google.com/chart/|Google Chart]]| 0.1| | ||
- | |lTourShow | .T. | Si se mostrará o no el tour| 0.1| | + | |lTourShow | .t. | Si se mostrará o no el [[http://iamdanfox.github.io/anno.js/|Tour]]| 0.1| |
- | |aTour | {} | Array con todos cId de los elementos del tour| 0.1| | + | |aTour | {} | Array con todos cId de los elementos del tour, si esta vació no se tomara en cuenta lTourShow| 0.1| |
|cAnalytics | | ApiKey de Google Analitics| 0.1| | |cAnalytics | | ApiKey de Google Analitics| 0.1| | ||
|cGpsField | | Nombre del control que guardará la información [[componentes:Coordenadas Gps|GPS]]| 0.1| | |cGpsField | | Nombre del control que guardará la información [[componentes:Coordenadas Gps|GPS]]| 0.1| | ||
- | | **One Signal** |||| | + | | **[[https://onesignal.com/|One Signal]]** |||| |
|cOneSignalKey | | App key de onesignal| 0.1| | |cOneSignalKey | | App key de onesignal| 0.1| | ||
|cOneSignalKeySafari | | App key onesignal para navegadores safari| 0.1| | |cOneSignalKeySafari | | App key onesignal para navegadores safari| 0.1| | ||
- | | **Ventanas Modal** |||| | + | | **Ventanas [[https://materializecss.com/modals.html|Modal]]** |||| |
- | |cModalMinTop | "4%" | Minimo Top para ventana modal| 0.1| | + | |cModalMinTop | "4%" | Mínimo Top para ventana modal| 0.1| |
|cModalMaxTop | "10%" | Máximo Top para ventana modal| 0.1| | |cModalMaxTop | "10%" | Máximo Top para ventana modal| 0.1| | ||
+ | | **Progressive Web App** |||| | ||
+ | |[[controles:wManifest|oManifest]] | | Objeto de la clase wManifest para la configuración del archivo .webmanifest y los metas necesarios para utilizar nuestra web como PWA| 0.5| | ||
+ | |lManifest | .f. | Vamos a utilizar webManifest | 0.5| | ||
- | ===== Metodos ===== | + | ===== Métodos ===== |
^Nombre ^Descripción ^Versión ^ | ^Nombre ^Descripción ^Versión ^ | ||
| New() | Instancia la clase para irle añadiendo los controles| 0.1| | | New() | Instancia la clase para irle añadiendo los controles| 0.1| | ||
| Create() | Monta todo el código necesario para que el navegador pueda visualizar la página y lo retorna como una cadena| 0.1| | | Create() | Monta todo el código necesario para que el navegador pueda visualizar la página y lo retorna como una cadena| 0.1| | ||
- | | AddHTML(cText) | Nos Añade en el HTML el texto| 0.1| | + | | [[metodos:addhtml|AddHTML(cText)]] | Nos Añade en el HTML el texto| 0.1| |
- | | ProccessPhp(cText) | Nos Añade el texto como un bloque PHP| 0.1| | + | | [[metodos:processphp|ProccessPhp(cPhpFile, aParams, cId)]] | Añade al código HTML una llamada por Ajax a un modulo PHP, esto nos permite añadir a nuestro proyecto Néfele funcionalidades que ya tengamos operativas en PHP y que aun no hemos pasado a Néfele| 0.1| |
| **Solo operativas en [[tecnicas:debugger|Modo Debugger]]** ||| | | **Solo operativas en [[tecnicas:debugger|Modo Debugger]]** ||| | ||
- | | [[metodos:LogDebug|LogDebug(cText,lComillas)]] | Nos Envía cText a la Consola del navegador y a NefeleConsole, si lComillas == .F. podemos pasarle una instrucción que se ejecuta en la página| 0.1| | + | | [[metodos:LogDebug|LogDebug(cText,lComillas)]] | Nos Envía cText a la Consola del navegador y a [[utilidades:nefeleconsole|Néfele Console]], si lComillas == .F. podemos pasarle una instrucción que se ejecuta en la página| 0.1| |
- | | [[metodos:LogError|LogError(cText)]] | Nos Añade un Mensaje de Error en la Consola del Navegador y en NefeelConsole| 0.1| | + | | [[metodos:LogError|LogError(cText)]] | Nos Añade un Mensaje de Error en la Consola del Navegador y en [[utilidades:nefeleconsole|Néfele Console]]| 0.1| |
| [[metodos:Assert|Assert(cText)]] | Nos Añade un Comentario al HTML| 0.1| | | [[metodos:Assert|Assert(cText)]] | Nos Añade un Comentario al HTML| 0.1| | ||
+ | | [[metodos:AddTimer|AddTimer()]] | Añade un timer JS a la página| 0.3| | ||
~~DISCUSSION|Comentario tWebPage~~ | ~~DISCUSSION|Comentario tWebPage~~ | ||