Languages

Menu
Sites
Language
Display a white backround for box widget?

I'm currently stuck with the problem that all default example UI's do not have the white background. My UI don't have is too. I was trying to figure it out whole evening, and now I beg the community for help. I'm using layout just like in EmailUI example to get the navigation bar drawer. I want to populate the naviframe with the mainpage object, which is created with this function below:

static Evas_Object*
create_mainpage(appdata_s *ad) {
    Evas_Object* mainpage_box;
	Evas_Object* item_header;
	mainpage_box = elm_box_add(ad->nf);
	elm_box_align_set(mainpage_box, 0, 0);
	evas_object_size_hint_weight_set(mainpage_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
	evas_object_size_hint_align_set(mainpage_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
	evas_object_show(mainpage_box);

	//try to add bg
	Evas_Object* bg = elm_bg_add(mainpage_box);
	evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
	elm_win_resize_object_add(mainpage_box, bg);
	elm_bg_color_set(bg, 0, 0, 0);
	evas_object_show(bg);
	elm_box_pack_end(mainpage_box, bg);

	// add headers
	item_header = create_item_header(mainpage_box, "<font_size=30>Подборка 1</font_size>");
	evas_object_show(item_header);
	elm_box_pack_end(mainpage_box, item_header);

	item_header = create_item_header(mainpage_box, "<font_size=30>Подборка 2</font_size>");
	evas_object_show(item_header);
	elm_box_pack_end(mainpage_box, item_header);

	return bg;
}

I tried to make bg a child of mainpage_box and vice versa. code listed above is producing this result (delete the spaces, tizen forums doesn't allow any links):

https: //i.gyazo.com /c05b5e57b7e19ccf4d7ae75f95074265.png

the code listed below producing this:

https: //i.gyazo.com /5036d407d836fdf66479c56912460f11.png

static Evas_Object*
create_mainpage(appdata_s *ad) {
    Evas_Object* mainpage_box;
	Evas_Object* item_header;

	Evas_Object* bg = elm_bg_add(ad->nf);
	evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
	elm_win_resize_object_add(ad->nf, bg);
	elm_bg_color_set(bg, 200, 0, 0);
	evas_object_show(bg);

	mainpage_box = elm_box_add(bg);
	elm_box_align_set(mainpage_box, 0, 0);
	evas_object_size_hint_weight_set(mainpage_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
	evas_object_size_hint_align_set(mainpage_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
	evas_object_show(mainpage_box);
	//try to add bg

	// add headers
	item_header = create_item_header(mainpage_box, "<font_size=30>Подборка 1</font_size>");
	evas_object_show(item_header);
	elm_box_pack_end(mainpage_box, item_header);

	item_header = create_item_header(mainpage_box, "<font_size=30>Подборка 2</font_size>");
	evas_object_show(item_header);
	elm_box_pack_end(mainpage_box, item_header);

	return bg;
}

It is closer to what I want, but labels are located on top of indicator, which is nonacceptable. How can i improve my situation?

Edited by: Mikhail Levchenko on 29 Mar, 2016
View Selected Answer
List

Responses

5 Replies
Minkyoung Kim

On your 1st code,

Set  "elm_box_align_set(mainpage_box, 0, 0);" as coment, then black bg is shown.

but item headers are shown on bottom. because box item cannot be overlapped.

So I recommand that you create elm bg which is same size with box. and put it back of box.

 

You can get more info :

docs.enlightenment.org/elementary/1.15.0/bg_example_03_8c-example.html

developer.tizen.org/dev-guide/native/2.3.0/org.tizen.mobile.native.appprogramming/html/guide/ui/container_box.htm

developer.tizen.org/dev-guide/native/2.3.0/org.tizen.mobile.native.appprogramming/html/tutorials/ui_tutorial/uilayout_tutorial.htm

 

Mikhail Levchenko

I did what you advised to me, and also studied links, but I still get no back ground in my 1st code, it is just displayed like that

https:// i.gyazo.com/ 65f3ad5546b4e8c5f4b4d1fefa3a6606.png

Mark as answer
Alex Dem

Hi,
Maybe for your case better to use layout which is loaded this way in code:

    app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
    ad->layout = elm_layout_add(ad->win);
    elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);


Layout markup could be done with EDC:
https://developer.tizen.org/development/ui-practices/native-application/efl/themes/introduction-edc-programming

What type of element is your item_header ? Is it elm_label or elm_image and where you want to place it ?

In any case with EDC layout file you could configure header/background regions with RECT part and load your Evas_Object item_header in SWALLOW part.
In this case you will not use additional boxes in your code.

Alexey.

Alex Dem

Regardind EDC markup, something like this:
 

collections {
group {
    name: "main";
    parts {
        part {
            name: "header";
            type: RECT;
            description {
                state: "default" 0.0;
                rel1 { relative: 0.0 0.0; }
                rel2 { relative: 1.0 0.0; }
                min: 720 120;
                max: 1280 120;
                color: 128 128 128 255;
            }
        }
        part {
            name: "background";
            type: RECT;
            description {
                state: "default" 0.0;
                rel1 { relative: 0.0 1.0; to: "header"; }
                rel2 { relative: 1.0 1.0; }
                color: 255 255 255 255;
            }
        }
        //...
      }
   }
}

 

Minkyoung Kim

Sorry, I misunderstood your question. 

Did you use elm_win_util_standard_add()? 

elm_win created by elm_win_util_standrad_add() has white background automatically. 

I think this is the problem. 

You can create win without bg with elm_win_add(NULL, str, ELM_WIN_BASIC);