Разработка простого приложения BasicUI

На этом занятии мы создадим простое приложение BasicUI и познакомимся с основными этапами разработки нативных приложений Tizen. Создаем проект HelloWorld File →New→ Tizen Native Project → UI Application → Basic UI Application → HelloWorld.

Запустим проект: Project → Build All → Run.

Изменим надпись Hello EFL в метке.

Для этого нам потребуется открыть исходный код приложения (файл helloworld.c). Мы увидим следующее:

#include "helloworld.h"
typedef struct appdata {
Evas_Object *win;
Evas_Object *conform;
Evas_Object *label;
} appdata_s;
static void
win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
{
ui_app_exit();
}
static void
win_back_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
/* Let window go to hide state. */
elm_win_lower(ad->win);
}

Команда #include "helloworld.h" ссылается на файл ‘helloworld.h’ в папке ‘inc'.

Обычно, заголовочные файлы содержат различные библиотеки, глобальные переменные, заголовки функций, в то время как в файлах исходного кода содержится содержание функций.

‘appdata_s — это структура, предназначенная для хранения данных, используемых в приложении.

‘win_delete_request_cb() - это функция, которую нельзя вызвать непосредственно. Она срабатывает при запросе на удаление приложения.

‘win_back_cb() - это функция, срабатывающая при нажатии на кнопку Back. Эта функция не запускается непосредственно.

static void
create_base_gui(appdata_s *ad)
{
/* Window */
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win)) {
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
/* Conformant */
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);
/* Label*/
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "<align=center>Hello EFL</align>");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, ad->label);
/* Show window after base gui is set up */
evas_object_show(ad->win);
}

Ниже мы объясним некоторые строки из основного кода.

elm_win_util_standard_add() - это API, создающий объект Window. Window — это самый верхний объект в макете экрана. Приложение (app) имеет отдельное окно.

Тем не менее, более распространенный метод заключается в добавлении контейнера и затем добавлении виджета в верхнюю часть контейнера.

elm_win_wm_rotation_available_rotations_set() - это API, определяющий ориентацию экрана. Четыре угла, задающие ориентацию (0, 90, 180, и 270), задаются в виде массива rots.

evas_object_smart_callback_add() - это API, определяющий функцию события обратного вызова для смарт-объектов, таких, как виджеты или контейнеры. В качестве первого параметра выступает наблюдаемое событие, второй параметр — это тип события, третий параметр — имя функции обратного вызова, четвертый параметр — данные пользователя. Если тип события "delete,request", это значит, что объект должен быть удален.

eext_object_event_callback_add() - это API, определяющий функцию события обратного вызова для объекта. Можно использовать этот API как для смарт-объектов, так и для обычных объектов. В качестве первого параметра используется объект, в котором происходит событие, второй параметр — тип события, третий параметр — имя функции обратного вызова, четвертый параметр — данные пользователя.

EEXT_CALLBACK_BACK сообщает о событии нажатия на кнопку Back.

elm_conformant_add() - это API, создающий Conformant (совместимость). Conformant изменяет размер окна при добавлении новых элементов (например, клавиатуры) к экрану. Приложение должно иметь не более одного Conformant. Приложение может и не иметь Conformant. Conformant необходим для отображения индикатора (полосы состояния) в верхней части экрана.

elm_win_indicator_mode_set() - это API, который определяет, следует ли отображать индикатор

elm_win_indicator_opacity_set() - это API, который определяет прозрачность индикатора

evas_object_size_hint_weight_set() - это API, который определяет приблизительные размеры объекта. Ниже приведены параметры, перечисленные в следующем порядке: объект, приблизительные горизонтальные размеры, и приблизительные вертикальные размеры.

EVAS_HINT_EXPAND означает максимально возможный размер холста.

elm_win_resize_object_add() - это API, который переопределяет размер объекта Window при добавлении к нему другого объекта.

evas_object_show() - это API, который отображает объект. При создании объекта значением по умолчанию является Hide (скрыть).

elm_label_add() - это API, который создает виджет. Виджет Label (метка), например, позволяет отображать текст, также, как и изменять свойства текста, такие как размер или цвет текста с помощью тегов HTML.

Изменение текста в метке

Теперь мы изменим надпись 'Hello EFL', отображаемую на экране. Для этого нам потребуется внести изменения в функцию ‘elm_object_text_set()’, показанную ниже.

ad->label = elm_label_add(ad->conform);
//elm_object_text_set(ad->label, "<align=center>Hello EFL</align>");
elm_object_text_set(ad->label, "Hello World");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

elm_object_text_set() - это API, изменяющий текст в виджете. Вы можете использовать эту функцию для виджетов Button (кнопка) или Entry (поле ввода) также, как и для элемента управления Label.

Запустим наш проект, заменив строку

elm_object_text_set(ad->label, "<align=center>Hello EFL</align>");

на

elm_object_text_set(ad->label, "<b><align=center>Per aspera ad astra</align></b>");

Изменение положения метки с помощью абсолютных координат

