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

imported_>amigadave: wikify slightly

2010-10-14T14:36:27Z

wikify slightly

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:43:49Z

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

	= Controls =		= Controls =
	Hildon provides a set of controls specially designed for touchscreens that allows to build simple and easy-to-use interfaces. This chapter explains how to use these widgets.		Hildon provides a set of controls specially designed for touchscreens that allows to build simple and easy-to-use interfaces. This chapter explains how to use these widgets.

imported_>lizardo: Fix prototype for hildon_text_view_set_placeholder() (try #2)

2010-02-11T22:58:41Z

Fix prototype for hildon_text_view_set_placeholder() (try #2)

← Older revision		Revision as of 22:58, 11 February 2010
Line 190:		Line 190:
	Like for the HildonTextEntry presented above, you can store a placeholder as well using the function.		Like for the HildonTextEntry presented above, you can store a placeholder as well using the function.

	<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span>~~HildonEntry~~ <span><font color="#990000"><nowiki>*</nowiki></font></span>~~entry~~<span><font color="#990000">,</font></span>		<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span>HildonTextView <span><font color="#990000"><nowiki>*</nowiki></font></span>text_view<span><font color="#990000">,</font></span>
	<span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000">);</font></span>		<span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000">);</font></span>
	</tt>		</tt>

imported_>lizardo: Undo revision 29160 by lizardo (Talk) (mistakenly truncation of the text)

2010-02-11T22:56:42Z

Undo revision 29160 by lizardo (Talk) (mistakenly truncation of the text)

@@ Line 190: / Line 190: @@
 Like for the HildonTextEntry presented above, you can store a placeholder as well using the function.
-  <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span>    <span><font color="#990000">(</font></span>HildonTextView <span><font color="#990000"><nowiki>*</nowiki></font></span>text_view<span><font color="#990000">,</font></span>
+  <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span>    <span><font color="#990000">(</font></span>HildonEntry <span><font color="#990000"><nowiki>*</nowiki></font></span>entry<span><font color="#990000">,</font></span>
                                                    <span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000">);</font></span>
   </tt>
@@ Line 213: / Line 213: @@
       <span>'''<span><font color="#000000">gtk_text_buffer_get_start_iter</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>start<span><font color="#990000">);</font></span>
       <span>'''<span><font color="#000000">gtk_text_buffer_get_end_iter</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>end<span><font color="#990000">);</font></span>
-      text <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#0
+      text <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_text_buffer_get_text</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>start<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>end<span><font color="#990000">,</font></span> FALSE<span><font color="#990000">);</font></span>
 ===Warning===

imported_>lizardo: Fix prototype for hildon_text_view_set_placeholder()

2010-02-11T22:52:35Z

Fix prototype for hildon_text_view_set_placeholder()

@@ Line 190: / Line 190: @@
 Like for the HildonTextEntry presented above, you can store a placeholder as well using the function.
-  <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span>    <span><font color="#990000">(</font></span>HildonEntry <span><font color="#990000"><nowiki>*</nowiki></font></span>entry<span><font color="#990000">,</font></span>
+  <tt><span><font color="#009900">void</font></span>        <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span>    <span><font color="#990000">(</font></span>HildonTextView <span><font color="#990000"><nowiki>*</nowiki></font></span>text_view<span><font color="#990000">,</font></span>
                                                    <span>'''<span><font color="#0000FF">const</font></span>'''</span> gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000">);</font></span>
   </tt>
@@ Line 213: / Line 213: @@
       <span>'''<span><font color="#000000">gtk_text_buffer_get_start_iter</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>start<span><font color="#990000">);</font></span>
       <span>'''<span><font color="#000000">gtk_text_buffer_get_end_iter</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>end<span><font color="#990000">);</font></span>
-      text <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_text_buffer_get_text</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>start<span><font color="#990000">,</font></span> <span><font color="#990000">&amp;</font></span>end<span><font color="#990000">,</font></span> FALSE<span><font color="#990000">);</font></span>
+      text <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#0
 ===Warning===

imported_>b0unc3: /* Hildon Text Area */

2009-12-15T12:33:33Z

Hildon Text Area

← Older revision		Revision as of 12:33, 15 December 2009
Line 224:		Line 224:
	<span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">),</font></span>		<span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">),</font></span>
	<span><font color="#FF0000">"Type some text here"</font></span><span><font color="#990000">);</font></span>		<span><font color="#FF0000">"Type some text here"</font></span><span><font color="#990000">);</font></span>
	buffer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_get_buffer</font></span>'''</span> <span><font color="#990000">(</font><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">));</font></span>		buffer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_get_buffer</font></span>'''</span><span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span><span><font color="#990000">(</font></span>text_view<span><font color="#990000">));</font></span>
	<span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span>		<span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span>
	<span><font color="#FF0000">"changed"</font></span><span><font color="#990000">,</font></span>		<span><font color="#FF0000">"changed"</font></span><span><font color="#990000">,</font></span>

