

A button is simple, you click on it and something happens. That said, we\textquotesingle{}ll go through an example to show in detail the button API less commonly used.

In the end, we\textquotesingle{}ll be presented with something that looks like this\+:

 
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth]{screenshots/button_01}}
\end{DoxyImageNoCaption}


The full code of the example is \mbox{\hyperlink{button_example_01_8c-example}{here}} and we will follow here with a rundown of it.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{preprocessor}{\#include\ <Elementary.h>}}
\DoxyCodeLine{\textcolor{keyword}{typedef}\ \textcolor{keyword}{struct}}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *mid;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *icon\_still;}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{struct}}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *up;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *down;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *left;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *right;}
\DoxyCodeLine{\ \ \ \ \ \}\ cursors;}
\DoxyCodeLine{\}\ App\_Data;}

\end{DoxyCodeInclude}
 We have several buttons to set different times for the autorepeat timeouts of the buttons that use it and a few more that we keep track of in our data struct. The mid button doesn\textquotesingle{}t do much, just moves around according to what other buttons the user presses. Then four more buttons to move the central one, and we\textquotesingle{}re also keeping track of the icon set in the middle button, since when this one moves, we change the icon, and when movement is finished (by releasing one of the four arrow buttons), we set back the normal icon. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_btn\_cursors\_release\_cb(\textcolor{keywordtype}{void}\ *data,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *btn\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \textcolor{keywordtype}{void}\ *ev\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ App\_Data\ *app\ =\ data;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(app-\/>mid,\ \textcolor{stringliteral}{"{}icon"{}},\ app-\/>icon\_still);}
\DoxyCodeLine{\ \ \ app-\/>icon\_still\ =\ NULL;}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 Keeping any of those four buttons pressed will trigger their autorepeat callback, where we move the button doing some size hint magic. To understand how that works better, refer to the Elm\+\_\+\+Box documentation. Also, the first time the function is called, we change the icon in the middle button, using elm\+\_\+object\+\_\+content\+\_\+unset() first to keep the reference to the previous one, so we don\textquotesingle{}t need to recreate it when we are done moving it. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_btn\_cursors\_move\_cb(\textcolor{keywordtype}{void}\ *data,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *btn,\ \textcolor{keywordtype}{void}\ *ev\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ App\_Data\ *app\ =\ data;}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{double}\ ax,\ ay;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (!app-\/>icon\_still)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *icon;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ app-\/>icon\_still\ =\ elm\_object\_content\_unset(app-\/>mid);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_gae66f71e09a0dc71675f15ebff6765c64}{evas\_object\_hide}}(app-\/>icon\_still);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ icon\ =\ \mbox{\hyperlink{group__Elm__Icon_gac369f2d67be417e5cff81e8f001ff326}{elm\_icon\_add}}(app-\/>mid);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Icon_gab764b4c6c90543f254c013eff6a6db66}{elm\_icon\_standard\_set}}(icon,\ \textcolor{stringliteral}{"{}chat"{}});}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(app-\/>mid,\ \textcolor{stringliteral}{"{}icon"{}},\ icon);}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga3d6463fffbcf8ce0307c3c28eebde1f3}{evas\_object\_size\_hint\_align\_get}}(app-\/>mid,\ \&ax,\ \&ay);}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (btn\ ==\ app-\/>cursors.up)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ ay\ -\/=\ 0.05;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{keywordflow}{if}\ (ay\ <\ 0.0)}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ ay\ =\ 0.0;}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}\ \textcolor{keywordflow}{if}\ (btn\ ==\ app-\/>cursors.down)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ ay\ +=\ 0.05;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{keywordflow}{if}\ (ay\ >\ 1.0)}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ ay\ =\ 1.0;}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}\ \textcolor{keywordflow}{if}\ (btn\ ==\ app-\/>cursors.left)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ ax\ -\/=\ 0.05;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{keywordflow}{if}\ (ax\ <\ 0.0)}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ ax\ =\ 0.0;}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}\ \textcolor{keywordflow}{if}\ (btn\ ==\ app-\/>cursors.right)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ ax\ +=\ 0.05;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{keywordflow}{if}\ (ax\ >\ 1.0)}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ ax\ =\ 1.0;}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(app-\/>mid,\ ax,\ ay);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 One more callback for the option buttons, that just sets the timeouts for the different autorepeat options.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_btn\_options\_cb(\textcolor{keywordtype}{void}\ *data,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *btn,\ \textcolor{keywordtype}{void}\ *ev\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{char}\ *ptr;}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{double}\ t;}
\DoxyCodeLine{\ \ \ App\_Data\ *app\ =\ data;}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{const}\ \textcolor{keywordtype}{char}\ *lbl\ =\ elm\_object\_text\_get(btn);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ ptr\ =\ strchr(lbl,\ \textcolor{charliteral}{':'});}
\DoxyCodeLine{\ \ \ ptr\ +=\ 2;}
\DoxyCodeLine{\ \ \ t\ =\ strtod(ptr,\ NULL);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (!strncmp(lbl,\ \textcolor{stringliteral}{"{}Initial"{}},\ 7))}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gadbffea6d39be360a72f094c267b95c7a}{elm\_button\_autorepeat\_initial\_timeout\_set}}(app-\/>cursors.up,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gadbffea6d39be360a72f094c267b95c7a}{elm\_button\_autorepeat\_initial\_timeout\_set}}(app-\/>cursors.down,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gadbffea6d39be360a72f094c267b95c7a}{elm\_button\_autorepeat\_initial\_timeout\_set}}(app-\/>cursors.left,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gadbffea6d39be360a72f094c267b95c7a}{elm\_button\_autorepeat\_initial\_timeout\_set}}(app-\/>cursors.right,\ t);}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}\ \textcolor{keywordflow}{if}\ (!strncmp(lbl,\ \textcolor{stringliteral}{"{}Gap"{}},\ 3))}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gaf97340cba16cf46497f3dd2dce28ed8a}{elm\_button\_autorepeat\_gap\_timeout\_set}}(app-\/>cursors.up,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gaf97340cba16cf46497f3dd2dce28ed8a}{elm\_button\_autorepeat\_gap\_timeout\_set}}(app-\/>cursors.down,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gaf97340cba16cf46497f3dd2dce28ed8a}{elm\_button\_autorepeat\_gap\_timeout\_set}}(app-\/>cursors.left,\ t);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Button_gaf97340cba16cf46497f3dd2dce28ed8a}{elm\_button\_autorepeat\_gap\_timeout\_set}}(app-\/>cursors.right,\ t);}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 And the main function, which does some setting up of the buttons in boxes to make things work. Here we\textquotesingle{}ll go through some snippets only.

For the option buttons, it\textquotesingle{}s just the button with its label and callback. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ btn\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(btn,\ \textcolor{stringliteral}{"{}Initial:\ 0.0"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box2,\ btn);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(btn);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(btn,\ \textcolor{stringliteral}{"{}clicked"{}},\ \_btn\_options\_cb,\ \&data);}

\end{DoxyCodeInclude}
 For the ones that move the central button, we have no labels. There are icons instead, and the autorepeat option is toggled. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ btn\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Button_ga4c5373e4d6c955c6480ee3f21a7dc1fa}{elm\_button\_autorepeat\_set}}(btn,\ \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Button_gadbffea6d39be360a72f094c267b95c7a}{elm\_button\_autorepeat\_initial\_timeout\_set}}(btn,\ 1.0);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Button_gaf97340cba16cf46497f3dd2dce28ed8a}{elm\_button\_autorepeat\_gap\_timeout\_set}}(btn,\ 0.5);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(btn,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ 0.0);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(btn,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ 0.0);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box,\ btn);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(btn);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(btn,\ \textcolor{stringliteral}{"{}repeated"{}},\ \_btn\_cursors\_move\_cb,\ \&data);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(btn,\ \textcolor{stringliteral}{"{}unpressed"{}},\ \_btn\_cursors\_release\_cb,}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \&data);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ icon\ =\ \mbox{\hyperlink{group__Elm__Icon_gac369f2d67be417e5cff81e8f001ff326}{elm\_icon\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Icon_gab764b4c6c90543f254c013eff6a6db66}{elm\_icon\_standard\_set}}(icon,\ \textcolor{stringliteral}{"{}arrow\_up"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(btn,\ \textcolor{stringliteral}{"{}icon"{}},\ icon);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ data.cursors.up\ =\ btn;}

\end{DoxyCodeInclude}
 And just to show the mid button, which doesn\textquotesingle{}t have anything special. 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ btn\ =\ \mbox{\hyperlink{group__Elm__Button_gaf5caf46d74c4e122a18da323935d25e4}{elm\_button\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(btn,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(box2,\ btn);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(btn);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ icon\ =\ \mbox{\hyperlink{group__Elm__Icon_gac369f2d67be417e5cff81e8f001ff326}{elm\_icon\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Icon_gab764b4c6c90543f254c013eff6a6db66}{elm\_icon\_standard\_set}}(icon,\ \textcolor{stringliteral}{"{}close"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(btn,\ \textcolor{stringliteral}{"{}icon"{}},\ icon);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ data.mid\ =\ btn;}

\end{DoxyCodeInclude}
 And we are done. 