Editing Legacy Maemo 5 Documentation/Graphical UI Tutorial/Data selection

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.

Warning: This page is 42 kilobytes long; some browsers may have problems editing pages approaching or longer than 32kb. Please consider breaking the page into smaller sections.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.

Learn more about Contributing to the wiki.

= Data selection =
Hildon provides a set of widgets for data selection specially designed for touchscreens that allows to build simple and easy-to-use interfaces.

The key widget is a selector widget that allows users to select items from one to many predefined lists. It is similar to a combo box but allows several individual pannable columns.

In addition, Hildon also provides a specialized dialog and a specialized button to be used in combination with a selector.

==Touch selector ==
HildonTouchSelector is the mentioned selector widget. This widget can display several pannable columns. Each column is represented by a GtkTreeModel and single or multiple selection is allowed.

===Text Columns Example===
Let us see the simplest possible example. A selector that shows a single text column.

'''Example 6.1. Example of a single-column selector'''

[[Image:example-single-text-column-selector.png|400px]]

#include <hildon/hildon.h>
 
 void selection_changed (HildonTouchSelector * selector, gint column, gpointer user_data);
 static GtkWidget *create_simple_selector ();
 
 void
 selection_changed (HildonTouchSelector * selector, gint column,
 gpointer user_data)
 {
 gchar *current_selection = NULL;
 
 current_selection = hildon_touch_selector_get_current_text (selector);
 g_debug ("Current selection : %s", current_selection);
 g_debug ("User data=%s\n", (gchar*) user_data);
 }
 
 static GtkWidget *
 create_simple_selector ()
 {
 GtkWidget *selector = NULL;
 gint i;
 
 /* Create a HildonTouchSelector with a single text column */
 selector = hildon_touch_selector_new_text();
 
 g_signal_connect (G_OBJECT (selector), "changed",
 G_CALLBACK (selection_changed), (gpointer) "some data");
 
 /* Populate selector */
 for (i = 1; i <= 10 ; i++) {
 gchar *label = g_strdup_printf ("Item %d", i);
 
 /* Add item to the column */
 hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (selector),
 label);
 
 g_free (label);
 }
 
 /* Set selection mode */
 hildon_touch_selector_set_column_selection_mode (HILDON_TOUCH_SELECTOR (selector),
 HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE);
 
 return selector;
 }
 
 int
 main (int argc, char **argv)
 {
 HildonProgram *program = NULL;
 GtkWidget *window = NULL;
 GtkWidget *selector = NULL;
 GtkWidget *picker_button = NULL;
 
 hildon_gtk_init (&argc, &argv);
 
 program = hildon_program_get_instance ();
 g_set_application_name
 ("hildon-touch-selector example program");
 
 window = hildon_stackable_window_new ();
 hildon_program_add_window (program, HILDON_WINDOW (window));
 
 /* Create touch selector */
 selector = create_simple_selector ();
 
 /* Create a picker button */
 picker_button = hildon_picker_button_new (HILDON_SIZE_AUTO,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL);
 
 /* Set a title to the button*/
 hildon_button_set_title (HILDON_BUTTON (picker_button), "Select an item");
 
 /* Attach touch selector to the picker button*/
 hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (picker_button),
 HILDON_TOUCH_SELECTOR (selector));
 
 /* Add button to main window */
 gtk_container_add (GTK_CONTAINER (window), picker_button);
 
 g_signal_connect (G_OBJECT (window), "destroy",
 G_CALLBACK (gtk_main_quit), NULL);
 
 gtk_widget_show_all (GTK_WIDGET (window));
 
 gtk_main ();
 
 return 0;
 }

A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.

<tt>GtkWidget<nowiki>*</nowiki> '''hildon_touch_selector_new_text''' (void);
 </tt>

To add text to a selector created by calling the constructor above, use the function.

<tt>void '''hildon_touch_selector_append_text''' (HildonTouchSelector <nowiki>*</nowiki>selector,
 '''const''' gchar <nowiki>*</nowiki>text);
 </tt>

Alternatively, you can use <code>hildon_touch_selector_prepend_text()</code> or <code>hildon_touch_selector_insert_text()</code> to add text to the selector in different positions.

You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.

<tt>void '''hildon_touch_selector_set_column_selection_mode''' (HildonTouchSelector <nowiki>*</nowiki>selector,
 HildonTouchSelectorSelectionMode mode);
 </tt>

This example shows a very common use case of this widget. Next section shows how to build a more complex selector with several columns of different types.

Also a simple function was set as a handler for the "changed" signal which is emitted each time the selected items change.

The callback retrieves a text representation of the currently selected items in the selector by calling <code>hildon_touch_selector_get_current_text()</code>. By default this function returns a concatenation of the items selected, separated by a comma.

To change how the text representation is generated, set your own function by calling <code>hildon_touch_selector_set_print_func()</code> and using the following signature for the function:

<tt>gchar<nowiki>*</nowiki> '''user_function''' (HildonTouchSelector <nowiki>*</nowiki>selector);
 </tt>

===Custom columns===

In the previous section, a selector with a text column was created. That is probably the most common use case of touch selectors. Convenience functions to deal with text columns was used. However, you can also set other type of columns.

Because each column is basically a treeview, you can use the same display to different data and in different ways as you would do with a GtkTreeview. Thus, you can use the GtkCellRenderers available in GTK+ to display the data on each cell.

This section explains how to build a selector within a column displaying stock icons. Firstly, let us take a look on the function which used for appending new columns to a touchable selector.

<tt>HildonTouchSelectorColumn<nowiki>*</nowiki>''' hildon_touch_selector_append_column''' (HildonTouchSelector <nowiki>*</nowiki>selector,
 GtkTreeModel <nowiki>*</nowiki>model,
 GtkCellRenderer <nowiki>*</nowiki>cell_renderer,
 ...);
 </tt>

This functions adds a new column to the widget whose data is obtained from the passed model. Pass also a GtkCellRenderer and a list of pairs property/value which is set as attributes of the renderer.