Метки размещаются в левой части экрана. Функция evas_object_size_hint_weight_set() определяет относительный размер объекта, поскольку горизонтальная и вертикальная опции функции определяются как 'EVAS_HINT_EXPAND'. В качестве первого параметра указывается объект, чьи свойства вы хотите определить, второй параметр — размер по горизонтали, третий параметр — размер по вертикали. Давайте теперь изменим положение метки, задав ее абсолютные координаты. Изменим код, приведенный ниже.

elm_object_text_set(ad->label, "<b><align=center>Per aspera ad astra</align></b>");
//evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
//elm_object_content_set(ad->conform, ad->label);
evas_object_move(ad->label, 100, 200);
evas_object_resize(ad->label, 400, 100);
evas_object_show(ad->label);

evas_object_move() - это функция, которая определяет положение объекта по абсолютной величине. Введите значения параметров в следующем порядке: объект, чьи свойства вы хотите задать, положение X-координаты, и положение Y-координаты.

evas_object_resize()- это функция, которая определяет размер объекта по абсолютной величине. Введите значения параметров в следующем порядке: объект, чьи свойства вы хотите задать, X-координату (ширина), и Y-координату (высота).

Запустите проект.

Использование различных разрешений с помощью контейнера Box

Определение абсолютных координат, методом, показанным выше, удобно. Однако, вы не можете таким способом использовать различные разрешения вашего терминала. Рассмотрим, как это можно сделать с помощью контейнера Box.

Добавьте новую функцию выше функции create_base_gui() function.

static void
my_box_pack(Evas_Object *box, Evas_Object *child,
double h_weight, double v_weight, double h_align, double v_align)
{
/* create a frame we shall use as padding around the child widget */
Evas_Object *frame = elm_frame_add(box);
/* use the medium padding style. there is "pad_small", "pad_medium",
* "pad_large" and "pad_huge" available as styles in addition to the
* "default" frame style */
elm_object_style_set(frame, "pad_medium");
/* set the input weight/aling on the frame insted of the child */
evas_object_size_hint_weight_set(frame, h_weight, v_weight);
evas_object_size_hint_align_set(frame, h_align, v_align);
{
/* tell the child that is packed into the frame to be able to expand */
evas_object_size_hint_weight_set(child, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
/* fill the expanded area (above) as opposaed to center in it */
evas_object_size_hint_align_set(child, EVAS_HINT_FILL, EVAS_HINT_FILL);
/* actually put the child in the frame and show it */
evas_object_show(child);
elm_object_content_set(frame, child);
}
/* put the frame into the box instead of the child directly */
elm_box_pack_end(box, frame);
/* show the frame */
evas_object_show(frame);
}

my_box_pack() - это функция, добавляющая элемент управления в контейнер Box. Box — это контейнер, который успешно добавляет виджет элементы управления или контейнеры в вертикальной или горизонтальной ориентации. Он играет аналогичную роль с LinearLayout в Android. Эту функцию мы будем часто использовать позже. Детальное объяснение контейнера Box будет дано при объяснении соответствующего примера.

В качестве первого параметра функции my_box_pack() используется обработчик контейнера Box, второй параметр — виджет или контейнер, добавляемый в контейнер Box, третий параметр — горизонтальные размеры виджета.

Вводя значение 1.0 для EVAS_HINT_EXPAND, мы задаем горизонтальный размер элемента управления настолько большим, насколько это возможно, вводя 0.0 — определяем размер настолько маленьким, насколько это возможно. В случае с виджетом Bg размер по умолчанию будет 0. Если задать 0.0, то виджет не появится на экране. Четвертый параметр — вертикальный размер виджета, пятый параметр — горизонтальное положение виджета, при нуле — выравнивание по левому краю, при 0.5 — по центру, при 1.0 — выравнивание по правому краю, вводя EVAS_HINT_FILL или -1, мы даем возможность занять виджету всю ширину. Шестой параметр — вертикальное положение виджета, вводя 0.0 мы выравниваем видже по верхнему краю, 0.5 — по середине, 1.0 — по нижнему краю. Вводя EVAS_HINT_FILL или -1, мы даем возможность виджету занять всю область по вертикали.

Измените исходный код в нижней части функции create_base_gui() так, как показано ниже.

/* Conformant */
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);
{
/* A box to put things in verticallly - default mode for box */
Evas_Object *box = elm_box_add(ad->win);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, box);
evas_object_show(box);
{
/* Label*/
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "<b><align=center>Per aspera ad astra</align></b>");
my_box_pack(box, ad->label, 1.0, 0.0, -1.0, 0.5);
}
}
/* Show window after base gui is set up */
evas_object_show(ad->win);
}

Символ {} использовали для clarify the inclusion взаимосвязи между верхним объектом (Window) и нижним объектом (Window). Это необходимо для использования этого символа. Тем не менее, вследствие большой разности в читабельности в тех случаях когда вы используете и не используете его мы рекомендуем использовать habit.

elm_box_add() - это API, который создает контейнер Box.

Давайте запустим наш пример. Виджет будет отображаться с другим разрешением.