Build a simple UI

The following instructions help you to create the UI illustrated in the following figure.

1. Build the layout using the EFL box UI component.

The UI consists of 2 box items, the first one is the layout object of the label and second one is the button object to call a function for sending a message.

static void
_create_base_gui(appdata_s *ad)
{
	// Window
	ad->win = elm_win_util_standard_add(_PACKAGE, _PACKAGE);
	elm_win_autodel_set(ad->win, EINA_TRUE);


	evas_object_smart_callback_add(ad->win, "delete,request",
	_win_delete_request_cb, NULL);
	eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, _win_back_cb, ad);


	// Conformant
	ad->conform = elm_conformant_add(ad->win);
	elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
	elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
	evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
	elm_win_resize_object_add(ad->win, ad->conform);
	evas_object_show(ad->conform);


	Evas_Object* box = _create_box(ad->conform);


	Evas_Object* layout = _create_label_layout(box);
	elm_box_pack_end(box, layout);
	ad->label = _create_label(layout);
	elm_object_part_content_set(layout, "label_swallow", ad->label);


	Evas_Object* button = _create_button(box);
	evas_object_smart_callback_add(button, "clicked", _send_button_clicked_cb, ad);
	elm_box_pack_end(box, button);


	elm_object_content_set(ad->conform, box);


	// Show the window after the base GUI is set up
	evas_object_show(ad->win);
}

2. Set up the label layout with EDJ.

Create an EDJ file path by using the _app_get_resource() function. Pass the group name that is declared in the myapplication.edc file to the elm_layout_file_set() function.

static Evas_Object*
_create_label_layout(Evas_Object* parent)
{
	Evas_Object* layout = NULL;
	char edj_path[PATH_MAX] = {0, };


	_app_get_resource(_EDJ_FILE, edj_path, sizeof(edj_path));
	layout = elm_layout_add(parent);
	elm_layout_file_set(layout, edj_path, "label_layout");


	evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
	evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, 0);
	evas_object_show(layout);


	return layout;
}

3. Create the EDC file for the label layout.

Make a res/edje directory and create a myapplication.edc file in it using the IDE Project Explorer view (right-click and select New).

The EDC file is converted to the *.edj file after the project is built with the edje_cc EDC compiler. The edje_cc is a built-in tool in the SDK, so the conversion process works automatically. During the project build, the EDJ file is generated in the Debug/res/edje folder.

Look at the following EDC code. It contains a group named “label_layout” with 3 parts in it:

• The first and second parts are of the SPACER type, which is invisible. They define the padding, which has a fixed size of 45x120 and 45x30, with the first part located in the top left corner and the other in the bottom right corner.

• The third part is of the SWALLOW type, which can contain any UI components, even other containers, such as box, grid, layout, or scroller. The third part has a relative relationship with the other parts.

collections
{

	#define PADDING_WITH 45
	#define TOP_PADDING_HEIGHT 120
	#define BOTTOM_PADDING_HEIGHT 30

	group
	{
		name: "label_layout";
		parts
		{
			part
			{
				name: "left_top_padding";
				type: SPACER;
				description
				{
					state: "default" 0.0;
					min: PADDING_WITH TOP_PADDING_HEIGHT;
					max: PADDING_WITH TOP_PADDING_HEIGHT;
					align: 0 0;
				}
			}

			part
			{
				name: "right_bottom_padding";
				type: SPACER;
				description
				{
					state: "default" 0.0;
					min: PADDING_WITH BOTTOM_PADDING_HEIGHT;
					max: PADDING_WITH BOTTOM_PADDING_HEIGHT;
					align: 1 1;
				}
			}
			part
			{
				name: "label_swallow";
				type: SWALLOW;
				description
				{
					state: "default" 0.0;
					rel1{relative: 1 1; to:"left_top_padding";}
					rel2{relative: 0 0; to:"right_bottom_padding";}
				}
			}
		}
	}
}

4. Create the “bottom” style button.

You can create the “bottom” style button using the elm_object_style_set() function using the “bottom” style as the second parameter.

static Evas_Object*
_create_button(Evas_Object* parent)
{
	Evas_Object* button = elm_button_add(parent);
	elm_object_style_set(button, "bottom");
	// The box expands when its contents need more space
	evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0);

	// The button fills the available space on the horizontal axis and is
	// placed at the bottom of the vertical axis (1 is the end of the axis,
	// the coordinates start at (0, 0) on the top-left corner
	evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);

	// Set the text for the button
	elm_object_text_set(button, "Hello");
	evas_object_show(button);

	return button;
}

Set a clicked callback for the button.

Evas_Object* button = _create_button(box);
evas_object_smart_callback_add(button, "clicked", _send_button_clicked_cb, ad);	

In the callback, call the send_message() function in the sap.c file to send a hello message to an Android device.

static void
_send_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
	send_message("hello");
}

5. Display messages received from an Android device.

The show_message() function displays messages from the Android device in the label object.

void
show_message(const char *message, void* user_data)
{
	appdata_s* ad = (appdata_s*) user_data;

	const char align_tag[ ] = "<align=center>%s</align>";

	int buffer_size = strlen(message) + strlen(align_tag) + 1;
	char* text_buffer = malloc(buffer_size);
	memset(text_buffer, 0, buffer_size);

	snprintf(text_buffer, buffer_size, align_tag, message);

	if (ad->label)
	{
		elm_object_text_set(ad->label, text_buffer);
	}

	free(text_buffer);
}