\chapter{Panel example}
\hypertarget{tutorial_panel}{}\label{tutorial_panel}\index{Panel example@{Panel example}}


In this example will have 3 panels, one for each possible orientation. Two of our panels will start out hidden, the third will start out expanded. For each of the panels we will use a label as the content, it\textquotesingle{}s however possible to have any widget(including containers) as the content of panels.

We start by doing some setup, code you should be familiar with from other examples\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{comment}{//Compile\ with:}}
\DoxyCodeLine{\textcolor{comment}{//gcc\ -\/g\ panel\_example\_01.c\ -\/o\ panel\_example\_01\ \`{}pkg-\/config\ -\/-\/cflags\ -\/-\/libs\ elementary`}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{preprocessor}{\#include\ <Elementary.h>}}
\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{\ \ \ Evas\_Object\ *win,\ *bx,\ *panel,\ *content;}
\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__Group_ga23d9d1ffa0a65a1a1dd482d570db1ba0}{elm\_win\_util\_standard\_add}}(\textcolor{stringliteral}{"{}panel"{}},\ \textcolor{stringliteral}{"{}Panel"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga9a16a2f8c9fd5b6e9203ed9dcb53ea8b}{elm\_win\_autodel\_set}}(win,\ \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bx\ =\ \mbox{\hyperlink{group__Elm__Box__Group_ga49ec615c90bf8bead2158d5ffab2e445}{elm\_box\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga447f790a64a49b477019938dc3d5c3ff}{elm\_box\_horizontal\_set}}(bx,\ \mbox{\hyperlink{group__Eina__Types__Group_ga1feb115f8e9913e806e090d9bd5a7301}{EINA\_FALSE}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(bx,\ \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,\ bx);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bx);}

\end{DoxyCodeInclude}
 And move right to creating our first panel, for this panel we are going to choose the orientation as TOP and toggle it(tell it to hide itself)\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ panel\ =\ \mbox{\hyperlink{group__Elm__Panel__Group_gaa65b6dbfa9e83a203857373fb19e9a19}{elm\_panel\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Panel__Group_gaf6049ce91cce1ae9f7a54cb1a45af162}{elm\_panel\_orient\_set}}(panel,\ ELM\_PANEL\_ORIENT\_TOP);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Panel__Group_ga05f58bdb38c6714e015442c3f2ae524c}{elm\_panel\_toggle}}(panel);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(panel,\ \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_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(panel,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(panel);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(bx,\ panel);}

\end{DoxyCodeInclude}
 For the second panel we choose the RIGHT orientation and explicitly set the state as hidden\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ content\ =\ \mbox{\hyperlink{group__Elm__Label__Group_ga39a584d245f8a4b18d742e3ede702507}{elm\_label\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(content,\ \textcolor{stringliteral}{"{}content"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(content);}
\DoxyCodeLine{\ \ \ elm\_object\_content\_set(panel,\ content);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ panel\ =\ \mbox{\hyperlink{group__Elm__Panel__Group_gaa65b6dbfa9e83a203857373fb19e9a19}{elm\_panel\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Panel__Group_gaf6049ce91cce1ae9f7a54cb1a45af162}{elm\_panel\_orient\_set}}(panel,\ ELM\_PANEL\_ORIENT\_RIGHT);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Panel__Group_ga9ccc2383eece1026fa382c191624bbe3}{elm\_panel\_hidden\_set}}(panel,\ \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(panel,\ \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_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(panel,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(panel);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(bx,\ panel);}

\end{DoxyCodeInclude}
 For our third and last panel we won\textquotesingle{}t set the orientation(which means it will use the default\+: LEFT)\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ content\ =\ \mbox{\hyperlink{group__Elm__Label__Group_ga39a584d245f8a4b18d742e3ede702507}{elm\_label\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(content,\ \textcolor{stringliteral}{"{}content2"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(content);}
\DoxyCodeLine{\ \ \ elm\_object\_content\_set(panel,\ content);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ panel\ =\ \mbox{\hyperlink{group__Elm__Panel__Group_gaa65b6dbfa9e83a203857373fb19e9a19}{elm\_panel\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(panel,\ \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_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(panel,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(panel);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(bx,\ panel);}

\end{DoxyCodeInclude}
 All that is left is running the main loop\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ content\ =\ \mbox{\hyperlink{group__Elm__Label__Group_ga39a584d245f8a4b18d742e3ede702507}{elm\_label\_add}}(win);}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(content,\ \textcolor{stringliteral}{"{}content2"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(content);}
\DoxyCodeLine{\ \ \ elm\_object\_content\_set(panel,\ content);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{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}
 This example will look like this;

 
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth]{screenshots/panel_example_01}}
\end{DoxyImageNoCaption}
 \begin{DoxyNote}{Note}
The buttons with arrow allow the user to hide/show the panels. 
\end{DoxyNote}