imported_>b0unc3: /* Hildon Text Area */

2009-12-15T12:19:16Z

Hildon Text Area

imported_>mgedmin: /* Confirmation Notes */ add a missing NULL to the end of hildon_note_new_confirmation_add_buttons arguments list, as per api reference

2009-10-19T15:17:56Z

Confirmation Notes: add a missing NULL to the end of hildon_note_new_confirmation_add_buttons arguments list, as per api reference

← Older revision		Revision as of 15:17, 19 October 2009
Line 370:		Line 370:
	<span><font color="#FF0000">"ACCEPT"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_OK<span><font color="#990000">,</font></span>		<span><font color="#FF0000">"ACCEPT"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_OK<span><font color="#990000">,</font></span>
	<span><font color="#FF0000">"CANCEL"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_CANCEL<span><font color="#990000">,</font></span>		<span><font color="#FF0000">"CANCEL"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_CANCEL<span><font color="#990000">,</font></span>
	<span><font color="#FF0000">"DELETE"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_DELETE_EVENT<span><font color="#990000">);</font></span>		<span><font color="#FF0000">"DELETE"</font></span><span><font color="#990000">,</font></span> GTK_RESPONSE_DELETE_EVENT<span><font color="#990000">,</font></span>
			NULL<span><font color="#990000">);</font></span>
	response <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_dialog_run</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_DIALOG</font></span>'''</span> <span><font color="#990000">(</font></span>note<span><font color="#990000">));</font></span>		response <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">gtk_dialog_run</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_DIALOG</font></span>'''</span> <span><font color="#990000">(</font></span>note<span><font color="#990000">));</font></span>
	<span>'''<span><font color="#0000FF">if</font></span>'''</span> <span><font color="#990000">(</font></span>response <span><font color="#990000"><nowiki>==</nowiki></font></span> GTK_RESPONSE_DELETE_EVENT<span><font color="#990000">)</font></span>		<span>'''<span><font color="#0000FF">if</font></span>'''</span> <span><font color="#990000">(</font></span>response <span><font color="#990000"><nowiki>==</nowiki></font></span> GTK_RESPONSE_DELETE_EVENT<span><font color="#990000">)</font></span>

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

2009-10-14T09:33:31Z

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

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

imported_>liox_lang_valid: /* Controls */

2009-09-25T07:56:19Z

Controls

