This example shows how one can use the \mbox{\hyperlink{group__Elm__Layout}{Layout}} with a predefined theme layout to add a back and next button to a simple window. The full source code for this example can be found at \mbox{\hyperlink{layout_example_02_c}{layout\+\_\+example\+\_\+02.\+c}}.

After setting up the window and background, we add the layout widget to the window. But instead of using \mbox{\hyperlink{group__Elm__Layout_ga8d1105463d52787a7b0ca8d7402cd3ea}{elm\+\_\+layout\+\_\+file\+\_\+set()}} to load its theme from a custom theme file, we can use \mbox{\hyperlink{group__Elm__Layout_ga8f28efed82872f5c57a61db5c81d4eb3}{elm\+\_\+layout\+\_\+theme\+\_\+set()}} to load one of the predefined layouts that come with elementary. Particularly on this example, we load the them of class \char`\"{}layout\char`\"{}, group \char`\"{}application\char`\"{} and style \char`\"{}content-\/back-\/next\char`\"{} (since we want the back and next buttons).

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{   layout = \mbox{\hyperlink{group__Elm__Layout_gaca5aee4ad4d92c68f13d1080c70baf8b}{elm\_layout\_add}}(win);}
\DoxyCodeLine{   evas\_object\_size\_hint\_weight\_set(layout, \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}}, \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Win_ga505d6bd217e5ee01e82b548ec35986eb}{elm\_win\_resize\_object\_add}}(win, layout);}
\DoxyCodeLine{   \textcolor{keywordflow}{if} (!\mbox{\hyperlink{group__Elm__Layout_ga8f28efed82872f5c57a61db5c81d4eb3}{elm\_layout\_theme\_set}}(}
\DoxyCodeLine{         layout, \textcolor{stringliteral}{"layout"}, \textcolor{stringliteral}{"application"}, \textcolor{stringliteral}{"content-\/back-\/next"}))}
\DoxyCodeLine{     fprintf(stderr, \textcolor{stringliteral}{"Failed to set layout"});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(layout);}

\end{DoxyCodeInclude}


This default theme contains only a \char`\"{}content\char`\"{} area named \char`\"{}elm.\+swallow.\+content\char`\"{}, where we can add any widget (it can be even a container widget, like a box, frame, list, or even another layout). Since we just want to show the resulting layout, we add a simple icon to it\+:


\begin{DoxyCodeInclude}{0}

\end{DoxyCodeInclude}


This default layout also provides some signals when the next and prev buttons are clicked. We can register callbacks to them with the \mbox{\hyperlink{group__Elm__General_ga6f9574b798efcd454afdac6f2904f633}{elm\+\_\+object\+\_\+signal\+\_\+callback\+\_\+add()}} function\+:


\begin{DoxyCodeInclude}{0}

\end{DoxyCodeInclude}


In the \mbox{\hyperlink{layout_example_03}{Layout -\/ Signals and Size Changed}} you can see how to send signals to the layout with \mbox{\hyperlink{group__Elm__General_ga1beada7edf5d714c0dba5459bcc993fc}{elm\+\_\+object\+\_\+signal\+\_\+emit()}}.

Now our callback just changes the picture being displayed when one of the buttons are clicked\+:

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static} \textcolor{keyword}{const} \textcolor{keywordtype}{char} *images[] = \{ \textcolor{stringliteral}{"home"}, \textcolor{stringliteral}{"close"}, \textcolor{stringliteral}{"arrow\_up"}, \textcolor{stringliteral}{"arrow\_down"}, NULL \};}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{struct }\_App \{}
\DoxyCodeLine{     \textcolor{keywordtype}{int} current;}
\DoxyCodeLine{\};}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static} \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_signal\_cb(\textcolor{keywordtype}{void} *data, \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}} *o, \textcolor{keyword}{const} \textcolor{keywordtype}{char} *emission, \textcolor{keyword}{const} \textcolor{keywordtype}{char} *source \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{   \textcolor{keyword}{struct }\_App *app = data;}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}} *icon = \mbox{\hyperlink{group__Elm__General_ga32413f4d59d8232cd362a922a281abf1}{elm\_object\_part\_content\_get}}(o, \textcolor{stringliteral}{"elm.swallow.content"});}
\DoxyCodeLine{}
\DoxyCodeLine{   printf(\textcolor{stringliteral}{"signal received\(\backslash\)n"});}
\DoxyCodeLine{}
\DoxyCodeLine{   \textcolor{keywordflow}{if} (!strcmp(\textcolor{stringliteral}{"elm,action,back"}, emission))}
\DoxyCodeLine{     app-\/>current-\/-\/;}
\DoxyCodeLine{   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (!strcmp(\textcolor{stringliteral}{"elm,action,next"}, emission))}
\DoxyCodeLine{     app-\/>current++;}
\DoxyCodeLine{}
\DoxyCodeLine{   \textcolor{keywordflow}{if} (app-\/>current < 0)}
\DoxyCodeLine{     app-\/>current = (\textcolor{keyword}{sizeof}(images) / \textcolor{keyword}{sizeof}(images[0])) -\/ 2;}
\DoxyCodeLine{   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (images[app-\/>current] == NULL)}
\DoxyCodeLine{     app-\/>current = 0;}
\DoxyCodeLine{}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Icon_gab764b4c6c90543f254c013eff6a6db66}{elm\_icon\_standard\_set}}(icon, images[app-\/>current]);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}


It\textquotesingle{}s possible to see that it gets the name of the image being shown from the array of image names, going forward on this array when \char`\"{}next\char`\"{} is clicked and backward when \char`\"{}back\char`\"{} is clicked.

A screenshot of this example can be seen on\+:

 
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth]{layout_example_02}}
\end{DoxyImageNoCaption}
 