8. Electron.js – Основы. Electron API – Tray, powerMonitor

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

Tray

Для вывода иконки в трее операционной системы подключаем на странице main.js класс – Tray и Menu

Инициализируем переменную tray

Узнать больше

7. Electron.js – Основы. Electron API – Menu, Context Menu

Продолжим разбираться с функционалом Electron.js следующими классами, которые я рассмотрю в этой заметке будут Menu, MenuItem и Context Menu. Они служат для создания стандартного меню приложения и контекстного меню, которое открывается при нажатии правой кнопки мыши. Есть несколько вариантов создания меню у приложения, рассмотрим все по очереди.

Меню приложения

Первый вариант

Узнать больше

Gulp. Сборка проектов

За последние годы, процесс верстки сайтов очень сильно изменился, появилось огромное количество различных инструментов позволяющих не только автоматизировать работу, но и кардинально изменить сам подход к созданию сайтов. Думаю нет смысла описывать все достижения, произошедшие в этом направлении, в интернете можно найти огромное количество книг, видео-курсов и сайтов посвященных данной теме.

Уже несколько лет я в своей работе использую task runner – Gulp. Мне кажется это наилучший выбор, хотя это конечно дело вкуса :).

Каждый верстальщик немного по своему формирует конфигурацию Gulp в зависимости от набора инструментов, которыми он пользуется. Идеального или супер универсального варианта настройки наверное и нет. Представляю мои варианты настройки этого замечательного инструмента:

  1. 1. Frontend Builder (HTML) – вариант для стандартной работы с js, css, html (SASS, JSHint и т. д. ), в нем есть так же сборщики svg и png спрайтов, данный  вариант можно назвать классическим :);
  2. 2. Frontend Builder (PUG) – вариант похожий на предыдущий с одним отличием в нем используется шаблонизатор html файлов – Pug;
  3. 3. Frontend Builder (WordPress) – вариант для создания тем для сайтов на WordPress, представляет из себя набор стандартных файлов-заготовок.

6. Electron.js – Основы. Electron API – dialog

Продолжу исследование Electron API и следующей темой для изучения будут диалоговые окна. Electron позволяет задействовать для общения с пользователем системные диалоговые окна и их внешний вид зависит от того в какой операционной система установлено приложение. Приведу несколько вариантов диалоговых окно оформленных в виде функций и предназначенных для решения различных задач.

Пример диалогового окна для открытия файла –

5. Electron.js – Основы. Electron API – Session, Cookies и DownloadItem

В этой заметке разберем в фреймворке Electron.js основные принципы работы с сессиями, куками и загружаемыми файлами. Для начала рассмотрим работу с сессиями. Чтобы получить доступ к сессии окна достаточно обратится с свойству session.

В стандартной реализации, не зависимо сколько окон в приложении они имеют один общий объект Session {}.

Узнать больше

4. Electron.js – Основы. Electron API – BrowserWindow.

Продолжим изучение методов и параметров Electron API. В данной заметке рассмотрим BrowserWindow, а также рассмотрим применение полезного модуля  electron-window-state, который позволяет сохранять размеры и положение окна приложения после его  закрытия. Ниже приведены примеры настройки BrowserWindow и показана возможность создания нескольких окон у приложения.

Кроме размеров окна в BrowserWindow  можно задавать и другие параметры при инициализации приложения, для примера показаны наиболее популярные свойства.

Узнать больше