forked from fanruan/design
Browse Source
* commit '227b967edeb82699ca8858ef3c1df2521d3e6fc5': 完善一个示例代码 无JIRA任务 添加一个通用的web组件,其他地方暂时用不到bugfix/10.0
richie
6 years ago
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