У цьому уроку ми детально розглянемо наш перший віджет-компонент типу кнопка. Ми навчимо вас як його створювати і розміщати в макеті. А також розглянемо стандартні стилі і варіанти їх використання. Далі ми продовжимо створювати демо-додаток, додавши на вже створений макет, кнопку.

Кнопка (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.