Editing Documentation/Maemo 5 Developer Guide/Porting Software/Migration

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

Warning: This page is 31 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.

=Migration =
Because Hildon 2.2 is a big step up from previous versions, many approaches in the development of your program's graphical user interface may need to be migrated to this new interface type.

== Menus ==
Hildon app menu represents a big difference from the normal menus. If your application is to be finger-friendly, a view specific menu, instead of application menu, is mandatory.

The Maemo 4 application menu typically contains most or the full set of functionality of the application, organized in hierarchical menus.

In Maemo 5, there is a strict limit of maximum 10 items in a view menu, and there is no menu hierarchy.

The Maemo 5 View menus are not application menus, in the sense that a view menu only contains commands relevant to that particular view. The only exception to this is the Root view menu, which additionally contains menu item(s) for application settings.

Because also the view menu uses buttons, you can easily add them with the callback functions that the original menu items had.

For example, consider an advanced text edition program. The original menu bar had the following menus:

'''Example 10.1. Menu example'''

File
     \ New
     \ Open
     \ Save
     \ Save As
     \ Quit
 Edit
     \ Copy
     \ Paste
     \ Cut
     \ Indent Type
         \ Tabs
         \ Spaces
     \ Preferences
 View
     \ Zoom In
     \ Zoom Out
     \ Normal Size
     \ Highlight
         \ C
         \ Python
         \ JAVA
 Help
     \ Contents
     \ About

</div>

Guidelines:
* In general, commands are specific to their view
* The initial view (root view) is the only access point to application settings
* Additional menu commands can be made accessible via dialogs opened from the view menu, if those commands cannot be presented directly in the UI or simply removed.

A text editor does not need subviews, so more or less all commands need to fit in a single view. See [[Documentation/Maemo_5_Developer_Guide/Human_Interface_Guidelines/Redesigning_From_Maemo_4_to_Maemo_5 | Redesigning From Maemo 4 to Maemo 5]] for details about sub view redesign.

Changes:
* File menu commands: keep "New", "Open" and "Save". Remove "Save as" and "Quit". The "Save" command can function as "Save as" in cases where the source file is read only or the folder is no longer accessible.
** NOTE: the document should be automatically saved (and re-opened) whenever the application is closed (or re-opened). There is no need to show any confirmation notes for this process.
* Edit menu commands: remove "Cut/Copy/Paste", those should be used with keyboard shortcuts. Put all the rest inside "Preferences" dialog and rename it to "Settings"
* View menu commands: "Zoom" in a text editor is not very useful so remove it. Since there are free slots, put "Highlight mode" in to the view menu.
* Help menu commands: Remove help. It's not part of the Hildon 2.2 UI Style.

The following example shows the implementation of the menu following the above decisions. The first figure below shows the final result of the app menu. The other showd the dialog activated by the menu command "Settings".

[[Image:example-migrating-menu1.png|400px]]

[[Image:example-migrating-menu-view.png|400px]]

'''Example 10.2. Migrating a menu'''

