Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs - Revision history

imported_>amigadave: another


2010-10-15T10:43:01Z
another <code>

				
				
				
				
				
				← Older revision
				Revision as of 10:43, 15 October 2010
				
Line 5:
Line 5:
In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy. In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.



[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon | Example 1.2]] has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon. [[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon | Example 1.2]] has already shown how to use a simple <code>HildonWindow</code> can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.



To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities. To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.



imported_>amigadave: wikify slightly
2010-10-15T10:42:11Z
wikify slightly
Show changes


imported_>amigadave: {{Legacy documentation}}
2010-02-12T09:45:42Z
{{Legacy documentation}}

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

= Windows and dialogs = = Windows and dialogs =
When creating applications for hand-held devices, you should take into account several issues about usability and device limitations. Screen size is a particularly large restriction; a simple interface is essential. When creating applications for hand-held devices, you should take into account several issues about usability and device limitations. Screen size is a particularly large restriction; a simple interface is essential.





imported_>daperl: /* Advanced stack handling */
2010-02-11T01:02:40Z
Advanced stack handling

				
				
				
				
				
				← Older revision
				Revision as of 01:02, 11 February 2010
				
Line 142:
Line 142:
      <span>'''<span><font color="#000000">hildon_window_stack_push_1</font></span>'''</span> <span><font color="#990000">(</font></span>stack<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span></tt>       <span>'''<span><font color="#000000">hildon_window_stack_push_1</font></span>'''</span> <span><font color="#990000">(</font></span>stack<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span></tt>



The push functions also displays the window. <code>gtk_window_show()</code> is not needed after a push operation. The push functions also displays the window. <code>gdk_window_show()</code> is not needed after a push operation.



A function also exists to push a list of windows in a single step. Windows are stacked in the listed order and users only see the window that was last pushed. A function also exists to push a list of windows in a single step. Windows are stacked in the listed order and users only see the window that was last pushed.
Line 183:
Line 183:
* Each window can only be in one stack at a time. * Each window can only be in one stack at a time.



Due to the first one, a push operation always shows the window and a pop operation always hides the window. Functions <code>gtk_widget_show()</code> and <code>gtk_window_hide()</code> always push and remove the window from its current stack, respectively. Due to the first one, a push operation always shows the window and a pop operation always hides the window. Functions <code>gtk_widget_show()</code> and <code>gdk_window_hide()</code> always push and remove the window from its current stack, respectively.



Regarding the second one, operation push has no effect on windows which are already on a stack. Regarding the second one, operation push has no effect on windows which are already on a stack.



imported_>b0unc3: /* HildonWizardDialog */
2009-12-15T20:43:06Z
HildonWizardDialog

				
				
				
				
				
				← Older revision
				Revision as of 20:43, 15 December 2009
				
Line 244:
Line 244:
'''Example 2.5. Example of a Hildon wizard dialog''' '''Example 2.5. Example of a Hildon wizard dialog'''



  <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span>                                        <span><font color="#FF0000">&lt;stdio.h&gt;</font></span>   <tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;stdio.h&gt;</font></span>
  <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span>                                        <span><font color="#FF0000">&lt;stdlib.h&gt;</font></span>   <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;stdlib.h&gt;</font></span>
  <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span>                                        <span><font color="#FF0000">&lt;string.h&gt;</font></span>   <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;string.h&gt;</font></span>
  <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span>                                        <span><font color="#FF0000">&lt;hildon/hildon.h&gt;</font></span>   <span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000">&lt;hildon/hildon.h&gt;</font></span>
 gboolean                                                                                                                           gboolean
  <span>'''<span><font color="#000000">on_page_switch</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>   <span>'''<span><font color="#000000">on_page_switch</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>
                  GtkNotebookPage <span><font color="#990000"><nowiki>*</nowiki></font></span>page<span><font color="#990000">,</font></span>                   GtkNotebookPage <span><font color="#990000"><nowiki>*</nowiki></font></span>page<span><font color="#990000">,</font></span>
Line 257:
Line 257:
      <span>'''<span><font color="#0000FF">return</font></span>'''</span> TRUE<span><font color="#990000"><nowiki>;</nowiki></font></span>       <span>'''<span><font color="#0000FF">return</font></span>'''</span> TRUE<span><font color="#990000"><nowiki>;</nowiki></font></span>
  <span><font color="#FF0000">}</font></span>   <span><font color="#FF0000">}</font></span>
  <span>'''<span><font color="#0000FF">static</font></span>'''</span> gboolean   <span>'''<span><font color="#0000FF">                                                                                                                           static</font></span>'''</span> gboolean
  <span>'''<span><font color="#000000">some_page_func</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>nb<span><font color="#990000">,</font></span>   <span>'''<span><font color="#000000">some_page_func</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>nb<span><font color="#990000">,</font></span>
                  gint current<span><font color="#990000">,</font></span>                   gint current<span><font color="#990000">,</font></span>
Line 272:
Line 272:
    <span><font color="#FF0000">}</font></span>     <span><font color="#FF0000">}</font></span>
  <span><font color="#FF0000">}</font></span>   <span><font color="#FF0000">}</font></span>
 <span><font color="#009900">int</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>'''<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><font color="#FF0000">{</font></span>





imported_>msoini: Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Windows and dialogs moved to Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation
2009-10-14T09:28:04Z
Documentation/Maemo 5 Developer Guide/Graphical UI Tutorial/Windows and dialogs moved to Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs: 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: Missing word "Prev" added
2009-10-12T14:24:11Z
Missing word "Prev" added

				
				
				
				
				
				← Older revision
				Revision as of 14:24, 12 October 2009
				
Line 347:
Line 347:
<table width=100%> <table width=100%>
<tr><td width=30% align=left> <tr><td width=30% align=left>
[[{{BASEPAGENAME}}/Getting_started|Getting Started]]</td> Prev: [[{{BASEPAGENAME}}/Getting_started|Getting Started]]</td>
<td align=center>Up: [[{{BASEPAGENAME}}|Table of Contents]]</td> <td align=center>Up: [[{{BASEPAGENAME}}|Table of Contents]]</td>
<td width=30% align=right> <td width=30% align=right>
Next: [[{{BASEPAGENAME}}/Menus|Menus]]</td> Next: [[{{BASEPAGENAME}}/Menus|Menus]]</td>
</tr></table> </tr></table>





imported_>kimmos: Added link to prev / next page
2009-10-12T14:23:03Z
Added link to prev / next page

				
				
				
				
				
				← Older revision
				Revision as of 14:23, 12 October 2009
				
Line 343:
Line 343:
  <span><font color="#FF0000">}</font></span>   <span><font color="#FF0000">}</font></span>
  </tt>   </tt>

<hr/>
<table width=100%>
<tr><td width=30% align=left>
[[{{BASEPAGENAME}}/Getting_started|Getting Started]]</td>
<td align=center>Up: [[{{BASEPAGENAME}}|Table of Contents]]</td>
<td width=30% align=right>
Next: [[{{BASEPAGENAME}}/Menus|Menus]]</td>
</tr></table>



imported_>liox_lang_valid: /* Windows and dialogs */
2009-09-24T11:39:48Z
Windows and dialogs

				
				
				
				
				
				← Older revision
				Revision as of 11:39, 24 September 2009
				
Line 4:
Line 4:
In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy. In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.



[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon | Example 1.2]], has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon. [[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon | Example 1.2]] has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.



To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities. To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.



Main activities in tasks should be done and presented in separate application views or windows, while assistance activities and steps to fulfill those tasks should be done in dialogs and menus on top of the currently displayed view. Main activities in tasks must be done and presented in separate application views or windows, while assistance activities and steps to fulfill those tasks must be done in dialogs and menus on top of the currently displayed view.



Views work in a tree-like hierarchy. Root View acts as the "root" for the tree, and the subsequent Sub Views branch down the hierarchy. Views work in a tree-like hierarchy. Root View acts as the "root" for the tree, and the subsequent Sub Views branch down the hierarchy.
Line 20:
Line 20:
The HildonStackableWindow is a GTK+ widget which represents a top-level window in the Hildon framework. Stackable windows can be organized in a hierarchical way. The HildonStackableWindow is a GTK+ widget which represents a top-level window in the Hildon framework. Stackable windows can be organized in a hierarchical way.



A stack sets the hierarchical relationships between windows. A child window is on top of its parent window. That allows navigate to previous window by removing the topmost window. A stack sets the hierarchical relationships between windows. A child window is on top of its parent window. That allows navigation to previous window by removing the topmost window.



Users can only see and interact with the window on the top of stack. All other windows are mapped and visible but they are obscured by the topmost one. And they can go back to a root view from a subview by clicking in the navigation button in the top right corner of the window. Users can only see and interact with the window on the top of stack. All other windows are mapped and visible but they are obscured by the topmost one. And the users can go back to a root view from a subview by clicking in the navigation button in the top right corner of the window.



Each application has a default stack, and windows are automatically added to it when they are shown using <code>gtk_widget_show()</code>. Most applications do not need to create extra stacks. Create more than one stack could make your UI too complex, so think twice before doing it. Each application has a default stack, and windows are automatically added to it when they are shown using <code>gtk_widget_show()</code>. Most applications do not need to create extra stacks. Create more than one stack could make your UI too complex, so think twice before doing it.
Line 178:
Line 178:
HildonWindowStack object also provides more advanced functions to perform both pop and push operations at once such as, for example, <code>hildon_window_stack_pop_and_push()</code> or <code>hildon_window_stack_pop_and_push_list()</code>. These functions do everything in a single transition, so the user only sees the last pushed window. HildonWindowStack object also provides more advanced functions to perform both pop and push operations at once such as, for example, <code>hildon_window_stack_pop_and_push()</code> or <code>hildon_window_stack_pop_and_push_list()</code>. These functions do everything in a single transition, so the user only sees the last pushed window.



When you perform push/pop operations you should take into account two things: When you perform push/pop operations, consider two things:



* All stacked windows are visible and all visible windows are stacked. * All stacked windows are visible and all visible windows are stacked.
Line 196:
Line 196:



==Dialogs == ==Dialogs ==
Dialog boxes are a convenient way to prompt the user for a small amount of input, e.g. to display a message, ask a question, or anything else that does not require extensive effort on the user's part. Dialog boxes are a convenient way to prompt the user for a small amount of input, for example to display a message, ask a question, or anything else that does not require extensive effort on the user's part.



Hildon provides specialized widgets to cover the most common dialog's use cases: HildonNote and HildonBanner. Hildon provides specialized widgets to cover the most common dialog's use cases: HildonNote and HildonBanner.
Line 211:
Line 211:
HildonWizardDialog is a widget that allows one to create a guided process. The dialog has three standard buttons, previous, next and finish, and contains several pages. Users can close the dialog by tapping the dimmed area outside the dialog's window. HildonWizardDialog is a widget that allows one to create a guided process. The dialog has three standard buttons, previous, next and finish, and contains several pages. Users can close the dialog by tapping the dimmed area outside the dialog's window.



A good example of a guided process which could be implemented with this widget is the setup of a new e-mail account in an e-mail client. Users would have to fill several entries through several steps to accomplish the setup of the new account. The process of installing an application is another example of the uses of this widget. A good example of a guided process which can be implemented with this widget is the setup of a new e-mail account in an e-mail client. Users have to fill several entries through several steps to accomplish the setup of the new account. The process of installing an application is another example of the uses of this widget.



This widget uses a GtkNotebook that contains the actual wizard pages. The notebook widget is pointed by the property "wizard-notebook" of the wizard. You need to create the notebook as well as the pages that are displayed. For more information on GtkNotebook, see the GTK+ Reference Manual. This widget uses a GtkNotebook that contains the actual wizard pages. The notebook widget is pointed by the property "wizard-notebook" of the wizard. You need to create the notebook as well as the pages that are displayed. For more information on GtkNotebook, see the GTK+ Reference Manual.



To create a new wizard dialog you should call: To create a new wizard dialog, call:



  <tt>GtkWidget<span><font color="#990000"><nowiki>*</nowiki></font></span>  <span>'''<span><font color="#000000">hildon_wizard_dialog_new</font></span>'''</span>        <span><font color="#990000">(</font></span>GtkWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>parent<span><font color="#990000">,</font></span>   <tt>GtkWidget<span><font color="#990000"><nowiki>*</nowiki></font></span>  <span>'''<span><font color="#000000">hildon_wizard_dialog_new</font></span>'''</span>        <span><font color="#990000">(</font></span>GtkWindow <span><font color="#990000"><nowiki>*</nowiki></font></span>parent<span><font color="#990000">,</font></span>
Line 231:
Line 231:
  </tt>   </tt>



The function above sets the function "page_func" to be used to decide whether the user can go to the next page when pressing the forward button. The function should have the following signature: The function above sets the function "page_func" to be used to decide whether the user can go to the next page when pressing the forward button. The function must have the following signature:



  <tt><span>'''<span><font color="#000000">gboolean</font></span>'''</span>    <span><font color="#990000">(*</font></span>HildonWizardDialogPageFunc<span><font color="#990000">)</font></span>   <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>   <tt><span>'''<span><font color="#000000">gboolean</font></span>'''</span>    <span><font color="#990000">(*</font></span>HildonWizardDialogPageFunc<span><font color="#990000">)</font></span>   <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>
Line 311:
Line 311:



===Using GtkDialogs in Hildon applications=== ===Using GtkDialogs in Hildon applications===
In general, you can use GtkDialog much like you would use it in a GTK+ application, but you have to take into account the following: In general, you can use GtkDialog much like you use it in a GTK+ application, but consider the following:



* In Hildon applications, buttons "cancel", "reject" and "close" are allowed. However, buttons which emit the signal "response" with GTK_RESPONSE_CANCEL, GTK_RESPONSE_REJECT or GTK_RESPONSE_CLOSE as the response's identifier are not displayed. Therefore, if you need to deal with the action of closing a GtkDialog in a Hildon application, you need to be aware of this detail and to handle the GTK_RESPONSE_DELETE_EVENT response identifier properly. * In Hildon applications, buttons "cancel", "reject" and "close" are allowed. However, buttons which emit the signal "response" with GTK_RESPONSE_CANCEL, GTK_RESPONSE_REJECT or GTK_RESPONSE_CLOSE as the response's identifier are not displayed. Therefore, if you need to deal with the action of closing a GtkDialog in a Hildon application, be aware of this detail and handle the GTK_RESPONSE_DELETE_EVENT response identifier properly.
* Another detail to take care of is that GtkDialogs can work in two modalities in a Hildon application: task-model or system-model. A dialog is task-modal if it is transient for the main window. That is the case when the function <code>gtk_window_set_transient_for()</code> is used or the dialog was created by calling gtk_dialog_new_with_buttons() specifying a parent window. Otherwise, the dialog is system-modal. * Another detail to take care of is that GtkDialogs can work in two modalities in a Hildon application: task-model or system-model. A dialog is task-modal if it is transient for the main window. That is the case when the function <code>gtk_window_set_transient_for()</code> is used or the dialog was created by calling gtk_dialog_new_with_buttons() specifying a parent window. Otherwise, the dialog is system-modal.






imported_>tatiana: Example 2.5. Example of a Hildon wizard dialog: added example pic
2009-09-11T12:15:50Z
Example 2.5. Example of a Hildon wizard dialog: added example pic

				
				
				
				
				
				← Older revision
				Revision as of 12:15, 11 September 2009
				
Line 240:
Line 240:
Here, an example of using a HildonWizardDialog Here, an example of using a HildonWizardDialog



@@IMAGE@@: EXAMPLE BELOW [[Image:example_wizard_dialog.png‎ | 400px]]



'''Example 2.5. Example of a Hildon wizard dialog''' '''Example 2.5. Example of a Hildon wizard dialog'''

← Older revision		Revision as of 10:43, 15 October 2010
Line 5:		Line 5:
	In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.		In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.

	[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon \| Example 1.2]] has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.		[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon \| Example 1.2]] has already shown how to use a simple <code>HildonWindow</code> can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.

	To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.		To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.

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

	= Windows and dialogs =		= Windows and dialogs =
	When creating applications for hand-held devices, you should take into account several issues about usability and device limitations. Screen size is a particularly large restriction; a simple interface is essential.		When creating applications for hand-held devices, you should take into account several issues about usability and device limitations. Screen size is a particularly large restriction; a simple interface is essential.

← Older revision		Revision as of 01:02, 11 February 2010
Line 142:		Line 142:
	<span>'''<span><font color="#000000">hildon_window_stack_push_1</font></span>'''</span> <span><font color="#990000">(</font></span>stack<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span></tt>		<span>'''<span><font color="#000000">hildon_window_stack_push_1</font></span>'''</span> <span><font color="#990000">(</font></span>stack<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_STACKABLE_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span></tt>

	The push functions also displays the window. <code>~~gtk_window_show~~()</code> is not needed after a push operation.		The push functions also displays the window. <code>gdk_window_show()</code> is not needed after a push operation.

	A function also exists to push a list of windows in a single step. Windows are stacked in the listed order and users only see the window that was last pushed.		A function also exists to push a list of windows in a single step. Windows are stacked in the listed order and users only see the window that was last pushed.
Line 183:		Line 183:
	* Each window can only be in one stack at a time.		* Each window can only be in one stack at a time.

	Due to the first one, a push operation always shows the window and a pop operation always hides the window. Functions <code>gtk_widget_show()</code> and <code>~~gtk_window_hide~~()</code> always push and remove the window from its current stack, respectively.		Due to the first one, a push operation always shows the window and a pop operation always hides the window. Functions <code>gtk_widget_show()</code> and <code>gdk_window_hide()</code> always push and remove the window from its current stack, respectively.

	Regarding the second one, operation push has no effect on windows which are already on a stack.		Regarding the second one, operation push has no effect on windows which are already on a stack.

← Older revision		Revision as of 20:43, 15 December 2009
Line 244:		Line 244:
	'''Example 2.5. Example of a Hildon wizard dialog'''		'''Example 2.5. Example of a Hildon wizard dialog'''

	<tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><stdio.h></font></span>		<tt><span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><stdio.h></font></span>
	<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><stdlib.h></font></span>		<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><stdlib.h></font></span>
	<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><string.h></font></span>		<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><string.h></font></span>
	<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><hildon/hildon.h></font></span>		<span>'''<span><font color="#000080"><nowiki>#include</nowiki></font></span>'''</span> <span><font color="#FF0000"><hildon/hildon.h></font></span>
	gboolean		gboolean
	<span>'''<span><font color="#000000">on_page_switch</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>		<span>'''<span><font color="#000000">on_page_switch</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>notebook<span><font color="#990000">,</font></span>
	GtkNotebookPage <span><font color="#990000"><nowiki>*</nowiki></font></span>page<span><font color="#990000">,</font></span>		GtkNotebookPage <span><font color="#990000"><nowiki>*</nowiki></font></span>page<span><font color="#990000">,</font></span>
Line 257:		Line 257:
	<span>'''<span><font color="#0000FF">return</font></span>'''</span> TRUE<span><font color="#990000"><nowiki>;</nowiki></font></span>		<span>'''<span><font color="#0000FF">return</font></span>'''</span> TRUE<span><font color="#990000"><nowiki>;</nowiki></font></span>
	<span><font color="#FF0000">}</font></span>		<span><font color="#FF0000">}</font></span>
	<span>'''<span><font color="#0000FF">static</font></span>'''</span> gboolean		<span>'''<span><font color="#0000FF"> static</font></span>'''</span> gboolean
	<span>'''<span><font color="#000000">some_page_func</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>nb<span><font color="#990000">,</font></span>		<span>'''<span><font color="#000000">some_page_func</font></span>'''</span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki>*</nowiki></font></span>nb<span><font color="#990000">,</font></span>
	gint current<span><font color="#990000">,</font></span>		gint current<span><font color="#990000">,</font></span>
Line 272:		Line 272:
	<span><font color="#FF0000">}</font></span>		<span><font color="#FF0000">}</font></span>
	<span><font color="#FF0000">}</font></span>		<span><font color="#FF0000">}</font></span>
	<span><font color="#009900">int</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>'''<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><font color="#FF0000">{</font></span>

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

← Older revision		Revision as of 14:24, 12 October 2009
Line 347:		Line 347:
	<table width=100%>		<table width=100%>
	<tr><td width=30% align=left>		<tr><td width=30% align=left>
	[[{{BASEPAGENAME}}/Getting_started\|Getting Started]]</td>		Prev: [[{{BASEPAGENAME}}/Getting_started\|Getting Started]]</td>
	<td align=center>Up: [[{{BASEPAGENAME}}\|Table of Contents]]</td>		<td align=center>Up: [[{{BASEPAGENAME}}\|Table of Contents]]</td>
	<td width=30% align=right>		<td width=30% align=right>
	Next: [[{{BASEPAGENAME}}/Menus\|Menus]]</td>		Next: [[{{BASEPAGENAME}}/Menus\|Menus]]</td>
	</tr></table>		</tr></table>

← Older revision		Revision as of 14:23, 12 October 2009
Line 343:		Line 343:
	<span><font color="#FF0000">}</font></span>		<span><font color="#FF0000">}</font></span>
	</tt>		</tt>

			<hr/>
			<table width=100%>
			<tr><td width=30% align=left>
			[[{{BASEPAGENAME}}/Getting_started\|Getting Started]]</td>
			<td align=center>Up: [[{{BASEPAGENAME}}\|Table of Contents]]</td>
			<td width=30% align=right>
			Next: [[{{BASEPAGENAME}}/Menus\|Menus]]</td>
			</tr></table>

← Older revision		Revision as of 11:39, 24 September 2009
Line 4:		Line 4:
	In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.		In contrast with GTK+ applications, Hildon applications display only one window at a time. A typical Hildon application uses several windows representing different views in a tree-like hierarchy.

	[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon \| Example 1.2]], has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.		[[Documentation/Maemo 5 Developer Guide/Application Development/Getting started#Hello World in Hildon \| Example 1.2]] has already shown how to use a simple HildonWindow can be used and how it resembles the use of a classical GTK+ window. The tree-like views represent a new concept introduced by Hildon.

	To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.		To properly understand what views are, think of an application as a program that allows the user to perform one or more tasks. Each task can be broken down into several main activities.

	Main activities in tasks ~~should~~ be done and presented in separate application views or windows, while assistance activities and steps to fulfill those tasks ~~should~~ be done in dialogs and menus on top of the currently displayed view.		Main activities in tasks must be done and presented in separate application views or windows, while assistance activities and steps to fulfill those tasks must be done in dialogs and menus on top of the currently displayed view.

	Views work in a tree-like hierarchy. Root View acts as the "root" for the tree, and the subsequent Sub Views branch down the hierarchy.		Views work in a tree-like hierarchy. Root View acts as the "root" for the tree, and the subsequent Sub Views branch down the hierarchy.
Line 20:		Line 20:
	The HildonStackableWindow is a GTK+ widget which represents a top-level window in the Hildon framework. Stackable windows can be organized in a hierarchical way.		The HildonStackableWindow is a GTK+ widget which represents a top-level window in the Hildon framework. Stackable windows can be organized in a hierarchical way.

	A stack sets the hierarchical relationships between windows. A child window is on top of its parent window. That allows ~~navigate~~ to previous window by removing the topmost window.		A stack sets the hierarchical relationships between windows. A child window is on top of its parent window. That allows navigation to previous window by removing the topmost window.

	Users can only see and interact with the window on the top of stack. All other windows are mapped and visible but they are obscured by the topmost one. And ~~they~~ can go back to a root view from a subview by clicking in the navigation button in the top right corner of the window.		Users can only see and interact with the window on the top of stack. All other windows are mapped and visible but they are obscured by the topmost one. And the users can go back to a root view from a subview by clicking in the navigation button in the top right corner of the window.

	Each application has a default stack, and windows are automatically added to it when they are shown using <code>gtk_widget_show()</code>. Most applications do not need to create extra stacks. Create more than one stack could make your UI too complex, so think twice before doing it.		Each application has a default stack, and windows are automatically added to it when they are shown using <code>gtk_widget_show()</code>. Most applications do not need to create extra stacks. Create more than one stack could make your UI too complex, so think twice before doing it.
Line 178:		Line 178:
	HildonWindowStack object also provides more advanced functions to perform both pop and push operations at once such as, for example, <code>hildon_window_stack_pop_and_push()</code> or <code>hildon_window_stack_pop_and_push_list()</code>. These functions do everything in a single transition, so the user only sees the last pushed window.		HildonWindowStack object also provides more advanced functions to perform both pop and push operations at once such as, for example, <code>hildon_window_stack_pop_and_push()</code> or <code>hildon_window_stack_pop_and_push_list()</code>. These functions do everything in a single transition, so the user only sees the last pushed window.

	When you perform push/pop operations ~~you should take into account~~ two things:		When you perform push/pop operations, consider two things:

	* All stacked windows are visible and all visible windows are stacked.		* All stacked windows are visible and all visible windows are stacked.
Line 196:		Line 196:

	==Dialogs ==		==Dialogs ==
	Dialog boxes are a convenient way to prompt the user for a small amount of input, ~~e.g.~~ to display a message, ask a question, or anything else that does not require extensive effort on the user's part.		Dialog boxes are a convenient way to prompt the user for a small amount of input, for example to display a message, ask a question, or anything else that does not require extensive effort on the user's part.

	Hildon provides specialized widgets to cover the most common dialog's use cases: HildonNote and HildonBanner.		Hildon provides specialized widgets to cover the most common dialog's use cases: HildonNote and HildonBanner.
Line 211:		Line 211:
	HildonWizardDialog is a widget that allows one to create a guided process. The dialog has three standard buttons, previous, next and finish, and contains several pages. Users can close the dialog by tapping the dimmed area outside the dialog's window.		HildonWizardDialog is a widget that allows one to create a guided process. The dialog has three standard buttons, previous, next and finish, and contains several pages. Users can close the dialog by tapping the dimmed area outside the dialog's window.

	A good example of a guided process which ~~could~~ be implemented with this widget is the setup of a new e-mail account in an e-mail client. Users ~~would~~ have to fill several entries through several steps to accomplish the setup of the new account. The process of installing an application is another example of the uses of this widget.		A good example of a guided process which can be implemented with this widget is the setup of a new e-mail account in an e-mail client. Users have to fill several entries through several steps to accomplish the setup of the new account. The process of installing an application is another example of the uses of this widget.

	This widget uses a GtkNotebook that contains the actual wizard pages. The notebook widget is pointed by the property "wizard-notebook" of the wizard. You need to create the notebook as well as the pages that are displayed. For more information on GtkNotebook, see the GTK+ Reference Manual.		This widget uses a GtkNotebook that contains the actual wizard pages. The notebook widget is pointed by the property "wizard-notebook" of the wizard. You need to create the notebook as well as the pages that are displayed. For more information on GtkNotebook, see the GTK+ Reference Manual.

	To create a new wizard dialog ~~you should~~ call:		To create a new wizard dialog, call:

	<tt>GtkWidget<span><font color="#990000"><nowiki></nowiki></font></span> <span>'''<span><font color="#000000">hildon_wizard_dialog_new</font></span>'''</span> <span><font color="#990000">(</font></span>GtkWindow <span><font color="#990000"><nowiki></nowiki></font></span>parent<span><font color="#990000">,</font></span>		<tt>GtkWidget<span><font color="#990000"><nowiki></nowiki></font></span> <span>'''<span><font color="#000000">hildon_wizard_dialog_new</font></span>'''</span> <span><font color="#990000">(</font></span>GtkWindow <span><font color="#990000"><nowiki></nowiki></font></span>parent<span><font color="#990000">,</font></span>
Line 231:		Line 231:
	</tt>		</tt>

	The function above sets the function "page_func" to be used to decide whether the user can go to the next page when pressing the forward button. The function ~~should~~ have the following signature:		The function above sets the function "page_func" to be used to decide whether the user can go to the next page when pressing the forward button. The function must have the following signature:

	<tt><span>'''<span><font color="#000000">gboolean</font></span>'''</span> <span><font color="#990000">(</font></span>HildonWizardDialogPageFunc<span><font color="#990000">)</font></span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki></nowiki></font></span>notebook<span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#000000">gboolean</font></span>'''</span> <span><font color="#990000">(</font></span>HildonWizardDialogPageFunc<span><font color="#990000">)</font></span> <span><font color="#990000">(</font></span>GtkNotebook <span><font color="#990000"><nowiki></nowiki></font></span>notebook<span><font color="#990000">,</font></span>
Line 311:		Line 311:

	===Using GtkDialogs in Hildon applications===		===Using GtkDialogs in Hildon applications===
	In general, you can use GtkDialog much like you ~~would~~ use it in a GTK+ application, but ~~you have to take into account~~ the following:		In general, you can use GtkDialog much like you use it in a GTK+ application, but consider the following:

	* In Hildon applications, buttons "cancel", "reject" and "close" are allowed. However, buttons which emit the signal "response" with GTK_RESPONSE_CANCEL, GTK_RESPONSE_REJECT or GTK_RESPONSE_CLOSE as the response's identifier are not displayed. Therefore, if you need to deal with the action of closing a GtkDialog in a Hildon application, ~~you need to~~ be aware of this detail and to handle the GTK_RESPONSE_DELETE_EVENT response identifier properly.		* In Hildon applications, buttons "cancel", "reject" and "close" are allowed. However, buttons which emit the signal "response" with GTK_RESPONSE_CANCEL, GTK_RESPONSE_REJECT or GTK_RESPONSE_CLOSE as the response's identifier are not displayed. Therefore, if you need to deal with the action of closing a GtkDialog in a Hildon application, be aware of this detail and handle the GTK_RESPONSE_DELETE_EVENT response identifier properly.
	* Another detail to take care of is that GtkDialogs can work in two modalities in a Hildon application: task-model or system-model. A dialog is task-modal if it is transient for the main window. That is the case when the function <code>gtk_window_set_transient_for()</code> is used or the dialog was created by calling gtk_dialog_new_with_buttons() specifying a parent window. Otherwise, the dialog is system-modal.		* Another detail to take care of is that GtkDialogs can work in two modalities in a Hildon application: task-model or system-model. A dialog is task-modal if it is transient for the main window. That is the case when the function <code>gtk_window_set_transient_for()</code> is used or the dialog was created by calling gtk_dialog_new_with_buttons() specifying a parent window. Otherwise, the dialog is system-modal.

← Older revision		Revision as of 12:15, 11 September 2009
Line 240:		Line 240:
	Here, an example of using a HildonWizardDialog		Here, an example of using a HildonWizardDialog

	~~@@IMAGE@@~~: ~~EXAMPLE BELOW~~		[[Image:example_wizard_dialog.png‎ \| 400px]]

	'''Example 2.5. Example of a Hildon wizard dialog'''		'''Example 2.5. Example of a Hildon wizard dialog'''