Legacy Maemo 5 Documentation/Graphical UI Tutorial/Menus - Revision history

imported_>amigadave: /* Touch view menu */ add images

2010-12-29T09:18:31Z

Touch view menu: add images

← Older revision		Revision as of 09:18, 29 December 2010
Line 64:		Line 64:
	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~~'''~~		[[Image:Example-application-menu-clicked.png\|frame\|center\|alt=Screenshot of Hildon application menu\|'''Example 3.1''' Example of a Hildon application menu]]

	<source lang="c">		<source lang="c">
Line 167:		Line 167:
	}		}
	</source>		</source>

			[[Image:Example-application-menu.png\|frame\|center\|alt=Screenshot of HildonAppMenu application before menu is displayed\|Example HildonAppMenu, before displaying the menu]]

	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.

imported_>amigadave: wikify slightly

2010-10-15T12:56:12Z

wikify slightly

Show changes

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:45:08Z

← Older revision		Revision as of 09:45, 12 February 2010
Line 1:		Line 1:
			{{Legacy documentation}}

	=Menus =		=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.

imported_>msoini: Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Menus moved to Legacy Maemo 5 Documentation/Graphical UI Tutorial/Menus: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

2009-10-14T09:28:55Z

Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Menus moved to Legacy Maemo 5 Documentation/Graphical UI Tutorial/Menus: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

← Older revision	Revision as of 09:28, 14 October 2009
(No difference)

imported_>kimmos: Added link to prev / next page

2009-10-12T14:38:24Z

Added link to prev / next page

← Older revision		Revision as of 14:38, 12 October 2009
Line 192:		Line 192:

	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.		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.

			<hr/>
			<table width=100%>
			<tr>
			<td width=30% align=left>
			Prev: [[{{BASEPAGENAME}}/Windows_and_dialogs\|Windows and Dialogs]]</td>
			<td align=center>Up: [[{{BASEPAGENAME}}\|Table of Contents]]</td>
			<td width=30% align=right>
			Next: [[{{BASEPAGENAME}}/Toolbars\|Toolbars]]</td>
			</tr></table>

imported_>mattiviljanen: /* Touch view menu */ gtk_widget_show_all

2009-10-10T23:21:53Z

Touch view menu: gtk_widget_show_all

← Older revision		Revision as of 23:21, 10 October 2009
Line 49:		Line 49:
	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>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<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>
			</tt>

			As the menu is a widget, you finally have to display it:

			<tt>
			<span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span>GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>menu<span><font color="#990000">);</font></span>
	</tt>		</tt>

imported_>liox_lang_valid: /* Menus */

2009-09-25T05:48:32Z

Menus

88.114.94.13: /* Touch view menu */

2009-08-19T20:02:30Z

Touch view menu

← Older revision		Revision as of 20:02, 19 August 2009
Line 18:		Line 18:
	To create a HildonAppMenu, use the following command:		To create a HildonAppMenu, use the following command:

	<tt>~~kWidget~~<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>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>		</tt>

Line 159:		Line 159:

	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.		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 ==

imported_>bijjal: Documentation/Maemo 5 Developer Guide/Application Development/Menus moved to Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Menus: Internal baseline has moved this chapter from Application development.

2009-08-18T08:27:30Z

Documentation/Maemo 5 Developer Guide/Application Development/Menus moved to Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Menus: Internal baseline has moved this chapter from Application development.

← Older revision	Revision as of 08:27, 18 August 2009
(No difference)

imported_>danielwilms: 1 revision

2009-07-13T11:36:03Z

1 revision

← Older revision	Revision as of 11:36, 13 July 2009
(No difference)

← Older revision		Revision as of 05:48, 25 September 2009
Line 4:		Line 4:
	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, ~~although those should be avoided~~ when possible.		Additionally Hildon provides Context menus, but avoid them 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~~.		Use the HildonAppmenu widget as a menu in the windows of a Hildon application.

	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.
Line 21:		Line 21:
	</tt>		</tt>

	~~Once~~ the application menu is created, add entries to the menu by using the following functions:		When 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>		<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>
Line 42:		Line 42:
	</tt>		</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 ~~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().		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 must 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:		When 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>		<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>
Line 170:		Line 170:
	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 ~~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.		A callback function for a complex menu entry can create a new HildonStackableWindow to accomplish the task that the option refers to. The new window can contain a different view menu to contain buttons to perform the action. The buttons can 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.		Context menu is usually invoked through a long press over an item on the screen, like holding a finger over an image thumbnail. The menu must 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 HildonAppMenus instead.

	To create a GtkMenu in a Hildon application ~~you should~~ use the following function instead of <code>gtk_menu_new()</code><nowiki>: </nowiki>		To create a GtkMenu in a Hildon application, 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>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>