File selector widget example

This code places two Elementary file selector widgets on a window. The one on the left is layouting file system items in a list, while the the other is layouting them in a grid.

The one having the majority of hooks of interest is on the left, which we create as follows:

   /* first file selector, in list mode */
   fs = elm_fileselector_add(win);
   /* enable the fs file name entry */
   elm_fileselector_is_save_set(fs, EINA_TRUE);
   /* custom list view */
   elm_fileselector_expandable_set(fs, EINA_FALSE);
   /* start the fileselector in the /tmp/ dir */
   elm_fileselector_path_set(fs, "/tmp");

   evas_object_size_hint_weight_set(fs, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(fs, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_box_pack_end(vbox, fs);
   evas_object_show(fs);

Note that we enable custom edition of file/directory selection, via the text entry it has on its bottom, via elm_fileselector_is_save_set(). It starts with the list view, which is the default, and we make it not expandable in place (elm_fileselector_expandable_set()), so that it replaces its view's contents with the current directory's entries each time one navigates to a different folder. For both of file selectors we are starting to list the contents found in the "/tmp" directory (elm_fileselector_path_set()).

Note the code setting it to "grid mode" and observe the differences in the file selector's views, in the example. We also hide the second file selector's Ok/Cancel buttons -- since it's there just to show the grid view (and navigation) -- via elm_fileselector_buttons_ok_cancel_set().

The "done" event, which triggers the callback below

/* 'done' cb */
static void
_fs_done(void        *data EINA_UNUSED,
         Evas_Object *obj EINA_UNUSED,
         void        *event_info)
{
   const char *selected = event_info;
   /* event_info contains the full path of the selected file or NULL
    * if none is selected (or cancel is pressed) */

   printf("We're done! Selected file is: %s\n",
          selected ? selected : "*none!*");

   elm_exit();
}

will be called at the time one clicks the "Ok"/"Cancel" buttons of the file selector (on the left). Note that it will print the path to the current selection, if any.

The "selected" event, which triggers the callback below

takes place when one selects a file (if the file selector is not under folders-only mode) or when one selects a folder (when in folders-only mode). Experiment it by selecting different file system entries.

What comes next is the code creating the three check boxes and two buttons below the file selector in the right. They will exercise a bunch of functions on the file selector's API, for the instance on the left. Experiment with them, specially the buttons, to get the difference between elm_fileselector_path_get() and elm_fileselector_selected_get().

Finally, there's the code adding the second file selector, on the right:

   /* second file selector, now with grid view */
   fs = elm_fileselector_add(win);
   elm_fileselector_is_save_set(fs, EINA_TRUE);
   elm_fileselector_mode_set(fs, ELM_FILESELECTOR_GRID);
   elm_fileselector_buttons_ok_cancel_set(fs, EINA_FALSE);
   elm_fileselector_path_set(fs, "/tmp");

   evas_object_size_hint_weight_set(fs, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(fs, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_box_pack_end(bx, fs);
   evas_object_show(fs);

Pay attention to the code setting it to "grid mode" and observe the differences in the file selector's views, in the example. We also hide the second file selector's Ok/Cancel buttons -- since it's there just to show the grid view (and navigation) -- via elm_fileselector_buttons_ok_cancel_set().

See the full example, whose window should look like this picture:

See the full source code for this example.