This function basically adds a GtkTreeView to the widget. For more information on how GtkTreeviews work, see [http://maemo.org/api_refs/5.0/beta/gtk/ GTK+ widgets] before.
The following example shows how to set a column to display images in a selector. For clarity, only the function which creates the selector is shown.

'''Example 6.2. Example of a selector with a custom column'''

[[Image:example-single-column-selector.png|400px]]

<tt> '''static''' GtkWidget <nowiki>*</nowiki>
 '''create_customized_selector'''()
 {
 GtkWidget <nowiki>*</nowiki>selector<nowiki>;</nowiki>
 GSList <nowiki>*</nowiki>icon_list <nowiki>=</nowiki> NULL<nowiki>;</nowiki>
 GtkListStore <nowiki>*</nowiki>store_icons <nowiki>=</nowiki> NULL<nowiki>;</nowiki>
 GSList <nowiki>*</nowiki>item <nowiki>=</nowiki> NULL<nowiki>;</nowiki>
 GtkCellRenderer <nowiki>*</nowiki>renderer <nowiki>=</nowiki> NULL<nowiki>;</nowiki>
 HildonTouchSelectorColumn <nowiki>*</nowiki>column <nowiki>=</nowiki> NULL<nowiki>;</nowiki>
 ''/* Create a touch selector */''
 selector <nowiki>=</nowiki> '''hildon_touch_selector_new'''();
 ''/* Stock icons will be used for the example */''
 icon_list <nowiki>=</nowiki> '''gtk_stock_list_ids'''();
 ''/* Create model to store selector's items */''
 store_icons <nowiki>=</nowiki> '''gtk_list_store_new''' (1, G_TYPE_STRING);
 ''/* Populate model */''
 '''for''' (item <nowiki>=</nowiki> icon_list<nowiki>;</nowiki> item<nowiki>;</nowiki> item <nowiki>=</nowiki> '''g_slist_next''' (item)) {
 GtkTreeIter iter<nowiki>;</nowiki>
 gchar <nowiki>*</nowiki>label <nowiki>=</nowiki> item-&gt;data<nowiki>;</nowiki>
 '''gtk_list_store_append''' (store_icons, &amp;iter);
 '''gtk_list_store_set''' (store_icons, &amp;iter, 0, label, -1);
 '''g_free''' (label);
 }
 '''g_slist_free''' (icon_list);
 ''/* Create and set up a pixbuf renderer to use in the selector */''
 renderer <nowiki>=</nowiki> '''gtk_cell_renderer_pixbuf_new'''();
 '''gtk_cell_renderer_set_fixed_size''' (renderer, -1, 100);
 ''/* Add the column to the selector */''
 column <nowiki>=</nowiki> '''hildon_touch_selector_append_column''' ('''HILDON_TOUCH_SELECTOR''' (selector),
 '''GTK_TREE_MODEL''' (store_icons),
 renderer,
 "stock-id", 0,
 NULL);
 ''/* Set the selection mode */''
 '''hildon_touch_selector_set_column_selection_mode''' ('''HILDON_TOUCH_SELECTOR''' (selector),
 '''HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE''');
 ''/* Set the property "text-column" that indicates the column''
 '' * of the model to get the string from */''
 '''g_object_set''' ('''G_OBJECT''' (column), "text-column", 0, NULL);
 '''return''' selector<nowiki>;</nowiki>
 }
 </tt>

The first step in the example is to create and populate a GtkTreeModel. A GtkListStore is used in the example. In most use cases of the touchable selectors a GtkListStore fits well as selectors were designed to allow users to select from a list of items.

In this case, the model stores a list of GTK+ stock icons identifiers. The following call creates a list store with one column to store strings.

<tt>store_icons <nowiki>=</nowiki> '''gtk_list_store_new''' (1, G_TYPE_STRING);
 </tt>

The following loop appends all stock identifiers in the newly created model. The identifiers were previously retrieved using

<tt>'''gtk_stock_list_ids'''().
 '''for''' (item <nowiki>=</nowiki> icon_list<nowiki>;</nowiki> item<nowiki>;</nowiki> item <nowiki>=</nowiki> '''g_slist_next''' (item)) {
 GtkTreeIter iter<nowiki>;</nowiki>
 gchar <nowiki>*</nowiki>label <nowiki>=</nowiki> item-&gt;data<nowiki>;</nowiki>
 '''gtk_list_store_append''' (store_icons, &amp;iter);
 '''gtk_list_store_set''' (store_icons, &amp;iter, 0, label, -1);
 '''g_free''' (label);
 }
 '''g_slist_free''' (icon_list);
 </tt>

The next step is to set up the renderer which renders each row of the new column. We need a GtkCellRendererPixbuf to display the stock icons.

<tt>renderer <nowiki>=</nowiki> '''gtk_cell_renderer_pixbuf_new'''();
 </tt>

Finally, we create and append the new column, using the model and renderer previously created.

This call also sets the property "stock-id" of the GtkCellrendererPixbuf. The value is set to 0 which is the number of the column in the GtkTreeModel that stores the stock-id.

<tt> column <nowiki>=</nowiki> '''hildon_touch_selector_append_column''' ('''HILDON_TOUCH_SELECTOR''' (selector),
 	 '''GTK_TREE_MODEL''' (store_icons),
 renderer,
 "stock-id", 0,
 NULL);
 </tt>

To summarize, setting a new custom column in a touchable selector is quite similar to setting a new column in a normal GtkTreeview. Create a model to store the data and a cell renderer to properly show this data in each row, and finally add the new column.

==Picker dialog and picker buttons ==
Normally, you use HildonTouchSelector together with a HildonPickerDialog activated from a button. For most common cases you use HildonPickerButton.

This is the usual way to present a selector to the user. The picker button opens a dialog which presents the selector and properly manages user interaction.

'''Example'''

Previous sections showed you how to create a touchable selector. In most cases the next step is to attach the selector to a HildonPickerButton.

A HildonPickerButton is a special GtkButton which displays two labels, title and value, and brings up a HildonPickerDialog. The user chooses one or several items. A string representation of the chosen items is displayed in the value label of the picker button.

Below, a modified version of the previous main function is shown, in which you can check how a HildonPickerButton is created and attached to a selector. Also a callback to catch the signal "value-changed" emitted is added.

[[Image:example-picker-button.png|400px]]

'''Example 6.3. Example of a Hildon picker button'''

<tt>'''static''' void
 '''on_picker_value_changed''' (HildonPickerButton <nowiki>*</nowiki> button, gpointer data)
 {
 '''g_print''' ("Newly selected value: %s\n",
 '''hildon_button_get_value''' ('''HILDON_BUTTON''' (button)));
 }
 
 int
 '''main''' (int argc, char <nowiki>**</nowiki>argv)
 {
 HildonProgram <nowiki>*</nowiki>program<nowiki>;</nowiki>
 GtkWidget <nowiki>*</nowiki>window<nowiki>;</nowiki>
 GtkWidget <nowiki>*</nowiki>picker_button<nowiki>;</nowiki>
 
 '''hildon_gtk_init''' (&amp;argc, &amp;argv);
 
 program <nowiki>=</nowiki> '''hildon_program_get_instance''' ();
 '''g_set_application_name''' ("hildon-touch-selector example program");
 
 window <nowiki>=</nowiki> '''hildon_stackable_window_new''' ();
 '''hildon_program_add_window''' (program, '''HILDON_WINDOW''' (window));
 
 ''/* Create touch selector */''
 selector <nowiki>=</nowiki> '''create_customized_selector''' ();
 
 ''/* Create a picker button */''
 picker_button <nowiki>=</nowiki> '''hildon_picker_button_new''' (HILDON_SIZE_AUTO,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL);
 
 ''/* Set a title to the button */''
 '''hildon_button_set_title''' ('''HILDON_BUTTON''' (picker_button), "Select an item");
 
 ''/* Attach the touch selector to the picker button*/''
 '''hildon_picker_button_set_selector''' ('''HILDON_PICKER_BUTTON''' (picker_button),
 '''HILDON_TOUCH_SELECTOR''' (selector));
 
 ''/* Attach callback to the "value-changed" signal*/''
 '''g_signal_connect''' ('''G_OBJECT''' (picker_button), "value-changed",
 '''G_CALLBACK''' (on_picker_value_changed), NULL);
 
 ''/* Add button to main window */''
 '''gtk_container_add''' ('''GTK_CONTAINER''' (window), picker_button);
 
 '''g_signal_connect''' ('''G_OBJECT''' (window), "destroy",
 '''G_CALLBACK''' (gtk_main_quit), NULL);
 
 '''gtk_widget_show_all''' ('''GTK_WIDGET''' (window));
 
 '''gtk_main''' ();
 
 '''return''' 0<nowiki>;</nowiki>
 }
 
 </tt>

In the above example a picker button is created. The reference to the attached selector is stored in the property "touch-selector" of the picker button. To retrieve the attached selector , use function <code>hildon_picker_button_get_selector()</code>. To attach the selector, use the function <code>hildon_picker_button_set_selector()</code>.

Note that you do not need to take care of the HildonPickerDialog. The dialog is automatically brought up when users click the picker button and closed when the selection is done.

The dialog shows a button "Done" to allow users finish the selection when the touchable selector allows multiple selection. When the selector allows only single selection, the dialog does not show any button and closes when the user taps on one item.

The label of the button "Done" can be set by using <code>hildon_picker_button_set_done_button_text()</code> and retrieved by using <code>hildon_picker_button_get_done_button_text()</code>.

When users finish their selection, the value label on the button automatically changes to show a textual representation of the item or items selected.

In most cases you want to perform any action when selection is finished. To do that, add a handler to the signal "value-changed" of the picker button. In this example the handler attached to "value-changed" signal retrieves the value label of the button and prints a debug message.

==Touch selector entry ==
The HildonTouchSelectorEntry is a selector widget with a text entry that allows users to select an item from a predefined list or to enter a different one in a HildonEntry. Items can also be searched and selected by typing in the entry.

An additional feature is that the HildonEntry is auto-completed with the list's items as the user types their name.

Example below shows how to build a selector to pick a word in a list of words.

[[Image:Touch_selector_entry.png|400px]]

'''Example 6.4. Example of a Hildon picker button with a selector entry'''

<tt>'''<nowiki>#include</nowiki>''' &lt;hildon/hildon.h&gt;
 '''static''' '''const''' gchar<nowiki>*</nowiki> artists [] <nowiki>=</nowiki> {
 "AC/DC",
 "Aerosmith",
 "Alice in Chains",
 "Black Sabbath",
 "Carcass",
 "Danzig",
 "Deep Purple",
 "Dream Theater",
 "Eric Clapton",
 NULL
 }<nowiki>;</nowiki>
 int
 '''main''' (int argc, char <nowiki>**</nowiki>argv)
 {
 HildonProgram <nowiki>*</nowiki>program<nowiki>;</nowiki>
 GtkWidget <nowiki>*</nowiki>window<nowiki>;</nowiki>
 GtkWidget <nowiki>*</nowiki>button<nowiki>;</nowiki>
 GtkWidget <nowiki>*</nowiki>selector<nowiki>;</nowiki>
 gint i<nowiki>;</nowiki>
 '''hildon_gtk_init''' (&amp;argc, &amp;argv);
 program <nowiki>=</nowiki> '''hildon_program_get_instance''' ();
 g_set_application_name
 ("HildonTouchSelectorEntry example program");
 window <nowiki>=</nowiki> '''hildon_stackable_window_new''' ();
 '''hildon_program_add_window''' (program, '''HILDON_WINDOW''' (window));
 ''/* Create a picker button */''
 button <nowiki>=</nowiki> '''hildon_picker_button_new''' (HILDON_SIZE_AUTO,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL);
 '''hildon_button_set_title''' ('''HILDON_BUTTON''' (button), "Pick a band!");
 ''/* Create a touch selector entry */''
 selector <nowiki>=</nowiki> '''hildon_touch_selector_entry_new_text''' ();
 ''/* Populate the selector */''
 '''for''' (i <nowiki>=</nowiki> 0<nowiki>;</nowiki> artists [i] <nowiki>!=</nowiki> NULL<nowiki>;</nowiki> i++) {
 '''hildon_touch_selector_append_text''' ('''HILDON_TOUCH_SELECTOR''' (selector),
 artists [i]);
 }
 ''/* Attach selector to the picker button */''
 '''hildon_picker_button_set_selector''' ('''HILDON_PICKER_BUTTON''' (button),
 '''HILDON_TOUCH_SELECTOR''' (selector));
 '''gtk_container_add''' ('''GTK_CONTAINER''' (window), button);
 '''g_signal_connect''' ('''G_OBJECT''' (window), "destroy",
 '''G_CALLBACK''' (gtk_main_quit), NULL);
 '''gtk_widget_show_all''' ('''GTK_WIDGET''' (window));
 '''gtk_main''' ();
 '''return''' 0<nowiki>;</nowiki>
 }
 </tt>

As you can see in the example above, the use of this widget is similar to using a normal touchable selector.

You can also use custom columns in a HildonTouchableEntry but at least one column must be a text column. The text column is indicated by the property "text_column" which you set with <code>hildon_touch_selector_entry_set_text_column()</code>.

==Pre-built selectors ==
The widgets HildonDateButton and HildonTimeButton are buttons displaying and allowing the selection of date and time, respectively. Developers can use them directly instead of building their own date or time selectors.

Both widgets are specialized picker buttons with a convenient touchable selector attached that you can use directly in your application.

Here a simple application using a HildonDateButton.

'''Example 6.5. Example of a Hildon date button'''

#include <hildon/hildon.h>
 
 int
 main (int argc, char **argv)
 {
 HildonProgram *program = NULL;
 GtkWidget *window = NULL;
 GtkWidget *picker_button = NULL;
 
 hildon_gtk_init (&argc, &argv);
 
 program = hildon_program_get_instance ();
 g_set_application_name
 ("hildon-date-button example program");
 
 window = hildon_stackable_window_new ();
 hildon_program_add_window (program, HILDON_WINDOW (window));
 
 /* Create a picker button */
 picker_button = hildon_date_button_new (HILDON_SIZE_AUTO,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL);
 
 /* Set a title to the button*/
 hildon_button_set_title (HILDON_BUTTON (picker_button), "Pick a date");
 
 /* Add button to main window */
 gtk_container_add (GTK_CONTAINER (window), picker_button);
 
 g_signal_connect (G_OBJECT (window), "destroy",
 G_CALLBACK (gtk_main_quit), NULL);
 
 gtk_widget_show_all (GTK_WIDGET (window));
 
 gtk_main ();
 
 return 0;
 }

Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!

Summary:

Cancel | Editing help (opens in new window)

Templates used on this page:

Template:Ambox (view source) (semi-protected)
Template:Legacy documentation (view source) (semi-protected)

Retrieved from "https://wiki.maemo.org/Legacy_Maemo_5_Documentation/Graphical_UI_Tutorial/Data_selection"

Personal tools

Navigation

Views

Editing Legacy Maemo 5 Documentation/Graphical UI Tutorial/Data selection

@@ Line 1: / Line 1: @@
 {{Legacy documentation}}
+= Data selection =
 Hildon provides a set of widgets for data selection specially designed for touchscreens that allows to build simple and easy-to-use interfaces.
@@ Line 6: / Line 7: @@
 In addition, Hildon also provides a specialized dialog and a specialized button to be used in combination with a selector.
 ==Touch selector ==
+HildonTouchSelector is the mentioned selector widget. This widget can display several pannable columns. Each column is represented by a GtkTreeModel and single or multiple selection is allowed.
-<code>HildonTouchSelector</code> is the mentioned selector widget. This widget can display several pannable columns. Each column is represented by a <code>GtkTreeModel</code> and single or multiple selection is allowed.
 ===Text Columns Example===
 Let us see the simplest possible example. A selector that shows a single text column.
 '''Example 6.1. Example of a single-column selector'''
-[[Image:example-single-text-column-selector.png|frame|center|alt=Screenshot of TouchSelector|Single text column TouchSelector]]
+[[Image:example-single-text-column-selector.png|400px]]
-<source lang="c">
+  #include <hildon/hildon.h>
-#include <hildon/hildon.h>
+  void selection_changed (HildonTouchSelector * selector, gint column, gpointer user_data);
-void selection_changed (HildonTouchSelector * selector, gint column, gpointer user_data);
+  static GtkWidget *create_simple_selector ();
-static GtkWidget *create_simple_selector ();
+  void
-void
+  selection_changed (HildonTouchSelector * selector, gint column,
-selection_changed (HildonTouchSelector * selector, gint column,
+                     gpointer user_data)
-                   gpointer user_data)
+  {
-{
+    gchar *current_selection = NULL;
-  gchar *current_selection = NULL;
+    current_selection = hildon_touch_selector_get_current_text (selector);
-   current_selection = hildon_touch_selector_get_current_text (selector);
+    g_debug ("Current selection : %s", current_selection);
-  g_debug ("Current selection : %s", current_selection);
+    g_debug ("User data=%s\n", (gchar*) user_data);
-  g_debug ("User data=%s\n", (gchar*) user_data);
+  }
-}
+  static GtkWidget *
-static GtkWidget *
+  create_simple_selector ()
-create_simple_selector ()
+  {
-{
+    GtkWidget *selector = NULL;
-  GtkWidget *selector = NULL;
+    gint i;
-  gint i;
+    /* Create a HildonTouchSelector with a single text column */
-   /* Create a HildonTouchSelector with a single text column */
+    selector = hildon_touch_selector_new_text();
-  selector = hildon_touch_selector_new_text();
+    g_signal_connect (G_OBJECT (selector), "changed",
-   g_signal_connect (G_OBJECT (selector), "changed",
+                      G_CALLBACK (selection_changed), (gpointer) "some data");
-                    G_CALLBACK (selection_changed), (gpointer) "some data");
+    /* Populate selector */
-   /* Populate selector */
+    for (i = 1; i <= 10 ; i++) {
-  for (i = 1; i <= 10 ; i++) {
+      gchar *label = g_strdup_printf ("Item %d", i);
-    gchar *label = g_strdup_printf ("Item %d", i);
+      /* Add item to the column */
-    /* Add item to the column */
+      hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (selector),
-    hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (selector),
+                                         label);
-                                       label);
+      g_free (label);
-    g_free (label);
+    }
+    /* Set selection mode */
+    hildon_touch_selector_set_column_selection_mode (HILDON_TOUCH_SELECTOR (selector),
+                                                     HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE);
+    return selector;
+  }
+  int
+  main (int argc, char **argv)
+  {
+    HildonProgram *program = NULL;
+    GtkWidget *window = NULL;
+    GtkWidget *selector = NULL;
+    GtkWidget *picker_button = NULL;
+    hildon_gtk_init (&argc, &argv);
+    program = hildon_program_get_instance ();
+    g_set_application_name
+      ("hildon-touch-selector example program");
+    window = hildon_stackable_window_new ();
+    hildon_program_add_window (program, HILDON_WINDOW (window));
+    /* Create touch selector */
+    selector = create_simple_selector ();
+    /* Create a picker button */
+    picker_button = hildon_picker_button_new (HILDON_SIZE_AUTO,
+                                              HILDON_BUTTON_ARRANGEMENT_VERTICAL);
+    /* Set a title to the button*/
+    hildon_button_set_title (HILDON_BUTTON (picker_button), "Select an item");
+    /* Attach touch selector to the picker button*/
+    hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (picker_button),
+                                       HILDON_TOUCH_SELECTOR (selector));
+    /* Add button to main window */
+    gtk_container_add (GTK_CONTAINER (window), picker_button);
+    g_signal_connect (G_OBJECT (window), "destroy",
+                      G_CALLBACK (gtk_main_quit), NULL);
+    gtk_widget_show_all (GTK_WIDGET (window));
+    gtk_main ();
+    return 0;
    }
