Статьи

Введение в WebOS 3.0 (Enyo)

Октябрь 31, 2018

Это руководство познакомит вас с основами разработки для платформы WebOS 3.0, демонстрируя, как создать простое приложение. Вы узнаете, как установить среду разработки, создать приложение в стиле «Hello-World» и запустить приложение для проверки своей работы.

Что такое WebOS 3.0?

WebOS — это новая операционная система HP для разработки приложений для сенсорной панели HP. Название WebOS довольно подходящее, поскольку приложения написаны на комбинации HTML, CSS и JavaScript. Да, если вы знакомы с этими вещами, вы действительно можете начать прямо сейчас!

Кодирование в Enyo очень просто и понятно и может значительно повысить эффективность процесса разработки. Хотя в настоящее время платформа не предназначена для каких-либо платформ за пределами сенсорной панели, она все еще является новаторским нововведением, которое стоит изучить. Итак, давайте запачкаем руки новейшей мобильной операционной системой HP: WebOS 3.0.

Настройка среды

Первое, что нужно сделать, — это получить свой комплект разработчика SDK для WebOS 3.0 с developer.palm.com . Обязательно зарегистрируйте учетную запись в качестве члена сообщества разработчиков.

Learn_WebOS

Загрузите последнюю версию SDK. Пройдите пошаговую процедуру установки SDK, размещенную на сайте Palm. Вы можете выполнить те же шаги, что и для установки WebOS 2.1 (Mojo) и внести изменения, если они необходимы.

В дополнение к SDK вам также потребуется установить любой браузер на основе веб-набора, например Google Chrome или Safari (используемый в этом руководстве), и текстовый редактор, например Notepad ++. Вы можете использовать любой текстовый редактор, который вам нравится, но этот урок будет использовать Notepad ++. Теперь у нас есть все инструменты, необходимые для разработки.

Настройка приложения

Перед написанием кода мы должны создать определенную структуру папок, которая особенно подходит для Enyo. Структура папок может быть создана либо вручную, либо из командной строки.

Если вы используете командную строку для создания папки вашего приложения, используйте сгенерированные ладонь команды из командной строки. В общем случае переменные пути будут автоматически установлены при установке SDK, в противном случае вам нужно будет вручную установить переменные пути ОС, если вы хотите, чтобы команды Palm работали.

Palm-генерировать myapp

Это создает папку с именем «myapp» . Папка « myapp » обычно содержит следующие файлы:

  • appinfo.json
  • depends.js
  • myapp.js
  • myapp.css
  • index.html
  • icon.png

Вы можете создать все эти файлы вручную с помощью любого текстового редактора, кроме одного: icon.png. Это значок вашего приложения и, очевидно, файл изображения.

1. appinfo.json

Файл appinfo.json содержит общие метаданные о приложении:

01
02
03
04
05
06
07
08
09
10
11
<pre name=”code” class=”js”>
{
    «id»: «com.yourname.myapp»,
    «version»: «1.0.0»,
    «vendor»: «yourname»,
    «type»: «web»,
    «main»: «index.html»,
    «title»: «myapp»,
    «icon»: «icon.png»
}
</pre>
  • id: это должен быть уникальный идентификатор вашего приложения.
  • версия: номер версии вашего приложения.
  • продавец: ваше имя или название компании, в которой вы работаете.
  • main: это HTML-файл, который сначала загружается при запуске приложения.
  • title: заголовок вашей заявки.
  • значок: изображение значка для вашего приложения.

2. зависит.js

Этот файл содержит пути для всех файлов * .js и * .css в приложении:

1
2
3
4
5
<pre name=”code”class=”js”>
enyo.depends(
    «myapp.js»,
    «myapp.css»,
);</pre>

3. index.html

В этом файле начинается выполнение нашей программы. Он содержит код, который очень похож на приведенный ниже листинг:

01
02
03
04
05
06
07
08
09
10
11
12
13
<pre name=”code”class=”js”><!doctype html>
&lt;html&gt;
    &lt;head&gt;
            &lt;title&gt;myapp&lt;/title&gt;
            &lt;script src=»../../../../framework/enyo.js» type=»text/javascript»&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;script type=»text/javascript»&gt;
            new myapp().renderInto(document.body);
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>

Давайте попробуем создать приложение, в котором пользователь напишет свое имя в поле ввода, а мы отобразим его во всплывающем окне. До сих пор мы ничего не писали в myapp.js. Скопируйте приведенный ниже текст в myapp.js и сохраните его:

1
2
3
4
5
6
<pre name=”code”class=”js”>
enyo.kind({
            name: «myapp»,
            kind:enyo.Control,
            content:»Hi This is my first WebOS application»
            });</pre>

Здесь мы создаем вид под названием «myapp». Вид может быть смесью элементов управления. Здесь мы просто отображаем текст: «Привет, это мое первое приложение WebOS» .

Для отображения этого текста мы использовали вид enyo.Control, компонент, который может принимать события пользовательского интерфейса и может содержать другие элементы управления.

В index.html мы написали один тег <script> внутри тега <body>, чтобы создать объект приложения myapp, написав «new myapp ()», который будет отображаться в теле документа.

Теперь у нас есть некоторые минимальные вещи, которые мы увидим как результат нашей программы. Давайте запустим это!

Запустите приложение

Есть два способа увидеть результат того, что мы сделали до этого момента.

  • С помощью веб-браузера (например, Chrome, Safari и т. Д.).
  • С помощью эмулятора Palm.

    • Браузер: для работы в браузере тег <script> должен указывать на расположение платформы Enyo. Мы должны изменить путь так, чтобы он ссылался на файл enyo.js, в который мы установили Enyo. Теперь откройте index.html в браузере. Если все работает нормально, вы увидите вывод, как на картинке ниже:

    WebOS

    Если вы не видите ничего, кроме обычного белого фона, у вас могут возникнуть проблемы с установкой пути к файлу enyo.js в вашем теге <script>. Если вы видите серый фон, на котором ничего не отображается, это, скорее всего, проблема с синтаксисом, поэтому обязательно пройдите описанные выше шаги, чтобы увидеть, пропустили ли вы что-нибудь!

35
Share: