controles:twebpage
Diferencias
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~~ | ||
controles/twebpage.1584286236.txt.gz · Última modificación: 21/07/2020 10:50 (editor externo)
