Як швидко створити десктопну програму на HTML, CSS і JavaScript

Чи можна використовувати HTML, CSS та JavaScript для створення десктопних програм?

У цій статті ми зосередимося в основному на тому, як Electron можна використовувати для створення десктопних програм з використанням веб-технологій.

Electron Скопіювати посилання

Electron може бути використаний для створення десктопних програм, також ці програми будуть мультиплатформенними - Windows, Mac, Linux та інші.

Electron об'єднує Chromium та Node.js в одне середовище виконання. Це дозволяє нам запускати код HTML, CSS та JavaScript у вигляді десктопної програми.

Electron Forge Скопіювати посилання

Якщо Electron використовується безпосередньо, перед збиранням програми буде потрібно певне ручне налаштування. Також, якщо ви хочете використовувати Angular, React, Vue або будь-який інший фреймворк або бібліотеку, вам буде потрібно ручне налаштування.

Electron Forge значно спрощує все перераховане вище.

Він надає шаблонні програми з Angular, React, Vue та іншими фреймворками, що дозволяє уникнути додаткових танців із бубном.

Також він забезпечує простоту складання та пакування програми. У ньому є безліч інших функцій, які можна знайти у документації.

Попередня підготовка Копіювати посилання

Переконайтеся, що у вас встановлено Node.js. Якщо ні, його можна завантажити звідси. Встановіть Electron Forge глобально, використовуючи наступну команду:

npm install -g electron-forge

Почнемо з програми Копіювати посилання

Використовуйте наступну команду для створення вашої програми:

electron-forge init simple-desktop-app-electronjs

Де simple-desktop-app-electronics - Це назва програми.

Потрібен деякий час, щоб команда, вказана вище, відпрацювала. Після завершення попереднього процесу запустіть програму за допомогою наступних команд:

cd simple-desktop-app-electronjs npm і npm start

Це має відкрити вікно як на скрині нижче:

Розберемося в структурі та коді Копіювати посилання

Програма має певну структуру папок. Тут я перелічу деякі важливі моменти у цій структурі папок.

package.json Копіювати посилання

Містить інформацію про програму, яку ви створюєте, всі залежності, необхідні для програми, та кілька скриптів. Деякі зі скриптів вже попередньо налаштовані, але ви також можете додавати нові.

Шлях config.forge містить усі конфігурації саме для Electron. Наприклад, make-target використовується для визначення цільових файлів для різних платформ, таких як Windows, Mac або Linux.

Також у package.json є "main": "src/index.js", який вказує, що src/index.js є вхідною точкою програми.

src/index.js Копіювати посилання

Відповідно до package.json , index.js є основним скриптом. Процес, який запускає основний скрипт, називається Основним процесом. Таким чином, основний процес запускає скрипт index.js.

Основний процес необхідний відображення елементів інтерфейсу. Це робиться шляхом створення сторінок. Кожна створена сторінка виконується в процесі, що називається процесом відмальовування.

Головний процес та процес відтворення Копіювати посилання

Основне призначення головного процесу - створення сторінок за допомогою екземпляра BrowserWindow. Екземпляр BrowserWindow використовує процес відтворення для запуску кожної сторінки.

Будь-яка програма може мати лише один головний процес, але багато процесів візуалізації.

Також можлива взаємодія між головним процесом та процесом відмальовування. Однак, я не зупинятимусь на цьому в поточній статті.

Архітектура Electron, що показує головний процес та процеси відтворення. Назви файлів можуть бути іншими.

abcd.html показаний як друга веб-сторінка в наведеній вище архітектурі. Але в нашому коді ми не матимемо другої веб-сторінки.

src/index.html Копіювати посилання

index.js завантажує файл index.html у новий екземпляр BrowserWindow.

Це означає, що index.js створює нове вікно GUI та завантажує його зі сторінкою index.html. Сторінка index.html запускається у своєму власному процесі малювання.

Код у index.js з поясненнями Копіювати посилання

