

This example will show a flip with two rectangles on it(one blue, one green). Our example will allow the user to choose the animation the flip uses and to interact with it. To allow the user to choose the interaction mode we use radio buttons, we will however not explain them, if you would like to know more about radio buttons see \mbox{\hyperlink{group__Elm__Radio}{Radio}}.

We start our example with the usual setup and then create the 2 rectangles we will use in our flip\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{comment}{//Compile with:}}
\DoxyCodeLine{\textcolor{comment}{//gcc -\/o flip\_example\_01 flip\_example\_01.c -\/g `pkg-\/config -\/-\/cflags -\/-\/libs elementary`}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{preprocessor}{\#include <Elementary.h>}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static} \textcolor{keywordtype}{void} \_change\_interaction(\textcolor{keywordtype}{void} *data, \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}} *obj, \textcolor{keywordtype}{void} *event\_info);}
\DoxyCodeLine{}
\DoxyCodeLine{EAPI\_MAIN \textcolor{keywordtype}{int}}
\DoxyCodeLine{elm\_main(\textcolor{keywordtype}{int} argc \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}}, \textcolor{keywordtype}{char} **argv \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}} *win, *rect, *rect2, *flip, *radio, *radio2, *radio3;}
\DoxyCodeLine{}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__General_ga7a05f37fd3a019da5e26c5fc91fcd937}{elm\_policy\_set}}(\mbox{\hyperlink{group__Elm__General_ggaa16f3378ecdbf660fa378402e3c5a0a9a02fadb6faada04b19d0fa42c11a8d32a}{ELM\_POLICY\_QUIT}}, \mbox{\hyperlink{group__Elm__General_gga46af37e6ac2c406321060be827117196abbe0962d88ae12afe1a173da881f56cd}{ELM\_POLICY\_QUIT\_LAST\_WINDOW\_CLOSED}});}
\DoxyCodeLine{}
\DoxyCodeLine{   win = \mbox{\hyperlink{group__Elm__Win_gac75d7752662fab73d6420706ce5be996}{elm\_win\_util\_standard\_add}}(\textcolor{stringliteral}{"flip"}, \textcolor{stringliteral}{"Flip"});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Win_ga9a16a2f8c9fd5b6e9203ed9dcb53ea8b}{elm\_win\_autodel\_set}}(win, \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{}
\DoxyCodeLine{   rect = \mbox{\hyperlink{group__Evas__Object__Rectangle_ga4d80fc32ad1cac28428cebd65d746751}{evas\_object\_rectangle\_add}}(evas\_object\_evas\_get(win));}
\DoxyCodeLine{   evas\_object\_resize(rect, 150, 150);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_gae34bdcfd7f5100151f6ea8ef4a392949}{evas\_object\_color\_set}}(rect, 0, 0, 255, 255);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(rect);}
\DoxyCodeLine{}
\DoxyCodeLine{   rect2 = \mbox{\hyperlink{group__Evas__Object__Rectangle_ga4d80fc32ad1cac28428cebd65d746751}{evas\_object\_rectangle\_add}}(evas\_object\_evas\_get(win));}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_gae34bdcfd7f5100151f6ea8ef4a392949}{evas\_object\_color\_set}}(rect2, 0, 255, 0, 255);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(rect2);}

\end{DoxyCodeInclude}


The next thing to do is to create our flip and set it\textquotesingle{}s front and back content\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{   flip = \mbox{\hyperlink{group__Elm__Flip_ga938d30627914e0c9460b075ecf7212bc}{elm\_flip\_add}}(win);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(flip, \textcolor{stringliteral}{"front"}, rect);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__General_ga0531ec8867c72def7c780601764ca642}{elm\_object\_part\_content\_set}}(flip, \textcolor{stringliteral}{"back"}, rect2);}
\DoxyCodeLine{   evas\_object\_resize(flip, 150, 150);}
\DoxyCodeLine{   evas\_object\_move(flip, 10, 10);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(flip);}

\end{DoxyCodeInclude}


The next thing we do is set the interaction mode(which the user can later change) to the page animation\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{   elm\_flip\_interaction\_set(flip, ELM\_FLIP\_INTERACTION\_PAGE);}

\end{DoxyCodeInclude}


Setting a interaction mode however is not sufficient, we also need to choose which directions we allow interaction from, for this example we will use all of them\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_gad2a5cf019a65e536400f34ff79d9cb8f}{elm\_flip\_interaction\_direction\_enabled\_set}}(flip, ELM\_FLIP\_DIRECTION\_UP, \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_gad2a5cf019a65e536400f34ff79d9cb8f}{elm\_flip\_interaction\_direction\_enabled\_set}}(flip, ELM\_FLIP\_DIRECTION\_DOWN, \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_gad2a5cf019a65e536400f34ff79d9cb8f}{elm\_flip\_interaction\_direction\_enabled\_set}}(flip, ELM\_FLIP\_DIRECTION\_LEFT, \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_gad2a5cf019a65e536400f34ff79d9cb8f}{elm\_flip\_interaction\_direction\_enabled\_set}}(flip, ELM\_FLIP\_DIRECTION\_RIGHT, \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}

\end{DoxyCodeInclude}


We are also going to set the hintsize to the entire flip(in all directions) to make our flip very easy to interact with\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_ga0067cf060fc763952f0e227286309538}{elm\_flip\_interaction\_direction\_hitsize\_set}}(flip, ELM\_FLIP\_DIRECTION\_UP, 1);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_ga0067cf060fc763952f0e227286309538}{elm\_flip\_interaction\_direction\_hitsize\_set}}(flip, ELM\_FLIP\_DIRECTION\_DOWN, 1);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_ga0067cf060fc763952f0e227286309538}{elm\_flip\_interaction\_direction\_hitsize\_set}}(flip, ELM\_FLIP\_DIRECTION\_LEFT, 1);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Flip_ga0067cf060fc763952f0e227286309538}{elm\_flip\_interaction\_direction\_hitsize\_set}}(flip, ELM\_FLIP\_DIRECTION\_RIGHT, 1);}

\end{DoxyCodeInclude}


After that we create our radio buttons and start the main loop\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{   radio = \mbox{\hyperlink{group__Elm__Radio_gab905f905e9a90883d482035e457fc7ef}{elm\_radio\_add}}(win);}
\DoxyCodeLine{   elm\_object\_text\_set(radio, \textcolor{stringliteral}{"page"});}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__Radio_ga7e41ff1e8ad492f99f44efdbcc1fa1cc}{elm\_radio\_value\_set}}(radio, ELM\_FLIP\_INTERACTION\_PAGE);}
\DoxyCodeLine{   elm\_radio\_state\_value\_set(radio, ELM\_FLIP\_INTERACTION\_PAGE);}
\DoxyCodeLine{   evas\_object\_resize(radio, 55, 30);}
\DoxyCodeLine{   evas\_object\_move(radio, 10, 160);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(radio);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Smart__Object__Group_ga18a8b179f94d21b2b09e19db11741061}{evas\_object\_smart\_callback\_add}}(radio, \textcolor{stringliteral}{"changed"}, \_change\_interaction, flip);}
\DoxyCodeLine{}
\DoxyCodeLine{   radio2 = \mbox{\hyperlink{group__Elm__Radio_gab905f905e9a90883d482035e457fc7ef}{elm\_radio\_add}}(win);}
\DoxyCodeLine{   elm\_object\_text\_set(radio2, \textcolor{stringliteral}{"cube"});}
\DoxyCodeLine{   elm\_radio\_state\_value\_set(radio2, ELM\_FLIP\_INTERACTION\_CUBE);}
\DoxyCodeLine{   elm\_radio\_group\_add(radio2, radio);}
\DoxyCodeLine{   evas\_object\_resize(radio2, 55, 30);}
\DoxyCodeLine{   evas\_object\_move(radio2, 75, 160);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(radio2);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Smart__Object__Group_ga18a8b179f94d21b2b09e19db11741061}{evas\_object\_smart\_callback\_add}}(radio2, \textcolor{stringliteral}{"changed"}, \_change\_interaction, flip);}
\DoxyCodeLine{}
\DoxyCodeLine{   radio3 = \mbox{\hyperlink{group__Elm__Radio_gab905f905e9a90883d482035e457fc7ef}{elm\_radio\_add}}(win);}
\DoxyCodeLine{   elm\_object\_text\_set(radio3, \textcolor{stringliteral}{"rotate"});}
\DoxyCodeLine{   elm\_radio\_state\_value\_set(radio3, ELM\_FLIP\_INTERACTION\_ROTATE);}
\DoxyCodeLine{   elm\_radio\_group\_add(radio3, radio);}
\DoxyCodeLine{   evas\_object\_resize(radio3, 55, 30);}
\DoxyCodeLine{   evas\_object\_move(radio3, 140, 160);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(radio3);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Smart__Object__Group_ga18a8b179f94d21b2b09e19db11741061}{evas\_object\_smart\_callback\_add}}(radio3, \textcolor{stringliteral}{"changed"}, \_change\_interaction, flip);}
\DoxyCodeLine{}
\DoxyCodeLine{   evas\_object\_resize(win, 200, 200);}
\DoxyCodeLine{   \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga9cbc13661584e49fb9d9cdab514a1eeb}{evas\_object\_show}}(win);}
\DoxyCodeLine{}
\DoxyCodeLine{   \mbox{\hyperlink{group__Elm__General_gadf2553f83e6b0b9c7fbe054019a664a1}{elm\_run}}();}
\DoxyCodeLine{}
\DoxyCodeLine{   \textcolor{keywordflow}{return} 0;}
\DoxyCodeLine{\}}
\DoxyCodeLine{\mbox{\hyperlink{group__Elm__General_ga50fe52d513f7e89c9c770afd76de7ad9}{ELM\_MAIN}}()}

\end{DoxyCodeInclude}


When the user clicks a radio button a function that changes the interaction mode and animates the flip is called\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static} \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_change\_interaction(\textcolor{keywordtype}{void} *data, \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}} *obj, \textcolor{keywordtype}{void} *event\_info \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{   elm\_flip\_interaction\_set(data, elm\_radio\_state\_value\_get(obj));}
\DoxyCodeLine{   elm\_flip\_go(data, \mbox{\hyperlink{group__Elm__Flip_gga76b426fd8c390ceaa90c54caa0b8fb4ba366c6b869552249ede8d83270dc42cae}{ELM\_FLIP\_ROTATE\_XZ\_CENTER\_AXIS}});}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 \begin{DoxyNote}{Note}
The elm\+\_\+flip\+\_\+go() call here serves no purpose other than to illustrate that it\textquotesingle{}s possible to animate the flip programmatically.
\end{DoxyNote}
Our example will look like this\+:

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


\begin{DoxyNote}{Note}
Since this is an animated example the screenshot doesn\textquotesingle{}t do it justice, it is a good idea to compile it and see the animations. 
\end{DoxyNote}
