Der Code ist auf verschiedene Verzeichnisse im Stammverzeichnis von Jeedom verteilt (/var/www/html Standard):
Die Benutzeroberfläche von Jeedom funktioniert wie eine Website und basiert auf PHP in Verbindung mit SQL sowie JavaScript und CSS.
Zunächst lädt der Browser die Datei /index.php :
install/setup.php falls erforderlich./core/php/core.inc.php./desktop/php/index.php oder Mobil mobile/html/home.html abhängig von den Parametern der URL.Die Benutzeroberfläche von Jeedom basiert auf dem One-Page-Prinzip. Nach dem Laden werden die verschiedenen Seiten durch Ändern des Inhalts eines Containers angezeigt.
Die Hauptdatei auf dem Desktop ist /desktop/php/index.php.
Jede Seite enthält mindestens zwei Parameter in der URL. Beispiel:
https://my.dns1.jeedom.com/index.php?v=d&p=dashboard :
d für den Desktop, m für Mobilgeräte.dashboard.In diesem Fall die Datei /desktop/php/index.php Die Datei wird geladen /desktop/php/dashboard.php in der div div_pageContainer. Dieser lädt außerdem die Datei /desktop/js/dashboard.js einschließlich der JavaScript-Funktionen, die für die Anzeige dieser Seite (hier: das Dashboard) erforderlich sind.
Die Datei /desktop/php/index.php kümmert sich außerdem um:
desktop/common/js/utils.jsDie Datei desktop/common/js/utils.js ist also immer vorhanden und wird einmal geladen. Es ermöglicht:
div_pageContainer.So stellen die Dateien „index.php“ und „utils.js“ die Struktur und die Grundfunktionen der Benutzeroberfläche bereit.
Anschließend wird der Inhalt der aufgerufenen Seite aus den Dateien „desktop/php/page.php“ und „desktop/js/page.js“ geladen.
Diese rein auf die Benutzeroberfläche ausgerichteten Inhaltsdateien können auf die Funktionen des Core zugreifen (die Klassen /core/class) direkt in PHP oder in JavaScript mithilfe von JavaScript-Klassen (/core/js) über AJAX-Aufrufe (/core/ajax).
Die internen Funktionen des Core sind somit für den internen Betrieb (Backend) klar voneinander getrennt, sind aber über die Benutzeroberfläche zugänglich. Ebenso verfügt jede Seite über ihren eigenen PHP- und JS-Code. Dies ermöglicht eine bessere Weiterentwicklung und Wartung des Codes sowie eine Leistungsoptimierung, da nur die erforderlichen Klassen und Funktionen geladen werden.
Seit Core v4.2 werden alle JavaScript-Funktionen aus der Datei desktop/common/js/utils.js sind in einem Namespace isoliert jeedomUtils{}.
Beispielsweise die zuvor im Root-Fenster angezeigte Funktion loadPage() wird jeedomUtils.loadPage().
Aus Gründen der Abwärtskompatibilität für Plugins werden die alten Funktionen weiterhin deklariert und werden in einer späteren Version als veraltet markiert. Liste hier anzeigen.
In Anlehnung an Version 4.2 wurden die Frontend-Seiten für den Desktop isoliert, um zu vermeiden, dass Variablen und Funktionen im Root-Fenster referenziert werden. Dies schützt vor möglichen Deklarationskonflikten und erleichtert das Lesen und Verstehen des Codes sowie dessen Debugging.
Die Datei core/js/jeedom.class.jsdefiniert zwei neue Namespaces:
Einige globale Variablen befinden sich nun in diesem Namespace:
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,
}
Typisches Beispiel für 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')
})
Der Namespace der Seite wird daher beim erneuten Aufrufen derselben Seite nicht neu erstellt. Außerdem wird die Variable
jeePermöglicht die NutzungjeeFrontEnd.corepagemit einer kurzen Syntax, sie entspricht einemselfspezifisch für diese Seite.
Wird verwendet, um Variablen von einem PHP-Skript an das JavaScript-Frontend zu übergeben. Beispiel:
sendVarToJS([
'jeephp2js.myjsvar1' => init('type', ''),
'jeephp2js.myjsvar2' => config::byKey('enableCustomCss')
]);
Dann
$(function() {
if (jeephp2js.myjsvar1 == '1') { ... }
})
Der Namespace jeephp2js{} wird beim Seitenwechsel geleert, um unerwartete Restvariablen zu vermeiden.
Die Desktop-Oberfläche ist responsiv und passt sich der Größe des Browsers an. Allerdings wären bestimmte Vorgänge, wie beispielsweise das Bearbeiten eines Szenarios, auf einem kleinen Bildschirm schwierig. Außerdem ist es wichtig, die Ladegeschwindigkeit zu optimieren, wenn man unterwegs mit einem Smartphone über 3G oder sogar 4G surft. Aus diesem Grund verfügt Jeedom über eine mobile Oberfläche, die schlanker und für kleine Bildschirme optimiert ist.
Die Referenzseite lautet /mobile/html/index.html, das folgende Aufgaben übernimmt:
mobile/js/application.jsDie Datei mobile/js/application.js enthält die Funktionen, die auf allen Seiten gemeinsam sind.
Wie bei der Desktop-Oberfläche besteht die aufgerufene Seite aus zwei Dateien:
/mobile/html/home.html : Der HTML-Code./mobile/js/home.js : Die für diese Seite spezifischen JavaScript-Funktionen.Ein wesentlicher Unterschied bei der mobilen Version ist das Fehlen von PHP-Seiten. Die Codegenerierung basiert daher auf JavaScript-Klassen, die weiterhin über AJAX-Aufrufe Funktionen des Core aufrufen können.
Die CSS-Dateien des Core basieren hauptsächlich auf diesen Dateien:
desktop/css/boostrap.css : Vom CSS-Bootstrap-v3.3.7-Team bereinigte Version.desktop/css/desktop.main.css : Haupt-CSS der Benutzeroberfläche.desktop/css/coreWidgets.css : Core-spezifische CSS-Dateien für Widgets.mobile/css/mobile.main.css : Haupt-CSS der Benutzeroberfläche.mobile/css/coreWidgets.css : Core-spezifische CSS-Dateien für Widgets.Die Themes enthalten themenspezifische CSS-Dateien, insbesondere die „colors.css“-Datei.
Reihenfolge beim Laden der CSS-Dateien auf dem Desktop:
in Arbeit
Die Benutzeroberfläche ist eine Sache, aber natürlich ist Ihr Jeedom weiterhin aktiv, um Szenarien, Cron-Jobs, Protokolle, Verlaufsdaten usw. auszuführen.
Das Backend basiert auf denselben PHP-Klassen wie das Frontend, die sich in /core/class/. Jeder Teil von Jeedom verfügt über eine eigene PHP-Klasse, darunter insbesondere:
jeeObject.class.php : Fasst die Funktionen zusammen, die sich auf Jeedom-Objekte beziehen.eqLogic.class.php : Fasst die Funktionen zusammen, die die Jeedom-Geräte betreffen.cmd.class.php : Fasst die Funktionen zur Steuerung von Jeedom zusammen.cron.class.php : Fasst die Funktionen zu den geplanten Aufgaben von Jeedom zusammen.config.class.php : Hier sind die Funktionen zusammengefasst, die sich auf die Konfigurationseinstellungen von Jeedom beziehen.scenario.class.php : Fasst die Funktionen zu den Jeedom-Szenarien zusammen.DB.class.php : Fasst alle Funktionen für den Zugriff auf die Jeedom-Datenbank zusammen. Alle von den anderen Klassen benötigten SQL-Zugriffe werden von dieser Klasse verwaltet.usw.