Більшість коду, створеного в index.js, містить хороші коментарі, які пояснюють, що відбувається. Тут я згадаю кілька ключових моментів, які слід зазначити в index.js:

mainWindow = new BrowserWindow(< width: 800, height: 600, >); // і завантаж index.html з app. mainWindow.loadURL(`file://$/index.html`);

Наведений вище фрагмент коду просто створює екземпляр BrowserWindow і завантажує index.html BrowserWindow . Ви побачите, що app часто використовується в коді. Наприклад, візьміть наведений нижче фрагмент:

app.on('ready', createWindow);

app використовується для управління життєвим циклом подій програми. Наведений вище фрагмент коду говорить, що коли програма буде готова, потрібно завантажити перше вікно.

Так само app може використовуватися для виконання інших дій з різними подіями.Наприклад, його можна використовувати для деяких дій безпосередньо перед закриттям програми і так далі.

Створимо десктопну програму конвертера температур Скопіювати посилання

Давайте скористаємося тим же додатком, який ми створили раніше, і трохи змінимо його, щоб створити програму конвертера температури.

Спочатку давайте встановимо Bootstrap за допомогою наступної команди:

npm install bootstrap --save

Скопіюйте наступний код у src/index.html:

Конвертер температур
За Цельсієм:
За Фаренгейтом:

Наведений вище код виконує такі дії:

1. Створює поле для введення тексту з id="celcius" . Щоразу, коли в поле щось вводиться, викликається функція celciusToFahrenheit() .
2. Створює поле для введення тексту з id="fahrenheit" . Щоразу, коли в поле щось вводиться, викликається функція fahrenheitToCelcius() .
3. Коли в полі «За Цельсієм» вводиться значення, у полі «За Фаренгейтом» відображається та сама температура, але у Фаренгейтах.
4. Коли в полі «За Фаренгейтом» вводиться значення, у полі «За Цельсієм» відображається та сама температура, але в Цельсіях.

2 функції, які виконують перетворення температури, зберігатимуться в renderer.js .

Створіть файл з іменем renderer.js усередині src. Скопіюйте в нього наступний код:

function celciusToFahrenheit() < let celcius = document.getElementById('celcius').value; let fahrenheit = (celcius * 9/5) + 32; document.getElementById('fahrenheit').value = fahrenheit; >function fahrenheitToCelcius() < let fahrenheit = document.getElementById('fahrenheit').value; let celcius = (fahrenheit - 32) * 5/9; document.getElementById('celcius').value = celcius; >

Функція celciusToFahrenheit() зчитує значення в текстовому полі "За Цельсієм", перетворює його на градуси Фаренгейта і записує нову температуру в текстове поле "За Фаренгейтом".

Функція fahrenheitToCelcius() робить рівно навпаки.

Запускаємо програму Скопіювати посилання

Запустіть програму, використовуючи наступну команду:

Повинне відчинитися наступне вікно. Спробуйте ввести різні значення інпути.

Упаковуємо програму Скопіювати посилання

Команда для пакування програми:

Виконання цієї команди потребує певного часу. Як тільки виконання закінчиться, перевірте папку out у папці проекту.

Я перевірив це на машині з Windows. Була створена папка з ім'ям simple-desktop-app-Electronjs-win32-x64 усередині папки out .

Таким чином, у папці out/simple-desktop-app-Electronjs-win32-x64 команда створила файл .exe для цієї програми. Натискання на виконуваний файл автоматично запускає десктопну програму.

При створенні програми на macOS, папка всередині out називається simple-desktop-app-Electronjs-darwin-x64 і створюється файл .app, який працює так само - прим. перекладача.

Ім'я папки simple-desktop-app-electronicjs-win32-x64 може бути розділене на ім'я-платформа-архітектура , де:

• ім'я - simple-desktop-app-electronjs
• платформа - win32 (darwin на macOS - прим. перекладача)
• архітектура - x64