#include <hildon/hildon.h>
 
 static void
 normal_zoom_cb ()
 {
 /* Code to set normal zoom... */
 
 hildon_window_stack_pop_1 (hildon_window_stack_get_default());
 }
 
 static void
 view_subview ()
 {
 HildonStackableWindow *view_window;
 view_window = HILDON_STACKABLE_WINDOW (hildon_stackable_window_new ());
 gtk_window_set_title (GTK_WINDOW (view_window), "View");
 
 GtkButton *normal_zoom_button = GTK_BUTTON (hildon_gtk_button_new (
 HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
 gtk_button_set_label (normal_zoom_button, "Normal Zoom");
 g_signal_connect (G_OBJECT (normal_zoom_button), "clicked",
 G_CALLBACK (normal_zoom_cb), NULL);
 
 HildonTouchSelector *highlight_selector;
 highlight_selector = HILDON_TOUCH_SELECTOR (hildon_touch_selector_new_text ());
 hildon_touch_selector_append_text (highlight_selector, "C");
 hildon_touch_selector_append_text (highlight_selector, "JAVA");
 hildon_touch_selector_append_text (highlight_selector, "Python");
 HildonPickerButton *highlight_picker = HILDON_PICKER_BUTTON (hildon_picker_button_new (
 HILDON_SIZE_THUMB_HEIGHT | HILDON_SIZE_HALFSCREEN_WIDTH,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL));
 hildon_button_set_title (HILDON_BUTTON (highlight_picker), "Syntax highlight:");
 hildon_picker_button_set_selector (highlight_picker, highlight_selector);
 hildon_picker_button_set_active (highlight_picker, 0);
 
 GtkVBox *contents = GTK_VBOX (gtk_vbox_new (12, FALSE));
 gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (highlight_picker), FALSE, FALSE, 0);
 gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (normal_zoom_button), FALSE, FALSE, 0);
 
 gtk_container_add (GTK_CONTAINER (view_window), GTK_WIDGET (contents));
 
 gtk_widget_show_all (GTK_WIDGET (view_window));
 }
 
 static void
 help_contents_cb (GtkButton *widget, gpointer data)
 {
 /* Code to set show help contents... */
 
 hildon_window_stack_pop_1 (hildon_window_stack_get_default());
 }
 
 static void
 help_about_cb (GtkButton *widget, gpointer data)
 {
 /* Code to set show about information... */
 
 hildon_window_stack_pop_1 (hildon_window_stack_get_default());
 }
 
 static void
 help_subview ()
 {
 HildonStackableWindow *view_window;
 view_window = HILDON_STACKABLE_WINDOW (hildon_stackable_window_new ());
 gtk_window_set_title (GTK_WINDOW (view_window), "Help");
 
 GtkButton *help_contents_button = GTK_BUTTON (hildon_gtk_button_new (
 HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
 gtk_button_set_label (help_contents_button, "Contents");
 g_signal_connect (G_OBJECT (help_contents_button), "clicked",
 G_CALLBACK (help_contents_cb), NULL);
 
 GtkButton *help_about_button = GTK_BUTTON (hildon_gtk_button_new (
 HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
 gtk_button_set_label (help_about_button, "About");
 g_signal_connect (G_OBJECT (help_about_button), "clicked",
 G_CALLBACK (help_about_cb), NULL);
 
 GtkVBox *contents = GTK_VBOX (gtk_vbox_new (12, FALSE));
 gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (help_contents_button), FALSE, FALSE, 0);
 gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (help_about_button), FALSE, FALSE, 0);
 
 gtk_container_add (GTK_CONTAINER (view_window), GTK_WIDGET (contents));
 
 gtk_widget_show_all (GTK_WIDGET (view_window));
 }
 
 static HildonAppMenu *
 build_menu (void)
 {
 HildonSizeType button_size = HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH;
 HildonAppMenu *menu = HILDON_APP_MENU (hildon_app_menu_new ());
 GtkButton *button;
 GtkRadioButton *filter;
 
 /* Menus like New, Open, etc that would open new dialogs (no submenus)
 * are not assigned any action in this example
 */
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "New");
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "Open");
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "Save As");
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "Preferences");
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "View");
 g_signal_connect (G_OBJECT (button), "clicked",
 G_CALLBACK (view_subview), NULL);
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 filter = GTK_RADIO_BUTTON (hildon_gtk_radio_button_new (button_size, NULL));
 gtk_button_set_label (GTK_BUTTON (filter), "Indentation: Spaces");
 hildon_app_menu_add_filter (menu, GTK_BUTTON (filter));
 gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter), FALSE);
 
 button = GTK_BUTTON (hildon_gtk_button_new (button_size));
 gtk_button_set_label (button, "Help");
 g_signal_connect (G_OBJECT (button), "clicked",
 G_CALLBACK (help_subview), NULL);
 hildon_app_menu_append (menu, GTK_BUTTON (button));
 
 filter = GTK_RADIO_BUTTON (hildon_gtk_radio_button_new_from_widget (button_size,
 GTK_RADIO_BUTTON (filter)));
 gtk_button_set_label (GTK_BUTTON (filter), "Indentation: Tabs");
 hildon_app_menu_add_filter (menu, GTK_BUTTON (filter));
 gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter), FALSE);
 
 gtk_widget_show_all (GTK_WIDGET (menu));
 
 return menu;
 }
 
 int
 main (int argc, char **argv)
 {
 hildon_gtk_init (&argc, &argv);
 
 GtkWidget *window;
 window = hildon_stackable_window_new ();
 gtk_window_set_title (GTK_WINDOW (window), "Editor");
 
 HildonAppMenu *menu = build_menu ();
 hildon_stackable_window_set_main_menu (HILDON_STACKABLE_WINDOW (window), menu);
 
 GtkWidget *contents = gtk_label_new ("This example shows how an app menu could be "
 "divided.\nMenus that would open new dialogs "
 "are not assigned any action.");
 gtk_container_add (GTK_CONTAINER (window), contents);
 
 /* ... other widgets in the application */
 
 g_signal_connect (G_OBJECT (window), "destroy",
 G_CALLBACK (gtk_main_quit), NULL);
 
 gtk_widget_show_all (window);
 
 gtk_main ();
 return 0;
 }

==Choices ==
Some widgets for choosing options also need to be adapted to the new Hildon way of designing interfaces. If you have several radio buttons to express a choice, replacing them with a picker button is a good idea.

Consider a dialog that includes, among other widgets, a frame labeled "Proxy Preferences" and three radio buttons: "None", "Auto" and "Manual", displayed vertically like Figure 10.1 "Three radio buttons" shows. The following example shows how such task could be accomplished using a picker button. The frame label becomes the picker button's title and the three radio buttons' labels become the choices in the picker's touch selector. The screenshot below shows  the resulting graphical user interface.

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

'''Example 10.3. Migrating choice widgets'''

<tt>'''<nowiki>#include</nowiki>''' &lt;hildon/hildon.h&gt;
 int
 '''main''' (int argc, char <nowiki>**</nowiki>argv)
 {
 '''hildon_gtk_init''' (&amp;argc, &amp;argv);
 GtkWidget <nowiki>*</nowiki>window<nowiki>;</nowiki>
 window <nowiki>=</nowiki> '''hildon_window_new''' ();
 '''gtk_window_set_title''' ('''GTK_WINDOW''' (window), "Preferences");
 '''g_signal_connect''' ('''G_OBJECT''' (window), "destroy",
 '''G_CALLBACK''' (gtk_main_quit), NULL);
 HildonPickerButton <nowiki>*</nowiki>picker <nowiki>=</nowiki> '''HILDON_PICKER_BUTTON''' ('''hildon_picker_button_new''' (
 HILDON_SIZE_THUMB_HEIGHT <nowiki>|</nowiki> HILDON_SIZE_HALFSCREEN_WIDTH,
 HILDON_BUTTON_ARRANGEMENT_VERTICAL));
 '''hildon_button_set_title''' ('''HILDON_BUTTON''' (picker), "Proxy preferences:");
 HildonTouchSelector <nowiki>*</nowiki>selector <nowiki>=</nowiki> '''HILDON_TOUCH_SELECTOR''' ('''hildon_touch_selector_new_text''' ());
 '''hildon_picker_button_set_selector''' (picker, selector);
 '''hildon_touch_selector_append_text''' (selector, "None");
 '''hildon_touch_selector_append_text''' (selector, "Auto");
 '''hildon_touch_selector_append_text''' (selector, "Manual");
 '''hildon_picker_button_set_active''' (picker, 0);
 GtkVBox <nowiki>*</nowiki>contents <nowiki>=</nowiki> '''GTK_VBOX''' ('''gtk_vbox_new''' (12, FALSE));
 ''/* ... other widgets placed here */''
 '''gtk_box_pack_end''' ('''GTK_BOX''' (contents), '''GTK_WIDGET''' (picker), FALSE, FALSE, 0);
 '''gtk_container_add''' ('''GTK_CONTAINER''' (window), '''GTK_WIDGET''' (contents));
 '''gtk_widget_show_all''' (window);
 '''gtk_main''' ();
 '''return''' 0<nowiki>;</nowiki>
 }
 </tt>

