Mobile native

[UI Sample] LayoutSignal Sample Overview

The [UI Sample] LayoutSignal sample application demonstrates how to combine Edje code with C code, and how to manage communication between them using a signal mechanism. In this example, Edje receives a signal to display text from a button object, and returns another signal to C as a response.

This sample uses UI components, such as elm_layout component for signaling, elm_conformant and elm_layout for view management, and elm_button for the view content.

The following figure illustrates the main view of the [UI Sample] LayoutSignal sample application, its wireframe structure, and the UI component tree.

Figure: [UI Sample] LayoutSignal screen

[UI Sample] LayoutSignal screen

[UI Sample] LayoutSignal screen

Application Layout

The create_base_gui() function is responsible for creating the application layout:

static void
create_base_gui(appdata_s *ad)
{
   char edj_path[PATH_MAX] = {0, };

   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_conformant_set(ad->win, EINA_TRUE);
   elm_win_autodel_set(ad->win, EINA_TRUE);

   if (elm_win_wm_rotation_supported_get(ad->win))
   {
      int rots[4] = { 0, 90, 180, 270 };
      elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
   }

   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);
   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);

   // Base layout
   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);
   evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

   elm_object_content_set(ad->conform, ad->layout);

   create_content(ad);

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

The function starts by creating a window and then adds elm_conformant to decorate the window with an indicator.

The sample application has its own view style, so the app_get_resource() function is used to get the EDJ_FILE path for the layout file set. The elm_layout object is added in the conformant.

Main View

The main view is created using the create_content() function.

The following code creates the main view content and adds callbacks for sending and receiving signals:

static void
create_content(appdata_s *ad)
{
   Evas_Object *btn;

   btn = elm_button_add(ad->layout);
   elm_object_text_set(btn, "Send Signal");
   evas_object_show(btn);

   // Add callback for clicked event on the button object
   evas_object_smart_callback_add(btn, "clicked", send_clicked_cb, ad);
   // Add callback for the signal received from Edje
   elm_object_signal_callback_add(ad->layout, "text,change", "LayoutSignal", receive_clicked_cb, btn);

   elm_object_part_content_set(ad->layout, "center_button", btn);
   elm_object_part_text_set(ad->layout, "text", "send a signal from C to Edje");
}

A button object is added to the layout for sending a signal to Edje.

The evas_object_smart_callback_add() function is used to get the signal when the user clicks the button.

The function takes the following parameters:

  • btn: Smart object
  • "clicked": Event name
  • send_clicked_cb(): Callback function invoked when the event is triggered
  • ad: User data passed to the callback function

The elm_object_signal_callback_add() function is used to get the signal callbacks when the UI component object sends the signals. The function connects a callback function to a signal sent by the layout object. Globs can occur either in the emission name or source name.

  • ad->layout: Target object
  • text,change: Signal emission
  • LayoutSignal: Signal source
  • receive_clicked_cb(): Callback function invoked when the signal is sent
  • btn: User data passed to the callback function

Button Clicked View

The following code shows the callback function for the button clicked event:

static void
send_clicked_cb(void *data, Evas_Object *obj, void *event)
{
   // Button clicked event
   appdata_s *ad = data;

   elm_object_text_set(obj, "Disabled");
   elm_object_disabled_set(obj, EINA_TRUE);

   // Send a signal to Edje
   elm_object_signal_emit(ad->layout, "elm,state,text,show", "elm");
}

When the user clicks the button, the button text changes to "Disabled", and the button is disabled with the elm_object_disabled_set() function. Next, the elm_object_signal_emit() function sends a signal to the Edje object. An Edje application can respond to the signal by specifying matching signal and source fields.

  • ad->layout: Target object
  • elm,state,text,show: Signal emission
  • elm: Signal source

Figure: Button clicked view

Button clicked view

The program block is used to send the signal to Edje.

program
{
   name: "text_show";
   signal: "elm,state,text,show";
   source: "elm";
   action: STATE_SET "show" 0.0;
   transition: LINEAR ANIM_TIME;
   target: "text";
   after: "text_hide";
}

In the block:

  • signal [signal name]

    Specifies the signals that cause the program to run. The signal received must match the specified source to run. Signals can be blocked, but you can only use 1 signal keyword per program.

  • source [source name]

    Source of the accepted signal. Sources can be blocked, but you can only use 1 source keyword per program.

  • action [type] [param1] [param2]

    Action to be performed by the program. Only 1 action can be specified per program.

  • transition [type] [length] [[interp val 1]] [[interp val 2]] [[option]]

    Defines how transitions occur using the STATE_SET action. type is the transition style, and length is a double specifying the time (in seconds) in which to perform the transition.

  • target [target]

    Program or part on which the specified action acts. Multiple target keywords can be specified, but only 1 per target. SIGNAL_EMITs do not have targets.

  • after [after]

    Specifies a program to run after the current program completes. The source and signal parameters of a program run as an after are ignored. Multiple after statements can be specified per program.

For more information about the Edje blocks, see the Edje Data Collection reference.

The application first changes the state of the part and then runs the text_hide program.

part
{
   name: "text";
   type: TEXT;
   scale: 1;
   description
   {
      state: "default" 0.0;
      align: 0.0 0.0;
      rel1 { relative: 0.0 1.0; to: middle_padding; }
      rel2 { relative: 0.0 1.0; to: middle_padding; }
      text { font: "Tizen:style=regular"; size: 25; min: 1 1; }
      // Alpha value set as 255
      color: 0 0 0 255;
      visible: 0;
   }
   description
   {
      state: "show" 0.0;
      inherit: "default" 0.0;
      visible: 1;
      // Text show program make alpha value changed to 20 from 255
      color: 0 0 0 20;
   }
}

The alpha value of the text part is changed from 255 to 20 for 3 seconds (ANIM_TIME).

program
{
   name: "text_hide";
   signal: "elm,state,hide,text";
   source: "elm";
   action: STATE_SET "default" 0.0;
   target: "text";
   after: "text_restore";
}

The text_hide program renders the text part invisible. The application then runs the text_restore program.

The following code sends a signal to the C code:

program
{
   name: "text_restore";
   action: SIGNAL_EMIT "text,change" "LayoutSignal";
]}

After the transition, the text_restore program is run to send a signal to the C code. Edje invokes the callback function in the C code. The elm_object_text_set() function changes the button text from "Disabled" back to "Send Signal".

static void
receive_clicked_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
{
   // Edje sent signal to c
   Evas_Object *btn = data;

   elm_object_disabled_set(btn, EINA_FALSE);
   elm_object_text_set(btn, "Send Signal");
}
Go to top