This example shows how to create a prefs widget with Elementary, where some prefs item values are changed, some actions take place on an object different than the prefs widget (an Edge object).

With this new object, we\textquotesingle{}re also exemplifying the prefs SWALLOW item type, as the Edje object is put inside the prefs widget\textquotesingle{}s viewport.

It also shows how subpages can be created using the prefs PAGE item type.

Explain step by step the .EDC file is out of scope, the source code can be found at \mbox{\hyperlink{prefs_example_03_edc}{prefs\+\_\+example\+\_\+03.\+edc}}\hypertarget{prefs_example_03_prefs-epc-03}{}\doxysection{Creating items on EPC file}\label{prefs_example_03_prefs-epc-03}


First we\textquotesingle{}ll create prefs items on .EPC file that we\textquotesingle{}ll use later on the .C file.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{collection\ }
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ page}
\DoxyCodeLine{\ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ name:\ "{}main"{};}
\DoxyCodeLine{\ \ \ \ \ \ version:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ title:\ "{}Preferences\ Widget"{};}
\DoxyCodeLine{\ \ \ \ \ \ subtitle:\ "{}Example\ 03"{};}
\DoxyCodeLine{\ \ \ \ \ \ widget:\ "{}elm/vertical\_frame"{};}

\end{DoxyCodeInclude}
 In the following part, we create an item of the PAGE type, that will create a subpage inside the main page. The source parameter is used to set which page will be used to fill the subpage, in this example, the page named \char`\"{}configpage\char`\"{} will be used.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ \ \ \ items\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}config"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ PAGE;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ source:\ "{}configpage"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}sep"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ SEPARATOR;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}

\end{DoxyCodeInclude}
 Now we create a SWALLOW type item, that, as the name suggests, will swallow an Evas\+\_\+\+Object.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}swal"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ SWALLOW;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}

\end{DoxyCodeInclude}
 Now we create the page that will be used to fill the item \char`\"{}config\char`\"{} of the main page. It has another two subpages and a SEPARATOR item arranged horizontally so we could achieve the desired layout.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ page}
\DoxyCodeLine{\ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ name:\ "{}configpage"{};}
\DoxyCodeLine{\ \ \ \ \ \ version:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ title:\ "{}Preferences"{};}
\DoxyCodeLine{\ \ \ \ \ \ widget:\ "{}elm/horizontal\_box"{};}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ items\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}options"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ PAGE;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ source:\ "{}optionspage"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}sep2"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ SEPARATOR;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}buttons"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ PAGE;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ source:\ "{}buttonspage"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \}}

\end{DoxyCodeInclude}
 Then we create the pages used by the \char`\"{}configpage\char`\"{} page, whose items were covered in \mbox{\hyperlink{prefs_example_01}{Prefs Example 01}} and \mbox{\hyperlink{prefs_example_02}{Prefs Example 02}}.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ page}
\DoxyCodeLine{\ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ name:\ "{}optionspage"{};}
\DoxyCodeLine{\ \ \ \ \ \ version:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ title:\ "{}Options"{};}
\DoxyCodeLine{\ \ \ \ \ \ widget:\ "{}elm/vertical\_box"{};}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ items\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}animation"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ BOOL;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ persistent:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ label:\ "{}Animation"{};}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ bool\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ default:\ true;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}animation\_time"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ FLOAT;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ persistent:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ label:\ "{}Animation\ Time"{};}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ float\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ default:\ 0.6;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ min:\ 0.0;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ max:\ 1.0;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ page}
\DoxyCodeLine{\ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ name:\ "{}buttonspage"{};}
\DoxyCodeLine{\ \ \ \ \ \ version:\ 1;}
\DoxyCodeLine{\ \ \ \ \ \ title:\ "{}Actions"{};}
\DoxyCodeLine{\ \ \ \ \ \ widget:\ "{}elm/vertical\_box"{};}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ items\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}save"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ SAVE;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ label:\ "{}Save"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ item\ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ name:\ "{}reset"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ type:\ RESET;}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ label:\ "{}Reset"{};}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \ \ \ \}}
\DoxyCodeLine{\ \ \ \}}

\end{DoxyCodeInclude}
 \hypertarget{prefs_example_03_prefs-c-03}{}\doxysection{Handling items on C File}\label{prefs_example_03_prefs-c-03}


Now we\textquotesingle{}re handling the .C file and first we\textquotesingle{}ll create a layout setting the edje file to after a prefs item swallows it.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ layout\ =\ \mbox{\hyperlink{group__Elm__Layout_ga5bcf7d68b0401cc7d557ef7d297baa3e}{elm\_layout\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Layout_ga8d1105463d52787a7b0ca8d7402cd3ea}{elm\_layout\_file\_set}}(layout,\ \textcolor{stringliteral}{"{}prefs\_example\_03.edj"{}},\ \textcolor{stringliteral}{"{}prefs\_edje"{}});}

\end{DoxyCodeInclude}
 Here we create the prefs widget, add smart callbacks and create the prefs data handle.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ prefs\ =\ \mbox{\hyperlink{group__Elm__Prefs_ga403f94943d89e57101f034ed381c5134}{elm\_prefs\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(prefs,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gacad94595f83580c18908cb3b69b08d1a}{evas\_object\_resize}}(prefs,\ WIDTH,\ HEIGHT);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(prefs);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(prefs,\ \textcolor{stringliteral}{"{}page,loaded"{}},\ \_page\_loaded\_cb,}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ layout);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(prefs,\ \textcolor{stringliteral}{"{}item,changed"{}},\ \_item\_changed\_cb,}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ layout);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ elm\_prefs\_autosave\_set(prefs,\ \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ prefs\_data\ =}
\DoxyCodeLine{\ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Prefs_ga3f5a79c40a17ca1565503a30f810c463}{elm\_prefs\_data\_new}}(\textcolor{stringliteral}{"{}./prefs\_example\_03.cfg"{}},\ NULL,\ \mbox{\hyperlink{group__Eet__File__Group_ggaa8e1a7af50fefaf15eb2f69543d24998a763d29c19960a4e0d4eb7bc7bb512481}{EET\_FILE\_MODE\_READ\_WRITE}});}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ elm\_prefs\_file\_set(prefs,\ \textcolor{stringliteral}{"{}prefs\_example\_03.epb"{}},\ NULL);}
\DoxyCodeLine{\ \ \ elm\_prefs\_data\_set(prefs,\ prefs\_data);}

\end{DoxyCodeInclude}
 Now we \char`\"{}swallow\char`\"{} the layout into the SWALLOW item of the prefs widget.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ elm\_prefs\_item\_swallow(prefs,\ \textcolor{stringliteral}{"{}main:swal"{}},\ layout);}

\end{DoxyCodeInclude}
 Page loaded and item changed callbacks will call update functions.

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\_page\_loaded\_cb(\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{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *layout\ =\ data;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \_update(obj,\ layout);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_item\_changed\_cb(\textcolor{keywordtype}{void}\ *data,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *obj,\ \textcolor{keywordtype}{void}\ *event\_info)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{const}\ \textcolor{keywordtype}{char}\ *item\ =\ event\_info;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *layout\ =\ data;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (!strcmp(item,\ \textcolor{stringliteral}{"{}main:config:options:animation\_time"{}}))}
\DoxyCodeLine{\ \ \ \ \ \_update\_animation\_time(obj,\ layout);}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}\ \textcolor{keywordflow}{if}\ (!strcmp(item,\ \textcolor{stringliteral}{"{}main:config:options:animation"{}}))}
\DoxyCodeLine{\ \ \ \ \ \_update\_animation(obj,\ layout);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 These update functions will be called in order to get the new value from the items and pass it as signal to edje handle it and affects on animation.

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\_update(\mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *prefs,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *layout)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \_update\_animation(prefs,\ layout);}
\DoxyCodeLine{\ \ \ \_update\_animation\_time(prefs,\ layout);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 In this function we\textquotesingle{}ll get the checkbox (bool) value and start or stop the animation on edje.

 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\_update\_animation(\mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *prefs,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *layout)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{struct__Eina__Value}{Eina\_Value}}\ value;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Eina__Types__Group_ga3fe0caf72e93b1bab1ca8ee3ccf3f226}{Eina\_Bool}}\ animation;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ elm\_prefs\_item\_value\_get(prefs,\ \textcolor{stringliteral}{"{}main:config:options:animation"{}},\ \&value);}
\DoxyCodeLine{\ \ \ eina\_value\_get(\&value,\ \&animation);}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (animation)}
\DoxyCodeLine{\ \ \ \ \ \mbox{\hyperlink{group__Elm__Layout_gaa39b36a49850270dd692ce135b2979f3}{elm\_layout\_signal\_emit}}(layout,\ \textcolor{stringliteral}{"{}start"{}},\ \textcolor{stringliteral}{"{}animation"{}});}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{else}}
\DoxyCodeLine{\ \ \ \ \ \mbox{\hyperlink{group__Elm__Layout_gaa39b36a49850270dd692ce135b2979f3}{elm\_layout\_signal\_emit}}(layout,\ \textcolor{stringliteral}{"{}stop"{}},\ \textcolor{stringliteral}{"{}animation"{}});}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 In this function we\textquotesingle{}ll get the slider (float item) value and send it as animation time to edje.


\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\_update\_animation\_time(\mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *prefs,\ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *layout)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{struct__Eina__Value}{Eina\_Value}}\ value;}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{float}\ animation\_time;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{struct__Edje__Message__Float}{Edje\_Message\_Float}}\ msg;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ elm\_prefs\_item\_value\_get(prefs,\ \textcolor{stringliteral}{"{}main:config:options:animation\_time"{}},\ \&value);}
\DoxyCodeLine{\ \ \ eina\_value\_get(\&value,\ \&animation\_time);}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{if}\ (animation\_time\ <\ 0.01)\ animation\_time\ =\ 0.01;}
\DoxyCodeLine{\ \ \ msg.\mbox{\hyperlink{struct__Edje__Message__Float_a6f297371783ce318fa8d153b634a2b3e}{val}}\ =\ animation\_time;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Edje__Object__Communication__Interface__Message_gac89a6483d3197cbe6268c83b04e8b525}{edje\_object\_message\_send}}(\mbox{\hyperlink{group__Elm__Layout_ga1bdc387d277400861d72a3f6d43c5c03}{elm\_layout\_edje\_get}}(layout),\ \mbox{\hyperlink{group__Edje__Object__Communication__Interface__Message_ggad0763549d687c9cfc6df685ac077d967a137b317694c831ff5d34669e1f045f87}{EDJE\_MESSAGE\_FLOAT}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ MSG\_ID\_VEL,\ \&msg);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 Here we finish the example. The full source code can be found on \mbox{\hyperlink{prefs_example_03_c}{prefs\+\_\+example\+\_\+03.\+c}}, \mbox{\hyperlink{prefs_example_03_epc}{prefs\+\_\+example\+\_\+03.\+epc}} and \mbox{\hyperlink{prefs_example_03_edc}{prefs\+\_\+example\+\_\+03.\+edc}} 