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

Затем мы продолжим создавать наше демо приложение добавив на уже созданный макет кнопку.

Кнопка (Button) - это простой виджет размещиемый на экране приложения для получения отклика от пользователя. Этот виджет наследуется от контейнера-макета поэтому вы можете использовать API макета с целью управления или изменения кнопки.

Рассмотрим основные функции работы с этим виджетом.

Для создания экземпляра кнопки используется следующая функция:

Evas_Object *elm_button_add(Evas_Object *parent);

Как обычно в функцию передается указатель на родительский виджет который будет следить за удалением объекта.

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

Eina_Bool elm_object_style_set(Evas_Object *obj, const char *style);
void elm_object_text_set(Evas_Object *obj, const char *text);

Эти две функции могут использоваться не только для кнопки но и для других виджетов, у которых есть соответствующие области для контента и/или текста.

Рассмотрим 6 основных стилей из стандартной темы Wearable профиля.

- Стиль default:

Такая кнопка имеет квадратную форму.

В такой кнопке имеется область для контента и установки текста.

Установить стиль можно с помощью вызова функции elm_object_style_set():

elm_object_style_set(button, "default");

Все остальные стили устанавляваются подобным образом.

- Стиль bottom:

Такая кнопка имеет полукруглую форму. И предназначается для помещения внизу экрана.

У кнопки с данным стилем также имеется две области для размещения иконки и текста, но в отличие от предыдущего стиля не стоит одновременно использовать и текст и иконку, поскольку обе области имеют одинаковое расположение и будут перекрывать друг друга.

- Стиль popup/circle/left:

Содержить область для иконки, а место для текста не предусмотренно из-за малой ширины.

- Стиль popup/circle/right:

Также как и предыдущий стиль, содержить только область для иконки.

Кнопки "popup/circle/left" и "popup/circle/right" используются в интерактивных всплывающих окнах для подтверждения какого либо действия. Обычно используются две кнопки с этими стилями одновременно.

- Стиль select_mode:

Кнопка с таким стилем обычно помещается в макет со стилем "elm/layout/select_mode/default". Имеет прямоугольную форму с закругленными краями.

Кнопка имеет текстовую область и место для иконки.

Пример использования такого стиля вы можете увидеть в стандартном приложении галлереи на часах.

- Стиль transparent:

Это прозрачная кнопка которая не имеет ни текста, ни иконки.

Перейдем к практике.

Добавим еще указатель на кнопку в нашу структуру с виджетами.

Evas_Object *button;

Теперь получилась такая структура.

typedef struct _UIData {
   Evas_Object *win;
   Evas_Object *conform;
   Evas_Object *layout;
   Evas_Object *button;
} UIData;

Реализуем функцию в которой далее создадим и настроим кнопку.

static void
_button_create(UIData *ui)
{
}

Создаем экземпляр кнопки, указывая макет в качестве родителя.

ui->button = elm_button_add(ui->layout);

Устанавливаем стиль bottom для нашей кнопки.

elm_object_style_set(ui->button, "bottom");

Задаем текст для кнопки.

elm_object_style_set(ui->button, "Нажми меня!");

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

evas_object_show(ui->button);

Теперь нужно вызвать нашу функцию создания и настройки кнопки и поместить виджет в макет. Нижняя область для контента в макете имеет название "elm.swallow.button", туда мы и помещаем кнопку.

static void
_layout_create(UIData *ui)
{
   ...

   _button_create(ui);
   elm_object_part_content_set(ui->layout, "elm.swallow.button", ui->button);

   ...
}

Теперь можно запустить наше приложение и посмотреть, что же получилось.

Вы научились создавать кнопку. Теперь необходимо научиться обрабатывать события виджета. Мы подробно рассмотрим эту тему в следующем уроке.

Полный исходный код этого урока вы можете взять здесь WearLesson014.