Electron, официально известный как Atom Shell, позволяет людям использовать веб-технологии для создания кроссплатформенных приложений. К сожалению, Electron не поддерживает какую-либо платформу гибридных приложений, так что вот он, пользовательский интерфейс Onsen! В этом сообщении блога мы попытаемся интегрировать инфраструктуру пользовательского интерфейса Onsen в демонстрационное приложение Electron, чтобы увидеть, как оно работает.

Установка и настройка

Обратите внимание, что наша среда разработки выглядит следующим образом:

  • Электрон: v0.36.2
  • ОнсенUI: v1.3.14
  • УгловойJS: v1.4.8

Установка

Во-первых, давайте установим Электрон. Мы можем просто использовать npm для установки.

$ sudo npm install -g electron-prebuilt

Настройка проекта

Теперь нам нужно создать каталог /electron-sample и сгенерировать файл package.json, выполнив следующие команды:

$ mkdir /electron-sample 
$ cd /electron-sample 
$ npm init -y

В файле package.json измените и включите main.js для Electron.

Создать проект

Минимальное приложение Electron устроено следующим образом:

. 
├── ./index.html 
├── ./main.js 
└── ./package.json

main.js должен содержать скрипт, работающий в основном процессе.

Прямо сейчас мы просто отображаем Hello World в index.html.

Исполнение

В корневом каталоге проекта (/electron-sample) мы можем запустить следующую команду:

$ electron .

Теперь вы должны увидеть что-то вроде этого.

Интеграция пользовательского интерфейса Onsen

Загрузите пользовательский интерфейс Onsen с помощью Bower:

$ sudo npm install -g bower 
$ bower install onsenui

Теперь наш каталог должен выглядеть так.

. 
├── ./bower_components 
│ ├── ./OnsenUI 
│ └── ./angular 
├── ./index.html 
├── ./main.js 
└── ./package.json

Модификация

Давайте изменим index.html, чтобы отобразить простую панель инструментов пользовательского интерфейса Onsen.

Запустите Electron, как раньше.

$ electron .

Отображение панели вкладок

Добавить панель вкладок очень просто с помощью пользовательского интерфейса Onsen. Давайте вставим его внутрь тега <body> в index.html следующим образом:

Таким же образом выполните команду electron .. Нажмите на любую вкладку, чтобы увидеть переходы между страницами.

Совместимость

Я заметил, что некоторые элементы пользовательского интерфейса Onsen, такие как скользящее меню или карусель, конфликтовали с Electron из-за сценария Hammer. Кроме того, события касания/перелистывания имели проблемы совместимости с Electron. Надеемся, что эти проблемы будут решены в будущем выпуске, а также будет реализована поддержка директив AngularJS.

Вывод

Сегодня мы увидели, как быстро реализовать приложение Electron с пользовательским интерфейсом Onsen. Было несколько конфликтов, которые не должны влиять на разработку, если у вас хорошие навыки работы с AngularJS. Комбинация пользовательского интерфейса Onsen и Electron, безусловно, станет отличным выбором для разработки кроссплатформенных приложений.

Я надеюсь, что этот урок помог вам.

Удачного кодирования!