Создание приложения для Android OS на платформе Titanium Appcelerator. Часть 1. Первое знакомство

запостил: tibezh

Для начала немного про платформу 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.createWindow. У объекта есть целый список свойств и методов. С имеющимся большим списком свойств мы можем объекту задать фоновый цвет (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.ScrollableView. ScrollableView являет собой так званый контейнер с полосой прокрутки. То есть в объект помещаются другие объекты, если же нам не хватает места на экране, мы можем подключить к ScrollableView полосу прокрутки. Создать объект можно с помощью метода 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. В самом же методе мы задаем параметр события. Самым распространенным событием являться конечно же Сlick. Событие запускается при одноразовом щелчке на элемент (в нашем случае кнопку), похожим событием так же является 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 и теоретически рассмотрели одни из самых распространенных объектов группы Titanium.UI.

Тэги:
android, mobile development, titanium appcelerator