El código está distribuido en diferentes directorios en la raíz de Jeedom (/var/www/html por defecto):
La interfaz de Jeedom funciona como una página web, basada en PHP integrado con SQL y JavaScript/CSS.
Al principio, el navegador carga el archivo /index.php :
install/setup.php si es necesario./core/php/core.inc.php./desktop/php/index.php o móvil mobile/html/home.html en función de los parámetros de la URL.La interfaz de Jeedom funciona según el principio de «una sola página». Una vez cargada, las diferentes páginas se muestran cambiando el contenido de un contenedor.
El archivo principal en Desktop es /desktop/php/index.php.
Cada página tiene al menos dos parámetros en la URL. Ejemplo:
https://my.dns1.jeedom.com/index.php?v=d&p=dashboard :
d para ordenador de sobremesa, m para móviles.dashboard.En este caso, el archivo /desktop/php/index.php Se va a cargar el archivo /desktop/php/dashboard.php en la div div_pageContainer. Este también cargará el archivo /desktop/js/dashboard.js que incluye las funciones de JavaScript específicas para la visualización de esta página (en este caso, el Dashboard).
El archivo /desktop/php/index.php también se encarga de:
desktop/common/js/utils.jsEl archivo desktop/common/js/utils.js por lo tanto, siempre está presente y se carga una sola vez. Permite:
div_pageContainer.Así, los archivos index.php y utils.js proporcionan la estructura y las funciones básicas de la interfaz.
A continuación, se carga el contenido de la página solicitada desde desktop/php/page.php y desktop/js/page.js.
Estos archivos de contenido, orientados exclusivamente a la interfaz, pueden acceder a las funciones del Core (las clases /core/class) directamente en PHP, o en JavaScript gracias a las clases de JavaScript (/core/js) mediante llamadas AJAX (/core/ajax).
Las funciones internas del Core están bien separadas para el funcionamiento interno (back-end), pero son accesibles a través de la interfaz. Del mismo modo, cada página tiene su propio código PHP y JavaScript. Esto permite mejorar el desarrollo y el mantenimiento del código, además de optimizar el rendimiento al cargar únicamente las clases y funciones necesarias.
Desde la versión v4.2 de Core, todas las funciones js del archivo desktop/common/js/utils.js están aisladas en un espacio de nombres jeedomUtils{}.
Por ejemplo, la función que antes aparecía en la ventana raíz loadPage() se está convirtiendo en jeedomUtils.loadPage().
Por motivos de compatibilidad con versiones anteriores de los complementos, las funciones antiguas siguen estando declaradas y quedarán obsoletas en una versión posterior. Ver la lista aquí.
Siguiendo la línea de la versión 4.2, se han aislado las páginas del front-end en la versión de escritorio para evitar hacer referencia a variables y funciones en la ventana raíz. Esto evita posibles conflictos de declaración y facilita la lectura y la comprensión del código, así como su depuración.
El archivo core/js/jeedom.class.jsdeclara dos nuevos espacios de nombres:
Algunas variables globales se encuentran ahora en este espacio de nombres:
jeeFrontEnd = {
__description: 'Global object where each Core page register its own functions and variable in its sub-object name.',
jeedom_firstUse: '',
language: '',
userProfils: {},
planEditOption: {state: false, snap: false, grid: false, gridSize: false, highlight: true},
//loadPage history:
PREVIOUS_PAGE: null,
PREVIOUS_LOCATION: null,
NO_POPSTAT: false,
modifyWithoutSave: false,
//@index.php
serverDatetime: null,
clientServerDiffDatetime: null,
serverDatetime: null,
serverTZoffsetMin: null,
}
Ejemplo típico de desktop/js/corepage.js :
"use strict"
if (!jeeFrontEnd.corepage) {
jeeFrontEnd.corepage = {
myVar: 'oneVar',
init: function() {
window.jeeP = this //root shortcut
},
postInit: function() {
//Do stuff once page loaded
},
myFunction: function(_var) {
var myFuncContextVar = this.myVar + ' -> ' + _var
console.log(myFuncContextVar)
}
}
}
jeeFrontEnd.corepage.init()
$(function() {
jeeFrontEnd.corepage.postInit()
})
$('#myButton').on('click', function() {
jeeP.myFunction('test')
})
Por lo tanto, el espacio de nombres de la página no se volverá a crear al volver a esta misma página. Además, la variable
jeePpermite utilizarjeeFrontEnd.corepagecon una sintaxis breve, equivale a unselfespecífico de la página.
Se utiliza para pasar variables de un script PHP al JavaScript del front-end. Por ejemplo:
sendVarToJS([
'jeephp2js.myjsvar1' => init('type', ''),
'jeephp2js.myjsvar2' => config::byKey('enableCustomCss')
]);
A continuación
$(function() {
if (jeephp2js.myjsvar1 == '1') { ... }
})
El espacio de nombres jeephp2js{} se vacía al cambiar de página para evitar cualquier variable residual inesperada.
La interfaz de escritorio es adaptativa y se ajusta al tamaño del navegador. Sin embargo, algunas acciones, como editar un escenario, resultarían complicadas en una pantalla pequeña. Además, al utilizar un smartphone en exteriores, con conexión 3G o incluso 4G, es importante optimizar la velocidad de carga de la página. Por eso, Jeedom cuenta con una interfaz móvil, más ligera y adaptada a las pantallas pequeñas.
La página de referencia es /mobile/html/index.html, que se encarga de:
mobile/js/application.jsEl archivo mobile/js/application.js contiene las funciones comunes a todas las páginas.
Al igual que en la interfaz de escritorio, la página a la que se accede está formada por dos archivos:
/mobile/html/home.html : el código HTML./mobile/js/home.js : las funciones JavaScript específicas de esta página.Una diferencia notable en la versión móvil es la ausencia de páginas PHP. Por lo tanto, la generación del código se basa en clases JavaScript, que siempre pueden invocar las funciones del núcleo mediante llamadas AJAX.
Los CSS del Core se basan principalmente en estos archivos:
desktop/css/boostrap.css : Versión revisada por el equipo de CSS Bootstrap v3.3.7.desktop/css/desktop.main.css : CSS principal de la interfaz.desktop/css/coreWidgets.css : CSS específicos de los widgets del núcleo.mobile/css/mobile.main.css : CSS principal de la interfaz.mobile/css/coreWidgets.css : CSS específicos de los widgets del núcleo.Los temas contienen archivos CSS propios de cada tema, en particular los archivos colors.css.
Orden de carga de los CSS en la versión de escritorio:
en curso
La interfaz es una cosa, pero, por supuesto, tu Jeedom sigue activo para ejecutar los escenarios, las tareas programadas, los registros, los historiales, etc.
El back-end se basa en las mismas clases PHP que el front-end, presentes en /core/class/. Cada parte de Jeedom tiene su propia clase PHP, en concreto:
jeeObject.class.php : Agrupa las funciones relacionadas con los objetos de Jeedom.eqLogic.class.php : Agrupa las funciones relacionadas con los dispositivos de Jeedom.cmd.class.php : Agrupa las funciones relacionadas con los controles de Jeedom.cron.class.php : Agrupa las funciones relacionadas con las tareas programadas de Jeedom.config.class.php : Agrupa las funciones relacionadas con los parámetros de configuración de Jeedom.scenario.class.php : Agrupa las funciones relacionadas con los escenarios de Jeedom.DB.class.php : Agrupa todas las funciones de acceso a la base de datos de Jeedom. Todos los accesos SQL que necesitan las demás clases se gestionan a través de esta.etc.