HTML/CSS/JavaScript GUI in Java Swing Application
来源:互联网 发布:nginx php cgi 配置 编辑:程序博客网 时间:2024/06/16 20:19
转载自:http://java.dzone.com/articles/htmlcssjavascript-gui-java-0
There are a lot of desktop applications that integrate web browser control to display HTML content and communicate with web services and web applications directly from app: iTunes, Adobe Brackets, Evernote, Amazon Music, Steam Client, etc. If you develop similar type of a desktop application using Java technology, and you need to embed safe, fast, lightweight web browser control that supports all modern web technologies such as HTML5, CSS, JavaScript, Flash, etc., then JxBrowser is what you need.
The following code demonstrates how simple the process of embedding web browser component into your Java Swing/AWT/JavaFX desktop application:
Swing/AWT
01.
import
com.teamdev.jxbrowser.chromium.Browser;
02.
import
com.teamdev.jxbrowser.chromium.swing.BrowserView;
03.
04.
import
javax.swing.*;
05.
import
java.awt.*;
06.
07.
public
class
BrowserSample {
08.
public
static
void
main(String[] args) {
09.
Browser browser =
new
Browser();
10.
BrowserView browserView =
new
BrowserView(browser);
11.
12.
JFrame frame =
new
JFrame(
"JxBrowser"
);
13.
frame.add(browserView, BorderLayout.CENTER);
14.
frame.setSize(
700
,
500
);
15.
frame.setVisible(
true
);
16.
17.
browser.loadURL(
"http://www.google.com"
);
18.
}
19.
}
JavaFX
01.
import
com.teamdev.jxbrowser.chromium.Browser;
02.
import
com.teamdev.jxbrowser.chromium.javafx.BrowserView;
03.
04.
import
javafx.application.Application;
05.
import
javafx.scene.Scene;
06.
import
javafx.scene.layout.StackPane;
07.
import
javafx.stage.Stage;
08.
09.
public
class
JavaFXSample
extends
Application {
10.
@Override
11.
public
void
start(Stage primaryStage) {
12.
Browser browser =
new
Browser();
13.
BrowserView browserView =
new
BrowserView(browser);
14.
15.
StackPane pane =
new
StackPane();
16.
pane.getChildren().add(browserView);
17.
Scene scene =
new
Scene(pane,
700
,
500
);
18.
primaryStage.setScene(scene);
19.
primaryStage.show();
20.
21.
browser.loadURL(
"http://www.google.com"
);
22.
}
23.
24.
public
static
void
main(String[] args) {
25.
launch(args);
26.
}
27.
}
Note: take a look at Quick Start Guide to get more information about how to add JxBrowser library into your Java project using your favorite IDE.
HTML+CSS+JavaScript as a GUI
With JxBrowser your Java desktop application GUI can be built with HTML+CSS+JavaScript. It means that you can actually use any modern HTML5 UI toolkit to build modern, user-friendly interface of your Java desktop application. You don’t need to hire Swing/AWT developers. GUI of your Java app can be built by HTML+CSS+JavaScript developers. It significantly reduces the cost of Java project development.
The following simple application demonstrates how to create New Account Dialog built with HTML+CSS+JavaScript into your Java Swing/AWT desktop application.
First we create HTML document with New Account dialog content. In the following document we use one of the most popularBootstrap HTML UI framework to build dialog’s UI:
01.
<!DOCTYPE html>
02.
<
html
>
03.
<
head
>
04.
<
meta
charset
=
"utf-8"
/>
05.
<
title
>Registration Form</
title
>
06.
<
link
href
=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel
=
"stylesheet"
>
07.
<
link
href
=
'http://fonts.googleapis.com/css?family=Roboto:300'
rel
=
'stylesheet'
type
=
'text/css'
>
08.
<
script
src
=
"http://code.jquery.com/jquery-1.11.1.min.js"
></
script
>
09.
<
script
src
=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
></
script
>
10.
<
style
>
11.
body{
12.
font:12px/15px Roboto, "Helvetica Neue", Helvetica, sans-serif;
13.
}
14.
select,
15.
input,
16.
.btn {
17.
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
18.
}
19.
#wrapper{
20.
margin:0 auto;
21.
}
22.
.main-form {
23.
width: 360px;
24.
min-height: 360px;
25.
background: #fff;
26.
border-radius: 60px;
27.
margin:0px auto 20px;
28.
padding: 20px;
29.
}
30.
.form-logo {
31.
font-size: 100px;
32.
color: #708090;
33.
}
34.
</
style
>
35.
</
head
>
36.
<
body
>
37.
<
script
>
38.
function newAccount() {
39.
var firstName = document.getElementById("firstname").value;
40.
var lastName = document.getElementById("lastname").value;
41.
var phone = document.getElementById("phone").value;
42.
var email = document.getElementById("email").value;
43.
// Call Java callback function and pass text fields values.
44.
onCreateAccount(firstName, lastName, phone, email);
45.
}
46.
</
script
>
47.
<
div
id
=
"wrapper"
>
48.
<
div
class
=
"main-form"
>
49.
<
form
action
=
"#"
method
=
"POST"
>
50.
<
fieldset
>
51.
<
div
class
=
"text-center"
>
52.
<
span
class
=
"form-logo glyphicon glyphicon-user"
></
span
>
53.
</
div
>
54.
<
div
class
=
"form-body"
>
55.
<
h1
class
=
"form-title text-center"
>New Account</
h1
>
56.
<
div
class
=
"form-group"
>
57.
<
input
class
=
"form-control"
type
=
"text"
id
=
"firstname"
name
=
"firstname"
placeholder
=
"First Name"
>
58.
</
div
>
59.
<
div
class
=
"form-group"
>
60.
<
input
class
=
"form-control"
type
=
"text"
id
=
"lastname"
name
=
"surname"
placeholder
=
"Last Name"
>
61.
</
div
>
62.
<
div
class
=
"form-group"
>
63.
<
input
class
=
"form-control"
type
=
"text"
id
=
"phone"
name
=
"phone"
placeholder
=
"Phone"
>
64.
</
div
>
65.
<
div
class
=
"form-group"
>
66.
<
input
class
=
"form-control"
type
=
"email"
id
=
"email"
name
=
"email"
placeholder
=
"Email"
>
67.
</
div
>
68.
<
div
class
=
"form-group text-center"
>
69.
<
button
class
=
"btn btn-default btn-lg"
type
=
"button"
onclick
=
"newAccount();"
>New Account</
button
>
70.
</
div
>
71.
</
div
>
72.
</
fieldset
>
73.
</
form
>
74.
</
div
>
75.
</
div
>
76.
</
body
>
77.
</
html
>
This dialog has First Name, Last Name, Phone, Email text fields, and New Account button. In Java application we need to display a dialog with this HTML content, let the user to fill all text fields and click New Account button. In Java code we need to be notified when user clicks the button, read text fields values to create a new account in our application. The following Java example demonstrates how we can do it with JxBrowser:
001.
import
com.teamdev.jxbrowser.chromium.Browser;
002.
import
com.teamdev.jxbrowser.chromium.BrowserFunction;
003.
import
com.teamdev.jxbrowser.chromium.JSValue;
004.
import
com.teamdev.jxbrowser.chromium.swing.BrowserView;
005.
006.
import
javax.swing.*;
007.
import
java.awt.*;
008.
import
java.awt.event.ActionEvent;
009.
import
java.awt.event.ActionListener;
010.
import
java.awt.event.WindowAdapter;
011.
import
java.awt.event.WindowEvent;
012.
import
java.util.concurrent.atomic.AtomicReference;
013.
014.
public
class
HTMLUISample {
015.
public
static
void
main(String[] args) {
016.
final
JFrame frame =
new
JFrame(
"HTMLUISample"
);
017.
final
JButton newAccountButton =
new
JButton(
"New Account..."
);
018.
newAccountButton.addActionListener(
new
ActionListener() {
019.
@Override
020.
public
void
actionPerformed(ActionEvent e) {
021.
Account account = createAccount(frame);
022.
// Displays created account's details
023.
JOptionPane.showMessageDialog(frame,
"Created Account: "
+ account);
024.
}
025.
});
026.
027.
JPanel contentPane =
new
JPanel();
028.
contentPane.add(newAccountButton);
029.
030.
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
031.
frame.add(contentPane, BorderLayout.CENTER);
032.
frame.setSize(
300
,
75
);
033.
frame.setLocationRelativeTo(
null
);
034.
frame.setVisible(
true
);
035.
}
036.
037.
private
static
Account createAccount(JFrame parent) {
038.
final
AtomicReference<Account> result =
new
AtomicReference<Account>();
039.
final
JDialog dialog =
new
JDialog(parent,
"New Account"
,
true
);
040.
041.
// Create Browser instance.
042.
final
Browser browser =
new
Browser();
043.
// Register Java callback function that will be invoked from JavaScript
044.
// when user clicks New Account button.
045.
browser.registerFunction(
"onCreateAccount"
,
new
BrowserFunction() {
046.
@Override
047.
public
JSValue invoke(JSValue... args) {
048.
// Read text field values received from JavaScript.
049.
String firstName = args[
0
].getString();
050.
String lastName = args[
1
].getString();
051.
String phone = args[
2
].getString();
052.
String email = args[
3
].getString();
053.
// Create a new Account instance.
054.
result.set(
new
Account(firstName, lastName, phone, email));
055.
// Close dialog.
056.
dialog.setVisible(
false
);
057.
// Return undefined (void) to JavaScript.
058.
return
JSValue.createUndefined();
059.
}
060.
});
061.
// Load HTML with dialog's HTML+CSS+JavaScript UI.
062.
browser.loadURL(
"file://<;path_to_file>/index.html"
);
063.
064.
dialog.addWindowListener(
new
WindowAdapter() {
065.
@Override
066.
public
void
windowClosing(WindowEvent e) {
067.
// Dispose Browser instance because we don't need it anymore.
068.
browser.dispose();
069.
// Close New Account dialog.
070.
dialog.setVisible(
false
);
071.
dialog.dispose();
072.
}
073.
});
074.
dialog.setDefaultCloseOperation(WindowConstants.DO_NOTHING_ON_CLOSE);
075.
// Embed Browser Swing component into the dialog.
076.
dialog.add(
new
BrowserView(browser), BorderLayout.CENTER);
077.
dialog.setSize(
400
,
500
);
078.
dialog.setResizable(
false
);
079.
dialog.setLocationRelativeTo(parent);
080.
dialog.setVisible(
true
);
081.
082.
return
result.get();
083.
}
084.
085.
public
static
class
Account {
086.
public
final
String firstName;
087.
public
final
String lastName;
088.
public
final
String phone;
089.
public
final
String email;
090.
091.
public
Account(String firstName, String lastName, String phone, String email) {
092.
this
.firstName = firstName;
093.
this
.lastName = lastName;
094.
this
.phone = phone;
095.
this
.email = email;
096.
}
097.
098.
@Override
099.
public
String toString() {
100.
return
"Account{"
+
101.
"firstName='"
+ firstName + '\
''
+
102.
", lastName='"
+ lastName + '\
''
+
103.
", phone='"
+ phone + '\
''
+
104.
", email='"
+ email + '\
''
+
105.
'}'
;
106.
}
107.
}
108.
}
Now run this Java application and click New Account button:
Fill all text fields in the opened dialog and click New Account button:
Once user clicks New Account button, Java application is notified about click and reads new account information from the dialog:
Using this technique and JxBrowser library you can build and display any HTML+CSS+JavaScript UI in your Java desktop application.
Bring the power of Chromium engine into your Java desktop app!
Useful Links:
- JxBrowser: http://www.teamdev.com/jxbrowser
- JavaDoc: http://www.teamdev.com/downloads/jxbrowser/javadoc/index.html
- Programmer’s Guide: http://www.teamdev.com/downloads/jxbrowser/docs/JxBrowser-PGuide.html
- Quick Start Guide: http://www.teamdev.com/downloads/jxbrowser/docs/Quick-Start.html
- Samples: https://sites.google.com/a/teamdev.com/jxbrowser-support/samples
- Licensing: http://www.teamdev.com/jxbrowser#licensing-pricing
- HTML/CSS/JavaScript GUI in Java Swing Application
- Load html in Swing GUI
- Html + CSS实现 java Swing 中titleborder样式
- jfcUnit: 测试Java GUI Swing
- java SWING/GUI测试程序
- Java Notes: GUI Development (Swing)
- 【java基础】08.GUI:Swing
- GUI application run in console mode
- javaScript JSP HTML Java CSS 注释
- Java、HTML、CSS、JSP、JavaScript注释语法
- java入门(HTML,CSS,JavaScript入门)
- Skin实现Java SWING Like GUI
- Marathon Java Swing GUI automation Test
- Java Swing GUI文件拖拽
- 细说Java GUI:AWT,SWT,Swing
- 细说Java GUI:AWT,SWT,Swing
- 细说Java GUI:AWT,SWT,Swing
- 细说Java GUI:AWT,SWT,Swing
- stvd ubsct溢出错误解决
- 阿里巴巴历年笔试面试70题 [6-10]
- 到入struts之后更改web.xml配置文件之后出现404错误
- 一些開源圖表Chart資源收集(台湾省某网站搜集转载)
- 唐山自闭症去哪家yiyuan
- HTML/CSS/JavaScript GUI in Java Swing Application
- Android中可自由移动悬浮窗口的实现
- Android drawBitmap的用法
- android出现the project was not built due to "a resource exists with a different case问题
- [综合面试] 跨专业大牛的IT求职面试经验分享以及学习知识路线图梳理
- 第12周-项目1-动物这样叫
- 第十三周项目一(1):动物这样叫:虚函数
- 唐山自闭症能治好吗
- 这么好的下啦刷新我无法做不分享