JavaFX vs HTML + CSS + JavaScript
WebView позволяет выводить полноценные интерактивные html страницы в приложении.
Значит, если я правильно понимаю, можно сначала сделать локальный сайт приложения, а потом в Application stand-alone их выводить.
�� Подобається Сподобалось 0
До обраного В обраному 0
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
19 коментарів
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Не прошло и полгода. Вот оно, начало всего: paterns.xyz/gold
А вот тут ролик, как играть. www.youtube.com/watch?v=O1qWKKe12pk (30 сек)
Без HTML однако на javafx. Скоро встречайте GOLD
Он будет такой же, как вот это: paterns.xyz/gold
Но теперь исходники в java классах, а не как в js
Насколько же легче баги править и фичи дописывать.
Первая поделка на Javafx
Клеточный автомат 5минут
youtu.be/NuK-cKa4oxQ
Эта тема из той волновой функции, где я пишу на JavaFX.
Появилась идея закодить на JavaFX некоторые свои игрушки (которые сейчас на javascript).
Это во первых рефакторинг, а во вторых — смартфоны, андроид
Igor Lytvynenko Java Developer 01.02.2021 19:28
WebView в JavaFx — це ще той тормоз . just in case.
Igor Lytvynenko Java Developer 01.02.2021 20:06
Ну . javafx — це ж як раз і є UI фреймворк.
Всякі «Licence agreement» можна і у web view зверстати. А UI — засобами фреймворку. Зрештою, в javafx стандартна архітектура . нічого незвичного. Єдине що візуального редактора там не дуже . scene builder . трохи . з особливостями.
Dmitry Bugay Java Team Lead 01.02.2021 14:46
А зачем так делать?
Может, если ты пишешь на JavaFX, то и написать юай на нем?
Можно и так, но мне чего-то захотелось без fxml.
Dmitry Bugay Java Team Lead 01.02.2021 19:59
Воу воу воу!
Внезапно у JavaFX есть и Java API, можно и без fxml аж бигом
А нужно ли перемешивать? Я вот как-то перемешал авт и свинг до сих пор кошмары снятся.
Dmitry Bugay Java Team Lead 01.02.2021 20:07
Перемешивать что? Джаву и джаву?
Если вдруг ты не видел джаву фх, то джава фх это просто джава апи для окошек. И пишется он на обычной джаве. Разве что библиотеки с классами окошек и кнопочек нужно подключить
Ты меня пугаешь, утверждая что джава это приговор интерфейсу пользователя. С другой стороны, мое желание html+css+js стало еще более определенным.
Dmitry Bugay Java Team Lead 02.02.2021 01:03
0.о
Ты, видимо, вообще не понимаешь о чем я пишу.
Где ты увидел «приговор джаве как интерфейсу»?
Мне просто кажется что ты путаешь коней с людьми и не понимаешь что такое тот же JavaFX.
Igor Lytvynenko Java Developer 01.02.2021 20:08
Fxml — то добре . але це не парадигма, це інструмент. Тому змішувати там більш ніж норм . а нагавнокодити можна і змішуючи і не змішуючи )
Первая ссылка очень хороша. Вот у меня тоже неплохая:
betacode.net/. /javafx-webview-webengine
Victor Musienkо Senior Engineer в Noibu.com 30.01.2021 17:07
Я тут вижу взаимодействие с файлами операционной системы. То есть, не использовать Reflection API а создавать и читать файлы сообщений или в статическом классе регистрировать события. Я попытался создавать файлы и обнаружил странное — файл в Windows 7 трудно удалить, но легко rewrite.
Підписатись на коментарі
Ваша пошта
Підписатись
Не пропустіть
1 листопада, Київ
2 листопада, Online
2 листопада, Online
2 листопада, Online
6 листопада, Online
6 листопада — 18 грудня, Online
8 листопада, Online
9 листопада, Online
13 листопада, Online
17 листопада, Київ
Гарячі вакансії
- Data Security Analyst в
GR8 Tech , Київ, за кордоном, віддалено - Senior Fullstack Developer (Java/React) в Luxoft , віддалено
- HR Business Partner в
WiX , Київ - User Acquisition Specialist (Media Buyer) в
BetterMe , Київ, за кордоном, віддалено - Senior Data Engineer в
Lyft , віддалено - Middle .NET Developer (Creatio) в HR Advice , Київ, віддалено
- Middle/Senior Full-Stack Developer (Node.js + React.js) в
ZFORT Group , Харків, Вінниця, Кременчук, Хмельницький, за кордоном, віддалено - Java Team Lead в
Atlas IAC , Київ, за кордоном, віддалено
Всі вакансії
Использование web-страниц в JavaFX приложении
Передо мной предстала следующая задача: написать некоторый софт на Java, с применением GUI на JavaFX. одной из функций будущей программы должна быть возможность построение схем(по типу блок — схем, аля visio, то бишь блоки, соединение стрелками и т.д.). Изучив интернет графических библиотек для FX такого рода я не обнаружил(буду благодарен, если дадите ссылку, может не внимательно искал). Решил зайти с другой стороны, и использовать web — библиотеки на JavaScript для построения подобных схем. Нашёл таковую: Draw2D Она бесплатна, если проект не коммерческий. Проект у меня не коммерческий 🙂 (Если есть еще интересные аналоги, знающие люди, напишите) Также, узнал об интересном компоненте JavaFX — WebView. Совместив всё это получил рабочий прототип схем. Т.е. блоки двигаются, стрелками соединяются..Однако одна проблема так и не осталась решённой. Производительность WebView несколько низка, и перетаскивание блоков и прочее выполняется с неприятными фризами. В связи с этим вопросы: Есть ли аналоги WebView для JavaFX? Я читал про JxBrowser, с его прекрасной производительностью, однако он полностью платный(и очень дорогой). Поэтому прошу подсказать, есть ли ещё интересные аналоги. Спасибо.
Отслеживать
1,541 1 1 золотой знак 9 9 серебряных знаков 22 22 бронзовых знака
задан 19 фев 2019 в 6:21
2,663 1 1 золотой знак 20 20 серебряных знаков 35 35 бронзовых знаков
Если уже тащите webview зачем вообще fx? Возьмите сразу chromium пишите все под него.
19 фев 2019 в 9:59
@StrangerintheQ извините, никогда не использовал chromium и в принципе слабо представляю как все это выглядит. Не могли бы Вы написать подробнее, что это и с чем кушают? Мне по сути нужен интерфейс на web(почти весь, если не весь) и бэк-код на java.
19 фев 2019 в 12:09
chromium.woolyss.com это по сути хром, только без обвеса, только веб страница, есть несколько готовых сборок, можно собрать самому из исходников. так же можно использовать обычный хром в kiosk-mode, а всю вашу логику держать на сервере, который уже, как Вам угодно, на java
JavaFX WebView (HTML/JS) — используем web практики для разработки desktop приложений
Базовым UI фреймворком для нашего приложения был выбрана JavaFX. JavaFX прекрасно показала себя. В этой же статье мы хотели сконцентрироваться на одном компоненте JavaFX — WebView.
При разработке нашего приложения — интерфейса COLT — мы использовали набирающий популярность среди девелоперов подход, когда часть компонентов UI реализуется на JavaScript/HTML.
Компонент на базе HTML/JS — это обычный Java класс, обычный JavaFX компонент с лайаутом — HBox или просто Pane, который содержит в себе экземпляр компонента Webview.
Как создать экземпляр webkit в JavaFX и подгрузить HTML
WebView webView = new WebView(); WebEngine engine = webView.getEngine(); engine.load(this.getClass().getResource("html/webview.html").toExternalForm())Что мы получили использовав web технологии в нашем приложении.
Тонны готовых решений
jQuery, D3 покрывает почти все наши задачи. Нужно готовое решение — находим через гугл за 5 минут. Здорово что аналогами элементов интерфейса заполнен под завязку весь интернет. Причем все в открытом доступе. Можно подглядеть идею и взять ее реализацию.
Дешево
На Java такое же, что мы реализовали на JS/HTML написать было бы непросто.
Например, этот компонент для добавления путей. За основу мы взяли движок для Tag-ов и хорошенько его «допилили». Получилась очень умная и приятная штука. Умеет редактировать в режиме «тэгов», а по двойному клику еще позволяет просто работать с текстом. Работа с «клипбоардом».
До этого, в предыдущей версии интерфейса, у нас использовался уродливый list-view. Наш новый fileset прост, компактен, современен. Есть идеи как еще можно расширять его функциональность.
Второй пример — log-view.
Сначала мы хотели сделать компонент на основе ListView. Особых проблем со скинованием мы не получили, но все же компонент получился малопригодным для реального использования пользователями. Например, нельзя было выделить логи как текст, сразу несколько блоков, реализация компонента грозила вылиться в немалый объем кода. Компонент на HTML получился легким и расширяемым. Нужно отметить что JavaFX использует GPU для рендеринга DOM, поэтому компонент получился достаточно производительным. Компонент мы планируем расширить поиском по логам, фильтрами и т.д. Все это мы планируем реализовать средствами JavaScript/CSS.
Возможно мы просто не настолько хороши в Java-UI, но нам действительно было сложно писать на Java компоненты со сложной интерактивностью. Там где нужен готовый компонент, пример который можно «нагуглить» — да все легко и просто. Связать через «байндинг» данные и «вьюхи» — опять очень просто и привычно (наш предыдущий опыт — Adobe Flex). Но когда дело касается чего-то выходящего за рамки стандартных, описанных в документации кейсов — мы теряли слишком много времени на «ресерч».
Мы выработали для себя следующую схему — пытаемся сделать через JavaFX-компоненты, и если «упираемся в стену», или излишне усложняется реализация, то пишем на HTML. Такой подход значительно ускорил нашу разработку.
Кросс-платфоменность
Движок Webview в JavaFX — это webkit. Работает одинаково на любой платформе. Мы практически не тратили время на кросс-платфоменность.
Java-JavaScript Bridge
Связка Java-JavaScript, мост между ними позволяет делать вызовы методов Java-классов из HTML, а так же вызывать код JavaScript из Java. Простой пример код на Java:
private void clear()
А этот код JavaScript который принимает данные и вызывает методы ArrayList java —
function test(list)< console.log("list.size() - " + list.size();//3 console.log("list.get(0) - " + list;//1 >Пример конечно же не совсем реальный, синтетика, но видно, что методы вызываются, и данные принимаются.
Вы можете при загрузке html, добавить ссылку на приложение прямо в объект Window.
JSObject windowObject = (JSObject) webView.engine.executeScript("window"); windowObject.setMember("app", this);И вызывать методы Java из кода JavaScript —
app.addData($("my-input").val());Более правильным (более безопасным) подходом является создание в Java окружении специального объекта, который ограничивает доступ, и позволяет из JavaScript вызывать в приложении только «разрешенные» методы.
windowObject.setMember("app", new JSBridge() < public myMethod()< MyApp.this.myMethod(); >>);Еще один пример связки через JS «alert». Нам нужно было отловить «load» html — полную инициализацию приложения. Все другие методы оказались не так надежны. Что мы сделали.
Как обычно в JavaScript через jquery:
$(function()< alert("command:ready"); >); В Java добавили обработчик «onAlert» для webview.engine и теперь мы точно знаем что HTML загружен и инициализирован.
engine.onAlert = new EventHandler>() < @Override void handle(WebEventevent) < if("command:ready".equals(event.getData()))< //TODO: initialize >> >Переиспользование кода
Код который мы написали для нашего приложения для компьютеров мы планируем переиспользовать для мобильной разработки. На мобильном приложении (objective-c/java) мы так же создадим компонент на на основе Webview большая часть функциональности будет уже готовой.
C какими сложностями мы столкнулись при работе с HTML/JS в JavaFX?
Первое. Жизненный цикл загрузки документа. Вызывать методы в JS можно только после полной загрузки страницы, в документации предлагается путь — отслеживать в Java событие смены состояния страницы. Такой подход оказался достаточно глючным. Как упоминал ранее — связка события «load» на стороне html и перехват «alert» на стороне Java, решили эту проблему.
Вторая проблема, которая попила у нас кровь — это глюки с вызовами одновременно нескольких JavaScript функций в разных компонентах с webview. Причем такой баг вылез достаточно недавно и очень похоже на оптимизацию, которую добавили в движок webkit в JavaFX. В любом случае, можно получить ошибку о бесконечной рекурсии в JavaScript буквально на пустом месте. Такая проблема решается достаточно легко — оборачиваем вызов JavaScript из Java c помощью Platform.runLater().
Третья проблема. Дебаг и логгинг.
На первом этапе работы, когда идет прототипирование и вы работаете только с HTML/JS можно тестировать просто в браузере. На этапе интеграции с Java ваш код просто перестает работать без правильного окружения. И вы все чаще и чаще начинаете собирать Java приложение для того чтобы потестировать функционал на JavaScript. А билд Java приложения и его запуск это долгие секунды ожидания. Какие приемы в работе мы использовали, чтобы такую долгую загрузки избежать и не терять время?
Простой и очевидный пусть — добавить «релоад» страницы по комбинации клавиш. Подправил HTML/CSS/JS — нажал F5 — содержимое WebView перегрузилось:
$(document).keydown(function (e) < if(e.keyCode == 116 /*F5*/)< location.reload(); >>);Но кроме быстрого «рефреша» нам понадобится просмотр логов.
Достаточно простым решением было добавить FireBug Lite —
И конечно же, как только наше приложение «задышало» и заработал livecoding для HTML/JS мы стали использовать COLT для разработки COLT. На данный момент функционал нашего же приложения покрывает большинство кейсов — FireBug Lite нам уже не нужен. Лог, живое обновление, удаленное тестирование, ливкодинг. Ливкодинг на наш взгляд может заменить дебаг, но пользователи просят, и «настоящий дебаг с брейпойнтами» мы тоже прикрутим.
Как подключить? Просто добавляем в html документ следующий код
var url ; if (location.href != url)
Где url — адрес по которому COLT запускает трансформированную страницу. Узнать его просто. Создаем проект COLT, указываем ссылку на нашу страницу — «Main Document» и запускаем сессию — жмем «зеленую молнию».
Страница будет открыта в браузере. Копируем пусть к странице и вставляем в наш JS код. Окно браузера закрываем. Теперь запускаем JavaFX приложение. Пробуем изменить содержимое страницы, JavaScript и прямо в JavaFX приложении будет работать livecoding.
В новой версии, в настройках, в блоке «Advanced», мы добавили специальное текстовое поле с данным снипетом. Без старта проекта вы сможете скопировать данный код прямо из настроек COLT.
Логи будут появляться в окне COLT. Чтобы в следующий раз кольт открывал не браузер, а запускал ваше приложение, можно выбрать запуск не браузера, а запуск с консоли. В нашем проекте, мы просто скопировали текст из output нашей run-configuration IDEA и добавили этот вызов в COLT console luncher.
Теперь при нажатии на «зеленую бровь» будет запущено окно Java приложения.
В целом подход с редиректом внутри HTML на live-страницу универсален. Он, например, прекрасно работает и на PhoneGap. Приложение запускается на мобильное устройстве (главное чтобы устройство было в той же локальной сети) и обновления доставляются без необходимости рестарта. Нужно запомнить порядок действий — и можно применять везде, где есть WebView.
Хорошей практикой стало добавлять функцию-обработчик события изменения кода.
//@code-update function live()
Аннотацию @code-update перехватывают наши AST трансформации и добавляют листенер на событие обновления кода.
Типичный кейс работы с таким обработчиком — это вызывать функции в коде (то есть то что мы обычно пишем в консоль FireBug). Можно поменять значение или вызвать функцию, когда приложение уже запущено. Добавил код, сохранил — код выполнился.
Плюс удобно «трейсить», выводить данные, значение которых нужно узнать в «рантайм», без остановки кода — вы можете просто вывести их на консоль.
Groovy
Так же несколько выходящим за рамки темы статьи, вывод, который мы сделали при реализации нашего проекта и которым бы хотели поделиться, это то что писать UI лучше на языке более лаконичным чем Java. Мы воспользовались для этого Groovy и очень довольны. Количество кода сократилось раз в десять, а работа с XML и файловой системой упростилась так же на порядок. AST трансформации для создания Bindable свойств, наши трансформации позволили подмешивать сервисы в контроллеры, генерировать Bindable обертки для простых данных. И так далее. Что называется must have. Про использование Groovy для JavaFX мы пишем отдельную статью.
Планы
Подход, который мы использовали в разработке нашего настольного приложения, мы начали применять и для мобильной разработки. Мы используем PhoneGap+COLT и кейс практически ничем не отличается от JavaFX+HTML+COLT.
Выбрали PhoneGap, а не другую платформу так как уже было накоплено много готового в desktop проекте и переписывать заново на другую платформу нам показалось нецелесообразным. Если наше приложение потребует отказаться от PhoneGap, мы перепишем часть приложения на «натив», но весь функционал, который написан на HTML/JS мы не потеряем. Они просто будут по другому запускаться.
- Блог компании CodeOrchestra
- JavaScript
- Java
Рендеринг HTML в JavaFX
JavaFX 2.0 позволяет включать HTML-код в приложение JavaFX, используя классы WebView и WebEngine JavaFX 2.0 из пакета javafx.scene.web . В этом посте рассматривается очень простой пример того, как это можно сделать. Гораздо более сложные приложения могли бы наслаждаться большим взаимодействием между включенным содержимым HTML и самим приложением JavaFX.
Мой простой пример использует элемент управления JavaFX 2.0 Accordion для представления нескольких сайтов, связанных с Java, которые я часто просматриваю в заголовках статей и статей для чтения. Каждая из названных панелей в аккордеоне имеет свой собственный веб-сайт. Следующий листинг кода содержит весь класс Java для этого приложения и содержит не более 100 строк кода, включая комментарии и пробелы.
WebViewExample.java
package dustin.examples; import com.google.common.collect.ImmutableMap; import java.util.Map; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.TitledPane; import javafx.scene.paint.Color; import javafx.scene.web.WebView; import javafx.scene.web.WebViewBuilder; import javafx.stage.Stage; /** * Simple example of using JavaFX 2.0's WebView class. * * @author Dustin */ public class WebViewExample extends Application < /** * Provide an instance of a JavaFX 2.0 Accordion control with each titled * pane in the Accordion featuring a title based on a 'key' value in the * provided a map and including WebView content of the page referenced by the * URL in the 'value' portion of the map. * * @param titleToUrl Mapping of page titles to their URLs to be used as * titled pane titles and source of content respectively. * @return Accordion control with web page-based titled panes. */ private Accordion prepareAccordion(final MaptitleToUrl) < final Accordion accordion = new Accordion(); for (final Map.EntrywebMap : titleToUrl.entrySet()) < final TitledPane pane = new TitledPane(webMap.getKey(), buildWebView(webMap.getValue())); accordion.getPanes().add(pane); >return accordion; > /** * Build a simple WebView based on the provided URL. * * @param url URL from which content will be rendered in the provided WebView. * @return WebView whose content is based on web page at provided URL. */ private WebView buildWebView(final String url) < final WebView webView = WebViewBuilder.create().prefHeight(450).prefWidth(1000).build(); webView.getEngine().load(url); return webView; >/** * JavaFX 2.0's Application.start(Stage) method. * * @param stage Primary stage. * @throws Exception Exception thrown during execution of JavaFX application * stage. */ @Override public void start(final Stage stage) throws Exception < stage.setTitle("JavaFX 2.0 WebView Example: Favorite Java Web Sites"); final Group rootGroup = new Group(); final MaptitleToUrl = ImmutableMap.builder() .put("Inspired by Actual Events", "http://marxsoftware.blogspot.com/") .put("JavaWorld", "http://javaworld.com/") .put("Java.net", "http://java.net/") .put("Java Lobby", "http://javalobby.com/") .build(); rootGroup.getChildren().add(prepareAccordion(titleToUrl)); final Scene scene = new Scene(rootGroup, 1000, 600, Color.WHITE); stage.setScene(scene); stage.show(); > /** * Main function for running this JavaFX example. * * @param arguments Command-line arguments: none expected. */ public static void main(final String[] arguments) < Application.launch(arguments); >>
In many ways, the above application works something like a stripped-down web browser. JavaFX does a lot of heavy lifting in processing the HTML source and presenting it just as a web browser would via WebView and an associated WebEngine. Some screen snapshots are shown next of how this application appears when it is run. The first image shows the application when it’s initially loaded and the four screen snapshots following that one represent each of the four titled panes being clicked in the accordion.
The links within the presented HTML content can be clicked and the application supports traversal of links. However, significantly greater interaction between the JavaFX application and the rendered HTML can be accomplished using the methods on WebEngine that support interaction with JavaScript [such as getOnStatusChanged()]. The underlying document can also be accessed via WebEngine’s documentProperty() and getDocument() methods.
With the increasing importance of HTML5, it’s nice that JavaFX has built-in support for interacting with HTML, JavaScript, and the DOM.