forked from fanruan/design
Browse Source
* commit '7fd41751c3a86534d89a6ed28f748be4de54f58f': 无JIRA任务 设计器可以使用基于Atom组件做界面开发+示例demobugfix/10.0
14 changed files with 473 additions and 52 deletions
@ -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,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,12 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>Title</title> |
||||
##style## |
||||
##script## |
||||
</head> |
||||
<body> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -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); |
||||
} |
||||
} |
||||
@ -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,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,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 |
||||
}] |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue