Создание приложения для Android OS на платформе Titanium Appcelerator

Одним из наиболее часто применяемых объектов является 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.