In this lesson we will finish third demo application. You may have a question: what to do with the index if the number of pages is more than 20. In this case, our advice is to use a circle scroller.

In this lesson we will show you how to add a round surface, and place a circle scroller there as well as how to use it to implement page flipping by bezel. Moreover, when there are a lot of pages, the scroller will be used like an alternative to the index widget.

To draw on the screen a round objects from the efl package, a special surface is required. For such purposes you may use Eext_Circle_Surface. Let’s create it:

Eext_Circle_Surface *surface = eext_circle_surface_conformant_add(ui->conform);

Such surface is created on the basis of one of the three graphic components: a conformant, a naviframe, or a layout. There are corresponding functions for this:

Eext_Circle_Surface *eext_circle_surface_conformant_add(Evas_Object *conform);
Eext_Circle_Surface *eext_circle_surface_naviframe_add(Evas_Object *naviframe);
Eext_Circle_Surface *eext_circle_surface_layout_add(Evas_Object *layout);

Calling these functions changes the styles of the components that are passed as arguments. Do not change the style for the component after creating a circle surface on it. For example, in the case with the function for a layout, if you use a particular theme and create a round surface on this layout, this will change your style to a round style, and you will not be able to use the desirable areas of the layout. Therefore, create a surface on the conformant, but if you still are going to use the function for the layout, you can simply create a separate layout object particularly for a circle surface.

Evas_Object *surface_layout = elm_layout_add(ui->scroller);
Eext_Circle_Surface *surface = eext_circle_surface_layout_add(surface_layout);

In this case, scroller will be a parent for this layout and it will track the layout deletion from the surface and accordingly the removal of the surface itself. In your application, the conformant will track it.

Create a circle scroller. This is a widget container from the extension package of the efl library.

In the structure with the main widgets, add a pointer to the circle scroller, since further you will work with it from other functions.

Evas_Object *circle_scroller;

There will be the following contents of your structure with graphical components:

typedef struct _UIData {
   Evas_Object *win;
   Evas_Object *conform;
   Evas_Object *layout;
   Evas_Object *scroller;
   Evas_Object *circle_scroller;
   Evas_Object *box;
   Evas_Object *padding_start;
   Evas_Object *padding_end;
} UIData;

To create a circle scroller, use the following function:

ui->circle_scroller = eext_circle_object_scroller_add(ui->scroller,surface);

Place content for scrolling into usual scroller and pass it to the function as the first parameter. A circle scroller will use the scroll context of the usual scroller. The second parameter is the surface for drawing round objects. Adjust the visibility of the scroll bars. In this example, only the horizontal scroll bar is needed.

eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                       ELM_SCROLLER_POLICY_ON,
                                       ELM_SCROLLER_POLICY_OFF);

In order to make scroller react on the bezel actions, you should activate this property, by calling the following function:

eext_rotary_object_event_activated_set(ui->circle_scroller, EINA_TRUE);

After this call, the manipulation with the bezel will flip pages.

To create a circle scroller, use function below:

static void
_circle_scroller_create(UIData *ui)
{
   Eext_Circle_Surface *surface = eext_circle_surface_conformant_add(ui->conform);

   ui->circle_scroller = eext_circle_object_scroller_add(ui->scroller, surface);

   eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                          ELM_SCROLLER_POLICY_ON,
                                          ELM_SCROLLER_POLICY_OFF);

   eext_rotary_object_event_activated_set(ui->circle_scroller, EINA_TRUE);
}

Call it during an ordinary scroller creation.

static void
_scroller_create(UIData *ui)
{
   ...

   _circle_scroller_create(ui);

   ...
}

You can run the function and see the result.

Now as you can see, by scrolling the bezel, you are flipping pages. But there is a small drawback - the scroller and index are simultaneously visible on the screen. Create a function, with constant that contains the number of pages (whether it more than 20) to make decision: at one point of time - use a scroller or index widget.

static void
_page_indicator_create(UIData *ui)
{
   const int MAX_INDEX_STYLE_ITEM = 20;

   if (PAGES_COUNT > MAX_INDEX_STYLE_ITEM)
     {
        eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                               ELM_SCROLLER_POLICY_ON,
                                               ELM_SCROLLER_POLICY_OFF);
     }
   else
     {
        ui->index = _index_create(ui);
        elm_object_part_content_set(ui->layout, "elm.swallow.content", ui->index);
        eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                               ELM_SCROLLER_POLICY_OFF,
                                               ELM_SCROLLER_POLICY_OFF);
     }
}

A circle scroller will be created any way, but you may hide or display its scroll bars, since it allows scrolling through the pages with a bezel. But the index will be created only in case when there will be no more than 20 pages. The index creation was moved here, so now in the place where you create the layout content, you should update the layout creation function.

static void
_layout_create(UIData *ui)
{
   ...

   _scroller_create(ui);
   elm_object_part_content_set(ui->layout, "elm.swallow.bg", ui->scroller);

   _page_indicator_create(ui);

   ...
}

Run the application with 10 elements and look at the result.

And now run with 25 elements.

Demo application number 3 is completed. The full code of this lesson is available here WearLesson023