Attempt to create a custom widget under DSM

spk/simpleextjswidget/Makefile

@@ -0,0 +1,35 @@
+SPK_NAME = simpleextjswidget
+SPK_VERS = 0.1
+SPK_REV = 1
+SPK_ICON = src/simpleextjswidget.png
+WIZARDS_DIR = WIZARD_UIFILES
+DSM_UI_DIR = app
+
+DEPENDS =
+WHEELS = flask
+
+override ARCH=
+
+MAINTAINER = DigitalBox98
+
+DESCRIPTION = SimpleExtJS Widget demo to illustrate the usage of Syno ExtJS framework for DSM. This package is for experienced users.
+STARTABLE = no
+DISPLAY_NAME = SimpleExtJSWidget
+
+HOMEPAGE = https://github.com/DigitalBox98/SimpleExtJSApp
+
+POST_STRIP_TARGET = simpleextjswidget_install
+
+include ../../mk/spksrc.spk.mk
+
+.PHONY: simpleextjswidget_install
+simpleextjswidget_install:
+	install -m 755 -d $(STAGING_DIR)/var/
+	install -m 755 -d $(STAGING_DIR)/app/
+	install -m 644 src/app/config $(STAGING_DIR)/app/config
+	install -m 644 src/app/simpleextjswidget.js $(STAGING_DIR)/app/simpleextjswidget.js
+	install -m 755 -d $(STAGING_DIR)/app/texts
+	for language in enu fre; do \
+		install -m 755 -d $(STAGING_DIR)/app/texts/$${language}; \
+		install -m 644 src/app/texts/$${language}/strings $(STAGING_DIR)/app/texts/$${language}/strings; \
+	done

spk/simpleextjswidget/PLIST

@@ -0,0 +1 @@
+rsc:README

spk/simpleextjswidget/WIZARD_UIFILES/install_uifile

@@ -0,0 +1,10 @@
+[
+  {
+    "step_title": "Information",
+    "items": [
+      {
+        "desc": "SimpleExtJSWidget is a demo DSM widget aimed to document Synology's GUI framework based on ExtJS.<br><br>For more information, you can visit the <a target=\"_blank\" href=\"https://github.com/DigitalBox98/SimpleExtJSApp\">SimpleExtJSApp Github page</a>."
+      }
+    ]
+  }
+]

spk/simpleextjswidget/src/app/config

@@ -0,0 +1,13 @@
+{
+    "simpleextjswidget.js": {
+        "SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom": {
+            "type": "widget",
+            "title": "Customized",
+            "icon": "images\/{1}\/wdgt_icn_title_system_info.png",
+            "appInstance": "SYNO.SDS.AdminCenter.Application",
+            "launchParam": "{\"fn\":\"SYNO.SDS.AdminCenter.InfoCenter.Main\"}",
+            "depend": ["SYNO.SDS._Widget.GridPanel"],
+            "texts": "texts"            
+        }
+    }
+}

spk/simpleextjswidget/src/app/simpleextjswidget.js