Коли ви запускаєте команду без будь-яких параметрів, вона пакетує пакети для платформи, на якій ви розробляєте.

Допустимо, ми хочемо пакет для іншої платформи та архітектури. Тоді ви можете використовувати наступний синтаксис:

npm run package -- --platform= arch=

Наприклад, щоб упакувати програму для Linux, ви можете використовувати наступну команду:

npm run package -- --platform=linux --arch=x64

Це створить папку з ім'ям simple-desktop-app-electronicjs-linux-x64 всередині папки out .

Створення файлу make Копіювати посилання

Щоб створити файл make або інсталятор для програми, використовуйте таку команду:

Потрібен деякий час на виконання цієї команди. Як тільки процес закінчиться, перевірте папку out у папці проекту.

У папці out/make буде створено інсталятор Windows для десктопної програми (або ZIP-архів на macOS – прим. перекладача).

Коли ви запускаєте цю команду без будь-яких параметрів, вона за замовчуванням створює інсталятор для платформи, яку ви використовуєте для розробки.

Код Скопіювати посилання

Код для цієї програми доступний у моєму репозиторії GitHub. форк репозиторію російською: solarrust/simple-desktop-app-electronjs - прим. перекладача.

Вітаю 😄 Скопіювати посилання

Тепер ви знаєте, як створювати десктопні програми з використанням HTML, CSS та JavaScript. У цій статті були розглянуті основні поняття про Electron та Electron Forge. Почитайте документацію, щоб дізнатися більше.

Про автора Скопіювати посилання

Я люблю технології та стежу за новинками. Мені також подобається допомагати іншим, ділячись своїми технологічними знаннями.

Не соромтеся зв'язатися зі мною через LinkedIn, ви також можете підписатися на мене у Twitter або зайти на мій сайт.

Програми HTML5: що, чому і як

Якщо ви хочете створювати веб-програми, ви можете подумати про використання HTML5. HTML5 - нова гаряча риса, коли справа доходить до розробки додатків, і він може змінити спосіб виробництва та продажу програмного забезпечення.Це також активує мільйони людей, які знають, як створювати веб-сторінки, і ніколи не думали, що їхні навички можуть бути використані для чогось іншого. Але перш ніж перейти до розробки, ви повинні дещо знати про HTML5. У цьому уроці я навчу вас основ!

Що таке HTML5?

Це почалося у WHATWG і є майбутнім золотим стандартом для HTML. Якщо ви тут були деякий час, ви знаєте, що XHTML 2 була наступною основною версією, але вона розвалилася. Причини можуть бути різними, але одне з основних тверджень полягало в тому, що лише деякі веб-сайти використовують ідеальний синтаксис і XHTML 2 збирався забезпечити ідеальний синтаксис. Також завжди було надзвичайно важко сказати, що таке досконалий синтаксис. Коли виробники браузерів зрозуміли, як важко буде перейти на XHTML 2, все просто звалилося.

У цей момент група людей відкололася від W3C та почала WHATWG. Ці хлопці хотіли переосмислити як HTML, а й увесь процес розробки стандартів. Вони розпочали роботу над новим стандартом HTML5. Вони виходили з принципу, що немає ідеального, і не їхнє завдання розповісти світу, як робити HTML. Натомість вони сфокусувалися на тому, що відбувається в реальному світі HTML.

Вони також знайшли час, щоб кодифікувати деякі угоди, які виникли у спільноті. Ось звідки з'явилося багато нових елементів у специфікації HTML5 (наприклад, індикатор виконання, відео та аудіо теги). Люди роблять належне і вони просто хотіли зробити певні частини розмітки, щоб допомогти людям робити те, що вони вже робили.

Крім розмітки, WHATWG почала створювати кілька нових API-інтерфейсів JavaScript. Саме тут HTML5 почав виглядати як додаток.Вони створили стандарти для автономного зберігання даних і автономного кешу додатків, щоб ці програми могли зберігатися в автономному режимі. Вони також створили нові робочі групи навколо віджетів та доступу до пристроїв (для використання таких пристроїв, як камери та акселерометри).