-  /* Set selection mode */
+A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.
-  hildon_touch_selector_set_column_selection_mode (HILDON_TOUCH_SELECTOR (selector),
-                                                   HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE);
-  return selector;
+ <tt>GtkWidget<span><font color="#990000"><nowiki>*</nowiki></font></span>  <span>'''<span><font color="#000000">hildon_touch_selector_new_text</font></span>'''</span>  <span><font color="#990000">(</font></span><span><font color="#009900">void</font></span><span><font color="#990000">);</font></span>
-}
+ </tt>
-int
-main (int argc, char **argv)
-{
-  HildonProgram *program = NULL;
-  GtkWidget *window = NULL;
-  GtkWidget *selector = NULL;
-  GtkWidget *picker_button = NULL;
-  hildon_gtk_init (&argc, &argv);
-  program = hildon_program_get_instance ();
-  g_set_application_name
-    ("hildon-touch-selector example program");
-  window = hildon_stackable_window_new ();
-  hildon_program_add_window (program, HILDON_WINDOW (window));
-  /* Create touch selector */
-  selector = create_simple_selector ();
-  /* Create a picker button */
-  picker_button = hildon_picker_button_new (HILDON_SIZE_AUTO,
-                                            HILDON_BUTTON_ARRANGEMENT_VERTICAL);
-  /* Set a title to the button*/
-  hildon_button_set_title (HILDON_BUTTON (picker_button), "Select an item");
-  /* Attach touch selector to the picker button*/
-  hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (picker_button),
-                                     HILDON_TOUCH_SELECTOR (selector));
-  /* Add button to main window */
-  gtk_container_add (GTK_CONTAINER (window), picker_button);
-  g_signal_connect (G_OBJECT (window), "destroy",
-                    G_CALLBACK (gtk_main_quit), NULL);
-  gtk_widget_show_all (GTK_WIDGET (window));
-  gtk_main ();
-  return 0;
-}
-</source>
-A <code>HildonTouchSelector</code> with a single text column is created in this program using the following convenience constructor.
-<source lang="c">
-GtkWidget*  hildon_touch_selector_new_text  (void);
-</source>
 To add text to a selector created by calling the constructor above, use the function.
-<source lang="c">
+ <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_touch_selector_append_text</font></span>'''</span> <span><font color="#990000">(</font></span>HildonTouchSelector <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000">,</font></span>
-void        hildon_touch_selector_append_text (HildonTouchSelector *selector,
+                                                <span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000">);</font></span>
-                                               const gchar *text);
+ </tt>
-</source>
 Alternatively, you can use <code>hildon_touch_selector_prepend_text()</code> or <code>hildon_touch_selector_insert_text()</code> to add text to the selector in different positions.
@@ Line 128: / Line 125: @@
 You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.
-<source lang="c">
+ <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_touch_selector_set_column_selection_mode</font></span>'''</span> <span><font color="#990000">(</font></span>HildonTouchSelector <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000">,</font></span>
-void        hildon_touch_selector_set_column_selection_mode (HildonTouchSelector *selector,
+                                                              HildonTouchSelectorSelectionMode mode<span><font color="#990000">);</font></span>
-                                                             HildonTouchSelectorSelectionMode mode);
+ </tt>
-</source>
 This example shows a very common use case of this widget. Next section shows how to build a more complex selector with several columns of different types.
-Also a simple function was set as a handler for the "<code>changed</code>" signal which is emitted each time the selected items change.
+Also a simple function was set as a handler for the "changed" signal which is emitted each time the selected items change.
 The callback retrieves a text representation of the currently selected items in the selector by calling <code>hildon_touch_selector_get_current_text()</code>. By default this function returns a concatenation of the items selected, separated by a comma.
@@ Line 141: / Line 137: @@
 To change how the text representation is generated, set your own function by  calling <code>hildon_touch_selector_set_print_func()</code> and using the following signature for the function:
