Naviframe
PUBLISHED
The naviframe container manages many views by stacking them and displaying the topmost one. For more information, see the Naviframe API (in mobile [1] and wearable [2] applications).
Basic Usage
To build a layout with a naviframe:
- Add a naviframe with the
elm_naviframe_add()
function. - Add an item (a view) and push it to the stack using the
elm_naviframe_item_push()
function. The function takes 6 parameters and returns a handler of the item.
Elm_Object_Item *elm_naviframe_item_push(Evas_Object *obj, const char *title, Evas_Object *prev_btn, Evas_Object *next_btn, Evas_Object *content, const char *item_style);
-
In Tizen, the
next_btn
(fourth parameter) is not shown, so useNULL
. Theprev_btn
(third parameter) is supported, but auto pushing is also supported since Tizen 2.4. As a result, useNULL
forprev_btn
too, and set the auto-pushed flag (about theprev_btn
) totrue
(like below)./* Make prev_btn automatically, if multiple items are pushed (default: EINA_FALSE) */ elm_naviframe_prev_btn_auto_pushed_set(nf, EINA_TRUE);
-
The last parameter is the style of the naviframe item. In Tizen mobile, various item styles are provided:
- If an item style supports text parts, fill the text parts with the
elm_object_item_part_text_set()
function:elm_object_item_part_text_set(nf_it, "subtitle", "subtitle");
-
If an item style supports swallow parts, fill the swallow parts with the
elm_object_item_part_content_set()
function:elm_object_item_part_content_set(nf_it, "title_left_btn", btn);
The
default
text part is the title, and thedefault
swallow part is the main content area. You can fill these parts with theelm_naviframe_item_push()
function as well. - If an item style supports text parts, fill the text parts with the
-
- Repeat step 2 for each view you have. You can pop and delete the topmost view during the process using the
elm_naviframe_item_pop()
function.
The following example shows a simple use case of the naviframe component in a mobile application.
Example: Naviframe use case
Evas_Object *nf; Evas_Object *ly; Evas_Object *tb; Elm_Object_Item *nf_it; /* Variables for naviframe item push */ const char *title_text = "Naviframe"; /* Recommended NULL, replace with elm_naviframe_prev_btn_auto_pushed_set() */ Evas_Object *prev_btn = NULL; /* Recommended NULL */ Evas_Object *next_btn = NULL; Evas_Object *empty_content = NULL; const char *item_style_default = NULL; const char *item_style_tabbar = "tabbar"; /* Starting right after the conformant the basic EFL UI layout code [3] */ /* (win - conformant) */ nf = elm_naviframe_add(ad->conform); elm_naviframe_prev_btn_auto_pushed_set(nf, EINA_TRUE); /* since Tizen 2.4 */ elm_object_content_set(ad->conform, nf); evas_object_show(nf); /* Add a layout */ ly = elm_layout_add(nf); elm_layout_theme_set(ly, "layout", "nocontents", "default"); elm_object_part_text_set(ly, "elm.text", "Naviframe Content Area"); /* Add a toolbar */ tb = elm_toolbar_add(nf); elm_toolbar_shrink_mode_set(tb, ELM_TOOLBAR_SHRINK_EXPAND); elm_toolbar_transverse_expanded_set(tb, EINA_TRUE); elm_toolbar_item_append(tb, NULL, "Tab1", NULL, NULL); elm_toolbar_item_append(tb, NULL, "Tab2", NULL, NULL); evas_object_show(tb); /* Push a naviframe item (push 2 items in total to show the back button) */ elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, empty_content, item_style_default); /* Push a naviframe item, set the style as "tabbar" and pass the layout as content */ nf_it = elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, ly, item_style_tabbar); /* Set the toolbar into the "tabbar" part of the naviframe item */ elm_object_item_part_content_set(nf_it, "tabbar", tb); |
Item Styles
The following table lists the item styles available for Tizen mobile applications.
Table: Naviframe item styles
Style | Sample | Text part | Swallow part | Notes |
---|---|---|---|---|
default |
default
|
default
|
1. Text part: 2. Text part: 3. Swallow part: 4. Swallow part: 5. Swallow part: |
|
tabbar |
default
|
default
|
The tabbar_with_title style toolbar can be set into the tabbar part.
1. Text part: 2. Text part: 3. Swallow part: 4. Swallow part: 5. Swallow part: 6. Swallow part: |
|
tabbar/notitle |
- | default
|
The toolbar can be set into the tabbar part.
1. Swallow part: 2. Swallow part: |
|
tabbar/icon |
default
|
default
|
The tabbar_with_title style toolbar with icons can be set into the tabbar part.
1. Text part: 2. Text part: 3. Swallow part: 4. Swallow part: 5. Swallow part: 6. Swallow part: |
|
tabbar/icon/notitle |
- | default
|
The toolbar with icons can be set into the tabbar part.
1. Swallow part: 2. Swallow part: |
Callbacks
You can register callback functions connected to the following signals for a naviframe object.
Table: Naviframe callback signals
Signal | Description | event_info |
---|---|---|
transition,finished |
The transition has finished changing the view. | NULL |
title,transition,finished |
The title area transition has finished changing the state of the title. | NULL |
title,clicked |
The title area is clicked. | NULL |