Tizen Native API  5.0
Spinner widget example

This code places seven Elementary spinner widgets on a window, each of them exemplifying a part of the widget's API.

The first of them is the default spinner:

   sp = elm_spinner_add(win);
   evas_object_size_hint_align_set(sp, EVAS_HINT_FILL, 0.5);
   evas_object_size_hint_weight_set(sp, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_box_pack_end(bx, sp);
   evas_object_show(sp);
As you see, the defaults for a spinner are:

  • no wrap
  • min value set to 0
  • max value set to 100
  • step value set to 1
  • label format set to "%0.f"

If another format is required, see the second spinner. It will put a text before and after the value, and also format value to display two decimals:

   elm_spinner_label_format_set(sp, "Percentage %%%1.2f something");

The third one will use a customized step, define new minimum and maximum values and enable wrap, so when value reaches minimum it jumps to maximum, or jumps to minimum after maximum value is reached. Format is set to display a decimal:

   sp = elm_spinner_add(win);
   elm_spinner_label_format_set(sp, "%1.1f units");
   elm_spinner_step_set(sp, 1.5);
   elm_spinner_wrap_set(sp, EINA_TRUE);
   elm_spinner_min_max_set(sp, -50.0, 250.0);
   evas_object_size_hint_align_set(sp, EVAS_HINT_FILL, 0.5);
   evas_object_size_hint_weight_set(sp, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_box_pack_end(bx, sp);
   evas_object_show(sp);

The fourth uses vertical style, so instead of left and right arrows, top and bottom are displayed. Also the change interval is reduced, so user can change value faster.

   elm_object_style_set(sp, "vertical");
   elm_spinner_interval_set(sp, 0.2);

In the fifth the user won't be allowed to set value directly, i.e., will be obligate change value only using arrows:

The sixth widget will receive a lot of special values, so instead of reading numeric values, user will see labels for each one. Also direct edition is disabled, otherwise users would see the numeric value on edition mode. User will be able to select a month in this widget:

   sp = elm_spinner_add(win);
   elm_spinner_editable_set(sp, EINA_FALSE);
   elm_spinner_min_max_set(sp, 1, 12);
   elm_spinner_special_value_add(sp, 1, "January");
   elm_spinner_special_value_add(sp, 2, "February");
   elm_spinner_special_value_add(sp, 3, "March");
   elm_spinner_special_value_add(sp, 4, "April");
   elm_spinner_special_value_add(sp, 5, "May");
   elm_spinner_special_value_add(sp, 6, "June");
   elm_spinner_special_value_add(sp, 7, "July");
   elm_spinner_special_value_add(sp, 8, "August");
   elm_spinner_special_value_add(sp, 9, "September");
   elm_spinner_special_value_add(sp, 10, "October");
   elm_spinner_special_value_add(sp, 11, "November");
   elm_spinner_special_value_add(sp, 12, "December");
   evas_object_size_hint_align_set(sp, EVAS_HINT_FILL, 0.5);
   evas_object_size_hint_weight_set(sp, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_box_pack_end(bx, sp);
   evas_object_show(sp);

Finally the last widget will exemplify how to listen for widget's signals, changed and delay,changed . First we need to implement callback functions that will simply print spinner's value:

static void
_delay_changed_cb(void *data EINA_UNUSED, Evas_Object *obj, void *event_info EINA_UNUSED)
{
   printf("Value delay changed to %0.f\n", elm_spinner_value_get(obj));
}

static void
_focused_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   printf("spinner focused\n");
}

The first callback function should be called everytime value changes, the second one only after user stops to increment or decrement. Try to keep arrows pressed and check the difference.

   evas_object_smart_callback_add(sp, "focused", _focused_cb, NULL);
   evas_object_smart_callback_add(sp, "unfocused", _unfocused_cb, NULL);

See the full source code for this example.