-<source lang="c">
+ <tt>gchar<span><font color="#990000"><nowiki>*</nowiki></font></span>      <span>'''<span><font color="#000000">user_function</font></span>'''</span> <span><font color="#990000">(</font></span>HildonTouchSelector <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000">);</font></span>
-gchar*      user_function (HildonTouchSelector *selector);
+ </tt>
-</source>
 ===Custom columns===
@@ Line 149: / Line 144: @@
 In the previous section, a selector with a text column was created. That is probably the most common use case of touch selectors. Convenience functions to deal with text columns was used. However, you can also set other type of columns.
-Because each column is basically a treeview, you can use the same display to different data and in different ways as you would do with a <code>GtkTreeview</code>. Thus, you can use the <code>GtkCellRenderer</code>s available in GTK+ to display the data on each cell.
+Because each column is basically a treeview, you can use the same display to different data and in different ways as you would do with a GtkTreeview. Thus, you can use the GtkCellRenderers available in GTK+ to display the data on each cell.
 This section explains how to build a selector within a column displaying stock icons. Firstly, let us take a look on the function which used for appending new columns to a touchable selector.
-<source lang="c">
+ <tt>HildonTouchSelectorColumn<span><font color="#990000"><nowiki>*</nowiki></font></span><span>'''<span><font color="#000000"> hildon_touch_selector_append_column</font></span>'''</span> <span><font color="#990000">(</font></span>HildonTouchSelector <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000">,</font></span>
-HildonTouchSelectorColumn* hildon_touch_selector_append_column (HildonTouchSelector *selector,
+                                                                 GtkTreeModel <span><font color="#990000"><nowiki>*</nowiki></font></span>model<span><font color="#990000">,</font></span>
-                                                                GtkTreeModel *model,
+                                                                 GtkCellRenderer <span><font color="#990000"><nowiki>*</nowiki></font></span>cell_renderer<span><font color="#990000">,</font></span>
-                                                                GtkCellRenderer *cell_renderer,
+                                              <span><font color="#990000">                   ...);</font></span>
-                                                                ...);
+ </tt>
-</source>
-This functions adds a new column to the widget whose data is obtained from the passed model. Pass also a <code>GtkCellRenderer</code> and a list of pairs property/value which is set as attributes of the renderer.
+This functions adds a new column to the widget whose data is obtained from the passed model. Pass also a GtkCellRenderer and a list of pairs property/value which is set as attributes of the renderer.
-This function basically adds a <code>GtkTreeView</code> to the widget. For more information on how <code>GtkTreeView</code>s work, see [http://maemo.org/api_refs/5.0/beta/gtk/ GTK+ widgets] before.
+This function basically adds a GtkTreeView to the widget. For more information on how GtkTreeviews work, see [http://maemo.org/api_refs/5.0/beta/gtk/ GTK+ widgets] before.
 The following example shows how to set a column to display images in a selector. For clarity, only the function which creates the selector is shown.
 '''Example 6.2. Example of a selector with a custom column'''
-[[Image:example-single-column-selector.png|frame|center|alt=Screenshot of TouchSelector|Single column TouchSelector]]
+[[Image:example-single-column-selector.png|400px]]
-<source lang="c">
+ <tt> <span>'''<span><font color="#0000FF">static</font></span>'''</span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>
-static GtkWidget *
+ <span>'''<span><font color="#000000">create_customized_selector</font></span>'''</span><span><font color="#990000">()</font></span>
-create_customized_selector()
+ <span><font color="#FF0000">{</font></span>
-{
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkWidget *selector;
+   GSList <span><font color="#990000"><nowiki>*</nowiki></font></span>icon_list <span><font color="#990000"><nowiki>=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GSList *icon_list = NULL;
+   GtkListStore <span><font color="#990000"><nowiki>*</nowiki></font></span>store_icons <span><font color="#990000"><nowiki>=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkListStore *store_icons = NULL;
+   GSList <span><font color="#990000"><nowiki>*</nowiki></font></span>item <span><font color="#990000"><nowiki>=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GSList *item = NULL;
+   GtkCellRenderer <span><font color="#990000"><nowiki>*</nowiki></font></span>renderer <span><font color="#990000"><nowiki>=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkCellRenderer *renderer = NULL;
+   HildonTouchSelectorColumn <span><font color="#990000"><nowiki>*</nowiki></font></span>column <span><font color="#990000"><nowiki>=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  HildonTouchSelectorColumn *column = NULL;
+   <span>''<span><font color="#9A1900">/* Create a touch selector */</font></span>''</span>
-  /* Create a touch selector */
+   selector <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_touch_selector_new</font></span>'''</span><span><font color="#990000">();</font></span>
-  selector = hildon_touch_selector_new();
+   <span>''<span><font color="#9A1900">/* Stock icons will be used for the example */</font></span>''</span>
-  /* Stock icons will be used for the example */
+   icon_list <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_stock_list_ids</font></span>'''</span><span><font color="#990000">();</font></span>
-  icon_list = gtk_stock_list_ids();
+   <span>''<span><font color="#9A1900">/* Create model to store selector's items */</font></span>''</span>
-  /* Create model to store selector's items */
+   store_icons <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_list_store_new</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#993399">1</font></span><span><font color="#990000">,</font></span> G_TYPE_STRING<span><font color="#990000">);</font></span>
-  store_icons = gtk_list_store_new (1, G_TYPE_STRING);
+   <span>''<span><font color="#9A1900">/* Populate model */</font></span>''</span>
-  /* Populate model */
+   <span>'''<span><font color="#0000FF">for</font></span>'''</span> <span><font color="#990000">(</font></span>item <span><font color="#990000"><nowiki>=</nowiki></font></span> icon_list<span><font color="#990000"><nowiki>;</nowiki></font></span> item<span><font color="#990000"><nowiki>;</nowiki></font></span> item <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">g_slist_next</font></span>'''</span> <span><font color="#990000">(</font></span>item<span><font color="#990000">))</font></span> <span><font color="#FF0000">{</font></span>
-  for (item = icon_list; item; item = g_slist_next (item)) {
+     GtkTreeIter iter<span><font color="#990000"><nowiki>;</nowiki></font></span>
-    GtkTreeIter iter;
+     gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>label <span><font color="#990000"><nowiki>=</nowiki></font></span> item<span><font color="#990000">-&gt;</font></span>data<span><font color="#990000"><nowiki>;</nowiki></font></span>
-    gchar *label = item->data;
+     <span>'''<span><font color="#000000">gtk_list_store_append</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>iter<span><font color="#990000">);</font></span>
-    gtk_list_store_append (store_icons, &iter);
+     <span>'''<span><font color="#000000">gtk_list_store_set</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>iter<span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">,</font></span> label<span><font color="#990000">,</font></span> <span><font color="#990000">-</font></span><span><font color="#993399">1</font></span><span><font color="#990000">);</font></span>
-    gtk_list_store_set (store_icons, &iter, 0, label, -1);
+     <span>'''<span><font color="#000000">g_free</font></span>'''</span> <span><font color="#990000">(</font></span>label<span><font color="#990000">);</font></span>
-    g_free (label);
+   <span><font color="#FF0000">}</font></span>
-  }
+   <span>'''<span><font color="#000000">g_slist_free</font></span>'''</span> <span><font color="#990000">(</font></span>icon_list<span><font color="#990000">);</font></span>
-  g_slist_free (icon_list);
+   <span>''<span><font color="#9A1900">/* Create and set up a pixbuf renderer to use in the selector */</font></span>''</span>
-  /* Create and set up a pixbuf renderer to use in the selector */
+   renderer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_cell_renderer_pixbuf_new</font></span>'''</span><span><font color="#990000">();</font></span>
-  renderer = gtk_cell_renderer_pixbuf_new();
+   <span>'''<span><font color="#000000">gtk_cell_renderer_set_fixed_size</font></span>'''</span> <span><font color="#990000">(</font></span>renderer<span><font color="#990000">,</font></span> <span><font color="#990000">-</font></span><span><font color="#993399">1</font></span><span><font color="#990000">,</font></span> <span><font color="#993399">100</font></span><span><font color="#990000">);</font></span>
-  gtk_cell_renderer_set_fixed_size (renderer, -1, 100);
+   <span>''<span><font color="#9A1900">/* Add the column to the selector */</font></span>''</span>
-  /* Add the column to the selector */
+   column <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_touch_selector_append_column</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">),</font></span>
-  column = hildon_touch_selector_append_column (HILDON_TOUCH_SELECTOR (selector),
+                                                 <span>'''<span><font color="#000000">GTK_TREE_MODEL</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">),</font></span>
-                                                GTK_TREE_MODEL (store_icons),
+                                                 renderer<span><font color="#990000">,</font></span>
-                                                renderer,
+                                                 <span><font color="#FF0000">"stock-id"</font></span><span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">,</font></span>
-                                                "stock-id", 0,
+                                                 NULL<span><font color="#990000">);</font></span>
-                                                NULL);
+   <span>''<span><font color="#9A1900">/* Set the selection mode */</font></span>''</span>
-  /* Set the selection mode */
+   <span>'''<span><font color="#000000">hildon_touch_selector_set_column_selection_mode</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">),</font></span>
-  hildon_touch_selector_set_column_selection_mode (HILDON_TOUCH_SELECTOR (selector),
+                                     <span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE</font></span>'''</span><span><font color="#990000">);</font></span>
-                                    HILDON_TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE);
+   <span>''<span><font color="#9A1900">/* Set the property "text-column" that indicates the column</font></span>''</span>
-  /* Set the property "text-column" that indicates the column
+ <span>''<span><font color="#9A1900">   * of the model to get the string from */</font></span>''</span>
-   * of the model to get the string from */
+   <span>'''<span><font color="#000000">g_object_set</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>column<span><font color="#990000">),</font></span> <span><font color="#FF0000">"text-column"</font></span><span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">,</font></span> NULL<span><font color="#990000">);</font></span>
-  g_object_set (G_OBJECT (column), "text-column", 0, NULL);
+   <span>'''<span><font color="#0000FF">return</font></span>'''</span> selector<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  return selector;
+ <span><font color="#FF0000">}</font></span>
-}
+ </tt>
-</source>
-The first step in the example is to create and populate a <code>GtkTreeModel</code>. A <code>GtkListStore</code> is used in the example. In most use cases of the touchable selectors a <code>GtkListStore</code> fits well as selectors were designed to allow users to select from a list of items.
+The first step in the example is to create and populate a GtkTreeModel. A GtkListStore is used in the example. In most use cases of the touchable selectors a GtkListStore fits well as selectors were designed to allow users to select from a list of items.
 In this case, the model stores a list of GTK+ stock icons identifiers. The following call creates a list store with one column to store strings.
-<source lang="c">
+ <tt>store_icons <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_list_store_new</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#993399">1</font></span><span><font color="#990000">,</font></span> G_TYPE_STRING<span><font color="#990000">);</font></span>
-store_icons = gtk_list_store_new (1, G_TYPE_STRING);
+ </tt>
-</source>
 The following loop appends all stock identifiers in the newly created model. The identifiers were previously retrieved using
-<source lang="c">
+ <tt><span>'''<span><font color="#000000">gtk_stock_list_ids</font></span>'''</span><span><font color="#990000">().</font></span>
-gtk_stock_list_ids().
+   <span>'''<span><font color="#0000FF">for</font></span>'''</span> <span><font color="#990000">(</font></span>item <span><font color="#990000"><nowiki>=</nowiki></font></span> icon_list<span><font color="#990000"><nowiki>;</nowiki></font></span> item<span><font color="#990000"><nowiki>;</nowiki></font></span> item <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">g_slist_next</font></span>'''</span> <span><font color="#990000">(</font></span>item<span><font color="#990000">))</font></span> <span><font color="#FF0000">{</font></span>
-  for (item = icon_list; item; item = g_slist_next (item)) {
+     GtkTreeIter iter<span><font color="#990000"><nowiki>;</nowiki></font></span>
-    GtkTreeIter iter;
+     gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>label <span><font color="#990000"><nowiki>=</nowiki></font></span> item<span><font color="#990000">-&gt;</font></span>data<span><font color="#990000"><nowiki>;</nowiki></font></span>
-    gchar *label = item->data;
+     <span>'''<span><font color="#000000">gtk_list_store_append</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>iter<span><font color="#990000">);</font></span>
-    gtk_list_store_append (store_icons, &iter);
+     <span>'''<span><font color="#000000">gtk_list_store_set</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>iter<span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">,</font></span> label<span><font color="#990000">,</font></span> <span><font color="#990000">-</font></span><span><font color="#993399">1</font></span><span><font color="#990000">);</font></span>
-    gtk_list_store_set (store_icons, &iter, 0, label, -1);
+     <span>'''<span><font color="#000000">g_free</font></span>'''</span> <span><font color="#990000">(</font></span>label<span><font color="#990000">);</font></span>
-    g_free (label);
+   <span><font color="#FF0000">}</font></span>
-  }
+   <span>'''<span><font color="#000000">g_slist_free</font></span>'''</span> <span><font color="#990000">(</font></span>icon_list<span><font color="#990000">);</font></span>
-  g_slist_free (icon_list);
+ </tt>
-</source>
-The next step is to set up the renderer which renders each row of the new column. We need a <code>GtkCellRendererPixbuf</code> to display the stock icons.
+The next step is to set up the renderer which renders each row of the new column. We need a GtkCellRendererPixbuf to display the stock icons.
-<source lang="c">
+ <tt>renderer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_cell_renderer_pixbuf_new</font></span>'''</span><span><font color="#990000">();</font></span>
-renderer = gtk_cell_renderer_pixbuf_new();
+ </tt>
-</source>
 Finally, we create and append the new column, using the model and renderer previously created.
-This call also sets the property "<code>stock-id</code>" of the <code>GtkCellrendererPixbuf</code>. The value is set to 0 which is the number of the column in the <code>GtkTreeModel</code> that stores the <code>stock-id</code>.
+This call also sets the property "stock-id" of the GtkCellrendererPixbuf. The value is set to 0 which is the number of the column in the GtkTreeModel that stores the stock-id.
-<source lang="c">
+ <tt>  column <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_touch_selector_append_column</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">),</font></span>
-column = hildon_touch_selector_append_column (HILDON_TOUCH_SELECTOR (selector),
+ 	                                        <span>'''<span><font color="#000000">GTK_TREE_MODEL</font></span>'''</span> <span><font color="#990000">(</font></span>store_icons<span><font color="#990000">),</font></span>
-                                        GTK_TREE_MODEL (store_icons),
+                                                 renderer<span><font color="#990000">,</font></span>
-                                              renderer,
+                                                 <span><font color="#FF0000">"stock-id"</font></span><span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">,</font></span>
-                                              "stock-id", 0,
+                                                 NULL<span><font color="#990000">);</font></span>
-                                              NULL);
+ </tt>
-</source>
-To summarize, setting a new custom column in a touchable selector is quite similar to setting a new column in a normal <code>GtkTreeView</code>. Create a model to store the data and a cell renderer to properly show this data in each row, and finally add the new column.
+To summarize, setting a new custom column in a touchable selector is quite similar to setting a new column in a normal GtkTreeview. Create a model to store the data and a cell renderer to properly show this data in each row, and finally add the new column.
 ==Picker dialog and picker buttons ==
+Normally, you use HildonTouchSelector together with a HildonPickerDialog activated from a button. For most common cases you use HildonPickerButton.
-Normally, you use <code>HildonTouchSelector</code> together with a <code>HildonPickerDialog</code> activated from a button. For most common cases you use <code>HildonPickerButton</code>.
 This is the usual way to present a selector to the user. The picker button opens a dialog which presents the selector and properly manages user interaction.
@@ Line 263: / Line 251: @@
 '''Example'''
-Previous sections showed you how to create a touchable selector. In most cases the next step is to attach the selector to a <code>HildonPickerButton</code>.
+Previous sections showed you how to create a touchable selector. In most cases the next step is to attach the selector to a HildonPickerButton.
-A <code>HildonPickerButton</code> is a special <code>GtkButton</code> which displays two labels, title and value, and brings up a <code>HildonPickerDialog</code>. The user chooses one or several items. A string representation of the chosen items is displayed in the value label of the picker button.
+A HildonPickerButton is a special GtkButton which displays two labels, title and value, and brings up a HildonPickerDialog. The user chooses one or several items. A string representation of the chosen items is displayed in the value label of the picker button.
-Below, a modified version of the previous main function is shown, in which you can check how a <code>HildonPickerButton</code> is created and attached to a selector. Also a callback to catch the signal "<code>value-changed</code>" emitted is added.
+Below, a modified version of the previous main function is shown, in which you can check how a HildonPickerButton is created and attached to a selector. Also a callback to catch the signal "value-changed" emitted is added.
-[[Image:example-picker-button.png|frame|center|alt=Screenshot of picker button|PickerButton]]
+[[Image:example-picker-button.png|400px]]
 '''Example 6.3. Example of a Hildon picker button'''
-<source lang="c">
+ <tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span>
-static void
+ <span>'''<span><font color="#000000">on_picker_value_changed</font></span>'''</span> <span><font color="#990000">(</font></span>HildonPickerButton <span><font color="#990000"><nowiki>*</nowiki></font></span> button<span><font color="#990000">,</font></span> gpointer data<span><font color="#990000">)</font></span>
-on_picker_value_changed (HildonPickerButton * button, gpointer data)
+ <span><font color="#FF0000">{</font></span>
-{
+   <span>'''<span><font color="#000000">g_print</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"Newly selected value: %s</font></span><span><font color="#CC33CC">\n</font></span><span><font color="#FF0000">"</font></span><span><font color="#990000">,</font></span>
-  g_print ("Newly selected value: %s\n",
+            <span>'''<span><font color="#000000">hildon_button_get_value</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">)));</font></span>
-           hildon_button_get_value (HILDON_BUTTON (button)));
+ <span><font color="#FF0000">}</font></span>
-}
+ <span><font color="#009900">int</font></span>
-int
+ <span>'''<span><font color="#000000">main</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#009900">int</font></span> argc<span><font color="#990000">,</font></span> <span><font color="#009900">char</font></span> <span><font color="#990000"><nowiki>**</nowiki></font></span>argv<span><font color="#990000">)</font></span>
-main (int argc, char **argv)
+ <span><font color="#FF0000">{</font></span>
-{
+   HildonProgram <span><font color="#990000"><nowiki>*</nowiki></font></span>program<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  HildonProgram *program;
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>window<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkWidget *window;
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>picker_button<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkWidget *picker_button;
+   <span>'''<span><font color="#000000">hildon_gtk_init</font></span>'''</span> <span><font color="#990000">(&amp;</font></span>argc<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>argv<span><font color="#990000">);</font></span>
-  hildon_gtk_init (&argc, &argv);
+   program <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_program_get_instance</font></span>'''</span> <span><font color="#990000">();</font></span>
-  program = hildon_program_get_instance ();
+   <span>'''<span><font color="#000000">g_set_application_name</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"hildon-touch-selector example program"</font></span><span><font color="#990000">);</font></span>
-  g_set_application_name ("hildon-touch-selector example program");
+   window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_stackable_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
-  window = hildon_stackable_window_new ();
+   <span>'''<span><font color="#000000">hildon_program_add_window</font></span>'''</span> <span><font color="#990000">(</font></span>program<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>
-  hildon_program_add_window (program, HILDON_WINDOW (window));
+   <span>''<span><font color="#9A1900">/* Create touch selector */</font></span>''</span>
-  /* Create touch selector */
+   selector <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">create_customized_selector</font></span>'''</span> <span><font color="#990000">();</font></span>
-  selector = create_customized_selector ();
+   <span>''<span><font color="#9A1900">/* Create a picker button */</font></span>''</span>
-  /* Create a picker button */
+   picker_button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_picker_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>
-  picker_button = hildon_picker_button_new (HILDON_SIZE_AUTO,
+                                             HILDON_BUTTON_ARRANGEMENT_VERTICAL<span><font color="#990000">);</font></span>
-                                            HILDON_BUTTON_ARRANGEMENT_VERTICAL);
+   <span>''<span><font color="#9A1900">/* Set a title to the button */</font></span>''</span>
-  /* Set a title to the button */
+   <span>'''<span><font color="#000000">hildon_button_set_title</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>picker_button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Select an item"</font></span><span><font color="#990000">);</font></span>
-  hildon_button_set_title (HILDON_BUTTON (picker_button), "Select an item");
+   <span>''<span><font color="#9A1900">/* Attach the touch selector to the picker button*/</font></span>''</span>
-  /* Attach the touch selector to the picker button*/
+   <span>'''<span><font color="#000000">hildon_picker_button_set_selector</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_PICKER_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>picker_button<span><font color="#990000">),</font></span>
-  hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (picker_button),
+                                      <span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">));</font></span>
-                                     HILDON_TOUCH_SELECTOR (selector));
+   <span>''<span><font color="#9A1900">/* Attach callback to the "value-changed" signal*/</font></span>''</span>
-  /* Attach callback to the "value-changed" signal*/
+   <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>picker_button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"value-changed"</font></span><span><font color="#990000">,</font></span>
-  g_signal_connect (G_OBJECT (picker_button), "value-changed",
+                     <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>on_picker_value_changed<span><font color="#990000">),</font></span> NULL<span><font color="#990000">);</font></span>
-                    G_CALLBACK (on_picker_value_changed), NULL);
+   <span>''<span><font color="#9A1900">/* Add button to main window */</font></span>''</span>
-  /* Add button to main window */
+   <span>'''<span><font color="#000000">gtk_container_add</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_CONTAINER</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> picker_button<span><font color="#990000">);</font></span>
-  gtk_container_add (GTK_CONTAINER (window), picker_button);
+   <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> <span><font color="#FF0000">"destroy"</font></span><span><font color="#990000">,</font></span>
-  g_signal_connect (G_OBJECT (window), "destroy",
+                     <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>gtk_main_quit<span><font color="#990000">),</font></span> NULL<span><font color="#990000">);</font></span>
-                    G_CALLBACK (gtk_main_quit), NULL);
+   <span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>
-  gtk_widget_show_all (GTK_WIDGET (window));
+   <span>'''<span><font color="#000000">gtk_main</font></span>'''</span> <span><font color="#990000">();</font></span>
-  gtk_main ();
+   <span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
-  return 0;
+ <span><font color="#FF0000">}</font></span>
-}
-</source>
+ </tt>
 In the above example a picker button is created. The reference to the attached selector is stored in the property "touch-selector" of the picker button. To retrieve the attached selector , use function <code>hildon_picker_button_get_selector()</code>. To attach the selector, use the function <code>hildon_picker_button_set_selector()</code>.
@@ Line 338: / Line 326: @@
 When users finish their selection, the value label on the button automatically changes to show a textual representation of the item or items selected.
-In most cases you want to perform any action when selection is finished. To do that, add a handler to the signal "<code>value-changed</code>" of the picker button. In this example the handler attached to "<code>value-changed</code>" signal retrieves the value label of the button and prints a debug message.
+In most cases you want to perform any action when selection is finished. To do that, add a handler to the signal "value-changed" of the picker button. In this example the handler attached to "value-changed" signal retrieves the value label of the button and prints a debug message.
-==Touch selector entry ==
-The <code>HildonTouchSelectorEntry</code> is a selector widget with a text entry that allows users to select an item from a predefined list or to enter a different one in a <code>HildonEntry</code>. Items can also be searched and selected by typing in the entry.
+==Touch selector entry ==
+The HildonTouchSelectorEntry is a selector widget with a text entry that allows users to select an item from a predefined list or to enter a different one in a HildonEntry. Items can also be searched and selected by typing in the entry.
-An additional feature is that the <code>HildonEntry</code> is auto-completed with the list's items as the user types their name.
+An additional feature is that the HildonEntry is auto-completed with the list's items as the user types their name.
 Example below shows how to build a selector to pick a word in a list of words.
-[[Image:Touch_selector_entry.png|frame|center|alt=Screenshot of TouchSelectorEntry|TouchSelectorEntry]]
+[[Image:Touch_selector_entry.png|400px]]
 '''Example 6.4. Example of a Hildon picker button with a selector entry'''
-<source lang="c">
+ <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;hildon/hildon.h&gt;</font></span>
-#include <hildon/hildon.h>
+                                                                                                                           <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar<span><font color="#990000"><nowiki>*</nowiki></font></span> artists <span><font color="#990000">[]</font></span> <span><font color="#990000"><nowiki>=</nowiki></font></span> <span><font color="#FF0000">{</font></span>
+   <span><font color="#FF0000">"AC/DC"</font></span><span><font color="#990000">,</font></span>
-static const gchar* artists [] = {
+   <span><font color="#FF0000">"Aerosmith"</font></span><span><font color="#990000">,</font></span>
-  "AC/DC",
+   <span><font color="#FF0000">"Alice in Chains"</font></span><span><font color="#990000">,</font></span>
-  "Aerosmith",
+   <span><font color="#FF0000">"Black Sabbath"</font></span><span><font color="#990000">,</font></span>
-  "Alice in Chains",
+   <span><font color="#FF0000">"Carcass"</font></span><span><font color="#990000">,</font></span>
-  "Black Sabbath",
+   <span><font color="#FF0000">"Danzig"</font></span><span><font color="#990000">,</font></span>
-  "Carcass",
+   <span><font color="#FF0000">"Deep Purple"</font></span><span><font color="#990000">,</font></span>
-  "Danzig",
+   <span><font color="#FF0000">"Dream Theater"</font></span><span><font color="#990000">,</font></span>
-  "Deep Purple",
+   <span><font color="#FF0000">"Eric Clapton"</font></span><span><font color="#990000">,</font></span>
-  "Dream Theater",
+   NULL
-  "Eric Clapton",
+ <span><font color="#FF0000">}</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
-  NULL
+                                                                                                                             <span><font color="#009900">int</font></span>
-};
+ <span>'''<span><font color="#000000">main</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#009900">int</font></span> argc<span><font color="#990000">,</font></span> <span><font color="#009900">char</font></span> <span><font color="#990000"><nowiki>**</nowiki></font></span>argv<span><font color="#990000">)</font></span>
+ <span><font color="#FF0000">{</font></span>
-int
+   HildonProgram <span><font color="#990000"><nowiki>*</nowiki></font></span>program<span><font color="#990000"><nowiki>;</nowiki></font></span>
-main (int argc, char **argv)
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>window<span><font color="#990000"><nowiki>;</nowiki></font></span>
-{
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  HildonProgram *program;
+   GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>selector<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkWidget *window;
+   gint i<span><font color="#990000"><nowiki>;</nowiki></font></span>
-  GtkWidget *button;
+   <span>'''<span><font color="#000000">hildon_gtk_init</font></span>'''</span> <span><font color="#990000">(&amp;</font></span>argc<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>argv<span><font color="#990000">);</font></span>
-  GtkWidget *selector;
+   program <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_program_get_instance</font></span>'''</span> <span><font color="#990000">();</font></span>
-  gint i;
+   g_set_application_name
-  hildon_gtk_init (&argc, &argv);
+     <span><font color="#990000">(</font></span><span><font color="#FF0000">"HildonTouchSelectorEntry example program"</font></span><span><font color="#990000">);</font></span>
-  program = hildon_program_get_instance ();
+   window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_stackable_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
-  g_set_application_name
+   <span>'''<span><font color="#000000">hildon_program_add_window</font></span>'''</span> <span><font color="#990000">(</font></span>program<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>
-    ("HildonTouchSelectorEntry example program");
+   <span>''<span><font color="#9A1900">/* Create a picker button */</font></span>''</span>
-  window = hildon_stackable_window_new ();
+   button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_picker_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>
-  hildon_program_add_window (program, HILDON_WINDOW (window));
+                                      HILDON_BUTTON_ARRANGEMENT_VERTICAL<span><font color="#990000">);</font></span>
-  /* Create a picker button */
+   <span>'''<span><font color="#000000">hildon_button_set_title</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Pick a band!"</font></span><span><font color="#990000">);</font></span>
-  button = hildon_picker_button_new (HILDON_SIZE_AUTO,
+   <span>''<span><font color="#9A1900">/* Create a touch selector entry */</font></span>''</span>
-                                     HILDON_BUTTON_ARRANGEMENT_VERTICAL);
+   selector <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_touch_selector_entry_new_text</font></span>'''</span> <span><font color="#990000">();</font></span>
-  hildon_button_set_title (HILDON_BUTTON (button), "Pick a band!");
+   <span>''<span><font color="#9A1900">/* Populate the selector */</font></span>''</span>
-  /* Create a touch selector entry */
+   <span>'''<span><font color="#0000FF">for</font></span>'''</span> <span><font color="#990000">(</font></span>i <span><font color="#990000"><nowiki>=</nowiki></font></span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span> artists <span><font color="#990000">[</font></span>i<span><font color="#990000">]</font></span> <span><font color="#990000"><nowiki>!=</nowiki></font></span> NULL<span><font color="#990000"><nowiki>;</nowiki></font></span> i<span><font color="#990000">++)</font></span> <span><font color="#FF0000">{</font></span>
-  selector = hildon_touch_selector_entry_new_text ();
+     <span>'''<span><font color="#000000">hildon_touch_selector_append_text</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">),</font></span>
-  /* Populate the selector */
+                                        artists <span><font color="#990000">[</font></span>i<span><font color="#990000">]);</font></span>
-  for (i = 0; artists [i] != NULL; i++) {
+   <span><font color="#FF0000">}</font></span>
-    hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (selector),
+   <span>''<span><font color="#9A1900">/* Attach selector to the picker button */</font></span>''</span>
-                                       artists [i]);
+   <span>'''<span><font color="#000000">hildon_picker_button_set_selector</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_PICKER_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span>
-  }
+                                      <span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">));</font></span>
-  /* Attach selector to the picker button */
+   <span>'''<span><font color="#000000">gtk_container_add</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_CONTAINER</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> button<span><font color="#990000">);</font></span>
-  hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (button),
+   <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> <span><font color="#FF0000">"destroy"</font></span><span><font color="#990000">,</font></span>
-                                     HILDON_TOUCH_SELECTOR (selector));
+                     <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>gtk_main_quit<span><font color="#990000">),</font></span> NULL<span><font color="#990000">);</font></span>
-  gtk_container_add (GTK_CONTAINER (window), button);
+   <span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>
-  g_signal_connect (G_OBJECT (window), "destroy",
+   <span>'''<span><font color="#000000">gtk_main</font></span>'''</span> <span><font color="#990000">();</font></span>
-                    G_CALLBACK (gtk_main_quit), NULL);
+   <span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
-  gtk_widget_show_all (GTK_WIDGET (window));
+ <span><font color="#FF0000">}</font></span>
-  gtk_main ();
+ </tt>
-  return 0;
-}
-</source>
 As you can see in the example above, the use of this widget is similar to using a normal touchable selector.
