Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового приложения доступен на Github.
Первым делом необходимо установить Electron:
npm install electron-prebuilt -g
Затем перейдем к созданию самого проекта. Для этого, например, можно воспользоваться генератором от Yeoman, либо создать файлы вручную. Так как нам нужно создать всего лишь несколько файлов, мы выберем второй вариант. Создадим новую папку и добавим в нее три файла: app.js, main.js и index.html.
Начнем с первого файла app.js. В нем мы инициализируем наше electron-приложение, укажем опций для окна, название, иконки и прочее. Здесь можно взять за основу код с странички документации и дополнять его по необходимости:
[js]
var app = require(‘app’); // Module to control application life.
var BrowserWindow = require(‘browser-window’); // Module to create native browser window.
// Keep a global reference of the window object, if you don’t, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on(‘ready’, function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600, resizable: false});
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
[/js]
Теперь создадим index.html в котором будет находиться внешний вид нашего приложения. Для начала просто поместим в него строку текста “Hello world” и для проверки запустим наше приложение с помощью команды:
electron app.js
Теперь скачаем необходимые нам библиотеки – AngularJs, Angular Material, а так же веб-шрифт с иконками Material Icons. Для этого можем воспользоваться менеджером пакетов npm:
npm install angular
npm install angular-material
После того как пакеты скачались их необходимо подключить в index.html. Для работы Angular Material потребуются еще две библиотеки Anuglar Animate и Angular Aria, если скачиваете скрипты вручную, то не забудьте и о этих скриптах.
Сразу же займемся и интерфейсом нашего приложения: добавим тулбар в шапку, боковое меню, а так же список с чекбоксами, которые и будут отображать наши будущие задачи в центральной части приложения. Воспользовавшись заготовками и инструкциями с документации Angular Material, у меня получился такой код:
[html]
<!DOCTYPE html>
My Todo App
<!– Web Font with Material Icons –>
<!– Toolbar with title –>
–
<!– Sidebar with navigation –>
<!– all tasks –>
<!– todo –>
<!– done tasks –>
[/html]
Теперь перейдем к основной части нашего списка дел к javascript-логике и для этого откроем третий файл main.js. Здесь мы для начала инициализируем angular-приложение todoApp с модулем ngMaterial, создадим контроллер AppCtrl и инициализируем несколько массивов с объектами. В первый из них поместим три объекта для навигаций с двумя полями: название пункта меню и текстовое название иконки (список всех иконок Material Icons). Во втором массиве мы будем хранить наши задачи и для этого нам так же потребуется два поля: название задачи и статус (сделано или нет). В итоге у меня получилось так:
[js]
var app = angular.module(‘todoApp’, [‘ngMaterial’]);
{‘title’: ‘Create first app with Electron’, ‘done’: true}
];
$scope.setContent = function (content) {
$scope.options.show = content;
};
}]);
[/js]
Запустим наше приложением и посмотрим, как оно выглядит и что оно уже умеет.
electron app.js
На данный момент у нас отображаются все три пункта меню с иконками и две задачи, которые мы поместили в наш массив. Кроме того, мы можем переключаться между тремя созданными списками (все задачи, предстоящий и сделанные).
Теперь предлагаю перейти к созданию формы с помощью которой мы смогли бы добавлять новые задачи в наш список. Для этого я предлагаю добавить Fab-кнопкочку в левый нижний угол приложения, по нажатию на которую у нас бы открывалось popup-окошко с текстовым полем для ввода названия новой задачи.
Для этого добавим код Fab-кнопки в index.html:
[html]
add
[/html]
Вернемся к файлу main.js и первым делом пропишем две необходимые нам зависимости $mdDialog и $mdToast для всплывающих оповещений:
2015-08-05 18:03:09
Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб- ...
+ развернуть текстсохранённая копия
Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового […]
2015-08-05 18:03:09
Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб- ...
+ развернуть текстсохранённая копия
Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового приложения доступен на Github. Первым делом необходимо установить Electron: npm install electron-prebuilt -g Затем перейдем … Читать далее Создаем ToDo-приложение на основе Electron и AngularJs
Суток времени доброго! Это де Феррон. И второй выпуск подкаста «Кинопсис – Классика». Сегодня я говорю о картине под названием «Электрома» (Electroma), снятой в 2006 году. Создатели которой Томас Бангальте и Ги-Мануэль де Омем-Кристо. Больше известные миру, как электронный музыкальный дуэт Daft Punk. Это произведение не попадает ни под какую из привычных классификаций. Это уникальная [...]
+ развернуть текст 
