- Mitglied seit
- 26. Okt 2009
- Beiträge
- 9.825
- Punkte für Reaktionen
- 1.782
- Punkte
- 314
Bis zur DSM Version 7.1.x konnte man in der Datei config, durch einfaches Ändern des key-Wertes "type" festlegen, ob eine App in einem iFrame oder in einem neuen Pop-up-Fenster ausgeführt werden soll. Das ist ab DSM 7.2 so nicht mehr möglich. Daher beschreibt dieses Tutorial, wie man ab DSM 7.2 weiterhin eine "inoffizielle" 3rdParty App in einem iFrame betreiben kann.
Ich möchte an dieser Stelle eingehend darauf hinweisen, das ich meine gesammelten Erkenntnisse rein durch das Try and Error Prinzip erworben habe. Ich kann daher nur vermuten, das die nachfolgenden Anpassungen im Großen und Ganzen dem entsprechen, was Synology hier voraussetzt. Von daher nehmt ihr das - wie immer - auf eure eigene Kappe, sollte es im Nachgang zu Problemen bzw. Unstimmigkeiten kommen.
Los gehts!
Änder in deiner INFO Datei den Value-Wert von dsmappname so ab, das dieser dem nachfolgenden Muster entspricht. Wobei [APPLICATION_NAME] nur als Platzhalter für den Namen deiner App dient. Achte im folgenden darauf, das dieser Wert an jeder Stelle dieses Tutorials gleich lautet. Ebenfalls musst du alle, in deinem Projekt vorkommenden Value-Werte für dsmappname entsprechend anpassen.
Syntax:
Beispiel:
Änder deine config Datei (liegt i.d.R. im Ordner /ui) so ab, das sie dem nachfolgendem Muster entspricht. Solltest du hier abweichende oder weitere key/value Werte aufgeführt haben, teste im späteren Verlauf, ob diese noch greifen. Passe auch hier die entsprechenden Platzhalter für [APPLICATION_NAME], [APPLICATION_DESCRIPTION] sowie [APPLICATION_ICON] deinen Bedürfnissen an. Bitte beachte, das in den nachfolgenden Code-Blöcken die Platzhalter nicht grün, sondern in rot, blau oder schwarz eingefärbt sind.
Erstelle im Ordner /ui eine neue Datei, die als Dateinamen den Namen deiner App trägt und als Erweiterung ein .js erhält. Editier die grad erstellte Datei und füge den nachfolgenden Inhalt ein.
Syntax:
Beispiel:
Das sollte es gewesen sein. Ich hoffe, ich habe nichts vergessen.
Tommes
Ich möchte an dieser Stelle eingehend darauf hinweisen, das ich meine gesammelten Erkenntnisse rein durch das Try and Error Prinzip erworben habe. Ich kann daher nur vermuten, das die nachfolgenden Anpassungen im Großen und Ganzen dem entsprechen, was Synology hier voraussetzt. Von daher nehmt ihr das - wie immer - auf eure eigene Kappe, sollte es im Nachgang zu Problemen bzw. Unstimmigkeiten kommen.
Los gehts!
Änder in deiner INFO Datei den Value-Wert von dsmappname so ab, das dieser dem nachfolgenden Muster entspricht. Wobei [APPLICATION_NAME] nur als Platzhalter für den Namen deiner App dient. Achte im folgenden darauf, das dieser Wert an jeder Stelle dieses Tutorials gleich lautet. Ebenfalls musst du alle, in deinem Projekt vorkommenden Value-Werte für dsmappname entsprechend anpassen.
Syntax:
Beispiel:
Diese Schreibweise ist wichtig und vermutlich ausschlaggebend für den späteren Erfolg.
Änder deine config Datei (liegt i.d.R. im Ordner /ui) so ab, das sie dem nachfolgendem Muster entspricht. Solltest du hier abweichende oder weitere key/value Werte aufgeführt haben, teste im späteren Verlauf, ob diese noch greifen. Passe auch hier die entsprechenden Platzhalter für [APPLICATION_NAME], [APPLICATION_DESCRIPTION] sowie [APPLICATION_ICON] deinen Bedürfnissen an. Bitte beachte, das in den nachfolgenden Code-Blöcken die Platzhalter nicht grün, sondern in rot, blau oder schwarz eingefärbt sind.
JSON:
{
"[APPLICATION_NAME].js": {
"SYNO.SDS.[APPLICATION_NAME].Application": {
"type": "app",
"title": "[APPLICATION_NAME]",
"appWindow": "SYNO.SDS.[APPLICATION_NAME].MainWindow",
"desc": "[APPLICATION_DESCRIPTION]",
"icon": "[APPLICATION_ICON]",
"allowMultiInstance": false,
"allowStandalone": true,
"allowSharing": true,
"allUsers": true,
"grantPrivilege": "all",
"advanceGrantPrivilege": true,
"texts": "texts",
"depend": ["SYNO.SDS.[APPLICATION_NAME].MainWindow"]
},
"SYNO.SDS.[APPLICATION_NAME].MainWindow": {
"type": "lib",
"title": "[APPLICATION_NAME]",
"icon": "[APPLICATION_ICON]",
"texts": "texts",
"depend": ["SYNO.SDS.[APPLICATION_NAME].Utils"]
},
"SYNO.SDS.[APPLICATION_NAME].Utils": []
}
}Erstelle im Ordner /ui eine neue Datei, die als Dateinamen den Namen deiner App trägt und als Erweiterung ein .js erhält. Editier die grad erstellte Datei und füge den nachfolgenden Inhalt ein.
Syntax:
Beispiel:
Javascript:
Ext.namespace("SYNO.SDS.[APPLICATION_NAME].Utils");
Ext.apply(SYNO.SDS.[APPLICATION_NAME].Utils, function(){
return{
getMainHtml: function(){
// Timestamp must be inserted here to prevent caching of iFrame
return '<iframe src="webman/3rdparty/[APPLICATION_NAME]/index.cgi?_ts=' + new Date().getTime() + '" title="react-app" style="width: 100%; height: 100%; border: none; margin: 0"/>';
},
}
}());
Ext.define("SYNO.SDS.[APPLICATION_NAME].Application", {
extend: "SYNO.SDS.AppInstance",
appWindowName: "SYNO.SDS.[APPLICATION_NAME].MainWindow",
constructor: function(){
this.callParent(arguments);
}
});
Ext.define("SYNO.SDS.[APPLICATION_NAME].MainWindow", {
extend: "SYNO.SDS.AppWindow",
constructor : function(a){
var MY = SYNO.SDS.[APPLICATION_NAME];
this.appInstance = a.appInstance;
MY.MainWindow.superclass.constructor.call(this, Ext.apply({
layout : "fit",
resizable : true,
cls: "syno-my-win",
maximizable : true,
minimizable : true,
width : 1024,
height : 768,
html: MY.Utils.getMainHtml()
}, a));
MY.Utils.ApplicationWindow = this;
},
onOpen : function(){
SYNO.SDS.[APPLICATION_NAME].MainWindow.superclass.onOpen.apply(this, arguments);
},
onRequest : function(a){
SYNO.SDS.[APPLICATION_NAME].MainWindow.superclass.onRequest.call(this, a);
},
onClose : function(){
clearTimeout(SYNO.SDS.[APPLICATION_NAME].TimeOutID);
SYNO.SDS.[APPLICATION_NAME].TimeOutID = undefined;
SYNO.SDS.[APPLICATION_NAME].MainWindow.superclass.onClose.apply(this, arguments);
this.doClose();
return true;
}
});Das sollte es gewesen sein. Ich hoffe, ich habe nichts vergessen.
Tommes
Zuletzt bearbeitet:
