Part I: Приклад Написання HelloWorld для WebOS

Опис: коротке ознайомлення з WebOS та створення програмки HelloWorld з лічильником натискань на кнопку.

Ціль: зрозуміти основні принципи написання програм для WebOS.

Підготовка Середовища Програмування

Слід інсталювати наступне:

Необхідно поставити plugin: Help меню —> Install New Software... підменю —> діалогове вікно Add Site —> у Location полі ввести URL: https://cdn.downloads.palm.com/sdkdownloads/1.1/eclipse-plugin/eclipse-3.4/site.xml —> OK —> у новому списку відмітити та інсталювати Palm Mojo SDK —> перезапустити Aptana Studio.

Створення Директорій Програми

File —> New —> Project... —> Mojo Application —> Project Name: «HelloWorld» —> Finish:

Запуск Palm Емулятора

  • Mac: Applications —> запустити Palm Emulator (у разі виникнення помилки «Novacom Not Running» необхідно спочатку запустити Novacom сервіс з командної стрічки, ввівши команду sudo /opt/nova/bin/novacomd а потім — перезапустити Palm Emulator)
  • Windows: Start —> All Programs —> Palm —> SDK —> Palm Emulator
  • Linux: в командній стрічці ввести palm-emulator

Запуск Програм в Palm Емуляторі

  • Palm емулятор запущено.
  • Aptana Studio —> Run меню —> Run As підменю —> Mojo Application —> потрібно вибрати Palm Emulator: «HelloWorld» програма повинна автоматично запуститись на Palm емуляторі:

Створення Сцени (Scene)

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

Команда palm-generate створює представлення та помічника для першої сцени і додає декілька стрічок до sources.json для співвідношення помічника та сцени.

Створення та Редагування Першої Сцени

  • Відкрийте командну стрічку та перейдіть в робочу папку (тобто в папку, рівнем вище за папку «HelloWorld»).
  • Введіть команду palm-generate наступним чином:
palm-generate -t new_scene -p "name:First" HelloWorld
  • Відкрийте first-scene.html та замініть вміст наступним:
<div id="main" class="palm-hasheader">
     <div class="palm-header">Header</div>
     <div id="count" class="palm-body-text">0</div>
     <div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>

Щоб реально показати сцену, потрібно сказати stage «виставити на перед (push)» сцену. Наступним кроком буде додавання цього коду до stage помічника.

Stage Помічник

Подібно до представлення stage також має помічника. В цій простенькій програмі єдиним завданням stage помічника є виставити сцену, роблячи її видимою. Stage помічник є stage-assistant.js файлом в директорії помічників, який містить дві функції:

  • StageAssistant() — конструктор.
  • setup() — викликається при запуску stage, виставляючи першу сцену.

Для Виставлення Сцени Програми

Відкрийте stage-assistant.js та змініть вміст StageAssistant функції на наступний:

function StageAssistant () {
}

StageAssistant.prototype.setup = function() {
  this.controller.pushScene("first");
}

Тепер програма містить stage та сцену. Щоб зробити програмку практичною, потрібно дописати деякий код для помічника сцени.

Написання Скрипту

Врешті-решт, настав час оживити програму, додавши код до помічника для першої сцени. Щоб зробити кнопку першої сцени функціональною, програмі потрібен обробник (handler) кнопки. Ця нова функція оновляє текст коженого разу, коли користувач натискає на кнопку.

Додавання функції опрацювання кнопки

  • Відкрийте first-assistant.js.
  • Додайте наступну функцію:
FirstAssistant.prototype.handleButtonPress = function(event){
     // increment the total and update the display
     this.total++;
     this.controller.get("count").update(this.total);
}

Після зареєстрування обробника (як обробника для події натискання кнопки), framework викликає обробника при кожному натисканні кнопки. Обробник повинен бути прив'язаним до помічника сцени таким чином, щоб коли framework викликатиме обробника, то щоб він маг доступитися до сцени та DOM. В іншому випадку, обробник буде за замовчуванням прив'язуватися до виклику об'єкту, що не є прийнятним. Цей приклад демонструє два етапи:

  • прив'язка обробника до контексту помічника сцени, використовуючи bind(this)
  • реєстрація обробника як слухача, використовуючи Mojo.Event.listen()

Прив'язка та Реєстрування Обробника

  • Відкрийте first-assistant.js.
  • Редагуйте setup функцію наступним чином:
FirstAssistant.prototype.setup = function() {
     // set the initial total and display it
     this.total = 0;
     this.controller.get("count").update(this.total);

     // a local object for button attributes
     this.buttonAttributes = {};

     // a local object for button model
     this.buttonModel = {
     "buttonLabel" : "TAP HERE",
     "buttonClass" : "",
     "disabled" : false
     };

     // set up the button
     this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);

     // bind the button to its handler
     Mojo.Event.listen(this.controller.get("MyButton"), Mojo.Event.tap, this.handleButtonPress.bind(this));
}

При запуску програмки, вона покаже скільки разів ви натиснули кнопку. У випадку, якщо не з'являється вікно (див. мал. нижче), тоді необхідно виправити помилки у зміненому коді. Поширені помилки включають орфографію та використання належних прописних літер де слід. Після налагодження, можливо доведеться видалити попередню версію програми, а потім упакувати / перевстановити оновлену версію перш ніж вона запуститься належним чином.

Оригінал статті можна почитати тут.

Коментарі 4

wtf - 10 вересня 2009, 09:57

mari, Ви рулите! Дякую за роботу!

mari - 10 вересня 2009, 13:12

thx! ;)

zenyk - 10 вересня 2009, 12:36

це той Palm Pre webOS про який я розповідав на фріленс зустрічі.

T-Rex - 11 вересня 2009, 20:43

По мотивам данной статьи записал скринкаст.

Коментувати
© 2009 - 2020, Розробка - соціальна ІТ спільнота.
Контакти: info@rozrobka.com
Правила користування