| Сегодня 19 апреля, пятница |
      |
  
|
  
Какой рейтинг вас больше интересует?
|
Создаем ToDo-приложение на основе Electron и AngularJs2015-08-05 21:03:09 (читать в оригинале)
Давно хотел познакомиться с 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}); // and load the index.html of the app. mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’); // Open the devtools. mainWindow.openDevTools(); // Emitted when the window is closed. mainWindow.on(‘closed’, function() { // 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> –
<!– Sidebar with navigation –>
<!– all tasks –>
[/html] Теперь перейдем к основной части нашего списка дел к javascript-логике и для этого откроем третий файл main.js. Здесь мы для начала инициализируем angular-приложение todoApp с модулем ngMaterial, создадим контроллер AppCtrl и инициализируем несколько массивов с объектами. В первый из них поместим три объекта для навигаций с двумя полями: название пункта меню и текстовое название иконки (список всех иконок Material Icons). Во втором массиве мы будем хранить наши задачи и для этого нам так же потребуется два поля: название задачи и статус (сделано или нет). В итоге у меня получилось так: [js] var app = angular.module(‘todoApp’, [‘ngMaterial’]); app.controller(‘AppCtrl’, [‘$scope’, function($scope){ $scope.options = { name: ‘My Todo List’, show: ‘All tasks’ }; $scope.navigationBarItems = [ {‘title’: ‘All tasks’, ‘icon’: ‘list’}, {‘title’: ‘Todo’, ‘icon’: ‘assignment’}, {‘title’: ‘Done’, ‘icon’: ‘done’} ]; $scope.myTasks = [ {‘title’: ‘Learn AngularJs’, ‘done’: false}, {‘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] [/html] Вернемся к файлу main.js и первым делом пропишем две необходимые нам зависимости $mdDialog и $mdToast для всплывающих оповещений: [js] app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast) {…} [/js] Теперь создадим новую функцию, которая будет открывать новый диалог по нажатию на fab-кнопку: [js] $scope.showAdd = function(ev) { $mdDialog.show({ controller: AddDialogCtrl, template: ‘ targetEvent: ev, }) .then(function(task) { $scope.addTask(task); $mdToast.showSimple(‘Task “’ + task + ‘” was added!’); }); }; [/js] Как видите, функция show от $mdDialog принимает html-шаблон с диалогом, а так же новый контроллер, который мы сейчас и создадим: [js] function AddDialogCtrl($scope, $mdDialog) { $scope.hide = function() { $mdDialog.hide(); }; $scope.cancel = function() { $mdDialog.cancel(); }; $scope.add = function(task) { $mdDialog.hide(task); }; }; [/js] И конечно же, не забываем добавить функцию addTask(), которая будет добавлять нашу новую задачу в общий массив на первую позицию: [js] $scope.addTask = function (task) { $scope.myTasks.unshift({ ‘title’: task, ‘done’: false }); }; [/js] 
В итоге, у меня main.js выглядит следующим образом: [js] var app = angular.module(‘todoApp’, [‘ngMaterial’]); app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast){ $scope.options = { name: ‘My Todo List’, show: ‘All tasks’ }; $scope.navigationBarItems = [ {‘title’: ‘All tasks’, ‘icon’: ‘list’}, {‘title’: ‘Todo’, ‘icon’: ‘assignment’}, {‘title’: ‘Done’, ‘icon’: ‘done’} ]; $scope.myTasks = [ {‘title’: ‘Learn AngularJs’, ‘done’: false}, {‘title’: ‘Create first app with Electron’, ‘done’: true} ]; $scope.setContent = function (content) { $scope.options.show = content; }; $scope.addTask = function (task) { $scope.myTasks.unshift({ ‘title’: task, ‘done’: false }); }; $scope.showAdd = function(ev) { $mdDialog.show({ controller: AddDialogCtrl, template: ‘ targetEvent: ev, }) .then(function(task) { $scope.addTask(task); $mdToast.showSimple(‘Task “’ + task + ‘” was added!’); }); }; }]); function AddDialogCtrl($scope, $mdDialog) { $scope.hide = function() { $mdDialog.hide(); }; $scope.cancel = function() { $mdDialog.cancel(); }; $scope.add = function(task) { $mdDialog.hide(task); }; }; [/js]
На этом пока что все, экспериментируй, расширяйте возможности
|
 
Категория «Субкультуры»
Взлеты Топ 5
Падения Топ 5
Популярные за сутки
|
Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.
взяты из открытых общедоступных источников и являются собственностью их авторов.