Editing Legacy Maemo 5 Documentation/Graphical UI Tutorial/Menus
Warning: You are not logged in.
Your IP address will be recorded in this page's edit history.
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.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
- | + | =Menus = | |
- | + | ||
The use of menus in Hildon applications follows a very different approach from the traditional application menus. | The use of menus in Hildon applications follows a very different approach from the traditional application menus. | ||
Hildon applications have no menu bar. Each window has an attached menu which activates when the user presses the window title area. Also, unlike typical menus in desktop applications, view menus do not follow a hierarchical structure. This menu, attached to a view, is called Touch View Menu. | Hildon applications have no menu bar. Each window has an attached menu which activates when the user presses the window title area. Also, unlike typical menus in desktop applications, view menus do not follow a hierarchical structure. This menu, attached to a view, is called Touch View Menu. | ||
- | Additionally Hildon provides Context menus, | + | Additionally Hildon provides Context menus, although those should be avoided when possible. |
+ | |||
==Touch view menu == | ==Touch view menu == | ||
- | + | The widget which should be used as a menu in the windows of a Hildon application is HildonAppmenu. | |
- | + | ||
This widget opens at the top of the screen, obscuring the topmost window, and contains several entries organized in one or two columns, depending on screen orientation. Besides entries, application menus can also contain a group of filter buttons. | This widget opens at the top of the screen, obscuring the topmost window, and contains several entries organized in one or two columns, depending on screen orientation. Besides entries, application menus can also contain a group of filter buttons. | ||
- | The entries are | + | The entries are GtkButtons. Assign an action to the menu item for when they are activated. |
Filters are toggle buttons that can be used for presentation/sorting purposes. For example, sorting alphabetically a list of contacts or changing the size of icons in a list. | Filters are toggle buttons that can be used for presentation/sorting purposes. For example, sorting alphabetically a list of contacts or changing the size of icons in a list. | ||
- | To create a | + | To create a HildonAppMenu, use the following command: |
- | < | + | <tt>GtkWidget<span><font color="#990000"><nowiki>*</nowiki></font></span> <span>'''<span><font color="#000000">hildon_app_menu_new</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#009900">void</font></span><span><font color="#990000">);</font></span> |
- | + | </tt> | |
- | </ | + | |
- | + | Once the application menu is created, add entries to the menu by using the following functions: | |
- | < | + | <tt> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_app_menu_append</font></span>'''</span> <span><font color="#990000">(</font></span>HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">,</font></span> |
- | void hildon_app_menu_append (HildonAppMenu *menu, | + | GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>item<span><font color="#990000">);</font></span> |
- | + | <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_app_menu_prepend</font></span>'''</span> <span><font color="#990000">(</font></span>HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">,</font></span> | |
- | void hildon_app_menu_prepend (HildonAppMenu *menu, | + | GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>item<span><font color="#990000">);</font></span> |
- | + | <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_app_menu_insert</font></span>'''</span> <span><font color="#990000">(</font></span>HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">,</font></span> | |
- | void hildon_app_menu_insert (HildonAppMenu *menu, | + | GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>item<span><font color="#990000">,</font></span> |
- | + | gint position<span><font color="#990000">);</font></span> | |
- | + | </tt> | |
- | </ | + | |
These functions allow you to append, prepend an entry or add it in a certain position (from 0 to N-1, where N is the number of menus). | These functions allow you to append, prepend an entry or add it in a certain position (from 0 to N-1, where N is the number of menus). | ||
Line 41: | Line 38: | ||
To add filter buttons, use the following: | To add filter buttons, use the following: | ||
- | < | + | <tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_app_menu_add_filter</font></span>'''</span> <span><font color="#990000">(</font></span>HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">,</font></span> |
- | void hildon_app_menu_add_filter (HildonAppMenu *menu, | + | GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>filter<span><font color="#990000">);</font></span> |
- | + | </tt> | |
- | </ | + | |
- | Again, be careful with the number of filters that you add to the application menu. More than 4 might not be well displayed, even less, depending on the length of the labels. Filters should be grouped and act as radio buttons, that is, for any filter, at least another filter with a different/opposite action | + | Again, be careful with the number of filters that you add to the application menu. More than 4 might not be well displayed, even less, depending on the length of the labels. Filters should be grouped and act as radio buttons, that is, for any filter, at least another filter with a different/opposite action should exist. Actually, GtkRadioButtons can be easily used to accomplish this by having them grouped (using <code>gtk_radio_button_new_from_widget()</code> like the next example shows) and by not drawing their indicator - with the function gtk_toggle_button_set_mode(). |
- | + | Once the menu is properly created and filled up with entries and filters, add the menu to a HildonWindow. To set and retrieve a window's menu, use the following functions: | |
- | < | + | <tt> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_window_set_app_menu</font></span>'''</span> <span><font color="#990000">(</font></span>HildonWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>self<span><font color="#990000">,</font></span> |
- | void hildon_window_set_app_menu (HildonWindow *self, | + | HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">);</font></span> |
- | + | HildonAppMenu<span><font color="#990000"><nowiki>*</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_get_app_menu</font></span>'''</span> <span><font color="#990000">(</font></span>HildonWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>self<span><font color="#990000">);</font></span> | |
- | HildonAppMenu* hildon_window_get_app_menu (HildonWindow * | + | </tt> |
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | </ | + | |
The following example shows how to create and set up an application menu. | The following example shows how to create and set up an application menu. | ||
- | + | '''Example 3.1. Example of a Hildon application menu''' | |
- | < | + | <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><hildon/hildon.h></font></span> |
- | #include <hildon/hildon.h> | + | |
- | + | <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> | |
- | static void | + | <span>'''<span><font color="#000000">menu_button_clicked</font></span>'''</span> <span><font color="#990000">(</font></span>GtkButton <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">,</font></span> |
- | menu_button_clicked (GtkButton *button, | + | GtkLabel <span><font color="#990000"><nowiki>*</nowiki></font></span>label<span><font color="#990000">)</font></span> |
- | + | <span><font color="#FF0000">{</font></span> | |
- | { | + | <span>'''<span><font color="#0000FF">const</font></span>'''</span> <span><font color="#009900">char</font></span> <span><font color="#990000"><nowiki>*</nowiki></font></span>buttontext <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_button_get_label</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">);</font></span> |
- | + | <span><font color="#009900">char</font></span> <span><font color="#990000"><nowiki>*</nowiki></font></span>text <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">g_strdup_printf</font></span>'''</span><span><font color="#990000">(</font></span><span><font color="#FF0000">"Last option selected:</font></span><span><font color="#CC33CC">\n</font></span><span><font color="#FF0000">%s"</font></span><span><font color="#990000">,</font></span> buttontext<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_label_set_text</font></span>'''</span> <span><font color="#990000">(</font></span>label<span><font color="#990000">,</font></span> text<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">g_free</font></span>'''</span> <span><font color="#990000">(</font></span>text<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">g_debug</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"Button clicked: %s"</font></span><span><font color="#990000">,</font></span> buttontext<span><font color="#990000">);</font></span> | |
- | + | <span><font color="#FF0000">}</font></span> | |
- | } | + | |
- | + | <span>'''<span><font color="#0000FF">static</font></span>'''</span> HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span> | |
- | static HildonAppMenu * | + | <span>'''<span><font color="#000000">create_menu</font></span>'''</span> <span><font color="#990000">(</font></span>GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>label<span><font color="#990000">)</font></span> |
- | create_menu (GtkWidget *label) | + | <span><font color="#FF0000">{</font></span> |
- | { | + | <span><font color="#009900">int</font></span> i<span><font color="#990000"><nowiki>;</nowiki></font></span> |
- | + | gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>command_id<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> | |
- | + | HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">HILDON_APP_MENU</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">hildon_app_menu_new</font></span>'''</span> <span><font color="#990000">());</font></span> | |
- | + | ||
- | + | <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">1</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span> i <span><font color="#990000"><</font></span> <span><font color="#993399">6</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span> i<span><font color="#990000">++)</font></span> <span><font color="#FF0000">{</font></span> | |
- | + | <span>''<span><font color="#9A1900">/* Create menu entries */</font></span>''</span> | |
- | + | button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_gtk_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">);</font></span> | |
- | + | command_id <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">g_strdup_printf</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"Menu command %d"</font></span><span><font color="#990000">,</font></span> i<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> command_id<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Attach callback to clicked signal */</font></span>''</span> | |
- | + | <span>'''<span><font color="#000000">g_signal_connect_after</font></span>'''</span> <span><font color="#990000">(</font></span>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>menu_button_clicked<span><font color="#990000">),</font></span> | |
- | + | label<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Add entry to the view menu */</font></span>''</span> | |
- | + | <span>'''<span><font color="#000000">hildon_app_menu_append</font></span>'''</span> <span><font color="#990000">(</font></span>menu<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">));</font></span> | |
- | + | <span><font color="#FF0000">}</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Create filters */</font></span>''</span> | |
- | + | button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_gtk_radio_button_new</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span> NULL<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"filter one"</font></span><span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">g_signal_connect_after</font></span>'''</span> <span><font color="#990000">(</font></span>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>menu_button_clicked<span><font color="#990000">),</font></span> label<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">hildon_app_menu_add_filter</font></span>'''</span> <span><font color="#990000">(</font></span>menu<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">));</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_toggle_button_set_mode</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_TOGGLE_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> FALSE<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_gtk_radio_button_new_from_widget</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span> | |
- | + | <span>'''<span><font color="#000000">GTK_RADIO_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">));</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_button_set_label</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"filter two"</font></span><span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">g_signal_connect_after</font></span>'''</span> <span><font color="#990000">(</font></span>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>menu_button_clicked<span><font color="#990000">),</font></span> label<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">hildon_app_menu_add_filter</font></span>'''</span> <span><font color="#990000">(</font></span>menu<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">GTK_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">));</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_toggle_button_set_mode</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_TOGGLE_BUTTON</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> FALSE<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>menu<span><font color="#990000">));</font></span> | |
- | + | ||
- | + | <span>'''<span><font color="#0000FF">return</font></span>'''</span> menu<span><font color="#990000"><nowiki>;</nowiki></font></span> | |
- | + | <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> |
- | main (int argc, | + | <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> | |
- | { | + | GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>win<span><font color="#990000"><nowiki>;</nowiki></font></span> |
- | + | GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>label<span><font color="#990000"><nowiki>;</nowiki></font></span> | |
- | + | GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>label2<span><font color="#990000"><nowiki>;</nowiki></font></span> | |
- | + | GtkBox <span><font color="#990000"><nowiki>*</nowiki></font></span>vbox<span><font color="#990000"><nowiki>;</nowiki></font></span> | |
- | + | HildonAppMenu <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000"><nowiki>;</nowiki></font></span> | |
- | + | ||
- | + | <span>'''<span><font color="#000000">hildon_gtk_init</font></span>'''</span> <span><font color="#990000">(&</font></span>argc<span><font color="#990000">,</font></span> <span><font color="#990000">&</font></span>argv<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | win <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="#9A1900">/* Create and pack labels */</font></span>''</span> | |
- | + | label <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><font color="#FF0000">"This is an example of the</font></span><span><font color="#CC33CC">\n</font></span><span><font color="#FF0000">HildonAppMenu widget.</font></span><span><font color="#CC33CC">\n\n</font></span><span><font color="#FF0000">"</font></span> | |
- | + | <span><font color="#FF0000">"Click on the titlebar</font></span><span><font color="#CC33CC">\n</font></span><span><font color="#FF0000">to pop up the menu."</font></span><span><font color="#990000">);</font></span> | |
- | + | label2 <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><font color="#FF0000">"No menu option has been selected yet."</font></span><span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>'''<span><font color="#000000">gtk_label_set_justify</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_LABEL</font></span>'''</span> <span><font color="#990000">(</font></span>label<span><font color="#990000">),</font></span> GTK_JUSTIFY_CENTER<span><font color="#990000">);</font></span> | |
- | + | <span>'''<span><font color="#000000">gtk_label_set_justify</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_LABEL</font></span>'''</span> <span><font color="#990000">(</font></span>label2<span><font color="#990000">),</font></span> GTK_JUSTIFY_CENTER<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | vbox <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">GTK_BOX</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>FALSE<span><font color="#990000">,</font></span> <span><font color="#993399">10</font></span><span><font color="#990000">));</font></span> | |
- | + | ||
- | + | <span>'''<span><font color="#000000">gtk_box_pack_start</font></span>'''</span> <span><font color="#990000">(</font></span>vbox<span><font color="#990000">,</font></span> label<span><font color="#990000">,</font></span> TRUE<span><font color="#990000">,</font></span> TRUE<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_box_pack_start</font></span>'''</span> <span><font color="#990000">(</font></span>vbox<span><font color="#990000">,</font></span> label2<span><font color="#990000">,</font></span> TRUE<span><font color="#990000">,</font></span> TRUE<span><font color="#990000">,</font></span> <span><font color="#993399">0</font></span><span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Create menu */</font></span>''</span> | |
- | + | menu <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">create_menu</font></span>'''</span> <span><font color="#990000">(</font></span>label2<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Attach menu to the window */</font></span>''</span> | |
- | + | <span>'''<span><font color="#000000">hildon_window_set_app_menu</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>win<span><font color="#990000">),</font></span> menu<span><font color="#990000">);</font></span> | |
- | + | ||
- | + | <span>''<span><font color="#9A1900">/* Add label's box to window */</font></span>''</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>win<span><font color="#990000">),</font></span> <span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>vbox<span><font color="#990000">));</font></span> | |
- | + | ||
- | + | <span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>win<span><font color="#990000">,</font></span> <span><font color="#FF0000">"delete_event"</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>win<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> |
- | </ | + | |
- | + | ||
- | + | ||
Each entry and filter button in this example is attached to a function that simply changes a label in the main window. | Each entry and filter button in this example is attached to a function that simply changes a label in the main window. | ||
- | Note that the function used to attach handlers to the entries is <code>g_signal_connect_after()</code>. So the handler are called after the default handler of the signal " | + | Note that the function used to attach handlers to the entries is <code>g_signal_connect_after()</code>. So the handler are called after the default handler of the signal "clicked". The default handler for entries and filters closes the menu. |
==Application menus and views == | ==Application menus and views == | ||
- | |||
The previous example had only one view. In applications with several views, you can attach a different menu to each view and add only the options that are relevant to the displayed view. | The previous example had only one view. In applications with several views, you can attach a different menu to each view and add only the options that are relevant to the displayed view. | ||
- | The function <code>hildon_window_set_app_menu()</code>allows to set a menu to an HildonWindow and its descendant | + | The function <code>hildon_window_set_app_menu()</code>allows to set a menu to an HildonWindow and its descendant HildonStackableWindow widget. |
- | < | + | <tt> <span>'''<span><font color="#000000">hildon_window_set_app_menu</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>win<span><font color="#990000">),</font></span> menu<span><font color="#990000">);</font></span> |
- | hildon_window_set_app_menu (HILDON_STACKABLE_WINDOW (win), menu); | + | </tt> |
- | </ | + | |
Note that submenus are not supported by view menus. Usually a menu item that would have suboptions in a desktop application is implemented as a new subview in a Hildon application. | Note that submenus are not supported by view menus. Usually a menu item that would have suboptions in a desktop application is implemented as a new subview in a Hildon application. | ||
- | A callback function for a complex menu entry | + | A callback function for a complex menu entry could create a new HildonStackableWindow to accomplish the task that the option refers to. The new window could contain a different view menu to contain buttons to perform the action. The buttons could even reside in the window area. |
+ | |||
==Context menu == | ==Context menu == | ||
+ | Context menu is usually invoked via long press over an item on the screen, like holding a finger over an image thumbnail. The menu should contain commands directly related to the chosen item. | ||
- | + | Avoid using context menus, because they are a hidden and inconvenient way of interacting with the UI. Use HildonAppMenus instead. | |
- | + | ||
- | Avoid using context menus, because they are a hidden and inconvenient way of interacting with the UI. Use | + | |
- | + | ||
- | + | ||
- | < | + | To create a GtkMenu in a Hildon application you should use the following function instead of <code>gtk_menu_new()</code><nowiki>: </nowiki> |
- | + | ||
- | </ | + | |
- | + | <tt>GtkWidget<span><font color="#990000"><nowiki>*</nowiki></font></span> <span>'''<span><font color="#000000">hildon_gtk_menu_new</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#009900">void</font></span><span><font color="#990000">);</font></span> | |
+ | </tt> | ||
- | + | This function creates a GtkMenu that allows Hildon specific styling. | |
- | + | When you use a GtkMenu in your Hildon application, consider how many menu items you are going to use, because screen space is limited. Also consider the fact that in the interests of keeping the UI clear, submenus are not allowed. | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Learn more about Contributing to the wiki.