5

Có rất nhiều ứng dụng máy tính để bàn tích hợp kiểm soát trình duyệt web để hiển thị nội dung HTML và giao tiếp với các dịch vụ web và ứng dụng web trực tiếp từ ứng dụng: iTunes, Adobe Brackets, Evernote, Amazon Music, Steam Client, v.v. Nếu bạn phát triển loại tương tự ứng dụng máy tính để bàn sử dụng công nghệ Java và bạn cần nhúng kiểm soát trình duyệt web an toàn, nhanh, nhẹ, hỗ trợ tất cả các công nghệ web hiện đại như HTML5, CSS, JavaScript, Flash, v.v., thì  JxBrowser  là thứ bạn cần.

Đoạn mã sau đây cho thấy quá trình nhúng thành phần trình duyệt web đơn giản vào ứng dụng máy tính để bàn Java Swing / AWT / JavaFX của bạn:

Xoay / AWT

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.swing.BrowserView;

import javax.swing.*;
import java.awt.*;

public class BrowserSample {
   public static void main(String[] args) {
       Browser browser = new Browser();
       BrowserView browserView = new BrowserView(browser);

       JFrame frame = new JFrame("JxBrowser");
       frame.add(browserView, BorderLayout.CENTER);
       frame.setSize(700, 500);
       frame.setVisible(true);

       browser.loadURL("http://www.google.com");
   }
}

JavaFX

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.javafx.BrowserView;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXSample extends Application {
   @Override
   public void start(Stage primaryStage) {
       Browser browser = new Browser();
       BrowserView browserView = new BrowserView(browser);

       StackPane pane = new StackPane();
       pane.getChildren().add(browserView);
       Scene scene = new Scene(pane, 700, 500);
       primaryStage.setScene(scene);
       primaryStage.show();

       browser.loadURL("http://www.google.com");
   }

   public static void main(String[] args) {
       launch(args);
   }
}


Lưu ý: hãy xem Hướng dẫn bắt đầu nhanh để có thêm thông tin về cách thêm thư viện JxBrowser vào dự án Java của bạn bằng IDE yêu thích của bạn.

HTML + CSS + JavaScript dưới dạng GUI

Với JxBrowser, GUI ứng dụng máy tính để bàn Java của bạn có thể được xây dựng bằng HTML + CSS + JavaScript. Điều đó có nghĩa là bạn thực sự có thể sử dụng bất kỳ bộ công cụ UI UI hiện đại nào để xây dựng giao diện hiện đại, thân thiện với người dùng của ứng dụng máy tính để bàn Java của bạn. Bạn không cần phải thuê các nhà phát triển Swing / AWT. GUI của ứng dụng Java của bạn có thể được xây dựng bởi các nhà phát triển HTML + CSS + JavaScript. Nó làm giảm đáng kể chi phí phát triển dự án Java.

Ứng dụng đơn giản sau đây trình bày cách tạo Hộp thoại Tài khoản mới được xây dựng bằng HTML + CSS + JavaScript vào ứng dụng máy tính để bàn Java / AWT của bạn.

Đầu tiên chúng tôi tạo tài liệu HTML với nội dung hộp thoại Tài khoản mới. Trong tài liệu sau đây, chúng tôi sử dụng một trong các khung UI UI Bootstrap phổ biến nhất để xây dựng UI của hộp thoại:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Registration Form</title>
   <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
   <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <style>
       body{
           font:12px/15px Roboto, "Helvetica Neue", Helvetica, sans-serif;
       }
       select,
       input,
       .btn {
           font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
       }
       #wrapper{
           margin:0 auto;
       }
       .main-form {
           width: 360px;
           min-height: 360px;
           background: #fff;
           border-radius: 60px;
           margin:0px auto 20px;
           padding: 20px;
       }
       .form-logo {
           font-size: 100px;
           color: #708090;
       }
   </style>
</head>
<body>
<script>
function newAccount() {
   var firstName = document.getElementById("firstname").value;
   var lastName = document.getElementById("lastname").value;
   var phone = document.getElementById("phone").value;
   var email = document.getElementById("email").value;
   // Call Java callback function and pass text fields values.
   onCreateAccount(firstName, lastName, phone, email);
}
</script>
<div id="wrapper">
   <div class="main-form">
       <form action="#" method="POST">
           <fieldset>
               <div class="text-center">
                   <span class="form-logo glyphicon glyphicon-user"></span>
               </div>
               <div class="form-body">
                   <h1 class="form-title text-center">New Account</h1>
                   <div class="form-group">
                       <input class="form-control" type="text" id="firstname" name="firstname" placeholder="First Name">
                   </div>
                   <div class="form-group">
                       <input class="form-control" type="text" id="lastname" name="surname" placeholder="Last Name">
                   </div>
                   <div class="form-group">
                       <input class="form-control" type="text" id="phone" name="phone" placeholder="Phone">
                   </div>
                   <div class="form-group">
                       <input class="form-control" type="email" id="email" name="email" placeholder="Email">
                   </div>
                   <div class="form-group text-center">
                       <button class="btn btn-default btn-lg" type="button" onclick="newAccount();">New Account</button>
                   </div>
               </div>
           </fieldset>
       </form>
   </div>