==Notebooks ==
Because the use of notebooks is not advised in Hildon, this widget does not have to be replaced to be updated.

Imagine a preferences dialog that has a notebook to divide the preferences in "General", "Colors" and "Tools" like depicted in the figure below.

[[Image:example-notebook1.png|400px]]

The way to accomplish the same functionality without having a notebook is to use a window with buttons that open other windows as subviews. Each window opened using the buttons should have the content that the respective page in the notebook had.

[[Image:example-notebook-general.png|250px]]  [[Image:example-notebook-colors.png||250px]]  [[Image:example-notebok-tools.png|250px]]

The example shows the code to produce a replacement for the notebook.

'''Example 10.4. Migrating a notebook'''

<tt>'''<nowiki>#include</nowiki>''' &lt;hildon/hildon.h&gt;
 '''static''' HildonStackableWindow <nowiki>*</nowiki>
 '''new_preferences_window''' (gchar <nowiki>*</nowiki>title)
 {
 HildonStackableWindow <nowiki>*</nowiki>pref_window<nowiki>;</nowiki>
 pref_window <nowiki>=</nowiki> '''HILDON_STACKABLE_WINDOW''' ('''hildon_stackable_window_new''' ());
 '''gtk_window_set_title''' ('''GTK_WINDOW''' (pref_window), title);
 GtkWidget <nowiki>*</nowiki>content <nowiki>=</nowiki> '''gtk_label_new''' ('''g_strdup_printf''' ("Set the %s Preferences", title));
 '''gtk_widget_show''' (content);
 '''gtk_container_add''' ('''GTK_CONTAINER''' (pref_window), content);
 '''return''' pref_window<nowiki>;</nowiki>
 }
 '''static''' void
 '''button_clicked_cb''' (GtkWidget <nowiki>*</nowiki>button, gchar <nowiki>*</nowiki>title)
 {
 HildonStackableWindow <nowiki>*</nowiki>sw <nowiki>=</nowiki> '''new_preferences_window''' (title);
 '''gtk_widget_show_all''' ('''GTK_WIDGET''' (sw));
 }
 int
 '''main''' (int argc, char <nowiki>**</nowiki>argv)
 {
 '''hildon_gtk_init''' (&amp;argc, &amp;argv);
 GtkWidget <nowiki>*</nowiki>window<nowiki>;</nowiki>
 GtkButton <nowiki>*</nowiki>general_pref_button, <nowiki>*</nowiki>colors_pref_button, <nowiki>*</nowiki>tools_pref_button<nowiki>;</nowiki>
 window <nowiki>=</nowiki> '''hildon_stackable_window_new''' ();
 '''gtk_window_set_title''' ('''GTK_WINDOW''' (window), "Preferences");
 general_pref_button <nowiki>=</nowiki> '''GTK_BUTTON''' ('''hildon_gtk_button_new''' (HILDON_SIZE_AUTO_HEIGHT));
 '''gtk_button_set_label''' (general_pref_button, "General");
 '''g_signal_connect''' (general_pref_button, "clicked",
 '''G_CALLBACK''' (button_clicked_cb), "General");
 colors_pref_button <nowiki>=</nowiki> '''GTK_BUTTON''' ('''hildon_gtk_button_new''' (HILDON_SIZE_AUTO_HEIGHT));
 '''gtk_button_set_label''' (colors_pref_button, "Colors");
 '''g_signal_connect''' (colors_pref_button, "clicked",
 '''G_CALLBACK''' (button_clicked_cb), "Colors");
 tools_pref_button <nowiki>=</nowiki> '''GTK_BUTTON''' ('''hildon_gtk_button_new''' (HILDON_SIZE_AUTO_HEIGHT));
 '''gtk_button_set_label''' (tools_pref_button, "Tools");
 '''g_signal_connect''' (tools_pref_button, "clicked",
 '''G_CALLBACK''' (button_clicked_cb), "Tools");
 GtkVBox <nowiki>*</nowiki>contents <nowiki>=</nowiki> '''GTK_VBOX''' ('''gtk_vbox_new''' (TRUE, 12));
 '''gtk_container_add''' ('''GTK_CONTAINER''' (contents), '''GTK_WIDGET''' (general_pref_button));
 '''gtk_container_add''' ('''GTK_CONTAINER''' (contents), '''GTK_WIDGET''' (colors_pref_button));
 '''gtk_container_add''' ('''GTK_CONTAINER''' (contents), '''GTK_WIDGET''' (tools_pref_button));
 '''gtk_container_add''' ('''GTK_CONTAINER''' (window), '''GTK_WIDGET''' (contents));
 '''g_signal_connect''' ('''G_OBJECT''' (window), "destroy",
 '''G_CALLBACK''' (gtk_main_quit), NULL);
 '''gtk_widget_show_all''' (window);
 '''gtk_main''' ();
 '''return''' 0<nowiki>;</nowiki>
 }
 </tt>

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)

Retrieved from "https://wiki.maemo.org/Documentation/Maemo_5_Developer_Guide/Porting_Software/Migration"

Personal tools

Navigation

Views

Editing Documentation/Maemo 5 Developer Guide/Porting Software/Migration