@@ -0,0 +1,133 @@
+// Namespace definition
+Ext.ns("SYNOCOMMUNITY.SimpleExtJSApp");
+
+// Translator
+_V = function (category, element) {
+    return _TT("SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom", category, element)
+}
+
+Ext.ns("SYNO.SDS.SystemInfoApp");
+
+Ext.define("SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom", {
+    extend: "Ext.Panel",
+    minimizable: true,
+    taskButton: undefined,
+    constructor: function constructor(a) {
+        this.initializeSouthTable();
+        var b = Ext.apply(this.getConfig(), a);
+        SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom.superclass.constructor.call(this, b);
+        this.westIcon = this.getIconComponent();
+        this.centerContent = this.getContentComponent();
+        this.isActive = false;
+        this.timestamp = null;
+        this.uptime = null;
+        this.appSetting = SYNO.SDS.SystemInfoApp.SystemHealthDefaultApp
+    },
+    getConfig: function getConfig() {
+        return {
+            layout: "fit",
+            border: false,
+            defaults: {
+                border: false
+            },
+            items: [this.getViewConfig()]
+        }
+    },
+    getViewConfig: function getViewConfig() {
+        return {
+            itemId: "layoutPanel",
+            layout: "vbox",
+            height: "100%",
+            border: false,
+            padding: "4px 12px 5px 12px",
+            cls: "syno-sysinfo-system-health",
+            defaults: {
+                border: false
+            },
+            items: [{
+                xtype: "container",
+                itemId: "northPanel",
+                height: 20,
+                width: 296,
+                cls: "syno-sysinfo-system-health-status",
+                items: [{
+                    xtype: "box",
+                    itemId: "westIcon"
+                }, {
+                    xtype: "box",
+                    itemId: "centerContent",
+                    region: "center"
+                }]
+            }, {
+                region: "south",
+                height: 84,
+                width: 296,
+                items: this.southTable
+            }]
+        }
+    },
+    doCollapse: function doCollapse() {
+        this.getEl().setHeight(84);
+        this.doLayout()
+    },
+    doExpand: function doExpand() {
+        this.getEl().setHeight(172);
+        this.doLayout()
+    },
+    setApp: function setApp(a) {
+        this.appSetting = a
+    },
+
+    getIconComponent: function getIconComponent() {
+        return this.getComponent("layoutPanel").getComponent("northPanel").getComponent("westIcon")
+    },
+    getContentComponent: function getContentComponent() {
+        return this.getComponent("layoutPanel").getComponent("northPanel").getComponent("centerContent")
+    },
+    onClickTitle: function onClickTitle() {
+        SYNO.SDS.AppLaunch(this.appSetting.appInstance, this.appSetting.launchParam)
+    },
+    onActivate: function onActivate() {
+        this.isActive = true;
+    },
+    onDeactivate: function onDeactivate() {
+        this.isActive = false;
+        this.unmask()
+    },
+    mask: Ext.emptyFn,
+    unmask: Ext.emptyFn,
+    initializeSouthTable: function initializeSouthTable() {
+        var b = Ext.util.Format.htmlEncode(_V("app", "message"));
+        var c = Ext.util.Format.htmlEncode(_S("hostname"));
+        this.southTable = new Ext.Panel({
+            layout: "table",
+            itemId: "southTable",
+            cls: "sys-info-south-table",
+            margins: 0,
+            height: 84,
+            layoutConfig: {
+                columns: 2,
+                cellCls: "sys-info-row"
+            },
+            items: [{
+                xtype: "box",
+                html: String.format('<p ext:qtip="{1}" class="syno-sysinfo-system-health-south-title">{0}</p>', b, Ext.util.Format.htmlEncode(b))
+            }, {
+                xtype: "box",
+                html: String.format('<p ext:qtip="{1}" class="syno-sysinfo-system-health-south-data">{0}</p>', c, Ext.util.Format.htmlEncode(c))
+            }]
+        })
+    },
+
+    destroy: function destroy() {
+        var a = this;
+        a.onDeactivate();
+        if (a.taskButton) {
+            Ext.destroy(a.taskButton)
+        }
+        if (a.southGrid && a.southGrid.getStore()) {
+            a.southGrid.getStore().destroy()
+        }
+        SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom.superclass.destroy.call(this)
+    }
+});

spk/simpleextjswidget/src/app/texts/enu/strings

@@ -0,0 +1,5 @@
+[app]
+app_name = "SimpleExtJSWidget"
+description = "ExtJS Demo Widget"
+index_title = "Help documentation"
+message = "Simple widget !"

spk/simpleextjswidget/src/app/texts/fre/strings

@@ -0,0 +1,5 @@
+[app]
+app_name = "SimpleExtJSWidget"
+description = "Widget ExtJS de démonstration"
+index_title = "Aide"
+message = "Widget simple !"

spk/simpleextjswidget/src/conf/resource

@@ -0,0 +1,2 @@
+{
+}