

The full code for this example can be found at \hyperlink{bg_example_03_c}{bg\-\_\-example\-\_\-03.\-c}, in the function {\ttfamily test\-\_\-bg\-\_\-options}, with the callbacks {\ttfamily \-\_\-cb\-\_\-overlay\-\_\-changed}, {\ttfamily \-\_\-cb\-\_\-color\-\_\-changed} and {\ttfamily \-\_\-cb\-\_\-radio\-\_\-changed} defined in the beginning of the file. It's part of the {\ttfamily elementary\-\_\-test} suite, and thus has the code for the three examples referenced by this documentation.

This example will show the properties available for the background object, and will use of some more widgets to set them.

In order to do this, we will set some callbacks for these widgets. The first is for the radio buttons that will be used to choose the option passed as argument to \hyperlink{group__Bg_ga2ed059b3cf946d10a12182fedc3125f9}{elm\-\_\-bg\-\_\-option\-\_\-set()}\-:


\begin{DoxyCodeInclude}
\_cb\_radio\_changed(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *event)
\{
   Evas\_Object *o\_bg = data;

   elm_bg_option_set(o\_bg, elm_radio_value_get((Evas\_Object *)obj));
\}

\end{DoxyCodeInclude}


The next callback will be used when setting the overlay (using elm\-\_\-object\-\_\-content\-\_\-set())\-:


\begin{DoxyCodeInclude}
\_cb\_overlay\_changed(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *event)
\{
   Evas\_Object *o\_bg = data;

   \textcolor{keywordflow}{if} (elm_check_state_get(obj))
     \{
        Evas\_Object *parent, *over;
        \textcolor{keywordtype}{char} buff[PATH\_MAX];

        snprintf(buff, \textcolor{keyword}{sizeof}(buff), \textcolor{stringliteral}{"%s/objects/test.edj"}, elm_app_data_dir_get());
        parent = elm_object_parent_widget_get(o\_bg);
        over = edje\_object\_add(evas\_object\_evas\_get(parent));
        edje\_object\_file\_set(over, buff, \textcolor{stringliteral}{"bg\_overlay"});
        elm_object_part_content_set(o\_bg, \textcolor{stringliteral}{"overlay"}, over);
     \}
   \textcolor{keywordflow}{else}
     elm_object_part_content_set(o\_bg, \textcolor{stringliteral}{"overlay"}, NULL);
\}

\end{DoxyCodeInclude}


And the last one, used to set the color (with \hyperlink{group__Bg_ga9431af239574a212be6988d618be5ae8}{elm\-\_\-bg\-\_\-color\-\_\-set()})\-:


\begin{DoxyCodeInclude}
\_cb\_color\_changed(\textcolor{keywordtype}{void} *data, Evas\_Object *obj, \textcolor{keywordtype}{void} *event)
\{
   Evas\_Object *o\_bg = data;
   \textcolor{keywordtype}{double} val = 0.0;

   val = elm_spinner_value_get(obj);
   \textcolor{keywordflow}{if} (val == 1.0)
     elm_bg_color_set(o\_bg, 255, 255, 255);
   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (val == 2.0)
     elm_bg_color_set(o\_bg, 255, 0, 0);
   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (val == 3.0)
     elm_bg_color_set(o\_bg, 0, 0, 255);
   \textcolor{keywordflow}{else} \textcolor{keywordflow}{if} (val == 4.0)
     elm_bg_color_set(o\_bg, 0, 255, 0);
\}

\end{DoxyCodeInclude}


We will get back to what these functions do soon. If you want to know more about how to set these callbacks and what these widgets are, look for\-: \begin{DoxyItemize}
\item \hyperlink{group__Radio_gab905f905e9a90883d482035e457fc7ef}{elm\-\_\-radio\-\_\-add()} \item \hyperlink{group__Check_ga252b43966ad9bbe0634c4619cac1e3e7}{elm\-\_\-check\-\_\-add()} \item \hyperlink{group__Spinner_gac259ed8ba5d597ceb982cc0170c37a63}{elm\-\_\-spinner\-\_\-add()}\end{DoxyItemize}
Now going to the main function, {\ttfamily test\-\_\-bg\-\_\-options}, we have the common code with the other examples\-:


\begin{DoxyCodeInclude}
   win = elm_win_util_standard_add(\textcolor{stringliteral}{"bg-options"}, \textcolor{stringliteral}{"Bg Options"});
   elm_win_autodel_set(win, EINA\_TRUE);

\end{DoxyCodeInclude}


We add a plain background to this window, so it will have the default background color behind everything\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Then we add a vertical box (\hyperlink{group__Box_ga3d0998b60ada633bacfa8869a921cfd7}{elm\-\_\-box\-\_\-add()}) that will hold the background object that we are going to play with, as well as a horizontal box that will hold widgets\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Now we add the background object that is going to be of use for our example. It is an image background, as used in \hyperlink{bg_02_example_page}{elm\-\_\-bg -\/ Image background.} , so the code should be familiar\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Notice the call to \hyperlink{group__Box_gae5b6472f18b4c1f11f04f1dfba906205}{elm\-\_\-box\-\_\-pack\-\_\-end()}\-: it will pack the background object in the end of the Elementary box declared above. Just refer to that documentation for more info.

Since this Elementary background is already an image background, we are going to play with its other properties. We will change its option (C\-E\-N\-T\-E\-R, S\-C\-A\-L\-E, S\-T\-R\-E\-T\-C\-H, T\-I\-L\-E), its color (R\-G\-B), and add an overlay to it. For all of these properties, we are going to add widgets that will configure them.

First, lets add the horizontal box that will hold these widgets\-: 
\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


For now, just consider this {\ttfamily hbox} as a rectangle that will contain the widgets, and will distribute them horizontally inside its content. Then we add radio buttons that will allow us to choose the property to use with this background\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Again, I won't give details about the use of these widgets, just look for their documentation if necessary. It's enough to know for now that we are packing them in the {\ttfamily hbox}, setting a label for them, and the most important parts\-: setting its value to {\ttfamily E\-L\-M\-\_\-\-B\-G\-\_\-\-O\-P\-T\-I\-O\-N\-\_\-\-C\-E\-N\-T\-E\-R} and its callback to {\ttfamily \-\_\-cb\-\_\-radio\-\_\-changed} (the function defined in the beginning of this example). We do this for the next 3 radio buttons added after this one, each of them with a different value.

Now taking a look at the code of the callback {\ttfamily \-\_\-cb\-\_\-radio\-\_\-changed} again, it will call \hyperlink{group__Bg_ga2ed059b3cf946d10a12182fedc3125f9}{elm\-\_\-bg\-\_\-option\-\_\-set()} with the value set from the checked radio button, thus setting the option for this background. The background is passed as argument to the {\ttfamily data} parameter of this callback, and is referenced here as {\ttfamily o\-\_\-bg}.

Later we set the default value for this radio button\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Then we add a checkbox for the elm\-\_\-object\-\_\-content\-\_\-set() function for the bg\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Now look at the code of the {\ttfamily \-\_\-cb\-\_\-overlay\-\_\-changed} again. If the checkbox state is checked, an overlay will be added to the background. It's done by creating an Edje object, and setting it with elm\-\_\-object\-\_\-content\-\_\-set() to the background object. For information about what are and how to set Edje object, look at the Edje documentation.

Finally we add a spinner object (\hyperlink{group__Spinner_gac259ed8ba5d597ceb982cc0170c37a63}{elm\-\_\-spinner\-\_\-add()}) to be used to select the color of our background. In its callback it's possible to see the call to \hyperlink{group__Bg_ga9431af239574a212be6988d618be5ae8}{elm\-\_\-bg\-\_\-color\-\_\-set()}, which will change the color of this background. This color is used by the background to fill areas where the image doesn't cover (in this case, where we have an image background). The spinner is also packed into the {\ttfamily hbox} \-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Then we just have to pack the {\ttfamily hbox} inside the {\ttfamily box}, set some size hints, and show our window\-:


\begin{DoxyCodeInclude}

\end{DoxyCodeInclude}


Now to see this code in action, open elementary\-\_\-test, and go to the \char`\"{}\-Bg
\-Options\char`\"{} test. It should demonstrate what was implemented here. 