[UI Sample] EDCformat Sample Overview

The [UI Sample] EDCformat sample application demonstrates how to use basic EDC blocks, such as group compositions of images, parts, and programs, how to load an image, and how to use an event to change the image to another image.

The sample uses UI components, such as elm_conformant, for view management, containers, such as elm_layout, for UI component management inside the view, and the IMAGE type (an EDC keyword) for the contents of the EDC view.

The following figure illustrates the main screen of the sample, its wireframe structure, and the UI component tree.

Figure: [UI Sample] EDCformat main screen

Application Layout

The create_base_gui() function creates the window, conformant, and layout. The EDC file is then inserted into the layout.

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

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

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

   // Create 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);
   eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
   elm_object_content_set(ad->conform, ad->layout);

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

EDC View

The following figure illustrates the EDC view wireframe and tree structure.

Figure: EDC view

The edcformat.edc file is used to set an image to the EDC view. The file defines simple EDC blocks, such as a group, parts, descriptions, and programs.

The following code is the entire EDC script of the edcformat.edc file:

collections
{
   group
   {
   name: "main";
      images
      {
         image: "before.png" COMP;
         image: "after.png" COMP;
      }
      parts
      {
         part
         {
            name: "base_frame";
            type: IMAGE;
            scale: 1;
            mouse_events: 1;
            description
            {
               state: "default" 0.0;
               align: 0.5 0.5;
               rel1 { relative: 0.0 0.0; offset: 0 0;}
               rel2 { relative: 1.0 1.0; offset: -1 -1;}
               image
               {
                  normal: "before.png";
               }
            }
            description
            {
               state: "changed" 0.0;
               align: 0.5 0.5;
               rel1 { relative: 0.0 0.0; offset: 0 0;}
               rel2 { relative: 1.0 1.0; offset: -1 -1;}
               image
               {
                  normal: "after.png";
               }
            }
         }
      }
      programs
      {
         program
         {
            name: "change_state";
            signal: "mouse,clicked,1";
            source: "base_frame";
            action: STATE_SET "changed" 0.0;
            target: "base_frame";
         }
      }
   }
}

In the code:

• The group block consists of images, parts, and programs. The group block is used to define the main EDC view and its functions.

• The images block is used to load images for this sample.

• The parts block represents the main EDC view and can consist of more than one part. A part is used for a component of the main EDC view. This sample uses only 1 part.

• The part block contains the name, type, scale, and mouse_events properties. The name property represents the part, while the type property represents the part type, such as RECT, TEXT, IMAGE, or SWALLOW. The scale property defines the scale of the part, and the mouse_events property defines, whether mouse click events are received.

• The description block the properties of the part. You can use more than one description in a part. In the description, the state property defines the representation of the description. The align property defines the position of the part in its parent container. The rel1 and rel2 are the positions of the top-left and bottom-right corners of the part's container. The image block defines the main image of the part.

• The programs block consists of programs. A program is typically used for an event, action, or animation. In this sample, the program block is used to assign a mouse click event and state change action to the base_frame. When the user clicks the main EDC view, a mouse click event occurs, which changes the state of the base_frame from default to changed, and then changes the image from before.png to after.png.

Figure: Image change