Цікава примітка до всього процесу стандартизації полягає в наступному: деякий час відмінності в механізмах рендерингу були настільки великі, що одним із підходів крос-браузерної сумісності було з'ясувати, в якому браузері був користувач і надати на його основі різні можливості.

WHATWG та інші завжди думали, що перехоплення браузера не було гарною ідеєю. Що зазвичай рекомендують зараз, так це прогресивне покращення. Коротше кажучи, прогресивне покращення це. Замість того, щоб просто вирішити, що один браузер отримає досвід Y, а інший досвід Z, чому б не виявити підтримку розширених функцій і створити відмінний досвід? Якщо браузер не підтримує розширену функцію X, користувач просто отримає досвід за замовчуванням.

Останній пронумерований спек

Це призводить до іншого пункту про специфікацію HTML5: це, мабуть, буде остання пронумерована специфікація . У майбутньому, замість того, щоб оновлювати версії HTML, такі як HTML6, W3C просто підтримуватиме останню версію HTML, і буде специфікація золотих стандартів. Веб-розробники можуть використовувати прогресивне вдосконалення для обробки фрагментації, очікуючи, поки постачальники браузерів не наздоженуть специфікацію.

То що таке додатки HTML5?

Що таке HTML5 із визначенням HTML5?

По суті, додаток HTML5 використовує все нові блискучі елементи чернетки HTML5 для створення програми, схожої на програму.

Це означає, що дані повинні зберігатися в автономному режимі, бути функціональними та працювати як справжня програма, а не просто як контент для прочитання. Ви, напевно, зараз використовуєте веб-програми, такі як Gmail. Gmail має версію HTML5; Якщо ви відвідуєте Gmail на iPhone або iPad, ви можете перевірити це.

Чому я повинен використовувати HTML5?

Чому я хотів би використовувати HTML5 замість Objective-C, Flash, Silverlight або будь-якого іншого середовища, специфічного для пристрою? По-перше, є кілька причин не використовувати HTML5.

1. Якби я робив останню найкращу 3D-гру, я б не використовував HTML5. Він не має багатих графічних бібліотек, необхідні створення таких інтенсивних ігор; проте вони працюють над стандартами, що дозволяють завантажувати 3D-програми в браузер.
2. Якщо вам потрібно використовувати камеру на пристроях або локальній файловій системі, HTML5 не буде кращим вибором. Існують обхідні шляхи, які використовують вбудовану оболонку, про яку я розповім найближчим часом, а також з'являться деякі стандарти, які допоможуть із цим.

Незважаючи на те, що існують конкретні випадки невикористання HTML5, багато програм, що випускаються сьогодні для iOS і Android, можуть працювати так само легко в HTML5. Крім технічної можливості зробити це, є й інші вагомі причини використовувати HTML5.

Ви вже знаєте, як його використовувати

Прямо зараз, якщо ви веб-розробник, у вас є всі інструменти, необхідні для цього. Розробка програм на HTML5 лише трохи змінює те, як ви думаєте про веб-сторінки.У деяких випадках ви можете просто додати кілька рядків у ваш HTML і додати деякі речі на свій сервер, і у вас буде повноцінний працюючий автономний додаток HTML5.

Чим більше ми працюємо зі стандартами, тим кориснішими вони стають.

Крім того, веб-розробники вже розуміють крос-браузерні проблеми. Хоча крос-браузерних проблем буде більше, ніж будь-коли, веб-розробники мають явну перевагу перед іншими розробниками, тому що вони вже мають це в своїй кишені. Інша частина крос-браузерної розробки – це стандарти. Чим більше ми працюємо зі стандартами, тим кориснішими вони стають. У певному відношенні веб-розробники очолили це завдання, і тепер воно окупається. Замість того, щоб вивчати зовсім інше доповнення, що не відповідає стандартам, ви можете просто покластися на те, над чим працювали органи зі стандартизації.