← Older revision		Revision as of 07:56, 25 September 2009
Line 21:		Line 21:
	Note that in the creation of a HildonButton you must indicate the value for the properties "size" and "arrangement", choosing a Hildon size and a horizontal or vertical arrangement of the labels.		Note that in the creation of a HildonButton you must indicate the value for the properties "size" and "arrangement", choosing a Hildon size and a horizontal or vertical arrangement of the labels.

	~~Both labels~~ can be set and ~~retrieved~~ by using the following convenience functions.		You can set and retrieve both labels by using the following convenience functions:

	<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_button_set_title</font></span>'''</span> <span><font color="#990000">(</font></span>HildonButton <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">,</font></span>		<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_button_set_title</font></span>'''</span> <span><font color="#990000">(</font></span>HildonButton <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">,</font></span>
Line 82:		Line 82:
	Note that, again, you must specify the size of the button.		Note that, again, you must specify the size of the button.

	~~The~~ current state of the button ~~can be retrieve or set~~ with the following functions, respectively.		You can retrieve or set the current state of the button with the following functions, respectively:

	<tt>gboolean <span>'''<span><font color="#000000">hildon_check_button_get_active</font></span>'''</span> <span><font color="#990000">(</font></span>HildonCheckButton <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">);</font></span>		<tt>gboolean <span>'''<span><font color="#000000">hildon_check_button_get_active</font></span>'''</span> <span><font color="#990000">(</font></span>HildonCheckButton <span><font color="#990000"><nowiki>*</nowiki></font></span>button<span><font color="#990000">);</font></span>
Line 89:		Line 89:
	</tt>		</tt>

	The signal "toggled" is emitted when the state of the button changes. A handler ~~could~~ be attached to this signal if a further action is required.		The signal "toggled" is emitted when the state of the button changes. A handler can be attached to this signal if a further action is required.

	Here is a simple example which creates a check button and a simple callback to handle the signal "toggled".		Here is a simple example which creates a check button and a simple callback to handle the signal "toggled".
Line 118:		Line 118:

	==Using Gtk Buttons and Toggles==		==Using Gtk Buttons and Toggles==
	As was said above, apart from Hildon specific buttons, ~~the~~ use of GtkButton and GtkToggleButton is also ~~adviced~~ in the Hildon framework.		As was said above, apart from Hildon specific buttons, use GtkButton and GtkToggleButton also in the Hildon framework.

	===GtkButton===		===GtkButton===
	If only a label is needed, you do not need to use HildonButtons and a GtkButton can be used instead. You can use it as you would do in a GTK application. The only change is the creation function that you ~~should~~ use:		If only a label is needed, you do not need to use HildonButtons and a GtkButton can be used instead. You can use it as you would do in a GTK application. The only change is the creation function that you must use:

	<tt>GtkWidget<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>HildonSizeType size<span><font color="#990000">);</font></span>		<tt>GtkWidget<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>HildonSizeType size<span><font color="#990000">);</font></span>
Line 135:		Line 135:

	==GtkRadioButton==		==GtkRadioButton==
	To create a GtkRadioButton in a Hildon application ~~you should~~ use:		To create a GtkRadioButton in a Hildon application, use:

	<tt>GtkWidget<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>HildonSizeType size<span><font color="#990000">,</font></span>		<tt>GtkWidget<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>HildonSizeType size<span><font color="#990000">,</font></span>
Line 149:		Line 149:
	The HildonEntry is a GTK+ widget which represents a text entry. It is derived from the GtkEntry widget and provides additional commodities specific to the Hildon framework.		The HildonEntry is a GTK+ widget which represents a text entry. It is derived from the GtkEntry widget and provides additional commodities specific to the Hildon framework.

	The main additional feature is placeholder text to display if the entry is empty and not in focus.		The main additional feature is a placeholder text to display if the entry is empty and not in focus.

	Creating a new HildonEntry:		Creating a new HildonEntry:
Line 156:		Line 156:
	</tt>		</tt>

	Note that the creation function needs to specify a size from HildonSizeType		Note that the creation function needs to specify a size from HildonSizeType.

	The placeholder is stored as a property. To set it, use the following convenience function:		The placeholder is stored as a property. To set it, use the following convenience function:
Line 188:		Line 188:
	</tt>		</tt>

	Like for the HildonTextEntry presented above, a placeholder ~~can be stored~~ as well using the function .		Like for the HildonTextEntry presented above, you can store a placeholder as well using the function.

	<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span>HildonEntry <span><font color="#990000"><nowiki>*</nowiki></font></span>entry<span><font color="#990000">,</font></span>		<tt><span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span>HildonEntry <span><font color="#990000"><nowiki>*</nowiki></font></span>entry<span><font color="#990000">,</font></span>
Line 258:		Line 258:
	</tt>		</tt>

	All functions above require a widget as an argument that ~~should~~ be a pointer to the owner widget of the banner. Usually, the owner is the window that represents the currently displayed view.		All functions above require a widget as an argument that must be a pointer to the owner widget of the banner. Usually, the owner is the window that represents the currently displayed view.

	Function <code>hildon_banner_show_information()</code> shows a banner with the given text.		Function <code>hildon_banner_show_information()</code> shows a banner with the given text.
Line 291:		Line 291:

	====Notes====		====Notes====
	HildonNotes are GtkDialogs designed to request a small amount of input from users. Usually, notes show an information text and buttons to confirm, ~~cancel~~, ~~etc.~~ according to their type.		HildonNotes are GtkDialogs designed to request a small amount of input from users. Usually, notes show an information text and buttons to confirm and cancel, for example, according to their type.

	Unlike banners, notes always need a user action, that is, notes do not disappear automatically after a period of time.		Unlike banners, notes always need a user action, that is, notes do not disappear automatically after a period of time.
Line 316:		Line 316:
	Information notes are used to show an information to the users. This note disappears when user taps outside the note's area. Otherwise the note remains visible.		Information notes are used to show an information to the users. This note disappears when user taps outside the note's area. Otherwise the note remains visible.

	Here's an example of how to show an information note and handle the user's answer.		Here is an example of how to show an information note and handle the user's answer.

	'''Example 7.6. Example of a Hildon information note'''		'''Example 7.6. Example of a Hildon information note'''

← Older revision		Revision as of 12:19, 15 December 2009
Line 206:		Line 206:

	<tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span>		<tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span>
	<span>'''<span><font color="#000000">text_changed</font></span>'''</span> <span><font color="#990000">(</font></span>GtkTextBuffer <span><font color="#990000"><nowiki>*</nowiki></font></span>buffer<span><font color="#990000">,</font></span>		<span>'''<span><font color="#000000">text_changed</font></span>'''</span> <span><font color="#990000">(</font></span>GtkTextBuffer <span><font color="#990000"><nowiki>*</nowiki></font></span>buffer<span><font color="#990000">,</font></span>
	gpointer <span><font color="#990000"><nowiki>*</nowiki></font></span>user_data<span><font color="#990000">)</font></span>		gpointer <span><font color="#990000"><nowiki>*</nowiki></font></span>user_data<span><font color="#990000">)</font></span>
	<span><font color="#FF0000">{</font></span>		<span><font color="#FF0000">{</font></span>
	gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000"><nowiki>;</nowiki></font></span>		gchar <span><font color="#990000"><nowiki>*</nowiki></font></span>text<span><font color="#990000"><nowiki>;</nowiki></font></span>
Line 220:		Line 220:
	<span><font color="#FF0000">{</font></span>		<span><font color="#FF0000">{</font></span>
	GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>text_view<span><font color="#990000"><nowiki>;</nowiki></font></span>		GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>text_view<span><font color="#990000"><nowiki>;</nowiki></font></span>
			GtkTextBuffer <span><font color="#990000"><nowiki>*</nowiki></font></span>buffer<span><font color="#990000"><nowiki>;</nowiki></font></span>
	text_view <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_new</font></span>'''</span><span><font color="#990000">();</font></span>		text_view <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_new</font></span>'''</span><span><font color="#990000">();</font></span>
	<span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">),</font></span>		<span>'''<span><font color="#000000">hildon_text_view_set_placeholder</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">),</font></span>
	<span><font color="#FF0000">"Type some text here"</font></span><span><font color="#990000">);</font></span>		<span><font color="#FF0000">"Type some text here"</font></span><span><font color="#990000">);</font></span>
	buffer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_get_buffer</font></span>'''</span> <span><font color="#990000">(</font></span>~~textview~~<span><font color="#990000">);</font></span>		buffer <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_text_view_get_buffer</font></span>'''</span> <span><font color="#990000">(</font><span>'''<span><font color="#000000">HILDON_TEXT_VIEW</font></span>'''</span> <span><font color="#990000">(</font></span>text_view<span><font color="#990000">));</font></span>
	<span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span>		<span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span>buffer<span><font color="#990000">,</font></span>
	<span><font color="#FF0000">"changed"</font></span><span><font color="#990000">,</font></span>		<span><font color="#FF0000">"changed"</font></span><span><font color="#990000">,</font></span>