Merge pull request #793 in DESIGN/design from ~RICHIE/design:release/10.0 to release/10.0

* commit '7fd41751c3a86534d89a6ed28f748be4de54f58f':
  无JIRA任务 设计器可以使用基于Atom组件做界面开发+示例demo

designer-base/src/main/java/com/fr/design/ui/Assistant.java

@@ -1,5 +1,9 @@
 package com.fr.design.ui;
 
+import com.fr.stable.StringUtils;
+import com.teamdev.jxbrowser.chromium.Browser;
+import com.teamdev.jxbrowser.chromium.BrowserContext;
+import com.teamdev.jxbrowser.chromium.ProtocolService;
 import com.teamdev.jxbrowser.chromium.URLResponse;
 
 import java.io.DataInputStream;
@@ -10,7 +14,7 @@ import java.io.InputStream;
  * @version 10.0
  * Created by richie on 2019-03-07
  */
-public class ModernUIAssist {
+public class Assistant {
 
     public static URLResponse inputStream2Response(InputStream inputStream, String filePath) throws Exception {
         URLResponse response = new URLResponse();
@@ -25,6 +29,9 @@ public class ModernUIAssist {
 
 
     private static String getMimeType(String path) {
+        if (StringUtils.isBlank(path)) {
+            return "text/html";
+        }
         if (path.endsWith(".html")) {
             return "text/html";
         }
@@ -36,4 +43,11 @@ public class ModernUIAssist {
         }
         return "text/html";
     }
+
+    public static void setEmbProtocolHandler(Browser browser, EmbProtocolHandler handler) {
+        BrowserContext browserContext = browser.getContext();
+        ProtocolService protocolService = browserContext.getProtocolService();
+        // 支持读取jar包中文件的自定义协议————emb:/com/fr/design/images/bbs.png
+        protocolService.setProtocolHandler("emb", handler);
+    }
 }

designer-base/src/main/java/com/fr/design/ui/EmbProtocolHandler.java

@@ -0,0 +1,83 @@
+package com.fr.design.ui;
+
+import com.fr.general.IOUtils;
+import com.fr.stable.StringUtils;
+import com.fr.web.struct.AssembleComponent;
+import com.fr.web.struct.AtomBuilder;
+import com.fr.web.struct.PathGroup;
+import com.fr.web.struct.category.ScriptPath;
+import com.fr.web.struct.category.StylePath;
+import com.teamdev.jxbrowser.chromium.ProtocolHandler;
+import com.teamdev.jxbrowser.chromium.URLRequest;
+import com.teamdev.jxbrowser.chromium.URLResponse;
+
+import java.io.InputStream;
+
+/**
+ * @author richie
+ * @version 10.0
+ * Created by richie on 2019-03-07
+ */
+public class EmbProtocolHandler implements ProtocolHandler {
+
+    private AssembleComponent component;
+
+    public EmbProtocolHandler() {
+
+    }
+
+    public EmbProtocolHandler(AssembleComponent component) {
+        this.component = component;
+    }
+
+
+    @Override
+    public URLResponse onRequest(URLRequest req) {
+        try {
+            String path = req.getURL();
+            if (path.startsWith("emb:dynamic")) {
+                URLResponse response = new URLResponse();
+                response.setData(htmlText().getBytes());
+                response.getHeaders().setHeader("Content-Type", "text/html");
+                return response;
+            } else {
+                int index = path.indexOf("=");
+                if (index > 0) {
+                    path = path.substring(index + 1);
+                } else {
+                    path = path.substring(4);
+                }
+                InputStream inputStream = IOUtils.readResource(path);
+                return Assistant.inputStream2Response(inputStream, path);
+            }
+        } catch (Exception ignore) {
+
+        }
+        return null;
+    }
+
+    private String htmlText() {
+        PathGroup pathGroup = AtomBuilder.create().buildAssembleFilePath(ModernRequestClient.KEY, component);
+        StylePath[] stylePaths = pathGroup.toStylePathGroup();
+        StringBuilder styleText = new StringBuilder();
+        for (StylePath path : stylePaths) {
+            if (StringUtils.isNotBlank(path.toFilePath())) {
+                styleText.append("<link rel=\"stylesheet\" href=\"emb:");
+                styleText.append(path.toFilePath());
+                styleText.append("\"/>");
+            }
+        }
+        String result = ModernUIConstants.HTML_TPL.replaceAll("##style##", styleText.toString());
+        ScriptPath[] scriptPaths = pathGroup.toScriptPathGroup();
+        StringBuilder scriptText = new StringBuilder();
+        for (ScriptPath path : scriptPaths) {
+            if (StringUtils.isNotBlank(path.toFilePath())) {
+                scriptText.append("<script src=\"emb:");
+                scriptText.append(path.toFilePath());
+                scriptText.append("\"></script>");
+            }
+        }
+        result = result.replaceAll("##script##", scriptText.toString());
+        return result;
+    }
+}

designer-base/src/main/java/com/fr/design/ui/ModernRequestClient.java

@@ -0,0 +1,22 @@
+package com.fr.design.ui;
+
+import com.fr.web.struct.browser.RequestClient;
+
+/**
+ * @author richie
+ * @version 10.0
+ * Created by richie on 2019-03-07
+ */
+public enum  ModernRequestClient implements RequestClient {
+
+    KEY;
+
+    @Override
+    public boolean isIE() {
+        return false;
+    }
+
+    @Override
+    public boolean isLowIEVersion() {
+        return false;
+    }}

designer-base/src/main/java/com/fr/design/ui/ModernUIConstants.java

@@ -1,5 +1,7 @@
 package com.fr.design.ui;
 
+import com.fr.general.IOUtils;
+
 /**
  * @author richie
  * @version 10.0
@@ -7,12 +9,7 @@ package com.fr.design.ui;
  */
 class ModernUIConstants {
 
-    static final String SCRIPT_STRING = "var arr = \"%s\".split(\".\").reverse();\n" +
+    static final String SCRIPT_INIT_NAME_SPACE = IOUtils.readResourceAsString("/com/fr/design/ui/InitNameSpace.js");
-            "var create = function(obj, names) {\n" +
+
-            "var name = names.pop();\n" +
+    static final String HTML_TPL = IOUtils.readResourceAsString("/com/fr/design/ui/tpl.html");
-            "if (!name) {return;}\n" +
-            "if (!obj[name]) {obj[name] = {};}\n" +
-            "    create(obj[name], names);\n" +
-            "}\n" +
-            "create(window, arr);";
 }

designer-base/src/main/java/com/fr/design/ui/ModernUIPane.java

@@ -2,15 +2,10 @@ package com.fr.design.ui;
 
 import com.fr.design.DesignerEnvManager;
 import com.fr.design.dialog.BasicPane;
-import com.fr.general.IOUtils;
+import com.fr.web.struct.AssembleComponent;
 import com.teamdev.jxbrowser.chromium.Browser;
-import com.teamdev.jxbrowser.chromium.BrowserContext;
 import com.teamdev.jxbrowser.chromium.BrowserPreferences;
 import com.teamdev.jxbrowser.chromium.JSValue;
-import com.teamdev.jxbrowser.chromium.ProtocolHandler;
-import com.teamdev.jxbrowser.chromium.ProtocolService;
-import com.teamdev.jxbrowser.chromium.URLRequest;
-import com.teamdev.jxbrowser.chromium.URLResponse;
 import com.teamdev.jxbrowser.chromium.events.FinishLoadingEvent;
 import com.teamdev.jxbrowser.chromium.events.LoadAdapter;
 import com.teamdev.jxbrowser.chromium.events.LoadListener;
@@ -21,8 +16,6 @@ import com.teamdev.jxbrowser.chromium.swing.BrowserView;
 
 import javax.swing.*;
 import java.awt.*;
-import java.io.InputStream;
-import java.net.URL;
 
 /**
  * @author richie
@@ -66,42 +59,11 @@ public class ModernUIPane<T> extends BasicPane {
 
     private void initializeBrowser() {
         browser = new Browser();
-        BrowserContext browserContext = browser.getContext();
-        ProtocolService protocolService = browserContext.getProtocolService();
-        // 支持从jar中读取资源文件
-        protocolService.setProtocolHandler("jar", new ProtocolHandler() {
-            @Override
-            public URLResponse onRequest(URLRequest request) {
-                try {
-                    String path = request.getURL();
-                    URL url = new URL(path);
-                    InputStream inputStream = url.openStream();
-                    return ModernUIAssist.inputStream2Response(inputStream, path);
-                } catch (Exception ignored) {
-                }
-                return null;
-            }
-        });
-        // 支持读取jar包中文件的自定义协议————emb:/com/fr/design/images/bbs.png
-        protocolService.setProtocolHandler("emb", new ProtocolHandler() {
-            @Override
-            public URLResponse onRequest(URLRequest req) {
-                try {
-                    String path = req.getURL();
-                    path = path.substring(4);
-                    InputStream inputStream = IOUtils.readResource(path);
-                    return ModernUIAssist.inputStream2Response(inputStream, path);
-                } catch (Exception ignore) {
-
-                }
-                return null;
-            }
-        });
         // 初始化的时候，就把命名空间对象初始化好，确保window.a.b.c（"a.b.c"为命名空间）对象都是初始化过的
         browser.addScriptContextListener(new ScriptContextAdapter() {
             @Override
             public void onScriptContextCreated(ScriptContextEvent event) {
-                event.getBrowser().executeJavaScript(String.format(ModernUIConstants.SCRIPT_STRING, namespace));
+                event.getBrowser().executeJavaScript(String.format(ModernUIConstants.SCRIPT_INIT_NAME_SPACE, namespace));
             }
         });
     }
@@ -150,7 +112,8 @@ public class ModernUIPane<T> extends BasicPane {
          * 加载jar包中的资源
          * @param path 资源路径
          */
-        public Builder<T> withEMB(String path) {
+        public Builder<T> withEMB(final String path) {
+            Assistant.setEmbProtocolHandler(pane.browser, new EmbProtocolHandler());
             pane.browser.loadURL("emb:" + path);
             return this;
         }
@@ -159,16 +122,28 @@ public class ModernUIPane<T> extends BasicPane {
          * 加载url指向的资源
          * @param url 文件的地址
          */
-        public Builder<T> withURL(String url) {
+        public Builder<T> withURL(final String url) {
+            Assistant.setEmbProtocolHandler(pane.browser, new EmbProtocolHandler());
             pane.browser.loadURL(url);
             return this;
         }
 
+        /**
+         * 加载Atom组件
+         * @param component Atom组件
+         */
+        public Builder<T> withComponent(AssembleComponent component) {
+            Assistant.setEmbProtocolHandler(pane.browser, new EmbProtocolHandler(component));
+            pane.browser.loadURL("emb:dynamic");
+            return this;
+        }
+
         /**
          * 加载html文本内容
          * @param html 要加载html文本内容
          */
         public Builder<T> withHTML(String html) {
+            Assistant.setEmbProtocolHandler(pane.browser, new EmbProtocolHandler());
             pane.browser.loadHTML(html);
             return this;
         }

designer-base/src/main/resources/com/fr/design/ui/InitNameSpace.js

@@ -0,0 +1,12 @@
+var arr ="%s".split(".").reverse();
+var create = function (obj, names) {
+    var name = names.pop();
+    if (!name) {
+        return;
+    }
+    if (!obj[name]) {
+        obj[name] = {};
+    }
+    create(obj[name], names);
+};
+create(window, arr);

designer-base/src/main/resources/com/fr/design/ui/InsertScript.js

@@ -0,0 +1,8 @@
+var arr = "%s".split(",");
+var header = document.getElementsByTagName("head")[0];
+arr.forEach(function(el) {
+    var script = document.createElement("script")
+    script.type = "text/javascript";
+    script.src = "emb:" + el;
+    header.appendChild(script);
+});

designer-base/src/main/resources/com/fr/design/ui/InsertStyle.js

@@ -0,0 +1,9 @@
+var arr = "%s".split(",");
+var header = document.getElementsByTagName("head")[0];
+arr.forEach(function(el) {
+    var css = document.createElement("link");
+    css.type = "text/css";
+    css.rel = "stylesheet";
+    css.href = "emb:" + el;
+    header.appendChild(css);
+});

designer-base/src/main/resources/com/fr/design/ui/tpl.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    ##style##
+    ##script##
+</head>
+<body>
+</body>
+
+</html>

designer-base/src/test/java/com/fr/design/ui/FineUIDemo.java

@@ -0,0 +1,28 @@
+package com.fr.design.ui;
+
+import com.fr.design.DesignerEnvManager;
+
+import javax.swing.*;
+import java.awt.*;
+
+/**
+ * @author richie
+ * @version 10.0
+ * Created by richie on 2019-03-07
+ */
+public class FineUIDemo {
+
+    public static void main(String... args) {
+        final JFrame frame = new JFrame();
+        frame.setSize(1200, 800);
+        JPanel contentPane = (JPanel) frame.getContentPane();
+        // 是否需要开启调试窗口
+        DesignerEnvManager.getEnvManager().setOpenDebug(true);
+
+        final ModernUIPane<ModernUIPaneTest.Model> pane = new ModernUIPane.Builder<ModernUIPaneTest.Model>()
+                .withComponent(StartComponent.KEY).namespace("Pool").build();
+        contentPane.add(pane, BorderLayout.CENTER);
+        frame.setVisible(true);
+        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
+    }
+}

designer-base/src/test/java/com/fr/design/ui/ModernUIPaneTest.java

@@ -1,7 +1,6 @@
 package com.fr.design.ui;
 
 import com.fr.design.DesignerEnvManager;
-import com.fr.general.IOUtils;
 
 import javax.swing.*;
 import java.awt.*;

designer-base/src/test/java/com/fr/design/ui/StartComponent.java

@@ -0,0 +1,32 @@
+package com.fr.design.ui;
+
+import com.fr.web.struct.AssembleComponent;
+import com.fr.web.struct.Atom;
+import com.fr.web.struct.browser.RequestClient;
+import com.fr.web.struct.category.ScriptPath;
+import com.fr.web.struct.impl.FineUI;
+
+/**
+ * @author richie
+ * @version 10.0
+ * Created by richie on 2019-03-08
+ */
+public class StartComponent extends AssembleComponent {
+
+    public static final StartComponent KEY = new StartComponent();
+
+    private StartComponent() {
+
+    }
+
+    @Override
+    public ScriptPath script(RequestClient req) {
+        return ScriptPath.build("/com/fr/design/ui/script/start.js");
+    }
+
+    @Override
+    public Atom[] refer() {
+        return new Atom[] {FineUI.KEY};
+    }
+
+}

designer-base/src/test/resources/com/fr/design/ui/fineui.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="emb:/com/fr/web/ui/fineui.min.css"/>
+    <script src="emb:/com/fr/web/ui/fineui.min.js"/>
+</head>
+<body>
+</body>
+</html>

designer-base/src/test/resources/com/fr/design/ui/script/start.js

@@ -0,0 +1,219 @@
+window.addEventListener("load", function (ev) {
+    var combo1 = BI.createWidget({
+        type: "bi.vertical",
+        items: [
+            {
+                type: "bi.text_value_combo",
+                text: "选项1",
+                width: 300,
+                items: [
+                    {
+                        el: {
+                            type: "bi.single_select_radio_item",
+                            width: 290,
+                            text: "选项1",
+                            value: 1
+                        },
+                        text: "选项1",
+                        value: 1,
+                        lgap: 10
+                    },
+                    {
+                        el: {
+                            type: "bi.single_select_radio_item",
+                            width: 290,
+                            text: "选项2",
+                            value: 2
+                        },
+                        lgap: 10,
+                        text: "选项2",
+                        value: 2
+                    },
+                    {
+                        el: {
+                            type: "bi.single_select_radio_item",
+                            width: 290,
+                            text: "选项3",
+                            value: 3
+                        },
+                        lgap: 10,
+                        text: "选项3",
+                        value: 3
+                    }
+                ]
+            }
+        ]
+    });
+
+    var date = BI.createWidget({
+        type: "bi.left",
+        items: [{
+            el: {
+                type: "bi.date_time_combo",
+                value: {
+                    year: 2018,
+                    month: 9,
+                    day: 28,
+                    hour: 13,
+                    minute: 31,
+                    second: 1
+                }
+            }
+        }]
+    });
+
+    var comboTree = BI.createWidget({
+        type: "bi.vertical",
+        items: [
+            {
+                type: "bi.tree_value_chooser_combo",
+                width: 300,
+                itemsCreator: function(op, callback) {
+                    callback([
+                        {
+                            id: 1,
+                            text: "第1项",
+                            value: "1"
+                        },
+                        {
+                            id: 2,
+                            text: "第2项",
+                            value: "2"
+                        },
+                        {
+                            id: 3,
+                            text: "第3项",
+                            value: "3",
+                            open: true
+                        },
+                        {
+                            id: 11,
+                            pId: 1,
+                            text: "子项1",
+                            value: "11"
+                        },
+                        {
+                            id: 12,
+                            pId: 1,
+                            text: "子项2",
+                            value: "12"
+                        },
+                        {
+                            id: 13,
+                            pId: 1,
+                            text: "子项3",
+                            value: "13"
+                        },
+                        {
+                            id: 31,
+                            pId: 3,
+                            text: "子项1",
+                            value: "31"
+                        },
+                        {
+                            id: 32,
+                            pId: 3,
+                            text: "子项2",
+                            value: "32"
+                        },
+                        {
+                            id: 33,
+                            pId: 3,
+                            text: "子项3",
+                            value: "33"
+                        }
+                    ]);
+                }
+            }
+        ]
+    });
+
+    var color = BI.createWidget({
+        type: "bi.left",
+        items: [{
+            type: "bi.simple_color_chooser",
+            width: 24,
+            height: 24
+        }, {
+            el: {
+                type: "bi.color_chooser",
+                width: 230,
+                height: 24
+            },
+            lgap: 10
+        }]
+    });
+
+    var Slider = BI.inherit(BI.Widget, {
+        props: {
+            width: 300,
+            height: 50,
+            min: 0,
+            max: 100
+        },
+
+        mounted: function() {
+            var o = this.options;
+            this.singleSliderInterval.setMinAndMax({
+                min: o.min,
+                max: o.max
+            });
+
+            this.singleSliderInterval.setValue({
+                min: 10,
+                max: 80
+            });
+            this.singleSliderInterval.populate();
+        },
+
+        render: function() {
+            var self = this,
+                o = this.options;
+            return {
+                type: "bi.vertical",
+                element: this,
+                items: [
+                    {
+                        type: "bi.interval_slider",
+                        digit: 0,
+                        width: o.width,
+                        height: o.height,
+                        ref: function(_ref) {
+                            self.singleSliderInterval = _ref;
+                        }
+                    }
+                ]
+            };
+        }
+    });
+    BI.shortcut("demo.slider_interval", Slider);
+    var slider = BI.createWidget({
+        type: "demo.slider_interval"
+    });
+
+    BI.createWidget({
+        type:"bi.absolute",
+        element: "body",
+        items: [{
+            el: combo1,
+            left: 100,
+            top: 100
+        }, {
+            el : date,
+            left: 100,
+            top : 150
+        }, {
+            el : comboTree,
+            left : 100,
+            top : 200
+        }, {
+            el : color,
+            left : 100,
+            top : 250
+        }, {
+            el : slider,
+            left : 400,
+            top : 100
+        }]
+    });
+});