forked from fanruan/design
Browse Source
* commit '227b967edeb82699ca8858ef3c1df2521d3e6fc5': 完善一个示例代码 无JIRA任务 添加一个通用的web组件，其他地方暂时用不到bugfix/10.0
6 changed files with 282 additions and 3 deletions
@ -0,0 +1,18 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
/** |
||||
* @author richie |
||||
* @version 10.0 |
||||
* Created by richie on 2019-03-05 |
||||
*/ |
||||
class ModernUI { |
||||
|
||||
static final String SCRIPT_STRING = "var arr = \"%s\".split(\".\").reverse();\n" + |
||||
"var create = function(obj, names) {\n" + |
||||
"var name = names.pop();\n" + |
||||
"if (!name) {return;}\n" + |
||||
"if (!obj[name]) {obj[name] = {};}\n" + |
||||
" create(obj[name], names);\n" + |
||||
"}\n" + |
||||
"create(window, arr);"; |
||||
} |
||||
@ -0,0 +1,127 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.design.DesignerEnvManager; |
||||
import com.fr.design.dialog.BasicPane; |
||||
import com.teamdev.jxbrowser.chromium.Browser; |
||||
import com.teamdev.jxbrowser.chromium.BrowserPreferences; |
||||
import com.teamdev.jxbrowser.chromium.JSValue; |
||||
import com.teamdev.jxbrowser.chromium.events.FinishLoadingEvent; |
||||
import com.teamdev.jxbrowser.chromium.events.LoadAdapter; |
||||
import com.teamdev.jxbrowser.chromium.events.ScriptContextAdapter; |
||||
import com.teamdev.jxbrowser.chromium.events.ScriptContextEvent; |
||||
import com.teamdev.jxbrowser.chromium.swing.BrowserView; |
||||
|
||||
import javax.swing.*; |
||||
import java.awt.*; |
||||
|
||||
/** |
||||
* @author richie |
||||
* @version 10.0 |
||||
* Created by richie on 2019-03-04 |
||||
* 用于加载html5的Swing容器，可以在设计选项设置中打开调试窗口，示例可查看：com.fr.design.ui.ModernUIPaneTest |
||||
*/ |
||||
public class ModernUIPane<T> extends BasicPane { |
||||
|
||||
private Browser browser; |
||||
private String namespace = "Pool"; |
||||
private String variable = "data"; |
||||
private String expression = "update()"; |
||||
|
||||
private ModernUIPane() { |
||||
initialize(); |
||||
} |
||||
|
||||
private void initialize() { |
||||
if (browser == null) { |
||||
setLayout(new BorderLayout()); |
||||
BrowserPreferences.setChromiumSwitches("--disable-google-traffic"); |
||||
if (DesignerEnvManager.getEnvManager().isOpenDebug()) { |
||||
JSplitPane splitPane = new JSplitPane(); |
||||
add(splitPane, BorderLayout.CENTER); |
||||
splitPane.setOrientation(JSplitPane.VERTICAL_SPLIT); |
||||
splitPane.setDividerLocation(500); |
||||
BrowserPreferences.setChromiumSwitches("--remote-debugging-port=9222"); |
||||
initializeBrowser(); |
||||
splitPane.setLeftComponent(new BrowserView(browser)); |
||||
Browser debugger = new Browser(); |
||||
debugger.loadURL(browser.getRemoteDebuggingURL()); |
||||
BrowserView debuggerView = new BrowserView(debugger); |
||||
splitPane.setRightComponent(debuggerView); |
||||
} else { |
||||
initializeBrowser(); |
||||
add(new BrowserView(browser), BorderLayout.CENTER); |
||||
} |
||||
} |
||||
} |
||||
|
||||
private void initializeBrowser() { |
||||
browser = new Browser(); |
||||
// 初始化的时候，就把命名空间对象初始化好，确保window.a.b.c（"a.b.c"为命名空间）对象都是初始化过的
|
||||
browser.addScriptContextListener(new ScriptContextAdapter() { |
||||
@Override |
||||
public void onScriptContextCreated(ScriptContextEvent event) { |
||||
event.getBrowser().executeJavaScript(String.format(ModernUI.SCRIPT_STRING, namespace)); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
@Override |
||||
protected String title4PopupWindow() { |
||||
return "Modern"; |
||||
} |
||||
|
||||
|
||||
public void populate(final T t) { |
||||
browser.addLoadListener(new LoadAdapter() { |
||||
@Override |
||||
public void onFinishLoadingFrame(FinishLoadingEvent event) { |
||||
if (event.isMainFrame()) { |
||||
JSValue ns = event.getBrowser().executeJavaScriptAndReturnValue("window." + namespace); |
||||
ns.asObject().setProperty(variable, t); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
public T update() { |
||||
JSValue jsValue = browser.executeJavaScriptAndReturnValue("window." + namespace + "." + expression); |
||||
if (jsValue.isObject()) { |
||||
return (T)jsValue.asJavaObject(); |
||||
} |
||||
return null; |
||||
} |
||||
|
||||
public static class Builder<T> { |
||||
|
||||
private ModernUIPane<T> pane = new ModernUIPane<>(); |
||||
|
||||
public Builder<T> withURL(String url) { |
||||
pane.browser.loadURL(url); |
||||
return this; |
||||
} |
||||
|
||||
public Builder<T> withHTML(String html) { |
||||
pane.browser.loadHTML(html); |
||||
return this; |
||||
} |
||||
|
||||
public Builder<T> namespace(String namespace) { |
||||
pane.namespace = namespace; |
||||
return this; |
||||
} |
||||
|
||||
public Builder<T> variable(String name) { |
||||
pane.variable = name; |
||||
return this; |
||||
} |
||||
|
||||
public Builder<T> expression(String expression) { |
||||
pane.expression = expression; |
||||
return this; |
||||
} |
||||
|
||||
public ModernUIPane<T> build() { |
||||
return pane; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,76 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.design.DesignerEnvManager; |
||||
import com.fr.general.IOUtils; |
||||
|
||||
import javax.swing.*; |
||||
import java.awt.*; |
||||
import java.awt.event.ActionEvent; |
||||
import java.awt.event.ActionListener; |
||||
|
||||
/** |
||||
* @author richie |
||||
* @version 10.0 |
||||
* Created by richie on 2019-03-05 |
||||
*/ |
||||
public class ModernUIPaneTest { |
||||
|
||||
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<Model> pane = new ModernUIPane.Builder<Model>() |
||||
.withHTML(IOUtils.readResourceAsString("/com/fr/design/ui/demo.html")).namespace("Pool").build(); |
||||
contentPane.add(pane, BorderLayout.CENTER); |
||||
|
||||
Model model = new Model(); |
||||
model.setAge(20); |
||||
model.setName("Pick"); |
||||
pane.populate(model); |
||||
|
||||
JPanel panel = new JPanel(new FlowLayout()); |
||||
contentPane.add(panel, BorderLayout.SOUTH); |
||||
JButton button = new JButton("点击我可以看到Swing的弹框，输出填写的信息"); |
||||
panel.add(button); |
||||
button.addActionListener(new ActionListener() { |
||||
@Override |
||||
public void actionPerformed(ActionEvent e) { |
||||
Model returnValue = pane.update(); |
||||
if (returnValue != null) { |
||||
JOptionPane.showMessageDialog(frame, String.format("姓名为:%s,年龄为:%d", returnValue.getName(), returnValue.getAge())); |
||||
} |
||||
} |
||||
}); |
||||
frame.setVisible(true); |
||||
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); |
||||
} |
||||
|
||||
public static class Model { |
||||
private String name; |
||||
private int age; |
||||
|
||||
public String getName() { |
||||
return name; |
||||
} |
||||
|
||||
public void setName(String name) { |
||||
this.name = name; |
||||
} |
||||
|
||||
public int getAge() { |
||||
return age; |
||||
} |
||||
|
||||
public void setAge(int age) { |
||||
this.age = age; |
||||
} |
||||
|
||||
public void print(String message) { |
||||
System.out.println(message); |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>Title</title> |
||||
<script type="text/javascript"> |
||||
Pool.update = function () { |
||||
Pool.data.setAge(parseInt(document.getElementById("age").value)); |
||||
Pool.data.setName(document.getElementById("name").value); |
||||
return Pool.data; |
||||
}; |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<div>测试页面，请点击最下面的按钮</div> |
||||
<input id="name" type="text" placeholder="请输入名字"/> |
||||
<input id="age" type="number" placeholder="请输入年龄"/> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue