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

imported_>amigadave: wikify slightly

2010-10-15T13:51:11Z

wikify slightly

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:45:15Z

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

	=Navigation =		=Navigation =
	In previous examples only one widget was added to a window so we can simply use a <code>gtk_container_add()</code> to "pack" it into the window. To pack more than one widget into a window, use container widgets.		In previous examples only one widget was added to a window so we can simply use a <code>gtk_container_add()</code> to "pack" it into the window. To pack more than one widget into a window, use container widgets.

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

2009-10-14T09:30:22Z

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

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

imported_>liox_lang_valid: /* Navigation */

2009-09-25T06:01:33Z

Navigation

← Older revision		Revision as of 06:01, 25 September 2009
Line 1:		Line 1:
	=Navigation =		=Navigation =
	In previous examples only one widget was added to a window so we ~~could~~ simply use a <code>gtk_container_add()</code> to "pack" it into the window. To pack more than one widget into a window, use container widgets.		In previous examples only one widget was added to a window so we can simply use a <code>gtk_container_add()</code> to "pack" it into the window. To pack more than one widget into a window, use container widgets.

	To develop Hildon user interfaces, ~~you can~~ use any container widget provided by GTK+. For more information, see the GTK+ 2.0 Tutorial.		To develop Hildon user interfaces, use any container widget provided by GTK+. For more information, see the GTK+ 2.0 Tutorial.

	Apart from supporting those containers, the Hildon framework also provides a new container widget called HildonPannableArea, a scrolling widget designed for touch screens.		Apart from supporting those containers, the Hildon framework also provides a new container widget called HildonPannableArea, a scrolling widget designed for touch screens.
Line 8:		Line 8:

	== Pannable area ==		== Pannable area ==
	HildonPannableArea is used to create an area with another widget inside which is accessible regardless of the size using the touchscreen to scroll it. You ~~may~~ insert any type of widget into a pannable area ~~and~~ it is always accessible by using the fingers to pan, or scroll, in the area.		HildonPannableArea is used to create an area with another widget inside which is accessible regardless of the size using the touchscreen to scroll it. You can insert any type of widget into a pannable area; it is always accessible by using the fingers to pan, or scroll, in the area.

	This widget can be "panned" (scrolled) in any direction using the touchscreen with the fingers. One remarkable characteristic is that the scrolling is "kinetic", meaning that the motion continues from the initial motion by gradually slowing down to stop.		This widget can be "panned" (scrolled) in any direction using the touchscreen with the fingers. One remarkable characteristic is that the scrolling is "kinetic", meaning that the motion continues from the initial motion by gradually slowing down to stop.

	~~The use of~~ this widget is very similar to GTK+ scrolled windows. In fact, both widgets implement a similar concept and its APIs are very similar.		Using this widget is very similar to GTK+ scrolled windows. In fact, both widgets implement a similar concept and its APIs are very similar.

	To create a new pannable area, choose one of the following functions:		To create a new pannable area, choose one of the following functions:
Line 35:		Line 35:
	The default values of these properties are right for most applications and so the simpler constructor is sufficient. For more information on the properties of the pannable area, see the Hildon reference manual.		The default values of these properties are right for most applications and so the simpler constructor is sufficient. For more information on the properties of the pannable area, see the Hildon reference manual.

	~~Once~~ the area is created, ~~you can~~ place your object into the pannable window using the following function.		When the area is created, place your object into the pannable window using the following function.

	<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_pannable_area_add_with_viewport</font></span>'''</span> <span><font color="#990000">(</font></span>HildonPannableArea <span><font color="#990000"><nowiki>*</nowiki></font></span>area<span><font color="#990000">,</font></span>		<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_pannable_area_add_with_viewport</font></span>'''</span> <span><font color="#990000">(</font></span>HildonPannableArea <span><font color="#990000"><nowiki>*</nowiki></font></span>area<span><font color="#990000">,</font></span>
Line 45:		Line 45:
	'''Warning'''		'''Warning'''

	~~Widgets~~ with native scrolling ~~should be added~~ directly inside a pannable area. ~~Widgets~~ such as~~, for example,~~ GtkTextView, GtkTreeView, GtkIconView and GtkLayout ~~should be added~~ by calling <code>gtk_container_add()</code>. Otherwise, panning ~~could~~ not work properly.		Add widgets with native scrolling directly inside a pannable area. Add widgets such as GtkTextView, GtkTreeView, GtkIconView and GtkLayout by calling <code>gtk_container_add()</code>. Otherwise, panning may not work properly.


Line 123:		Line 123:
	</tt>		</tt>

	In the example above, two calls are enough to use a pannable area. The rest of the code in the example is no different from ~~that~~ used in a GTK+ application.		In the example above, two calls are enough to use a pannable area. The rest of the code in the example is no different from the one used in a GTK+ application.

	<tt> <span>''<span><font color="#9A1900">/* Create a new pannable area. */</font></span>''</span>		<tt> <span>''<span><font color="#9A1900">/* Create a new pannable area. */</font></span>''</span>
Line 131:		Line 131:
	</tt>		</tt>

	To see all the buttons, users can scroll with the fingers. In this example, horizontal and vertical panning are activated as that is needed to allow users to be able to interact both all the widgets. The property "mov-mode" controls if the area can scroll horizontally, vertically (default value) or both, using HILDON_MOVEMENT_MODE_HORIZ, HILDON_MOVEMENT_MODE_VERT or HILDON_MOVEMENT_MODE_BOTH, respectively.		To see all the buttons, users can scroll with the fingers. In this example, horizontal and vertical panning are activated because that is needed to allow users to be able to interact both all the widgets. The property "mov-mode" controls if the area can scroll horizontally, vertically (default value) or both, using HILDON_MOVEMENT_MODE_HORIZ, HILDON_MOVEMENT_MODE_VERT or HILDON_MOVEMENT_MODE_BOTH, respectively.

	==Additional features ==		==Additional features ==
Line 289:		Line 289:
	To test the different navigation functions, just change the call in the callback.		To test the different navigation functions, just change the call in the callback.

	When you use the navigation functions that allow to navigate to a certain child, the widget must be ~~already~~ realized. Use the GTK_WIDGET_REALIZED macro to check it. If you want to call it during the initialization process, use the navigation function inside a callback to the "realized" signal, connecting it with <code>g_signal_connect_after()</code>.		When you use the navigation functions that allow to navigate to a certain child, the widget must already be realized. Use the GTK_WIDGET_REALIZED macro to check it. If you want to call it during the initialization process, use the navigation function inside a callback to the "realized" signal, connecting it with <code>g_signal_connect_after()</code>.

imported_>tatiana: Example of a pannable area and a "jump-to" button: synced with https://garage.maemo.org/svn/maemoexamples/trunk/hildon-examples/hildon-pannable-area-jump-example.c, see ChangeLog for details

2009-09-10T13:56:10Z

Example of a pannable area and a "jump-to" button: synced with https://garage.maemo.org/svn/maemoexamples/trunk/hildon-examples/hildon-pannable-area-jump-example.c, see ChangeLog for details

Show changes

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

2009-08-18T08:28:36Z

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

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

imported_>bijjal: /* Pannable area example */

2009-07-13T14:28:31Z

Pannable area example

← Older revision		Revision as of 14:28, 13 July 2009
Line 51:		Line 51:
	Functions explained above are enough for a simple example. The following example packs a table with 100 toggle buttons into a pannable area.		Functions explained above are enough for a simple example. The following example packs a table with 100 toggle buttons into a pannable area.

	~~@@IMAGE@@~~: ~~examples/hildon_pannable_area_example~~.~~c output (code )~~		[[Image:example-pannable-area.png\|400px]]

	'''Example 5.1. Example of a pannable area'''		'''Example 5.1. Example of a pannable area'''
Line 132:		Line 132:

	To see all the buttons, users can scroll with the fingers. In this example, horizontal and vertical panning are activated as that is needed to allow users to be able to interact both all the widgets. The property "mov-mode" controls if the area can scroll horizontally, vertically (default value) or both, using HILDON_MOVEMENT_MODE_HORIZ, HILDON_MOVEMENT_MODE_VERT or HILDON_MOVEMENT_MODE_BOTH, respectively.		To see all the buttons, users can scroll with the fingers. In this example, horizontal and vertical panning are activated as that is needed to allow users to be able to interact both all the widgets. The property "mov-mode" controls if the area can scroll horizontally, vertically (default value) or both, using HILDON_MOVEMENT_MODE_HORIZ, HILDON_MOVEMENT_MODE_VERT or HILDON_MOVEMENT_MODE_BOTH, respectively.


	==Additional features ==		==Additional features ==

imported_>danielwilms: 1 revision

2009-07-13T11:36:05Z

1 revision

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

imported_>wikiadmin: moved Maemo 5 Developer Guide/Application Development/Navigation to Documentation/Maemo 5 Developer Guide/Application Development/Navigation

2009-07-13T11:02:45Z

moved Maemo 5 Developer Guide/Application Development/Navigation to Documentation/Maemo 5 Developer Guide/Application Development/Navigation

Show changes