

Using extensions is extremely easy, discarding the part where you have to write the theme for them.

In the following example we'll be creating two buttons, one to load or unload our extension theme and one to cycle around three possible styles, one of which we created.

After including our one and only header we'll jump to the callback for the buttons. First one takes care of loading or unloading our extension file, relative to the default theme set (thus the {\ttfamily N\-U\-L\-L} in the functions first parameter). 
\begin{DoxyCodeInclude}
\textcolor{preprocessor}{#include <Elementary.h>}
\textcolor{keyword}{static} \textcolor{keywordtype}{void}
btn\_extension\_click\_cb(\textcolor{keywordtype}{void} *data, Evas\_Object *btn, \textcolor{keywordtype}{void} *ev)
\{
   \textcolor{keyword}{const} \textcolor{keywordtype}{char} *lbl = elm\_object\_text\_get(btn);

   \textcolor{keywordflow}{if} (!strncmp(lbl, \textcolor{stringliteral}{"Load"}, 4))
     \{
        elm_theme_extension_add(NULL, \textcolor{stringliteral}{"./theme\_example.edj"});
        elm\_object\_text\_set(btn, \textcolor{stringliteral}{"Unload extension"});
     \}
   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (!strncmp(lbl, \textcolor{stringliteral}{"Unload"}, 6))
     \{
        elm_theme_extension_del(NULL, \textcolor{stringliteral}{"./theme\_example.edj"});
        elm\_object\_text\_set(btn, \textcolor{stringliteral}{"Load extension"});
     \}
\}

\end{DoxyCodeInclude}


The second button, as we said before, will just switch around different styles. In this case we have three of them. The first one is our custom style, named after something very unlikely to find in the default theme. The other two styles are the standard and one more, anchor, which exists in the default and is similar to the default, except the button vanishes when the mouse is not over it. 
\begin{DoxyCodeInclude}
\textcolor{keyword}{static} \textcolor{keywordtype}{void}
btn\_style\_click\_cb(\textcolor{keywordtype}{void} *data, Evas\_Object *btn, \textcolor{keywordtype}{void} *ev)
\{
   \textcolor{keyword}{const} \textcolor{keywordtype}{char} *styles[] = \{
        \textcolor{stringliteral}{"chucknorris"},
        \textcolor{stringliteral}{"default"},
        \textcolor{stringliteral}{"anchor"}
   \};
   \textcolor{keyword}{static} \textcolor{keywordtype}{int} sel\_style = 0;

   sel\_style = (sel\_style + 1) % 3;
   elm_object_style_set(btn, styles[sel\_style]);
\}

\end{DoxyCodeInclude}


So what happens if the style switches to our custom one when the extension is loaded? Elementary falls back to the default for the widget.

And the main function, simply enough, will create the window, set the buttons and their callbacks, and just to begin with our button styled we're also loading our extension at the beginning. 
\begin{DoxyCodeInclude}
EAPI\_MAIN \textcolor{keywordtype}{int}
elm\_main(\textcolor{keywordtype}{int} argc, \textcolor{keywordtype}{char} *argv[])
\{
   Evas\_Object *win, *box, *btn;

   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);

   elm_theme_extension_add(NULL, \textcolor{stringliteral}{"./theme\_example.edj"});

   win = elm_win_util_standard_add(\textcolor{stringliteral}{"theme"}, \textcolor{stringliteral}{"Theme example"});
   elm_win_autodel_set(win, EINA\_TRUE);
   evas\_object\_resize(win, 300, 320);
   evas\_object\_show(win);

   box = elm_box_add(win);
   evas\_object\_size\_hint\_weight\_set(box, EVAS\_HINT\_EXPAND, EVAS\_HINT\_EXPAND);
   elm_win_resize_object_add(win, box);
   evas\_object\_show(box);

   btn = elm_button_add(win);
   elm\_object\_text\_set(btn, \textcolor{stringliteral}{"Unload extension"});
   elm_box_pack_end(box, btn);
   evas\_object\_show(btn);
   evas\_object\_smart\_callback\_add(btn, \textcolor{stringliteral}{"clicked"}, btn\_extension\_click\_cb, NULL);

   btn = elm_button_add(win);
   elm\_object\_text\_set(btn, \textcolor{stringliteral}{"Switch style"});
   elm_object_style_set(btn, \textcolor{stringliteral}{"chucknorris"});
   elm_box_pack_end(box, btn);
   evas\_object\_show(btn);
   evas\_object\_smart\_callback\_add(btn, \textcolor{stringliteral}{"clicked"}, btn\_style\_click\_cb, NULL);

   elm_run();
   elm_shutdown();

   \textcolor{keywordflow}{return} 0;
\}
ELM_MAIN()

\end{DoxyCodeInclude}


In this case we wanted to easily remove extensions, but all adding an extension does is tell Elementary where else it should look for themes when it can't find them in the default theme. Another way to do this is to set the theme search order using \hyperlink{group__Theme_ga3b3e6f54149ccdc8dfec774e05e8bf1c}{elm\-\_\-theme\-\_\-set()}, but this requires that the developer is careful not to override any user configuration. That can be helped by adding our theme to the end of whatever is already set, like in the following snippet. 
\begin{DoxyCode}
\textcolor{keywordtype}{char} buf[4096];
snprintf(buf, \textcolor{keyword}{sizeof}(buf), \textcolor{stringliteral}{"%s:./theme\_example.edj"}, elme\_theme\_get(NULL);
elm_theme_set(NULL, buf);
\end{DoxyCode}


If we were using overlays instead of extensions, the same thing applies, but the custom theme must be added to the front of the search path.

In the end, we should be looking at something like this\-:

 
\begin{DoxyImage}
\includegraphics{screenshots/theme_example_01}
\caption{width=}
\end{DoxyImage}


That's all. Boringly simple, and the full code in one piece can be found \hyperlink{theme_example_01_8c-example}{here}.

And the code for our extension is \hyperlink{theme_example_8edc-example}{here}. 