-You can also use custom columns in a <code>HildonTouchableEntry</code> but at least one column must be a text column. The text column is indicated by the property "<code>text_column</code>" which you set with <code>hildon_touch_selector_entry_set_text_column()</code>.
+You can also use custom columns in a HildonTouchableEntry but at least one column must be a text column. The text column is indicated by the property "text_column" which you set with <code>hildon_touch_selector_entry_set_text_column()</code>.
 ==Pre-built selectors ==
+The widgets HildonDateButton and HildonTimeButton are buttons displaying and allowing the selection of date and time, respectively. Developers can use them directly instead of building their own date or time selectors.
-The widgets <code>HildonDateButton</code> and <code>HildonTimeButton</code> are buttons displaying and allowing the selection of date and time, respectively. Developers can use them directly instead of building their own date or time selectors.
 Both widgets are specialized picker buttons with a convenient touchable selector attached that you can use directly in your application.
-Here a simple application using a <code>HildonDateButton</code>.
+Here a simple application using a HildonDateButton.
 '''Example 6.5. Example of a Hildon date button'''
-<source lang="c">
+  #include <hildon/hildon.h>
-#include <hildon/hildon.h>
+  int
-int
+  main (int argc, char **argv)
-main (int argc, char **argv)
+  {
-{
+    HildonProgram *program = NULL;
-  HildonProgram *program = NULL;
+    GtkWidget *window = NULL;
-  GtkWidget *window = NULL;
+    GtkWidget *picker_button = NULL;
-  GtkWidget *picker_button = NULL;
+    hildon_gtk_init (&argc, &argv);
-   hildon_gtk_init (&argc, &argv);
+    program = hildon_program_get_instance ();
-   program = hildon_program_get_instance ();
+    g_set_application_name
-  g_set_application_name
+      ("hildon-date-button example program");
-    ("hildon-date-button example program");
+    window = hildon_stackable_window_new ();
-   window = hildon_stackable_window_new ();
+    hildon_program_add_window (program, HILDON_WINDOW (window));
-  hildon_program_add_window (program, HILDON_WINDOW (window));
+    /* Create a picker button */
-   /* Create a picker button */
+    picker_button = hildon_date_button_new (HILDON_SIZE_AUTO,
-  picker_button = hildon_date_button_new (HILDON_SIZE_AUTO,
+                                            HILDON_BUTTON_ARRANGEMENT_VERTICAL);
-                                          HILDON_BUTTON_ARRANGEMENT_VERTICAL);
+    /* Set a title to the button*/
-   /* Set a title to the button*/
+    hildon_button_set_title (HILDON_BUTTON (picker_button), "Pick a date");
-  hildon_button_set_title (HILDON_BUTTON (picker_button), "Pick a date");
+    /* Add button to main window */
-   /* Add button to main window */
+    gtk_container_add (GTK_CONTAINER (window), picker_button);
-  gtk_container_add (GTK_CONTAINER (window), picker_button);
+    g_signal_connect (G_OBJECT (window), "destroy",
-   g_signal_connect (G_OBJECT (window), "destroy",
+                      G_CALLBACK (gtk_main_quit), NULL);
-                    G_CALLBACK (gtk_main_quit), NULL);
+    gtk_widget_show_all (GTK_WIDGET (window));
-   gtk_widget_show_all (GTK_WIDGET (window));
+    gtk_main ();
-   gtk_main ();
+    return 0;
-   return 0;
+  }
-}
-</source>