CC BY
16УДК 004.4
ВОЗМОЖНОСТИ СРЕДЫ ECLIPSE ДЛЯ РАЗРАБОТКИ ИНТЕРФЕЙСОВ
МОБИЛЬНЫХ ПРИЛОЖЕНИЙ
Д.З. Цхошвили, Н.А. Иванова
Брянский государственный университет имени академика И.Г. Петровского
В работе рассматриваются основные возможности среды Eclipse для разработки интерфейсов мобильных приложений, а также описывается процесс разработки простого мобильного календаря на основе визуального компонента GridView.
Ключевые слова: Eclipse, Pallete, GridView, мобильные приложения, среда разработки, адаптер, обработчик событий.
Одной из самых популярных бесплатных сред разработки модульных кроссплатформенных приложений является Eclipse, базовым языком которой является Java. Платформа Eclipse предоставляет разработчикам широкие возможности: редактор с подсветкой синтаксиса, инкрементальную компиляцию кода, потокобезопасный отладчик, навигатор по классам, менеджеры файлов и проектов, а также интерфейсы к стандартным системам контроля исходных текстов. Достоинствами Eclipse по сравнению с другими средами разработки являются удобный и понятный интерфейс, кроссплатформенность, возможность установки дополнений, а также настройки среды.
Создание проекта в Eclipse реализуется с помощью команды File/New. В подпункте Other отображаются все типы проектов, которые поддерживает среда. Например, Web-проекты, проекты на языках C, C++, Java-проекты. Для создания мобильных приложений используются Java-проекты.
Для формирования интерфейса мобильных приложений в Eclipse имеется вкладка Palette, на которой представлены все необходимые элементы управления. Palette делится на блоки: Form Vidgets, Text Field, Layouts, Composite, Images & Media, Time & Date, Transitions, Advanced, Other [2].
Компонет GridView располагается в разделе Composite палитры компонентов и представляет собой двумерную таблицу. На основе такой таблицы довольно легко реализовать календарь с возможностью вывода информации об определенных событиях по нажатию на элемент таблицы.
В статье «Разработка приложения мобильный cinema-календарь для учета просмотренных фильмов и сериалов» описана разработка мобильного приложения, в котором для реализации календаря использовался именно компонент GridView [1]. В данной статье будут рассмотрены возможности использования визуального элемента управления GridView для формирования интерфейса простейшего календаря на его основе.
В первую очередь необходимо создать новый проект File/New/Project, задать имя и версию Android, остальные пункты оставить по умолчанию.
Далее необходимо добавить на форму activity_main два компонента TextView и компонент GridView (рис. 1). Первое текстовое поле отводится для заголовка, второе - для вывода информации по нажатию на элементы GridView.
На следующем шаге требуется определить значения свойств размещенных компонентов: для текстовых окон прописать значения, которые они отображают (для TextView1 - «Январь 2017», для TextView2 - «»), для GridView изменить стандартное значение столбцов (в нашем случае компонент будет содержать 7 столбцов). Вся информация сохраняется в файле activity_main.xml (рис.2).
Рис. 1. Конструктор формы
|d; *activity_main.xml 1=1 Q
1- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android A xmlns:tools="http://schemas.android.com/tools" android:layout_width="roatch_parent" android:layout_height="match_parent"
android: paddingBcttw"@dimen/activity_verticaL_margin" android:paddingteft="§dimen/activity_horizontaL_margin" android: paddingRigkt="l&dimen/activity_horizontaL_margin" android: paddingTop= "iadimen/activity_verticai_margin" tools:context^"com.example.calendar.MainActivity" >
2
3
4
5
6
7
8 9
10 11 12
13
14
15
16 17
£18
19
20 21 22
23
24
25
26
27
28
29
30
31
32
33 &34
Sbs
36
37
<TextView
android:id="@+id/textViewl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android: layout_ir.arginTop="30dp" ¿ndroichtext^^MfloD^/ >
<6ridView
android:id="§+id/gridvie»l" android:layout_width="match_parent" android:layout_height="wrop_content" android: layout_below= "¡a-tid/textViewl" android:layout_centerHorizontal="true" android: numColmiins = "7" >
<TextView
android: id="(frf id/textVie»2" android : layout_width- "urop_content" android:layout_height="wrop_content" android: layout_alignBottom="|ipf id/gridviewl" android: layout _alignRight="®+id/textl/iewl" android:text="" />
</RelativeLavout> <
Рис.2. Редактирование свойств компонентов
Для редактирования свойств элементов таблицы нужно создать файл item.xml в папке layout (File/New/Other/Android XML File) и добавить на форму текстовое поле, в котором будет отображаться содержимое элементов таблицы (листинг 1).
Листинг 1
<?xml version="1.0" encoding="utf-8"?> <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout width="match parent" android:layout height="match parent" android:background="@drawable/rect" android:orientation="vertical"> <TextView android:id="@+id/tvText" android:layout width="wrap content" android:layout height="wrap content" android:gravity="center vertical" android:minHeight="4 0dp" android:textSize="2 0sp" android:text=""> </TextView> </LinearLayout>
На этом редактирование интерфейса окончено и можно перейти к добавлению функционала. Для этого потребуется внести изменения в файл MainActivity.java, расположенный в папке src проекта.
В коде реализуем наполнение таблицы через адаптер. Адаптер - шаблон проектирования, который используется для преобразования интерфейса таким образом, чтобы он мог работать с другим, несовместимым, интерфейсом [3]. В данном случае адаптер используется для заполнения значений таблицы из кода. Нужно определить переменные, в том числе и массив значений элементов таблицы, создать адаптер, заполнить необходимые параметры и назначить его элементу GridView.
Далее нужно реализовать обработку событий для элементов таблицы, чтобы по нажатию на определенный элемент, в текстовом поле отображалась информация о нем (листинг 2).
Листинг 2
gvMain.setOnItemClickListener(new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { //созданиеобработчиканажатияпоэлементамтаблицы if (position==13){
textView2.setText("1 января 2017: \n 4х01 Шерлок \n 4x11 Бруклин 9-9");
}
else if (position==17){
textView2.setText("5 января 2017: \n 10х12 Теориябольшоговзрыва ");
}// определение вывода сообщений по нажатию наопределенный
элемент
}
});
} }
Таким образом, простое приложение с календарем разработано, и можно проверить его работоспособность на эмуляторе (рис.3).
При запуске приложения на экран выводится заголовок и календарь. При желании пользователь может нажать на определенный день в календаре и увидеть пояснительную информацию (например, какие фильмы или сериалы выходят в этот день).
Рис.3. Запуск проекта на эмуляторе
Аналогичным образом разрабатывалось и приложение «Мобильный стета-календарь для учета просмотренных фильмов и сериалов» [1], в котором внешний вид календаря был доработан, добавлены маркеры для элементов. Также были добавлены кнопки для перехода к следующему и предыдущему месяцу (рис. 4).
% Ф «Ii 68% 1 19:27
Е^Моб
ильным календарь
ильныи календарь
Мобильный ь
Июнь 2016
Июль 2016
Август 2016
30 3, ,
'3
се вс 4 .
16
16 17 1
s ig
■ ^ 23 2, » 25 2S
I h i « 3
21 июня 2016:
2x04 Сверхспособности
7x01 Милые обманщицы
Сб Вс
4 В 6 7 . ■ 1.
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
7 июля 2016: Полтора шпиона До встречи с тобой Свадебный угар Отмель
Пн
Сб
1Ü 11 12
14
16 16 17 18 IQ 20 21
22 23 24 25 26 27 Ц 29 30 31
3 августа 2016: 2x04 МистерРобот
Рис.4. Интерфейс приложения «Мобильный cinema-календарь»
Такой календарь предоставляет пользователям информацию более наглядно, в удобном для восприятия формате. Его можно использовать и в других мобильных приложениях для различных напоминаний, например о важных событиях или днях рождения.
Eclipse - одна из самых популярных сред разработки в мире. Одной из причин этого является простота проектирования приложений благодаря палитре управляющих элементов Palette, в которой содержатся необходимые инструменты для разработки интерфейса приложений. С помощью компонента GridView достаточно легко создать простой календарь
с возможностью записи и отображения данных в него, который может быть использован во многих приложениях.
Список литературы
1. «Разработка приложения мобильный cinema-календарь для учета просмотренных фильмов и сериалов». [Электронный ресурс].URL:http://web.snauka.ru/issues/2016/07/69834. (Дата обращения: 14.12.2016).
2. Eclipse Documentation. [Электронный ресурс]. URL:http://help.eclipse.org/mars/ index.jsp? topic=%o2Forg.eclipse.wb.doc.user%o2Fhtml0%2Fuserinterface0/o2Fpalette.html. (Дата обращения: 15.12.2016).
3. IBM Developer Works. [Электронныйресурс].Ц^: http://www.ibm.com/ developerworks/ru/ library/j-ft11/index.html. (Дата обращения: 15.12.2016).
Сведения об авторах
Цхошвили Д.З. - магистрант направления подготовки «Прикладная математика и информатика», Брянский государственный университет имени академика И.Г. Петровского, e-mail: darya9312@mail.ru.
Иванова Н. А. - кандидат технических наук, доцент кафедры информатики и прикладной математики, Брянский Государственный университет имени академика И.Г. Петровского, e-mail: ivanova_natala@mail.ru.
POSSIBILITY OF ECLIPSE ENVIRONMENT FOR THE DEVELOPMENT OF MOBILE
APPLICATIONS INTERFACE
D.Z. Tskhoshvili, N.A. Ivanova
Bryansk State University named after Academician I. G. Petrovsky
The paper discusses the main features of the Eclipse environment for the development of mobile application interfaces, and describes the process of developing a simple mobile calendar on the basis of a visual component GridView.
Keywords: Eclipse, Pallete, GridView, mobile application development environment, an adapter, an event handler.
References
1. "Development of mobile application cinema-calendar to account for View movies and TV shows." [Electronic resource] .URL: http: //web.snauka.ru/issues/2016/07/69834. (Reference date: 12.14.2016).
2. Eclipse Documentation. [Electronic resource] .URL: http: //help.eclipse.org/mars/ index.jsp topic =% 2Forg.eclipse.wb.doc.user% 2Fhtml% 2Fuserinterface% 2Fpalette.html?. (Reference date: 12.15.2016).
3. IBM Developer Works. [Elektronnyyresurs] .URL: http://www.ibm.com/ developerworks/ru/library/j-ft11/index.html. (Reference date: 12.15.2016).
About authors
Tskhoshvili D.Z. - graduate student, Department of computer science and applied mathematics, Bryansk State University named after Academician I. G. Petrovsky, e-mail: darya9312@mail.ru.
Ivanova N.A. - PhD in Technical Sciences, assistant professor, Department of computer science and applied mathematics, Bryansk State University named after Academician I. G. Petrovsky, e-mail: ivanova_natala@mail.ru.