Нарешті, коли доходить до написання коду, може бути важко зрозуміти, що ви також робите щось політичне.

Коли ви дивитеся на те, як виробник мобільних телефонів справляється із собою, і як він вирішує заблокувати своїх розробників, вибираючи роботу поза цією системою, ви підтримуєте поняття свободи.

Це невелике поняття, але воно має значення, тому що в довгостроковій перспективі ми хочемо, щоб розробники наших мобільних телефонів були відкритими, і дозволяли нам зламувати їх стільки, скільки ми хочемо.

Як я можу використовувати HTML5?

Насправді використання HTML5 не таке складне. Він може змінюватись від кількох рядків коду до написання абсолютно нової програми. Ось кілька способів розпочати.

1. Створіть мобільний дружній сайт

Багато веб-сайтів знаходяться всього за кілька кроків від зручнішого мобільного досвіду. Перше, що потрібно зробити, це глянути на вікно перегляду.

Метатег viewport ще не є стандартом, але це поширена угода. Багато мобільних браузерів використовують цей тег для налаштування певних аспектів рендерингу веб-сторінок.

Більш детальну інформацію про видовий екран перевірте наступну документацію:

Крім області перегляду, переконайтеся, що ваші веб-сторінки є гнучкими; наприклад, використовуйте динамічну ширину замість статичної ширини. Мобільні пристрої мають усі форми та розміри, як вікна браузера. Проектування з ідеєю гнучкості автоматично зробить ваші веб-сторінки мобільнішими.

Доктип

Відмінна невелика новина про наступну версію HTML5 полягає в наступному: doctype пішов шляхом додо. Це все ще має бути там, з багатьох причин, але воно скривилося, щоб означати майже нічого.

Це круто. Нам більше не потрібно копіювати та вставляти довгий рядок тексту, бо хто взагалі може це запам'ятати?

2. Переведіть ваш сайт в автономний режим

Деякі браузери тепер реалізують кеш програми. Кеш програми дозволяє заздалегідь повідомити браузеру, які ресурси знадобляться веб-сторінці в автономному режимі. Браузер завантажить ці файли для автономного використання. Коли клієнт переходить у автономний режим, браузер посилається ці кешовані ресурси.

Однак, кеш програми не може бути змінений тільки шляхом зміни розмітки. Вам знадобиться міняти заголовки типу контенту на сервері. Щоб зробити це в Apache, ви можете помістити це у файл конфігурації або файл .htaccess.

Як тільки ви це зробите, ви можете додати наступну розмітку у ваш html елемент на вашій веб-сторінці. Ви можете назвати свій маніфест як завгодно, але переконайтеся, що він знаходиться в корені вашого сайту, і він закінчується на .manifest.

Потім можна створити свій файл маніфесту. Просто перерахуйте всі частини, які вам знадобляться, поки ви не в мережі. Ви не можете розміщувати міждоменні файли тут, і ви не захочете перераховувати щось, що часто змінюється. Ось приклад файлу маніфесту.

Десктопні програми на JavaScript. Частина 1

Ні для кого не секрет, що в наш час JavaScript став однією з найпопулярніших мов програмування. У далекі 90-ті роки, в момент зародження мови, коли він був створений з єдиною метою додати інтерактивність веб сторінкам і покращити процес взаємодії з користувачем, хто б міг подумати, що він досягне настільки небувалих висот. Адже зараз на ньому можна робити практично все, що завгодно. Хочете написати сайт: і бекенд і фронтенд на JavaScript? будь ласка! Бажаєте написати мобільний додаток на JavaScript? немає проблем. Програмуєте мікроконтролер – і тут вам допоможе прийде JavaScript.

