Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Навык применения WebView (JavaScript/HTML) при разработке JavaFx приложения

Anna | 4.06.2014 | нет комментариев
Базовым UI фреймворком для нашего приложения был выбрана JavaFX. JavaFX восхитительно показала себя. В этой же статье мы хотели сконцентрироваться на одном компоненте JavaFX — WebView.
image

При разработке нашего приложения — интерфейса COLT — мы применяли набирающий среди девелоперов подход, когда часть компонентов реализуется на 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-ов и хорошенечко его «допилили». Получилась дюже разумная и славная штука. Может редактировать в режиме «тэгов», а по двойному клику еще разрешает легко трудиться с текстом. Работа с клипбоардом.

image

До этого, в предыдущей версии интерфейса, у нас применялся некрасивый list-view. Наш новейший fileset примитивен, суперкомпактен, современен. Есть идеи как еще дозволено расширять его фунциональность.

2-й пример — log-view.

image

Вначале мы хотели сделать компонент на основе ListView. Специальных задач со скинованием мы не получили, но все же компонент получился малопригодным для реального применения пользователями. Скажем, невозможно было выделить логи как текст, сразу несколько блоков, реализация компонента грозилась вылиться в большой объем кода. Компонент на HTML получился легким и расширяемым. Необходимо подметить что JavaFX использует GPU для рендеринга DOM, следственно компонент получился довольно продуктивным. Компонент мы планируем расширить поиском по логам, фильтрами и т.д. Все это мы планируем реализовать средствами JavaScript/CSS.

Допустимо мы легко не настоль отменны в Java-UI, но нам подлинно было трудно писать на Java компоненты со трудной интерактивностью. Там где необходим готовый компонент, пример тот, что дозволено «нагуглить» — да все легко и легко. Связать через байндинг данные и «вьюхи» — вновь дюже легко и привычно (наш предшествующий навык — Adobe Flex). Но когда дело касается чего-то выходящего за рамки стандартных, описанных в документации кейсов — мы теряли слишком много времени на ресерч.

Мы выработали для себя следующую схему — пытаемся сделать через JavaFx-компоненты, и если «упираемся в стену», либо излишне усложняется реализация, то пишем на HTML. Такой подход гораздо ускорил нашу разработку.

Кроссплатфоменность

Движок Webview в JavaFX — это webkit. На всякий платформе, которую поддерживает Java. Мы фактически не тратили время на кросс платфоменность.

Java-JavaScript Bridge

Связка java-javascript, мост между ними разрешает делать вызовы способов Java-классов из HTML, а так же вызывать код JavaScript из Java. Примитивный пример код на Java:

private void clear() {
    JSObject windowObject = (JSObject)webView.getEngine().executeScript("window");
    windowObject.call("test", new ArrayList(1, 2, 3));
}

А данный код JavaScript тот, что принимает данные и вызывает способы ArrayList java —

function test(list){
	console.log("list.size() - "   list.size();//3
	console.log("list.get(0) - "   list;//1
}

Пример безусловно же не вовсе настоящий, синтетика, но видно, что способы вызываются, и данные принимаются.

Вы можете при загрузке html, добавить ссылку на прилоg” alt=”image”/>

Страница будет открыта в браузере. Копируем пускай к странице и вставляем в наш код. Окно браузера закрываем. Сейчас запускаем JavaFx приложение. Пробуем изменить содержимое страницы, javascript и прямо в JavaFx приложении будет трудиться livecoding.

В новой версии, в настройках, в блоке «Advanced», мы добавили особое тектовое поле с данным снипетом. Без старта плана вы сумеете скопировать данный код прямо из настроек COLT.

image

Логи будут возникать в окне COLT. Дабы в дальнейший раз кольт открывал не браузер, а запускал ваше приложение, дозволено предпочесть запуск не браузера, а запуск с консоли. В нашем плане, мы легко скопировали текст из output нашей run-configuration IDEA и добавили данный вызов в COLT console luncher.

image

image

Сейчас при нажатии на «зеленую бровь» будет запущено окно Java приложения.

В целом подход с редиректом внутри HTML на live-страницу универсален. Он, скажем, восхитительно работает и на PhoneGap. Приложение запускается на мобильное устройстве (основное Дабы устройство было в той же локальной сети) и обновления доставляются без необходимости рестарта. Необходимо запомонить порядок действий — и дозволено использовать всюду, где есть WebView.

Отличной практикой стало добавлять функцию-обработчик события изменнения кода.

//@code-update
function live(){
    console.log("live update");
}

Аннотацию @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 мы не утратим. Они легко будут по иному запускаться.

Сайт плана codeoerchestra.com

Источник: programmingmaster.ru

Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB