Категорії

Створення додатку для Android OS на платформі Titanium Appcelerator

18.07.2011
Автор:

Спершу про платформу Titanium Appcelerator.

На платформі Titanium Appcelerator можна писати додаток як для настільних компютерів, так і для мобільних телефонів. Відповідно, розробку додатку - для зручності - можна поділити на 2 великі групи:Titanium DesktopіTitanium Mobile.

Titanium Mobile на сьогоднішній день є можливість створювати додаток під телефони з OS Android, Blackberry, IPhone. Погодьтесь, вибір OS під які з'являється можливість писати додатки, вражає. У статті піде мова про написання додатку під OS Android.

Для того, щоб написати програму під Android Вам знадобляться знанняJavaScript. Вся програма складається з об'єктів, які в неї поміщені, при тому що кожен об'єкт має свої особливості і свої методи. Чимала кількість об'єктів програми дає нам змогу використовувати практично всі можливості OS.

Платформа Titanium Appcelerator допомагає пришвидшити розробку додатку під Android, адже написання додатку на Java - процес помітно довший, аніж написання програми на Titanium за допомогою JavaScript. Водночас, написані саме на Java програми працюють швидше. Ось тут і постає одвічна дилема вибору мови програмування: що краще - шводкодія чи затрати часу на написання?

Для написання простого додатку достатньо знати кілька об'єктів розділу Titanium.UI. Найпоширенішими об'єктами є наступні:

  • Titanium.UI.Button(вивід кнопки)
  • Titanium.UI.ImageView(вивід зображення з файлу)
  • Titanium.UI.Label(вивід тексту)
  • Titanium.UI.ScrollableView(вигляд з смугою прокрутки)
  • Titanium.UI.View(звичайний вигляд, контейнер)
  • Titanium.UI.Window(вікно)

Розглянемо об'єкти детальніше.

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

Серед найважливіших об'єктів - Titanium.UI.Window. Створення об'єкту відбувається за допомогою методу Titanium.UI.create Window. Він нараховує чималий перелік властивостей та методів. Послуговуючись таким списком його властивостей ми можемо виконувати із об'єктом певні дії: задавати фоновий колір (backgroundColor), прописувати заголовок (title), розмістити його там, де потрібно (left, right, top, bottom) і т.д. Не варто забувати й про методи, а це open (відкрити вікно), add (добавити в об'єкт), і ще кілька.

var window = Titanium.UI.createWindow({ // створюємо об'єкт Window
   backgroundColor:'red', // вікно в нас буде червоного кольору.
   title: 'My Root Window' // заголовок вікна буде  'My Root Window'
});
window.open(); // і обов'язково відкриваємо вікно, так як без застосування методу 'open' в нас програма нічого не виведе

У прикладі демонструється вивід інших об'єктів за допомогою методу Titanium.UI.createScrollView. Присутні тут також визначені об'єкти та методи.

У прикладі вказний вивід інших об'єктів за допомогою ScrollableView.

var view1 = Titanium.UI.createView({backgroundColor:'red'}); // створюємо об'єкти View з 
var view2 = Titanium.UI.createView({backgroundColor:'green'}); // відповідним фоновим 
var view3 = Titanium.UI.createView({backgroundColor:'yellow'}); // кольором
var scrollView = Titanium.UI.createScrollableView({ // створюємо об'єкт ScrollableView
    views:[view1,view2,view3], // вказуємо зміст ScrollableView
    showPagingControl:true // також вказуємо, щоб смуга прокрутки була видна
});
/*
Вміст ScrollableView ми вказали при створенні об'єкту.
Але крім цього додавати інші об'єкти в ScrollableView можна за допомогою методу add.
В нашому випадку замість вказування вмісту в об'єкті, ми можемо написати так:
scrollView.add(view1);
scrollView.add(view2);
scrollView.add(view3);
що буде теж правильно.
*/
window.add(scrollView); // додаємо об'єкт  ScrollableView в наше вікно
window.open(); // відкриваємо вікно

Застосування елементу Titanium.UI.View характерне для ситуації, коли потрібно розмістити об'єкти в програмі. Простіше кажучи, елемент View надає нам так званий контейнер, або те, що має побідність до div тегу. В контейнері ми можемо редагувати вигляд усіх інших елементів, які в нього поміщені. Серед найбільш затребуваних властивостей View є властивості положення та розмірів, також не варто забувати про властивості меж View, або ж його фонового кольору.

