目录
一. 前言
假设你已经看过了 还在用SWT开发UI吗-用JCEF吧
终于, SWT官方支持Chromium了, 最新的4.17版本在2020年9月已经支持, 废话不多说, 我们来尝尝鲜吧!
二. SWT集成Chromium
建议大家可以去看看这个SWT FAQ, 上面有更详细的描述
1. 前期准备
(1) JDK 1.8+ 64 bit : 我使用的版本是JDK 1.8_144 64 bit. 目前SWt官方仅支持64bit的平台
(2) 依赖包:
- SWT-Chromium fragment (
org.eclipse.swt.browser.chromium.<ws>.<os>.<arch>.jar): - SWT fragment (
org.eclipse.swt.<ws>.<os>.<arch>.jar) - CEF binary (
com.make.chromium.cef.<ws>.<os>.<arch>.jar)
前面两个包可以到这里下载: https://download.eclipse.org/eclipse/downloads/drops4/R-4.17-202009021800/
第三个jar包可以到这里下载: http://dl.maketechnology.io/chromium-cef/rls/repository/plugins/com.make.chromium.cef.win32.win32.x86_64_0.4.0.202005172227.jar
以上三个jar包也可以去网盘下载: 链接：https://pan.baidu.com/s/1h847rlHylPiFE1gBS0t2Jg 提取码：9swg
2. 试跑
怎么添加依赖配置环境, 我这里就不啰嗦了, 这里show一下我的项目结构
直接上代码
SwtJcef.java
package com.oysterview.swt.chromium;
import java.io.File;
import org.eclipse.swt.SWT;
import org.eclipse.swt.SWTError;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
public class SwtJcef {
public static void main(String[] args) {
final Display display = new Display();
Shell shell = new Shell(display);
shell.setText("官方SWT集成Chromium");
shell.setLayout(new FillLayout());
Browser browser = null;
try {
//设置SWT.CHROMIUM, 表示使用Chromium样式
browser = new Browser(shell, SWT.CHROMIUM);
} catch (SWTError e) {
e.printStackTrace();
}
if (browser != null) {
String fileName = "html/doc-example_tutorial-dynamic-data.html";
String url = "file:///" + new File(fileName).getAbsolutePath();
System.out.println(new File(fileName).getAbsolutePath());
browser.setUrl(url);
}
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
}
前端UI代码: html/doc-example_tutorial-dynamic-data.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/ecStat.min.js"></script>
<script type="text/javascript" src="js/dataTool.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
// now = new Date(+new Date(now) + oneDay);
now = new Date();
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
// name:'成交',
type:'line',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
// name:'成交',
data: data
}]
});
}, 200);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>运行一下:
完美!
3. 前端js调用java接口获取数据
package com.oysterview.swt.chromium;
import java.io.File;
import org.eclipse.swt.SWT;
import org.eclipse.swt.SWTError;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.browser.BrowserFunction;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
public class SwtJcef {
public static void main(String[] args) {
final Display display = new Display();
Shell shell = new Shell(display);
shell.setText("官方SWT集成Chromium");
shell.setLayout(new FillLayout());
Browser browser = null;
try {
//设置SWT.CHROMIUM, 表示使用Chromium样式
browser = new Browser(shell, SWT.CHROMIUM);
} catch (SWTError e) {
e.printStackTrace();
}
if (browser != null) {
//注册函数, 给前端JS代码调用, 相当于在JS可以调用getDataFromJava来获取数据
new BrowserFunction(browser, "getDataFromJava") {
@Override
public Object function(Object[] arguments) {
//arguments是js调用getDataFromJava传送的参数
System.out.println("get param from js: " + ((String) arguments[0]));
//java返回数据给JS
return new String[] { "java", "666", "888" };
}
};
// String fileName = "html/doc-example_tutorial-dynamic-data.html";
String fileName = "html/getDataFromJavaTest.html";
String url = "file:///" + new File(fileName).getAbsolutePath();
System.out.println(new File(fileName).getAbsolutePath());
browser.setUrl(url);
}
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
}
我们在写一个html: getDataFromJavaTest.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo1</title>
<script type="text/javascript">
function display(){
//调用java接口
var returnFromJavaArray = getDataFromJava("hi, 我是来自js的参数");
//赋值
document.getElementById("demo").innerHTML = returnFromJavaArray[0];
}
</script>
</head>
<body>
<p>点击按钮执行 <em>display</em> 函数, 从Java获取数据</p>
<button onclick="display()">点这里</button>
<p id="demo">JS</p>
</body>
</html>run一下:
点一下按钮:
三. 总结
本文使用原生的SWT集成Chromium, 实现使用Echart, 并能在前端调用Java数据接口获取数据, 进行展示
1440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