</div>
</body>
</html>

Hộp thoại này có các trường Tên , Tên , Điện thoại , Email và nút Tài khoản mới . Trong ứng dụng Java, chúng ta cần hiển thị một hộp thoại có nội dung HTML này, cho phép người dùng điền vào tất cả các trường văn bản và nhấp vào nút Tài khoản mới . Trong mã Java, chúng tôi cần được thông báo khi người dùng nhấp vào nút, đọc các giá trị trường văn bản để tạo tài khoản mới trong ứng dụng của chúng tôi. Ví dụ Java sau đây cho thấy cách chúng ta có thể làm điều đó với JxBrowser:

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.BrowserFunction;
import com.teamdev.jxbrowser.chromium.JSValue;
import com.teamdev.jxbrowser.chromium.swing.BrowserView;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.util.concurrent.atomic.AtomicReference;

public class HTMLUISample {
   public static void main(String[] args) {
       final JFrame frame = new JFrame("HTMLUISample");
       final JButton newAccountButton = new JButton("New Account...");
       newAccountButton.addActionListener(new ActionListener() {
           @Override
           public void actionPerformed(ActionEvent e) {
               Account account = createAccount(frame);
               // Displays created account's details
               JOptionPane.showMessageDialog(frame, "Created Account: " + account);
           }
       });

       JPanel contentPane = new JPanel();
       contentPane.add(newAccountButton);

       frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
       frame.add(contentPane, BorderLayout.CENTER);
       frame.setSize(300, 75);
       frame.setLocationRelativeTo(null);
       frame.setVisible(true);
   }

   private static Account createAccount(JFrame parent) {
       final AtomicReference<account> result = new AtomicReference<account>();
       final JDialog dialog = new JDialog(parent, "New Account", true);

       // Create Browser instance.
       final Browser browser = new Browser();
       // Register Java callback function that will be invoked from JavaScript
       // when user clicks New Account button.
       browser.registerFunction("onCreateAccount", new BrowserFunction() {
           @Override
           public JSValue invoke(JSValue... args) {
               // Read text field values received from JavaScript.
               String firstName = args[0].getString();
               String lastName = args[1].getString();
               String phone = args[2].getString();
               String email = args[3].getString();
               // Create a new Account instance.
               result.set(new Account(firstName, lastName, phone, email));
               // Close dialog.
               dialog.setVisible(false);
               // Return undefined (void) to JavaScript.
               return JSValue.createUndefined();
           }
       });
       // Load HTML with dialog's HTML+CSS+JavaScript UI.
       browser.loadURL("file://<path_to_file>/index.html");

       dialog.addWindowListener(new WindowAdapter() {
           @Override
           public void windowClosing(WindowEvent e) {
               // Dispose Browser instance because we don't need it anymore.
               browser.dispose();
               // Close New Account dialog.
               dialog.setVisible(false);
               dialog.dispose();
           }
       });
       dialog.setDefaultCloseOperation(WindowConstants.DO_NOTHING_ON_CLOSE);
       // Embed Browser Swing component into the dialog.
       dialog.add(new BrowserView(browser), BorderLayout.CENTER);
       dialog.setSize(400, 500);
       dialog.setResizable(false);
       dialog.setLocationRelativeTo(parent);
       dialog.setVisible(true);

       return result.get();
   }

   public static class Account {
       public final String firstName;
       public final String lastName;
       public final String phone;
       public final String email;

       public Account(String firstName, String lastName, String phone, String email) {
           this.firstName = firstName;
           this.lastName = lastName;
           this.phone = phone;
           this.email = email;
       }

       @Override
       public String toString() {
           return "Account{" +
                   "firstName='" + firstName + '\'' +
                   ", lastName='" + lastName + '\'' +
                   ", phone='" + phone + '\'' +
                   ", email='" + email + '\'' +
                   '}';
       }
   }
}</path_to_file></account></account>

Bây giờ hãy chạy ứng dụng Java này và nhấp vào nút Tài khoản mới :


Điền vào tất cả các trường văn bản trong hộp thoại đã mở và nhấp vào nút Tài khoản mới :


Khi người dùng nhấp vào nút Tài khoản mới , ứng dụng Java sẽ được thông báo về lần nhấp và đọc thông tin tài khoản mới từ hộp thoại:


Sử dụng kỹ thuật này và thư viện JxBrowser, bạn có thể xây dựng và hiển thị bất kỳ giao diện người dùng HTML + CSS + JavaScript nào trong ứng dụng máy tính để bàn Java của bạn.

Mang sức mạnh của công cụ Chromium vào ứng dụng máy tính để bàn Java của bạn!

Liên kết hữu ích:

|