@@ Line 1: / Line 1: @@
+=Migration =
 Because Hildon 2.2 is a big step up from previous versions, many approaches in the development of your program's graphical user interface may need to be migrated to this new interface type.
-__FORCETOC__
 == Menus ==
+Hildon app menu represents a big difference from the normal menus. If your application is to be finger-friendly, a view specific menu, instead of application menu, is mandatory.
-<code>HildonAppMenu</code> represents a big difference from the normal menus. If your application is to be finger-friendly, a view specific menu, instead of application menu, is mandatory.
 The Maemo 4 application menu typically contains most or the full set of functionality of the application, organized in hierarchical menus.
-In Maemo 5, there is a strict maximum limit 10 items in a view menu, and there is no menu hierarchy.
+In Maemo 5, there is a strict limit of maximum 10 items in a view menu, and there is no menu hierarchy.
 The Maemo 5 View menus are not application menus, in the sense that a view menu only contains commands relevant to that particular view. The only exception to this is the Root view menu, which additionally contains menu item(s) for application settings.
-Because the view menu also uses buttons, you can easily add them with the callback functions that the original menu items had.
+Because also the view menu uses buttons, you can easily add them with the callback functions that the original menu items had.
-For example, consider an advanced text editing program. The original menu bar had the following menus:
+For example, consider an advanced text edition program. The original menu bar had the following menus:
 '''Example 10.1. Menu example'''
-<pre>
+<div class="graybox">
-File
-    \ New
+ File
-    \ Open
+     \ New
-    \ Save
+     \ Open
-    \ Save As
+     \ Save
-    \ Quit
+     \ Save As
-Edit
+     \ Quit
-    \ Copy
+ Edit
-    \ Paste
+     \ Copy
-    \ Cut
+     \ Paste
-    \ Indent Type
+     \ Cut
-        \ Tabs
+     \ Indent Type
-        \ Spaces
+         \ Tabs
-    \ Preferences
+         \ Spaces
-View
+     \ Preferences
-    \ Zoom In
+ View
-    \ Zoom Out
+     \ Zoom In
-    \ Normal Size
+     \ Zoom Out
-    \ Highlight
+     \ Normal Size
-        \ C
+     \ Highlight
-        \ Python
+         \ C
-        \ JAVA
+         \ Python
-Help
+         \ JAVA
-    \ Contents
+ Help
-    \ About
+     \ Contents
-</pre>
+     \ About
+</div>
 Guidelines:
@@ Line 52: / Line 53: @@
 * Additional menu commands can be made accessible via dialogs opened from the view menu, if those commands cannot be presented directly in the UI or simply removed.
-A text editor does not need subviews, so more or less all commands need to fit in a single view. See [[Documentation/Maemo 5 Developer Guide/Human Interface Guidelines/Redesigning From Maemo 4 to Maemo 5|Redesigning From Maemo 4 to Maemo 5]] for details about sub view redesign.
+A text editor does not need subviews, so more or less all commands need to fit in a single view. See [[Documentation/Maemo_5_Developer_Guide/Human_Interface_Guidelines/Redesigning_From_Maemo_4_to_Maemo_5 | Redesigning From Maemo 4 to Maemo 5]] for details about sub view redesign.
 Changes:
@@ Line 58: / Line 59: @@
 ** NOTE: the document should be automatically saved (and re-opened) whenever the application is closed (or re-opened). There is no need to show any confirmation notes for this process.
 * Edit menu commands: remove "Cut/Copy/Paste", those should be used with keyboard shortcuts. Put all the rest inside "Preferences" dialog and rename it to "Settings"
-* View menu commands: "Zoom" in a text editor is not very useful so remove it (for changing the font size, simply HW +/- keys would be enough). Put "Highlight mode" in to "Settings".
+* View menu commands: "Zoom" in a text editor is not very useful so remove it. Since there are free slots, put "Highlight mode" in to the view menu.
 * Help menu commands: Remove help. It's not part of the Hildon 2.2 UI Style.
 The following example shows the implementation of the menu following the above decisions. The first figure below shows the final result of the app menu. The other showd the dialog activated by the menu command "Settings".
-[[Image:example-migrating-menu1.png|frame|center|alt=Screenshot of a HildonAppMenu|HildonAppMenu example]]
+[[Image:example-migrating-menu1.png|400px]]
-[[Image:example-migrating-menu-view.png|frame|center|alt=Screenshot of the settings dialog|Settings dialog example]]
+[[Image:example-migrating-menu-view.png|400px]]
 '''Example 10.2. Migrating a menu'''
