\chapter{Layout -\/ Predefined Layout}
\hypertarget{layout_example_02}{}\label{layout_example_02}\index{Layout -\/ Predefined Layout@{Layout -\/ Predefined Layout}}
This example shows how one can use the \doxylink{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 \doxysectlink{layout_example_02_c}{layout\+\_\+example\+\_\+02.\+c}{0}.

After setting up the window and background, we add the layout widget to the window. But instead of using \doxylink{group__Elm__Layout_ga8d1105463d52787a7b0ca8d7402cd3ea}{elm\+\_\+layout\+\_\+file\+\_\+set()} to load its theme from a custom theme file, we can use \doxylink{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 "{}layout"{}, group "{}application"{} and style "{}content-\/back-\/next"{} (since we want the back and next buttons).

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ layout\ =\ \mbox{\hyperlink{group__Elm__Layout_ga5bcf7d68b0401cc7d557ef7d297baa3e}{elm\_layout\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{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__Group_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_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(layout);}

\end{DoxyCodeInclude}
 This default theme contains only a "{}content"{} area named "{}elm.\+swallow.\+content"{}, 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 \doxylink{group__Elm__General_ga6f9574b798efcd454afdac6f2904f633}{elm\+\_\+object\+\_\+signal\+\_\+callback\+\_\+add()} function\+:


\begin{DoxyCodeInclude}{0}

\end{DoxyCodeInclude}
 In the \doxysectlink{layout_example_03}{Layout -\/ Signals and Size Changed}{0} you can see how to send signals to the layout with \doxylink{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,\ 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{\ \ \ Evas\_Object\ *icon\ =\ \mbox{\hyperlink{group__Elm__General_ga86b0088bbf018964a980f56e02ee2248}{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 "{}next"{} is clicked and backward when "{}back"{} is clicked.

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

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