Tizen Developers

As you mentioned, I hide the default header of naviframe item, and I'm going to implement customized header layout.

My customized hearder will have one or two buttons on right side, and text title on left side.

I want that buttons are put on right first, and text titile is displayed on left remaining space.

In other words, buttons's space may be changed because the number of buttons will be different situationally, and also remainng space which is for text title will be changeable.

My code is as follows.

< my.edc >

    group
    {
        name: GROUP_ACTIONBAR;
        parts {
            part {
                name: BASE;
                type: RECT;
                scale: 1;
                description {
                    state: "default" 0.0;
                    fixed: 1 1;
                    rel1.relative: 0.0 0.0;
                    rel2.relative: 1.0 1.0;
                    color: COLOR_ACTIONBAR_BG;
                }
            }
    
            part {
                name: PART_ACTIONBAR_RIGHT;
                type: SWALLOW;
                scale: 1;
                description {
                    state: "default" 0.0;
                    align: 1.0 0.5;
                    rel1 {
                        relative: 0.0 1.0;
                    }
                    rel2.relative: 1.0 1.0;
                }
            }
            
            part {
                name: PART_ACTIONBAR_LEFT;
                type: SWALLOW;
                scale: 1;
                description {
                    state: "default" 0.0;
                    align: 0.0 0.5;
                    rel1.relative: 0.0 0.0;
                    rel2 {
                        relative: 1.0 0.5;
                        to_x: PART_ACTIONBAR_RIGHT;
                    }
                }
            }
        }
    }



< my-view.c >

    data->actionbar_layout = elm_layout_add(parent);
    if(!data->actionbar_layout) {
        ERR("Failed to create Actionbar");
        return RESULT_TYPE_FAIL;
    }

    evas_object_size_hint_weight_set(data->actionbar_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(data->actionbar_layout, EVAS_HINT_FILL, EVAS_HINT_FILL);

    ui_utils_get_resource(EDJ_FILE, res_path);
    elm_layout_file_set(data->actionbar_layout, res_path, GROUP_ACTIONBAR);
    evas_object_show(data->actionbar_layout);

    /* Create buttons on right side */
    Evas_Object *box = elm_box_add(data->actionbar_layout);
    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

    ui_utils_get_resource(ACTIONBAR_ICON_SEARCH, res_path);
    Evas_Object *btn = ui_utils_create_button(box, res_path, btn_on_click_cb, btn_on_pressed_cb, (void *)BTN_1);

    if(!btn) {
        ERR("Failed to create Back button");
        return RESULT_TYPE_FAIL;
    }

    elm_object_item_part_content_set(data->nf_item, "ab_1_btn", btn);
    elm_box_pack_end(box, btn);

    btn = ui_utils_create_button(box, res_path, btn_on_click_cb, btn_on_pressed_cb, (void *)BTN_2);

    if(!btn) {
        ERR("Failed to create Back button");
        return RESULT_TYPE_FAIL;
    }

    elm_object_item_part_content_set(data->nf_item, "ab_2_btn", btn);

    elm_box_pack_end(box, btn);
    elm_object_part_content_set(data->actionbar_layout, PART_ACTIONBAR_RIGHT, box);

    /* Create a label on left side */
    box = elm_box_add(data->actionbar_layout);
    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

    Evas_Object *label = elm_label_add(box);
    elm_object_text_set(label, "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz");
    evas_object_color_set(label, 255, 0, 0, 255);
    evas_object_show(label);
    elm_box_pack_end(box, label);

    elm_object_part_content_set(data->actionbar_layout, PART_ACTIONBAR_LEFT, box);

Thank you for your answer. I'll find them.

I mean Programs which can be used in edc files:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.native.appprogramming/html/guide/ui/edc_collections_group_programs_program.htm

Thank you!

I already read the guide about Programs, but I can't know way to use them.

Since I started developing Tizen a few days ago, I'm not sure of which field is useful.

Hi,

As far as I understand you need to change layout of parts dynamically: change their size and make them visible/invisible. So, you can try to do that using the Programs. Briefly, you need to create several states for each part and then switch the states using the Programs. You can find samples how to switch the states here:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.native.appprogramming/html/guide/ui/edc_guide.htm