[UI Sample] LayoutSample Overview

The [UI Sample] LayoutSample application demonstrates how to make a common layout, such as an edit field, no content, or search bar. Since Tizen provides some common layouts, you do not need to make the layouts yourself.

Figure: [UI Sample] LayoutSample

Edit Field

In the edit field, understanding the elm_entry component is very important. Handle the state of the edit field layout in the callback functions of the elm_entry component. You need the focused, unfocused, changed, and preedit,changed smart callbacks.

The edit field is commonly used in preloaded applications, such as contacts and calendar. You can create the edit field with the elm_layout, elm_entry, and elm_button components. For controlling the state of the edit field layout, send signals in several callbacks for the elm_entry component. You must understand how to implement the proper timing for changing the layout state.

Figure: Edit field

The following code creates the main view for the Editfield view. It prepares the elm_box component for the edit field layouts.

static Evas_Object *
create_editfield_view(appdata_s *ad)
{
   Evas_Object *main_scroller, *main_box, *editfield;

   main_scroller = elm_scroller_add(ad->nf);
   elm_scroller_bounce_set(main_scroller, EINA_FALSE, EINA_TRUE);
   evas_object_size_hint_weight_set(main_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(main_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
   evas_object_show(main_scroller);

   main_box = elm_box_add(main_scroller);
   evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, 0.0);
   evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, 0.0);
   evas_object_show(main_box);

   editfield = create_multiline_editfield_layout(main_box);
   elm_box_pack_end(main_box, editfield);
   evas_object_show(editfield);

   editfield = create_singleline_editfield_layout(main_box);
   elm_box_pack_end(main_box, editfield);
   evas_object_show(editfield);

   editfield = create_password_editfield_layout(main_box);
   elm_box_pack_end(main_box, editfield);
   evas_object_show(editfield);

   elm_object_content_set(main_scroller, main_box);

   return main_scroller;
}

To create a multiline edit field, add the elm_layout component and change the theme to elm/layout/editfield/multiline. The layout looks like the edit field, with swallow parts for the elm_entry and elm_button components. Afterwards, add the elm_entry component and set it to the edit field layout.

Additionally, you can add some callback functions to the elm_entry component. Through the callback functions, send signals to the layout to change the state of the edit field.

static Evas_Object *
create_multiline_editfield_layout(Evas_Object *parent)
{
   Evas_Object *editfield, *entry;

   editfield = elm_layout_add(parent);
   elm_layout_theme_set(editfield, "layout", "editfield", "multiline");
   evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
   evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);

   entry = elm_entry_add(editfield);
   elm_object_part_text_set(entry, "elm.guide", "Multiline Editfield");
   evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
   evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
   elm_object_part_content_set(editfield, "elm.swallow.content", entry);

   return editfield;
}

The following callback functions send signals. For example, the editfield_focused_cb() callback sends the elm.state,focused and elm,action,show,button signals, which change the color of the edit field underline and the visibility state of the button.

static void
editfield_focused_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *editfield = (Evas_Object *)data;
   elm_object_signal_emit(editfield, "elm,state,focused", "");

   if (!elm_entry_is_empty(obj))
      elm_object_signal_emit(editfield, "elm,action,show,button", "");
}

static void
editfield_unfocused_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *editfield = (Evas_Object *)data;
   elm_object_signal_emit(editfield, "elm,state,unfocused", "");
   elm_object_signal_emit(editfield, "elm,action,hide,button", "");
}

The next layout is a single-line edit field. The code is almost the same with the multiline edit field, except for the elm_entry_single_line_set() and elm_entry_scrollable_set() functions. These functions are required for a single-line edit field.

A clear button is added to the layout to clear the elm_entry component text.

static Evas_Object *
create_singleline_editfield_layout(Evas_Object *parent)
{
   Evas_Object *editfield, *entry, *button;

   editfield = elm_layout_add(parent);
   elm_layout_theme_set(editfield, "layout", "editfield", "singleline");
   evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
   evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);

   entry = elm_entry_add(editfield);
   elm_entry_single_line_set(entry, EINA_TRUE);
   elm_entry_scrollable_set(entry, EINA_TRUE);
   elm_object_part_text_set(entry, "elm.guide", "Singleline Editfield");
   evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
   evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
   evas_object_smart_callback_add(entry, "changed", editfield_changed_cb, editfield);
   evas_object_smart_callback_add(entry, "preedit,changed", editfield_changed_cb, editfield);
   elm_object_part_content_set(editfield, "elm.swallow.content", entry);

   button = elm_button_add(editfield);
   elm_object_style_set(button, "editfield_clear");
   evas_object_smart_callback_add(button, "clicked", editfield_clear_button_clicked_cb, entry);
   elm_object_part_content_set(editfield, "elm.swallow.button", button);

   return editfield;
}

To clear the entry, call the elm_entry_entry_set() function with an empty text.

static void
editfield_clear_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *entry = (Evas_Object *)data;

   elm_entry_entry_set(entry, "");
}

The password edit field is exactly the same as the single-line edit field, except for the elm_entry_password_set() function.

If you call the elm_entry_password_set() function, the elm_entry component shows the text as asterisks (*). However, the edit field still has the original input and you can get it with the elm_entry_entry_get() function.

static Evas_Object *
create_password_editfield_layout(Evas_Object *parent)
{
   Evas_Object *editfield, *entry, *button;

   editfield = elm_layout_add(parent);
   elm_layout_theme_set(editfield, "layout", "editfield", "singleline");
   evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
   evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);

   entry = elm_entry_add(editfield);
   elm_entry_single_line_set(entry, EINA_TRUE);
   elm_entry_scrollable_set(entry, EINA_TRUE);
   elm_entry_password_set(entry, EINA_TRUE);
   elm_object_part_text_set(entry, "elm.guide", "Password Editfield");
   evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
   evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
   evas_object_smart_callback_add(entry, "changed", editfield_changed_cb, editfield);
   evas_object_smart_callback_add(entry, "preedit,changed", editfield_changed_cb, editfield);
   elm_object_part_content_set(editfield, "elm.swallow.content", entry);

   button = elm_button_add(editfield);
   elm_object_style_set(button, "editfield_clear");
   evas_object_smart_callback_add(button, "clicked", editfield_clear_button_clicked_cb, entry);
   elm_object_part_content_set(editfield, "elm.swallow.button", button);

   return editfield;
}

No Content

The no content layout is one of the simplest layouts. After adding the elm_layout component, change the theme to elm/layout/nocontents/default. It has a transparent image and you can put your text in the middle of the layout.

// No content Layout
layout = elm_layout_add(scroller);
elm_layout_theme_set(layout, "layout", "nocontents", "default");
evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_object_part_text_set(layout, "elm.text", "No Contents");

elm_object_content_set(scroller, layout);

Figure: No content

Search Bar

You can add a search bar just like a single-line edit field. Change the theme style to elm/layout/searchfield/singleline:

searchfield = elm_layout_add(parent);
elm_layout_theme_set(searchfield, "layout", "searchfield", "singleline");
evas_object_size_hint_align_set(searchfield, EVAS_HINT_FILL, 0.0);
evas_object_size_hint_weight_set(searchfield, EVAS_HINT_EXPAND, 0.0);

Figure: Search bar