Использование кнопок

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

Кнопки являются одними из самых распространённых элементов управления, с их помощью пользователь взаимодействует с приложением. Кнопки могут вызывать сенсорные события, с ними могут быть связаны фоновые изображения с помощью технологии EDJE.

Создадим новое приложение ButtonSample. После создания проекта откройте файл исходного кода ButtonSample.c и добавьте следующую функцию перед функцией create_base_gui(). Эта функция аналогична той, что была использована в примере HelloWorld.

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);
}

Затем, найдите функцию 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);

{
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, "<align=center>Click a Button please</>");
//evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
//elm_object_content_set(ad->conform, ad->label);
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);
}

Ниже приводятся параметры функции the my_box_pack() в следующем порядке:

• Контейнер Box
• Дочернее окно
• Размеры по горизонтали: 1.0 = максимум, 0.0 = минимум.
• Размеры по вертикали: 1.0 = максимум, 0.0 = минимум.
• Положение по горизонтали: 0.0 = слева. 0.5 = центр. 1.0 = справа. -1 = полное заполнение.
• Положение по вертикали: 0.0 = верх. 0.5 = середина. 1.0 = низ. -1 = полное заполнение.

Запустите пример. Убедитесь в том, что на экране отображается надпись Click a Button please.

Создание кнопки

Теперь мы разместим код, предназначенный для создания кнопки в конце функции create_base_gui().

{
/* Label*/
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "<align=center>Click a Button please</>");
my_box_pack(box, ad->label, 1.0, 0.0, -1.0, 0.5);

/* Button-1 */
Evas_Object *btn = elm_button_add(ad->conform);
elm_object_text_set(btn, "This is a button");
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);
}

elm_button_add() - это API, создающий элемент управления Button. Введите текст надписи 'This is a button' с помощью функции elm_object_text_set(). Другие функции были рассмотрены в предыдущих примерах. Запустите пример, убедитесь в том, что на копке отображается введенный нами текст, однако, нажатие на кнопку ни к чему не приводит. Это связано с тем, что мы пока не создали функцию — обработчик событий.

Задание функции — обработчик событий

Enlightenment Foundation Libraries (EFL), использованная в Tizen, описывает функции в виде вызовов. Добавим функцию 'btn_default_cb()'. Здесь нужно учесть следующее. Так как функция btn_default_cb() вызывается в функции create_base_gui(), то ее тело должно быть выше функции create_base_gui(). Объявление заголовков функций в файле заголовка освобождает от необходимости соблюдать такой порядок.

static void
btn_default_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s* ad = data;
elm_object_text_set(obj, "Button 1 has been Pressed");
elm_object_text_set(ad->label, "You have pressed a button 1");
}

static void
create_base_gui(appdata_s *ad)
{

Функция btn_default_cb() принимает три параметра. Первый параметр — это данные пользователя, отправленные вызывающей стороне. В нашем случае мы используем app data (appdata_s). Второй параметр — это объект, в котором наблюдается событие. В нашем случае это — первая кнопка. Третий параметр — это структура, содержащая следующую информацию.

elm_object_text_set() - это API, изменяющий текст надписи элемента управления.

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

/* Button-1 */
Evas_Object *btn = elm_button_add(ad->conform);
elm_object_text_set(btn, "Default style");
evas_object_smart_callback_add(btn, "clicked", btn_default_cb, ad);
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);

evas_object_smart_callback_add() - это функция, определяющая функцию вызова события для смарт-объектов, таких как элементы управления или контейнеры.

Объекты Evas — это все объекты, отображаемые на экране. Смарт-объекты — это дополнительные объекты, отличные от основных объектов (Line, Rect, Polygon, Text, Image), предоставляемые Evas. В качестве первого параметра введите объект, в котором наблюдается событие. Второй параметр — это тип события. ‘clicked’ говорит о событии нажатия на кнопку. Третий параметр — это имя вызывающей функции. Четвертый параметр — это тип данных, посылаемых функции вызова. В нашем случае это app data. Запустите проект и нажмите на кнопку. Убедитесь в том, что текст в метке изменится.

Применение иконки к кнопке: Reorder

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

/* Button-1 */
Evas_Object *btn = elm_button_add(ad->conform);
elm_object_text_set(btn, "Default style");
evas_object_smart_callback_add(btn, "clicked", btn_default_cb, ad);
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);

/* Button-2 */
btn = elm_button_add(ad->conform);
elm_object_style_set(btn, "icon_reorder");
evas_object_smart_callback_add(btn, "clicked", btn_icon_reorder_cb, ad);
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);
}

elm_object_style_set() нашем - это функции, которая определяет стиль элемента управления. В качестве первого параметра вводим элемент управления, к которому будет применяться стиль. Второй параметр — это тип стиля. В случае — это ‘icon_reorder’. Мы определим функцию вызова btn_icon_reorder_cb для функции evas_object_smart_callback_add(). Пока мы ее еще не использовали. Добавим ее выше функции create_base_gui().

static void
btn_icon_reorder_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s* ad = data;
elm_object_text_set(ad->label, "You have pressed a Button 2");
}

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

Запустите пример. Нажмите на кнопку. Убедитесь в том, что, текст в метке меняется.

Использование иконки "+" на кнопках

Теперь мы создадим кнопку, к которой мы применим иконку плюс. Добавьте новый код к функции create_base_gui() . Это будет код создания третьей кнопки.

/* Button-2 */
btn = elm_button_add(ad->conform);
elm_object_style_set(btn, "icon_reorder");
evas_object_smart_callback_add(btn, "clicked", btn_icon_reorder_cb, ad);
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);

/* Button-3 */
btn = elm_button_add(ad->conform);
elm_object_style_set(btn, "icon_expand_add");
my_box_pack(box, btn, 1.0, 1.0, -1.0, -1.0);
}

Добавьте код обработчика событий для третьей кнопки вые функции create_base_gui().

static void
btn_icon_plus_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s* ad = data;
elm_object_text_set(ad->label, "You have pressed a Button 3");
}

Запустите пример. Убедитесь, что кнопка работает.