为Java应用程序创建HTML / JS接口

时间:2017-02-10 10:14:53

标签: javascript java jquery html css

我正在寻找一种从html / javascript甚至jquery创建我的java应用程序界面的方法。

我已经在这个主题上看过很多帖子,主要讨论jxbrowser,这是一个非常好的库,但如果我想在商业用途中实现它,我必须购买许可证。

但我没有找到像jxbrowser一样简单的库。基本上我查找了一个教程,我看到了它:

HTML:

<!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>

Java:

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 + '\'' +
                   '}';
       }
   }
}

这非常简单,因为我们可以使用已经构建的带有javascript的html文件并从中调用java方法。在这里,您只需一个表格并显示用户输入的信息。

你知道一个库可以保存这个html文件并调整java代码以使它适用于java桌面应用程序吗?

0 个答案:

没有答案