HTML/CSS/JavaScript GUI in Java Swing Application

Join the DZone community and get the full member experience.

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:

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"); >>

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); >>

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 popular Bootstrap HTML UI framework to build dialog’s UI:

        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   
 
 
 
 
New Account
 
 
 
 
 
New Account 
 
 
 
 
 
  

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:

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 AtomicReferenceresult = new AtomicReference(); 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:///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'; > > >

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 библиотекой jsoup

Итак мы хотим получить конкретную информацию с сайта. Пошагово разберем как это сделать. Для начала нам нужно получить объект Document . Это представление нашей html страницы. В Jsoup есть несколько способов превратить сайт в объект Document . Подключиться к серверу

 Document document = Jsoup.connect("https://hh.ru/").get(); 

Jsoup сам подключается к сайту. Данный способ самый простой, но он годится только для тестирования. Есть более удобные и гибкие http клиенты. Также имейте ввиду, каким бы http клиентом вы не пользовались, добавляйте в запрос заголовок User-Agent с значением например Chrome/81.0.4044.138 . По этому заголовку сервер определяет с какого устройстрва вы подключились. Без этого заголовка сервер считает вас ботом и может забанить. Из файла;

 File file = new File("hh-test.html"); Document document = Jsoup.parse(file, "UTF-8", "hh.ru"); 

Это основной способ получения объекта Document . Последний аргумент «hh.ru» — базовый URI. Это нужно для создания абсолютных ссылок из относительных, которые присутствуют на сайте. Из строки

 String html = " " + " " + "  " + " " + " " + " 
" + " 
Работа найдется для каждого
 " + " 
Поиск вакансий
 " + "
 " + " 
Вакансии дня
 " + " 
" + " 
Работа из дома
 " + "
 " + " " + " "; Document document = Jsoup.parse(html, "hh.ru"); 

Далее я буду демонстрировать библиотеку на этом html, который представляет упрощенный сайт. Получение тега Основная задача при парсинге — получить нужный тег. Делать мы это будем при помощи метода select . Обратите внимание, что он всегда возвращает список тегов. Если теги не найдены, то список будет пустым. В аргумент метода нужно передать css селектор, по которому ищутся теги. На селекторах я остановлюсь подробнее, потому что вся работа сводится к написанию правильного селектора. Обычно нам нужно составить его так, чтобы он возвращал один тег.

 Elements h1 = document.select("h1"); System.out.println(h1); 

 
Работа найдется для каждого
 

 Elements titleElem = document.select("head > title"); 

 Elements divs = document.select("body > div"); 

 Elements firstDiv = document.select("body > div:nth-child(1)"); 

Получить первый тег div вложенный в body . Получать тег по порядковому номеру плохой способ, потому что его положение на сайте может поменяться. Лучше определить тег по абсолютным параметрам. Такими параметрами являются атрибуты class и id

 Elements contentElem = document.select("body > div.content"); 

 Elements idElem = document.select("#123"); 

 Elements divHeader = document.select("body > div.header.main :not(h1)"); 

Методы Elements Когда мы получили список Elements можно извлечь данные из него. Напомню, что обычно селектором ищется один тег, т.е. у Elements должен быть размер 1.

строковое представление тега Если вам нужно быстро получить селектор элемента — в браузере откройте панель разработчика (f12), нажмите правой кнопкой на элемент, «просмотреть код», нажмите правой кнопкой на тег, далее «Copy» «Copy selector». Такой селектор будет не оптимальным, но для быстрого результата вполне подходит. Заключение Это основы работы с библиотекой Jsoup. Но этого вполне достаточно, чтобы парсить сайты. Для уверенной работы вам нужна только практика написания селекторов в реальных сайтах. P.s. Данная библиотека используется для решения большой задачи на 38 уровне

Источник