-<source lang="c">
+ #include <hildon/hildon.h>
-#include <hildon/hildon.h>
-#include <libintl.h>
+ static void
+ normal_zoom_cb ()
+ {
+    /* Code to set normal zoom... */
+    hildon_window_stack_pop_1 (hildon_window_stack_get_default());
+ }
+ static void
+ view_subview ()
+ {
+    HildonStackableWindow *view_window;
+    view_window = HILDON_STACKABLE_WINDOW (hildon_stackable_window_new ());
+    gtk_window_set_title (GTK_WINDOW (view_window), "View");
+    GtkButton *normal_zoom_button = GTK_BUTTON (hildon_gtk_button_new (
+                                HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
+    gtk_button_set_label (normal_zoom_button, "Normal Zoom");
+    g_signal_connect (G_OBJECT (normal_zoom_button), "clicked",
+                      G_CALLBACK (normal_zoom_cb), NULL);
+    HildonTouchSelector *highlight_selector;
+    highlight_selector = HILDON_TOUCH_SELECTOR (hildon_touch_selector_new_text ());
+    hildon_touch_selector_append_text (highlight_selector, "C");
+    hildon_touch_selector_append_text (highlight_selector, "JAVA");
+    hildon_touch_selector_append_text (highlight_selector, "Python");
+    HildonPickerButton *highlight_picker = HILDON_PICKER_BUTTON (hildon_picker_button_new (
+                                    HILDON_SIZE_THUMB_HEIGHT | HILDON_SIZE_HALFSCREEN_WIDTH,
+                                                HILDON_BUTTON_ARRANGEMENT_VERTICAL));
+    hildon_button_set_title (HILDON_BUTTON (highlight_picker), "Syntax highlight:");
+    hildon_picker_button_set_selector (highlight_picker, highlight_selector);
+    hildon_picker_button_set_active (highlight_picker, 0);
+    GtkVBox *contents = GTK_VBOX (gtk_vbox_new (12, FALSE));
+    gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (highlight_picker), FALSE, FALSE, 0);
+    gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (normal_zoom_button), FALSE, FALSE, 0);
+    gtk_container_add (GTK_CONTAINER (view_window), GTK_WIDGET (contents));
+    gtk_widget_show_all (GTK_WIDGET (view_window));
+ }
+ static void
+ help_contents_cb (GtkButton *widget, gpointer data)
+ {
+    /* Code to set show help contents... */
+    hildon_window_stack_pop_1 (hildon_window_stack_get_default());
+ }
+ static void
+ help_about_cb (GtkButton *widget, gpointer data)
+ {
+    /* Code to set show about information... */
+    hildon_window_stack_pop_1 (hildon_window_stack_get_default());
+ }
+ static void
+ help_subview ()
+ {
+    HildonStackableWindow *view_window;
+    view_window = HILDON_STACKABLE_WINDOW (hildon_stackable_window_new ());
+    gtk_window_set_title (GTK_WINDOW (view_window), "Help");
+    GtkButton *help_contents_button = GTK_BUTTON (hildon_gtk_button_new (
+                                HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
+    gtk_button_set_label (help_contents_button, "Contents");
+    g_signal_connect (G_OBJECT (help_contents_button), "clicked",
+                      G_CALLBACK (help_contents_cb), NULL);
+    GtkButton *help_about_button = GTK_BUTTON (hildon_gtk_button_new (
+                                HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH));
+    gtk_button_set_label (help_about_button, "About");
+    g_signal_connect (G_OBJECT (help_about_button), "clicked",
+                      G_CALLBACK (help_about_cb), NULL);
+    GtkVBox *contents = GTK_VBOX (gtk_vbox_new (12, FALSE));
+    gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (help_contents_button), FALSE, FALSE, 0);
+    gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (help_about_button), FALSE, FALSE, 0);
+    gtk_container_add (GTK_CONTAINER (view_window), GTK_WIDGET (contents));
+    gtk_widget_show_all (GTK_WIDGET (view_window));
+ }
+ static HildonAppMenu *
+ build_menu (void)
+ {
+    HildonSizeType button_size = HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH;
+    HildonAppMenu *menu = HILDON_APP_MENU (hildon_app_menu_new ());
+    GtkButton *button;
+    GtkRadioButton *filter;
+    /* Menus like New, Open, etc that would open new dialogs (no submenus)
+     * are not assigned any action in this example
+     */
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "New");
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "Open");
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "Save As");
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "Preferences");
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "View");
+    g_signal_connect (G_OBJECT (button), "clicked",
+                      G_CALLBACK (view_subview), NULL);
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    filter = GTK_RADIO_BUTTON (hildon_gtk_radio_button_new (button_size, NULL));
+    gtk_button_set_label (GTK_BUTTON (filter), "Indentation: Spaces");
+    hildon_app_menu_add_filter (menu, GTK_BUTTON (filter));
+    gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter), FALSE);
+    button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+    gtk_button_set_label (button, "Help");
+    g_signal_connect (G_OBJECT (button), "clicked",
+                      G_CALLBACK (help_subview), NULL);
+    hildon_app_menu_append (menu, GTK_BUTTON (button));
+    filter = GTK_RADIO_BUTTON (hildon_gtk_radio_button_new_from_widget (button_size,
+                                    GTK_RADIO_BUTTON (filter)));
+    gtk_button_set_label (GTK_BUTTON (filter), "Indentation: Tabs");
+    hildon_app_menu_add_filter (menu, GTK_BUTTON (filter));
+    gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter), FALSE);
+    gtk_widget_show_all (GTK_WIDGET (menu));
+    return menu;
+ }
+ int
+ main (int argc, char **argv)
+ {
+    hildon_gtk_init (&argc, &argv);
+    GtkWidget *window;
+    window = hildon_stackable_window_new ();
+    gtk_window_set_title (GTK_WINDOW (window), "Editor");
+    HildonAppMenu *menu = build_menu ();
+    hildon_stackable_window_set_main_menu (HILDON_STACKABLE_WINDOW (window),     menu);
+    GtkWidget *contents = gtk_label_new ("This example shows how an app menu could be "
+                                         "divided.\nMenus that would open new dialogs "
+                                         "are not assigned any action.");
+    gtk_container_add (GTK_CONTAINER (window), contents);
+    /* ... other widgets in the application */
+    g_signal_connect (G_OBJECT (window), "destroy",
+                      G_CALLBACK (gtk_main_quit), NULL);
+    gtk_widget_show_all (window);
+    gtk_main ();
+    return 0;
+ }
-static void
+==Choices ==
-menu_settings_cb (GtkButton *widget, gpointer data)
+Some widgets for choosing options also need to be adapted to the new Hildon way of designing interfaces. If you have several radio buttons to express a choice, replacing them with a picker button is a good idea.
-{
-   /* Code to set show settings dialog... */
-   g_assert(data);
-   GtkDialog *dialog = GTK_DIALOG(
-      gtk_dialog_new_with_buttons("Settings",
-                                  GTK_WINDOW(data),
-                                  GTK_DIALOG_MODAL | GTK_DIALOG_DESTROY_WITH_PARENT,
-                                  dgettext("hildon-libs", "wdgt_bd_save"),
-                                  GTK_RESPONSE_OK,
-                                  NULL));
-   gint response = 0;
-   GtkSizeGroup *titlegroup = gtk_size_group_new(GTK_SIZE_GROUP_HORIZONTAL);
-   GtkSizeGroup *valuegroup = gtk_size_group_new(GTK_SIZE_GROUP_HORIZONTAL);
-   /* Syntax highlight */
+Consider a dialog that includes, among other widgets, a frame labeled "Proxy Preferences" and three radio buttons: "None", "Auto" and "Manual", displayed vertically like Figure 10.1 "Three radio buttons" shows. The following example shows how such task could be accomplished using a picker button. The frame label becomes the picker button's title and the three radio buttons' labels become the choices in the picker's touch selector. The screenshot below shows  the resulting graphical user interface.
-   GtkWidget *syntax_selector = hildon_touch_selector_new_text ();
-   hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (syntax_selector), "C");
-   hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (syntax_selector), "JAVA");
-   hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (syntax_selector), "Python");
-   GtkWidget *syntax_picker = hildon_picker_button_new (HILDON_SIZE_THUMB_HEIGHT | HILDON_SIZE_AUTO_WIDTH,
-                                                        HILDON_BUTTON_ARRANGEMENT_HORIZONTAL);
-   hildon_button_set_title (HILDON_BUTTON (syntax_picker), "Syntax highlight");
-   hildon_picker_button_set_selector (HILDON_PICKER_BUTTON(syntax_picker),
-                                      HILDON_TOUCH_SELECTOR(syntax_selector));
-   hildon_picker_button_set_active (HILDON_PICKER_BUTTON(syntax_picker), 0);
-   gtk_button_set_alignment (GTK_BUTTON (syntax_picker), 0.0, 0.5);
-   hildon_button_add_size_groups (HILDON_BUTTON (syntax_picker), titlegroup, valuegroup, NULL);
-   gtk_container_add (GTK_CONTAINER (dialog->vbox), syntax_picker);
-   /* Indent type */
+[[Image:choices.png|Image choices|400px]]
-   GtkWidget *indent_selector = hildon_touch_selector_new_text ();
-   hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (indent_selector), "Tabs");
-   hildon_touch_selector_append_text (HILDON_TOUCH_SELECTOR (indent_selector), "Spaces");
-   GtkWidget *indent_picker = hildon_picker_button_new (HILDON_SIZE_THUMB_HEIGHT | HILDON_SIZE_AUTO_WIDTH,
-                                                        HILDON_BUTTON_ARRANGEMENT_HORIZONTAL);
-   hildon_button_set_title (HILDON_BUTTON (indent_picker), "Indent type");
-   hildon_picker_button_set_selector (HILDON_PICKER_BUTTON(indent_picker),
-                                      HILDON_TOUCH_SELECTOR(indent_selector));
-   hildon_picker_button_set_active (HILDON_PICKER_BUTTON(indent_picker), 0);
-   gtk_button_set_alignment (GTK_BUTTON (indent_picker), 0.0, 0.5);
+'''Example 10.3. Migrating choice widgets'''
-   hildon_button_add_size_groups (HILDON_BUTTON (indent_picker), titlegroup, valuegroup, NULL);
-   gtk_container_add (GTK_CONTAINER (dialog->vbox), indent_picker);
-   gtk_widget_show_all (GTK_WIDGET (dialog));
+ <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;hildon/hildon.h&gt;</font></span>
+ <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>
+     <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 <span><font color="#990000"><nowiki>*</nowiki></font></span>window<span><font color="#990000"><nowiki>;</nowiki></font></span>
+     window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
+     <span>'''<span><font color="#000000">gtk_window_set_title</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Preferences"</font></span><span><font color="#990000">);</font></span>
+     <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>
+                       <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>
+     HildonPickerButton <span><font color="#990000"><nowiki>*</nowiki></font></span>picker <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">HILDON_PICKER_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_picker_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>
+                             HILDON_SIZE_THUMB_HEIGHT <span><font color="#990000"><nowiki>|</nowiki></font></span> HILDON_SIZE_HALFSCREEN_WIDTH<span><font color="#990000">,</font></span>
+                                                 HILDON_BUTTON_ARRANGEMENT_VERTICAL<span><font color="#990000">));</font></span>
+     <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<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Proxy preferences:"</font></span><span><font color="#990000">);</font></span>
+     HildonTouchSelector <span><font color="#990000"><nowiki>*</nowiki></font></span>selector <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">HILDON_TOUCH_SELECTOR</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_touch_selector_new_text</font></span>'''</span> <span><font color="#990000">());</font></span>
+     <span>'''<span><font color="#000000">hildon_picker_button_set_selector</font></span>'''</span> <span><font color="#990000">(</font></span>picker<span><font color="#990000">,</font></span> selector<span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">hildon_touch_selector_append_text</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">,</font></span> <span><font color="#FF0000">"None"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">hildon_touch_selector_append_text</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">,</font></span> <span><font color="#FF0000">"Auto"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">hildon_touch_selector_append_text</font></span>'''</span> <span><font color="#990000">(</font></span>selector<span><font color="#990000">,</font></span> <span><font color="#FF0000">"Manual"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">hildon_picker_button_set_active</font></span>'''</span> <span><font color="#990000">(</font></span>picker<span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">);</font></span>
+     GtkVBox <span><font color="#990000"><nowiki>*</nowiki></font></span>contents <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_VBOX</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">gtk_vbox_new</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#993399">12</font></span><span><font color="#990000">,</font></span> FALSE<span><font color="#990000">));</font></span>
+     <span>''<span><font color="#9A1900">/* ... other widgets placed here */</font></span>''</span>
+     <span>'''<span><font color="#000000">gtk_box_pack_end</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_BOX</font></span>'''</span> <span><font color="#990000">(</font></span>contents<span><font color="#990000">),</font></span> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>picker<span><font color="#990000">),</font></span> FALSE<span><font color="#990000">,</font></span> FALSE<span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">);</font></span>
+     <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> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>contents<span><font color="#990000">));</font></span>
+     <span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">gtk_main</font></span>'''</span> <span><font color="#990000">();</font></span>
+     <span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
+ <span><font color="#FF0000">}</font></span>
+ </tt>
-   response = gtk_dialog_run(dialog);
-   if (response == GTK_RESPONSE_OK) {
-       /* "Save" button has been pressed, save/update the settings here */
-       /* ... */
+==Notebooks ==
-   }
+Because the use of notebooks is not advised in Hildon, this widget does not have to be replaced to be updated.
-   /* close the dialog */
-   gtk_widget_destroy(GTK_WIDGET(dialog));
-}
-static HildonAppMenu *
-build_menu (GtkWidget *window)
-{
-   HildonSizeType button_size = HILDON_SIZE_FINGER_HEIGHT | HILDON_SIZE_AUTO_WIDTH;
-   HildonAppMenu *menu = HILDON_APP_MENU (hildon_app_menu_new ());
-   GtkButton *button;
-   /* Menus like New, Open, etc that would open new dialogs (no submenus)
-    * are not assigned any action in this example
-    */
-   button = GTK_BUTTON (hildon_gtk_button_new (button_size));
-   gtk_button_set_label (button, "New");
-   hildon_app_menu_append (menu, GTK_BUTTON (button));
-   button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+Imagine a preferences dialog that has a notebook to divide the preferences in "General", "Colors" and "Tools" like depicted in the figure below.
-   gtk_button_set_label (button, "Open");
-   hildon_app_menu_append (menu, GTK_BUTTON (button));
-   button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+[[Image:example-notebook1.png|400px]]
-   gtk_button_set_label (button, "Save");
-   hildon_app_menu_append (menu, GTK_BUTTON (button));
-   button = GTK_BUTTON (hildon_gtk_button_new (button_size));
+The way to accomplish the same functionality without having a notebook is to use a window with buttons that open other windows as subviews. Each window opened using the buttons should have the content that the respective page in the notebook had.
-   gtk_button_set_label (button, "Settings");
-   g_signal_connect (G_OBJECT (button), "clicked",
-                     G_CALLBACK (menu_settings_cb), window);
-   hildon_app_menu_append (menu, GTK_BUTTON (button));
-   gtk_widget_show_all (GTK_WIDGET (menu));
+[[Image:example-notebook-general.png|250px]]  [[Image:example-notebook-colors.png||250px]]  [[Image:example-notebok-tools.png|250px]]
-   return menu;
+The example shows the code to produce a replacement for the notebook.
-}
-int
-main (int argc, char **argv)
-{
-   hildon_gtk_init (&argc, &argv);
-   GtkWidget *window;
-   window = hildon_stackable_window_new ();
-   gtk_window_set_title (GTK_WINDOW (window), "Editor");
-   HildonAppMenu *menu = build_menu (window);
-   hildon_window_set_app_menu (HILDON_WINDOW (window),     menu);
-   GtkWidget *contents = gtk_label_new ("This example shows how an app menu could be "\
-                                        "migrated.\nMenu item callbacks "\
-                                        "are not fully implemented.");
-   gtk_container_add (GTK_CONTAINER (window), contents);
-   /* ... other widgets in the application */
-   g_signal_connect (G_OBJECT (window), "destroy",
-                     G_CALLBACK (gtk_main_quit), NULL);
-   gtk_widget_show_all (window);
-   gtk_main ();
-   return 0;
-}
-</source>
-==Choices ==
-Some widgets for choosing options also need to be adapted to the new Hildon way of designing interfaces. If you have several radio buttons to express a choice, replacing them with a picker button is a good idea.
-Consider a dialog that includes, among other widgets, a frame labeled "Proxy Preferences" and three radio buttons: "None", "Auto" and "Manual", displayed vertically like Figure 10.1 "Three radio buttons" shows. The following example shows how such task could be accomplished using a picker button. The frame label becomes the picker button's title and the three radio buttons' labels become the choices in the picker's touch selector. The screenshot below shows  the resulting graphical user interface.
-[[Image:choices.png|frame|center|alt=Screenshot of a picker button dialog|Example of choices in a picker button]]
-'''Example 10.3. Migrating choice widgets'''
-<source lang="c">
-#include <hildon/hildon.h>
-int
-main (int argc, char **argv)
-{
-    hildon_gtk_init (&argc, &argv);
-    GtkWidget *window;
-    window = hildon_window_new ();
-    gtk_window_set_title (GTK_WINDOW (window), "Preferences");
-    g_signal_connect (G_OBJECT (window), "destroy",
-                      G_CALLBACK (gtk_main_quit), NULL);
-    HildonPickerButton *picker = HILDON_PICKER_BUTTON (hildon_picker_button_new (
-                            HILDON_SIZE_THUMB_HEIGHT | HILDON_SIZE_HALFSCREEN_WIDTH,
-                                                HILDON_BUTTON_ARRANGEMENT_VERTICAL));
-    hildon_button_set_title (HILDON_BUTTON (picker), "Proxy preferences:");
-    HildonTouchSelector *selector = HILDON_TOUCH_SELECTOR (hildon_touch_selector_new_text ());
-    hildon_picker_button_set_selector (picker, selector);
-    hildon_touch_selector_append_text (selector, "None");
-    hildon_touch_selector_append_text (selector, "Auto");
-    hildon_touch_selector_append_text (selector, "Manual");
-    hildon_picker_button_set_active (picker, 0);
-    GtkVBox *contents = GTK_VBOX (gtk_vbox_new (12, FALSE));
-    /* ... other widgets placed here */
-    gtk_box_pack_end (GTK_BOX (contents), GTK_WIDGET (picker), FALSE, FALSE, 0);
-    gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (contents));
-    gtk_widget_show_all (window);
-    gtk_main ();
-    return 0;
-}
-</source>
-==Notebooks ==
-Because the use of notebooks is not advised in Hildon, the way to migrate a Maemo 4 dialog with a notebook to Maemo 5, is to simply put all the items inside a single pannable dialog.
+'''Example 10.4. Migrating a notebook'''
-[[Category:Development]]
+ <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;hildon/hildon.h&gt;</font></span>
-[[Category:Documentation]]
+ <span>'''<span><font color="#0000FF">static</font></span>'''</span> HildonStackableWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>
-[[Category:Fremantle]]
+ <span>'''<span><font color="#000000">new_preferences_window</font></span>'''</span> <span><font color="#990000">(</font></span>gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>title<span><font color="#990000">)</font></span>
+ <span><font color="#FF0000">{</font></span>
+     HildonStackableWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>pref_window<span><font color="#990000"><nowiki>;</nowiki></font></span>
+     pref_window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_stackable_window_new</font></span>'''</span> <span><font color="#990000">());</font></span>
+     <span>'''<span><font color="#000000">gtk_window_set_title</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>pref_window<span><font color="#990000">),</font></span> title<span><font color="#990000">);</font></span>
+     GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>content <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_label_new</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">g_strdup_printf</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"Set the %s Preferences"</font></span><span><font color="#990000">,</font></span> title<span><font color="#990000">));</font></span>
+     <span>'''<span><font color="#000000">gtk_widget_show</font></span>'''</span> <span><font color="#990000">(</font></span>content<span><font color="#990000">);</font></span>
+     <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>pref_window<span><font color="#990000">),</font></span> content<span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#0000FF">return</font></span>'''</span> pref_window<span><font color="#990000"><nowiki>;</nowiki></font></span>
+ <span><font color="#FF0000">}</font></span>
+ <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span>
+ <span>'''<span><font color="#000000">button_clicked_cb</font></span>'''</span> <span><font color="#990000">(</font></span>GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">,</font></span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>title<span><font color="#990000">)</font></span>
+ <span><font color="#FF0000">{</font></span>
+     HildonStackableWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>sw <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">new_preferences_window</font></span>'''</span> <span><font color="#990000">(</font></span>title<span><font color="#990000">);</font></span>
+     <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>sw<span><font color="#990000">));</font></span>
+ <span><font color="#FF0000">}</font></span>
+ <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>
+     <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 <span><font color="#990000"><nowiki>*</nowiki></font></span>window<span><font color="#990000"><nowiki>;</nowiki></font></span>
+     GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>general_pref_button<span><font color="#990000">,</font></span> <span><font color="#990000"><nowiki>*</nowiki></font></span>colors_pref_button<span><font color="#990000">,</font></span> <span><font color="#990000"><nowiki>*</nowiki></font></span>tools_pref_button<span><font color="#990000"><nowiki>;</nowiki></font></span>
+     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>
+     <span>'''<span><font color="#000000">gtk_window_set_title</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Preferences"</font></span><span><font color="#990000">);</font></span>
+     general_pref_button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_gtk_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO_HEIGHT<span><font color="#990000">));</font></span>
+     <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span>general_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"General"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>general_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"clicked"</font></span><span><font color="#990000">,</font></span>
+                         <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>button_clicked_cb<span><font color="#990000">),</font></span> <span><font color="#FF0000">"General"</font></span><span><font color="#990000">);</font></span>
+     colors_pref_button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_gtk_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO_HEIGHT<span><font color="#990000">));</font></span>
+     <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span>colors_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"Colors"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>colors_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"clicked"</font></span><span><font color="#990000">,</font></span>
+                         <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>button_clicked_cb<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Colors"</font></span><span><font color="#990000">);</font></span>
+     tools_pref_button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_gtk_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO_HEIGHT<span><font color="#990000">));</font></span>
+     <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span>tools_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"Tools"</font></span><span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>tools_pref_button<span><font color="#990000">,</font></span> <span><font color="#FF0000">"clicked"</font></span><span><font color="#990000">,</font></span>
+                         <span>'''<span><font color="#000000">G_CALLBACK</font></span>'''</span> <span><font color="#990000">(</font></span>button_clicked_cb<span><font color="#990000">),</font></span> <span><font color="#FF0000">"Tools"</font></span><span><font color="#990000">);</font></span>
+     GtkVBox <span><font color="#990000"><nowiki>*</nowiki></font></span>contents <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_VBOX</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">gtk_vbox_new</font></span>'''</span> <span><font color="#990000">(</font></span>TRUE<span><font color="#990000">,</font></span> <span><font color="#993399">12</font></span><span><font color="#990000">));</font></span>
+     <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>contents<span><font color="#990000">),</font></span> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>general_pref_button<span><font color="#990000">));</font></span>
+     <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>contents<span><font color="#990000">),</font></span> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>colors_pref_button<span><font color="#990000">));</font></span>
+     <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>contents<span><font color="#990000">),</font></span> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>tools_pref_button<span><font color="#990000">));</font></span>
+     <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> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>contents<span><font color="#990000">));</font></span>
+     <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>
+                       <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>
+     <span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">);</font></span>
+     <span>'''<span><font color="#000000">gtk_main</font></span>'''</span> <span><font color="#990000">();</font></span>
+     <span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
+ <span><font color="#FF0000">}</font></span>
+ </tt>