В наступному прикладі написано створення обєкту View:

var view = Titanium.UI.createView({ // створюємо об'єкт View
   borderRadius:10, // радіус кутів 10 px. (округлення кутів)
   borderColor:'blue', // колір межі синій
   borderWidth: 5, // товщина межі 5 px.
   backgroundColor:'red', //  колір самого об'єкту червоний
   width:50, // ширина 50 px.
   height:50 // висота 50 px.
});
window.add(view); // додаємо в вікно
window.open(); // відкриваємо вікно

Наступним необхідним елементом є Titanium.UI.Button, або просто - кнопка. Особливість елемента в тому, що він необхідний для виконання дій в програмі. Використовуючи елемент Button, Ви завжди матимете справу з подіями. Події обєкту (а також всі інші) задаються за допомогою методу addEventListener; в самому ж методі ми задаємо параметр події. Найпоширенішою подією є звичайно ж Click. Подія запускається при одноразовому натисканні на елемент (в нашому випадку кнопку), схожою подією є dblclick (при подвійному натисканні).

Зверніть увагу на реалізацію об'єкту Button із реалізацією методу addEventListener.

var button = Titanium.UI.createButton({ // створюємо обєкт Button
   title: 'Hello' // напис на кнопці буде 'Hello'
});
button.addEventListener('click',function(e) // створюємо подію, яка буде спрацьовувати при кліці ('click')
{
   Titanium.API.info("You clicked the button"); // при кліці в нас буде виведене стандартне інформаційне вікно з відповідним написом

Titanium.UI.ImageView - елемент для виводу зображення. Саме зображення можна задати у властивості image. У властивостях можна задати url зображення або ж повний шлях від файла, де написана програма. Також,створюючи елемент, бажано вказувати його точні розміри.

Аби створити об'єкт ImageView достатньо написати такий скрипт:

 var image = Titanium.UI.createImageView({ // створюємо об'єкт ImageView,
    image:'myimage.png',  // де буде відобраатись зображення з файлу myimage.png
    width:'auto',
    height:'auto' // ширина і висота зображення буде підібрана автоматично
/*
також, якщо ми хочемо вказати зображення з інтернету, нам достатньо замість властивості  image вказати у властивості url адресу зображення. 
Ось як це виглядатиме:
   url: 'http://a2.twimg.com/a/1310750171/phoenix/img/twitter_logo_right.png'
 
*/
});
view.add(image); // додаємо зображення в об'єкт view

Чи може програма обійтись без найпростішого елементу, такого як Titanium.UI.Label? Цей елемент призначений для виводу тексту. Серед його властивостей - розмір шрифта, стиль тексту та його колір. При цьому не варто забувати, що для телефонів із OS Android можна писати html текст. Використання html відкриває для нас набагато більші властивості для відображення тексту.

Висновок

В статті ми познайомились із особливостями платформи Titanium Appcelerator, дізнались про її можливості, про особливості програмування в Titanium Mobile, i теоретично розглянули один Із найбільш поширених обєктів групи Titanium.UI.

Голосів: 1 Рейтинг: 5

Також по темі

1

В попередній статті розповідалось про створення інсталяційних профілів для Drupal 6. В даній статті буде розказано про...

2

В Drupal 7 API є цілий розділ, присвячений темізації сайту. Всі елементи сайту без виключення повинні пройти процес темізації. 

3

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

4

Однією з вагомих переваг Drupal 7 щодо його попередників є його гнучкість до налаштувань і систем. Розробники не обійшли стороною і запити до БД. В цьому релізі вони стали об'єктивно-орієнтованими...

5

В кінці квітня цього року в своєму офіціальному блозі представники Google Analytics оголосили про запуск бета-тестування ноаого інтерфейсу.

А в цій статті я хочу розповісти про використання...

Давайте обговоримо ваш проект у всіх деталях

Шукаєте хороших Drupal-розробників? А ми тут! Яким би ви хотіли бачити проект своєї мрії? Зв’яжіться з нами і розкажіть про це. Із задоволенням втілимо вашу мрію в життя!

Приєднуйтесь до людей, які вже підписалися!

Хочете бути в курсі важливих і цікавих речей, що відбуваються? Ми інформуватимемо Вас про розвиток та нові події в Drupal, дизайні, тестуванні та ін.

Відпишіться у будь-який час