plough
6 years ago
18 changed files with 896 additions and 12 deletions
@ -0,0 +1,53 @@
|
||||
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; |
||||
import java.io.InputStream; |
||||
|
||||
/** |
||||
* @author richie |
||||
* @version 10.0 |
||||
* Created by richie on 2019-03-07 |
||||
*/ |
||||
public class Assistant { |
||||
|
||||
public static URLResponse inputStream2Response(InputStream inputStream, String filePath) throws Exception { |
||||
URLResponse response = new URLResponse(); |
||||
DataInputStream stream = new DataInputStream(inputStream); |
||||
byte[] data = new byte[stream.available()]; |
||||
stream.readFully(data); |
||||
response.setData(data); |
||||
String mimeType = getMimeType(filePath); |
||||
response.getHeaders().setHeader("Content-Type", mimeType); |
||||
return response; |
||||
} |
||||
|
||||
|
||||
private static String getMimeType(String path) { |
||||
if (StringUtils.isBlank(path)) { |
||||
return "text/html"; |
||||
} |
||||
if (path.endsWith(".html")) { |
||||
return "text/html"; |
||||
} |
||||
if (path.endsWith(".css")) { |
||||
return "text/css"; |
||||
} |
||||
if (path.endsWith(".js")) { |
||||
return "text/javascript"; |
||||
} |
||||
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); |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
}} |
||||
@ -0,0 +1,15 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.general.IOUtils; |
||||
|
||||
/** |
||||
* @author richie |
||||
* @version 10.0 |
||||
* Created by richie on 2019-03-05 |
||||
*/ |
||||
class ModernUIConstants { |
||||
|
||||
static final String SCRIPT_INIT_NAME_SPACE = IOUtils.readResourceAsString("/com/fr/design/ui/InitNameSpace.js"); |
||||
|
||||
static final String HTML_TPL = IOUtils.readResourceAsString("/com/fr/design/ui/tpl.html"); |
||||
} |
||||
@ -0,0 +1,182 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.design.DesignerEnvManager; |
||||
import com.fr.design.dialog.BasicPane; |
||||
import com.fr.web.struct.AssembleComponent; |
||||
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.LoadListener; |
||||
import com.teamdev.jxbrowser.chromium.events.ScriptContextAdapter; |
||||
import com.teamdev.jxbrowser.chromium.events.ScriptContextEvent; |
||||
import com.teamdev.jxbrowser.chromium.events.ScriptContextListener; |
||||
import com.teamdev.jxbrowser.chromium.swing.BrowserView; |
||||
|
||||
import javax.swing.JSplitPane; |
||||
import java.awt.BorderLayout; |
||||
|
||||
/** |
||||
* @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(ModernUIConstants.SCRIPT_INIT_NAME_SPACE, 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> prepare(ScriptContextListener contextListener) { |
||||
pane.browser.addScriptContextListener(contextListener); |
||||
return this; |
||||
} |
||||
|
||||
public Builder<T> prepare(LoadListener loadListener) { |
||||
pane.browser.addLoadListener(loadListener); |
||||
return this; |
||||
} |
||||
|
||||
/** |
||||
* 加载jar包中的资源 |
||||
* @param path 资源路径 |
||||
*/ |
||||
public Builder<T> withEMB(final String path) { |
||||
Assistant.setEmbProtocolHandler(pane.browser, new EmbProtocolHandler()); |
||||
pane.browser.loadURL("emb:" + path); |
||||
return this; |
||||
} |
||||
|
||||
/** |
||||
* 加载url指向的资源 |
||||
* @param 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; |
||||
} |
||||
|
||||
/** |
||||
* 设置该前端页面做数据交换所使用的对象 |
||||
* @param namespace 对象名 |
||||
*/ |
||||
public Builder<T> namespace(String namespace) { |
||||
pane.namespace = namespace; |
||||
return this; |
||||
} |
||||
|
||||
/** |
||||
* java端往js端传数据时使用的变量名字 |
||||
* @param name 变量的名字 |
||||
*/ |
||||
public Builder<T> variable(String name) { |
||||
pane.variable = name; |
||||
return this; |
||||
} |
||||
|
||||
/** |
||||
* js端往java端传数据时执行的函数表达式 |
||||
* @param expression 函数表达式 |
||||
*/ |
||||
public Builder<T> expression(String expression) { |
||||
pane.expression = expression; |
||||
return this; |
||||
} |
||||
|
||||
public ModernUIPane<T> build() { |
||||
return pane; |
||||
} |
||||
} |
||||
} |
||||
@ -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); |
||||
@ -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); |
||||
}); |
||||
@ -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); |
||||
}); |
||||
@ -0,0 +1,220 @@
|
||||
window.addEventListener("load", function (ev) { |
||||
window.BI.i18nText = function(key) {return window.Pool.i18n.i18nText(key);} |
||||
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 |
||||
}] |
||||
}); |
||||
}); |
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>Title</title> |
||||
##style## |
||||
##script## |
||||
</head> |
||||
<body> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,30 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.design.DesignerEnvManager; |
||||
|
||||
import javax.swing.JFrame; |
||||
import javax.swing.JPanel; |
||||
import javax.swing.WindowConstants; |
||||
import java.awt.BorderLayout; |
||||
|
||||
/** |
||||
* @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).build(); |
||||
contentPane.add(pane, BorderLayout.CENTER); |
||||
frame.setVisible(true); |
||||
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); |
||||
} |
||||
} |
||||
@ -0,0 +1,80 @@
|
||||
package com.fr.design.ui; |
||||
|
||||
import com.fr.design.DesignerEnvManager; |
||||
|
||||
import javax.swing.JButton; |
||||
import javax.swing.JFrame; |
||||
import javax.swing.JOptionPane; |
||||
import javax.swing.JPanel; |
||||
import javax.swing.WindowConstants; |
||||
import java.awt.BorderLayout; |
||||
import java.awt.FlowLayout; |
||||
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>() |
||||
.withEMB("/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,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}; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,20 @@
|
||||
<!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="请输入年龄"/> |
||||
<img src="emb:/com/fr/design/images/splash_10.gif"> |
||||
</body> |
||||
</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> |
||||
@ -0,0 +1,57 @@
|
||||
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 |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type:"bi.absolute", |
||||
element: "body", |
||||
items: [{ |
||||
el: combo1, |
||||
left: 100, |
||||
top: 100 |
||||
}] |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue