Index widget example 2

This code places an Elementary index widget on a window, indexing grid items.

The items are placed so that their labels don't follow any order, but the index itself is ordered (through elm_index_item_sorted_insert()). This is a complement to to the first example on indexes.

Here's the list of item labels to be used on the grid (in that order):

static const char *items[] =
{
   "Judith",
   "Paulina",
   "Cathy",
   "Vendella",
   "Naomi",
   "Ashley",
   "Stacey",
   "Gail"
};

In the interesting part of the code, here, we first instantiate the grid (more on grids on their examples) and, after creating our index, for each grid item we also create an index one to reference it:

   grid = elm_gengrid_add(win);
   elm_gengrid_item_size_set(grid, 150, 150);
 
   gic.item_style = "default";
   gic.func.text_get = _grid_label_get;
   gic.func.content_get = _grid_content_get;
   gic.func.state_get = NULL;
   gic.func.del = NULL;
 
   evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, grid);
   evas_object_show(grid);
 
   idx = elm_index_add(win);
   evas_object_size_hint_weight_set(idx, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, idx);
   evas_object_show(idx);
 
   for (i = 0; i < (sizeof(items) / sizeof(items[0])); i++)
     {
        char buf[32];
 
        gg_it = elm_gengrid_item_append(grid, &gic, (void *)(uintptr_t)i, NULL, NULL);
 
        /* indexing by first letters */
        snprintf(buf, sizeof(buf), "%c", items[i][0]);
        elm_index_item_sorted_insert(idx, buf, NULL, gg_it, _index_icmp, NULL);
     }
 
   evas_object_smart_callback_add(idx, "delay,changed", _index_changed, NULL);

The order in which they'll appear in the index, though, is alphabetical, becase of elm_index_item_sorted_insert() usage together with the comparing function, where we take the letters of each index item to base our ordering on. The parameters on _index_cmp have to be declared as void pointers because of the Eina_Compare_Cb prototype requisition, but in this case we know they'll be index item(Elm_Object_Item)'s:

/* ordering alphabetically */
static int
_index_icmp(const void *data1,
            const void *data2)
{
   const char *label1, *label2;
 
   const Elm_Object_Item *index_it1 = data1;
   const Elm_Object_Item *index_it2 = data2;
 
   label1 = elm_index_item_letter_get(index_it1);
   label2 = elm_index_item_letter_get(index_it2);
 
   return strcasecmp(label1, label2);
}

The last interesting bit is the callback in the "delay,changed" smart event, which will bring the given grid item to the grid's visible area:

static void
_index_changed(void        *data EINA_UNUSED,
               Evas_Object *obj EINA_UNUSED,
               void        *event_info)
{
   Elm_Object_Item *item = elm_object_item_data_get(event_info);
   elm_gengrid_item_bring_in(item, ELM_GENGRID_ITEM_SCROLLTO_IN);
}

Note how the grid will move kind of randomly while you move your mouse pointer held over the index from top to bottom – that's because of the the random order the items have in the grid itself.

This is how the example program's window looks like:

See the full source code for this example.