转载自: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