Є звичайно невеликі мінуси в підході використання JavaScript скрізь, але якщо подумати, то скільки часу і сил можна заощадити, вивчивши лише одну мову, особливо, якщо той же додаток повинен працювати на різних платформах. На різних платформах кажете? Хм… Точно – різних платформах – тепер JS може дозволити собі десктопні програми для Windows, Linux, Mac, як запитаєте ви? Відповідь проста: зустрічайте - NW.js.

За першими буквами можна прочитати Node.js + WebkitЯкщо дані поняття вам поки не знайомі, то скоро ви зрозумієте про що йдеться.

Node.js - Програмна платформа, заснована на двигуні V8, який транслює наш скрипт в машинний код. Ця платформа була створена в 2009 році переважно для роботи з бекендом сайтів.

WebKit - Вільний двигун, розроблений компанією Apple. Вперше був анонсований у складі Safari у 2003 році
Отже, код, написаний на JS для даної технології, буде доступний як Node.js модулі, так і стандартний браузерний API (відповідно WebKit)

Швидкий старт

Все це, звичайно, добре, але з чого ж почати? На github можна знайти та завантажити репозиторій з вихідним кодом. Також тут можна знайти прямі посилання для скачування під ту платформу, на якій вестиметься розробка. До того ж нам знадобиться встановлена ​​node.js.

Після того, як необхідне програмне забезпечення завантажено і встановлено, ви написали свою програму на улюбленому JS (як це зробити читайте далі) і локалізували все в одну папку. Півсправи зроблено, тепер залишається найскладніше і найдовше - запакувати все в один файл і підготувати для розповсюдження. Для спрощення можна скористатися готовими бібліотеками, наприклад nw-builder. Установка бібліотеки не складе труднощів, якщо ви вже працювали з node.js. Як відомо, до складу node.js входить менеджер пакетів npmз яким потрібно працювати з командного рядка. Для того щоб поставити якусь бібліотеку, необхідно виконати команду:

> npm install [ім'я_бібліотеки] [опції]

Зверніть увагу, що бібліотеку можна ставити як локально, так і глобально, для локальної установки використовуйте опцію --save-dev, для глобальної -g. У такий спосіб поставимо наш збирач для NW.js глобально, виконавши команду:

> npm install nw-builder -g

Для того, щоб зібрати наш додаток, необхідно виконати команду (з великою кількістю опцій можна ознайомитись у документації):

> nwbuild -p [ім'я_платформи] -o [шлях_до_папці_для_збірної_версії] [шлях_до_додатку]

Як ім'я платформи можуть бути такі значення: win32, win64, osx32, osx64, linux32, linux64.

Під час розробки немає потреби щоразу збирати програму, можна просто запустити її як є і вона відкриється в окремому вікні. Для цього потрібно запустити nw.exe з командного рядка і передати в якості параметрів шлях до папки з вашим додатком. Крім того, якщо ви працюєте під Windows, можна просто методом drag-n-drop перетягнути папку з вихідним кодом програми на JS (зверніть увагу, що саме папку повністю) в nw.exe.

Hello, world!

Тепер, коли ви знаєте, як запустити програму, як зібрати його в один файл, давайте напишемо щось. За традицією, знайомство з новою платформою починається з написання програми Hello, world.

Для цієї програми нам навіть не знадобиться JavaScript, тільки HTML. Створимо папку з назвою HelloWorld. Помістимо всередину файл index.html з наступною розміткою:

Hello, world, від NW.js

Крім того, для кожної програми під NW.js необхідний файл, який обов'язково повинен називатися package.json. З нього братиметься інформація для побудови програми. Створимо найпростіший варіант файлу та помістимо у папку HelloWorld. Отже:

Вміст файлу зрозумілий без пояснень (зверніть увагу, що обов'язкові поля тільки main та name). У main необхідно записати файл з розміткою, який буде точкою входу до програми. Секція window налаштовує параметри вікна (в даному випадку ми відключаємо панель інструментів та задає розміри вікна 500x200).

Крім того, можна налаштувати такі поля як (за повним списком опцій звертайтесь до документації):

• icon – вказуємо шлях до іконки (перевизначити стандартну)
• position – можна вказати позицію вікна під час завантаження (null, center або mouse)
• min_width, min_height, max_width, max_height – обмеження розмірів вікна
• resizable – логічне значення, яке показує, чи можна користувачеві змінювати розміри вікна
• fullscreen – увімкнути повноекранний режим
• kiosk – увімкнути режим кіоску
• transparent – зробити вікно прозорим

Додаток написано, але в ньому лише один div елемент і зовсім немає логіки, а що робити, якщо у нас багата на елементи розмітка та складна логіка? На допомогу нам приходить елемент конфігураційного файлу toolbar, який ми встановили у false. Для того щоб зробити доступними засоби налагодження, необхідно встановити toolbar у true. Зробивши це при запуску програми ми отримаємо наступне вікно:

Після натискання кнопки у верхньому правому куті відкриється ще одне вікно, в якому будуть відображені знайомі інструменти розробника:

Робота з нативними контролами

NW.js дозволяє працювати із нативними контролами. Розглянемо роботу на прикладі меню. Для роботи з нативним UI контролем у nw.js необхідно використовувати модуль nw.gui, який можна підключити так:

var gui = require('nw.gui');

Загальний шаблон для використання контролю:

var element=new gui.ElementName(option);

Таким чином, для створення елементів меню можна скористатися наступною конструкцією:

var menu = new gui.Menu();

Крім того, будь-які властивості створеного нами об'єкта можна легко змінити стандартними конструкціями JS, наприклад так:

menu.title = 'New Title';

Меню створено, тепер його потрібно заповнити, для маніпуляції дочірніми елементами існують методи:

menu.append(new gui.MenuItem()); menu.removeAt(0);

Крім того, для більш гнучкого додавання елементів у menu можна скористатися методом insert, у параметрах якого необхідно передати MenuItem та номер позиції, куди його вставити (позиція перед першим елементом відповідає 0).

Для доступу до створених елементів можна використовувати властивість items:

menu.items[0].title = "New title"

Зверніть увагу, що не можна створювати елементи безпосередньо:

menu.items[2] = new gui.MenuItem(); // НЕПРАВИЛЬНО

Найголовніше при роботі з нативними контролами, це пам'ятати, що будь-яка помилка при роботі з ними може призвести до краху всієї програмиТому необхідно бути вкрай уважними і по можливості при видаленні елементів, а також надавати змінної значення null. Таким чином для видалення контролю, можна виконати таке:

control.remove(); control = null;

Для зручнішої роботи з контролами, вони успадковані від EventEmitter, тому хороша новина в тому, що ми можемо легко працювати з подіями, наприклад:

menuitem.on('click', function() < // зробити щось корисне >);

Меню було створено, але якщо запустити програму, то жодного меню ви не побачите. Для відображення меню існує метод popup, у параметрах якого потрібно передати координати для відображення меню.

Для демонстрації основних можливостей меню додайте наступний скрипт до створеного раніше проекту Hello, world:

var gui = require('nw.gui'); var menu1 = new gui.Menu(); menu1.append(new gui.MenuItem()); var subMenu1 = new gui.Menu(); subMenu1.append(new gui.MenuItem()); menu1.append(new gui.MenuItem(< label: "Submenu", submenu: subMenu1 >)); document.body.addEventListener('contextmenu', function(ev) < ev.preventDefault(); menu1.popup(ev.x, ev.y); return false; >);

Після запуску програми ми можемо побачити створене контекстне меню для body.Таким чином, ми можемо визначити контекстне меню будь-якого елемента.

Отже, тепер кросплатформні програми може створювати кожен, але за все потрібно платити. В даному випадку ми жертвуємо як швидкістю, так і об'ємом пам'яті, що займається (зібраний додаток виходить досить великим, більше 50 Мб). Список додатків, створених, використовуючи цю технологію, можна знайти на github.

У другій частині статті ми розглянемо технологію докладніше.