Legacy Maemo 5 Documentation/Graphical UI Tutorial/Getting started - Revision history

imported_>amigadave: wikify slightly

2010-10-15T08:50:04Z

wikify slightly

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:44:00Z

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

	=Getting started=		=Getting started=
	Before starting to develop your Hildon applications you need to get, install and properly configure the Maemo SDK. You can download and learn how to use the latest SDK in [http://maemo.org/development/sdks/ Maemo SDK Releases].		Before starting to develop your Hildon applications you need to get, install and properly configure the Maemo SDK. You can download and learn how to use the latest SDK in [http://maemo.org/development/sdks/ Maemo SDK Releases].

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

2009-10-14T09:27:20Z

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

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

imported_>kimmos: Added link to prev / next page

2009-10-12T14:19:27Z

Added link to prev / next page

← Older revision		Revision as of 14:19, 12 October 2009
Line 231:		Line 231:
	<tt><span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>		<tt><span>'''<span><font color="#0000FF">return</font></span>'''</span> <span><font color="#993399">0</font></span><span><font color="#990000"><nowiki>;</nowiki></font></span>
	</tt>		</tt>

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

imported_>liox_lang_valid: /* Getting started */

2009-09-24T11:23:42Z

Getting started

← Older revision		Revision as of 11:23, 24 September 2009
Line 29:		Line 29:


	All programs include hildon/hildon.h which declares the variables, functions, structures, ~~etc.~~ that are used in your Hildon application.		All programs include hildon/hildon.h which declares the variables, functions, structures, and so on, that are used in your Hildon application.

	The next line is necessary in every program:		The next line is necessary in every program:
Line 43:		Line 43:
	The HildonWindow used in this example represents a top-level window in the Hildon framework. It is derived from GtkWindow and provides additional commodities specific to the Hildon framework.		The HildonWindow used in this example represents a top-level window in the Hildon framework. It is derived from GtkWindow and provides additional commodities specific to the Hildon framework.

	In very simple applications, HildonWindow ~~could~~ be enough. However, in most of the applications a HildonStackableWindow ~~should be used~~.		In very simple applications, HildonWindow can be enough. However, in most of the applications, use a HildonStackableWindow.

	The <code>gtk_widget_show()</code> shows the widget (makes it visible) that would not be otherwise displayed.		The <code>gtk_widget_show()</code> shows the widget (makes it visible) that would not be otherwise displayed.
Line 142:		Line 142:
	This uses the program pkg-config, which can be obtained from [http://www.freedesktop.org/wiki/Home Freedesktop]. The program reads the .pc files which come with Hildon to determine what compiler switches are needed to compile programs that use it. pkg-config hildon-1 -cflags outputs a list of include directories for the compiler to look in, and pkg-config hildon-1 -libs outputs the list of libraries for the compiler to link with and the directories to find them in. Although they could be used separately as `pkg-config hildon-1 -cflags` and `pkg-config hildon-1 -libs`, in the above example they were joined as a single instance because it is easier to understand.		This uses the program pkg-config, which can be obtained from [http://www.freedesktop.org/wiki/Home Freedesktop]. The program reads the .pc files which come with Hildon to determine what compiler switches are needed to compile programs that use it. pkg-config hildon-1 -cflags outputs a list of include directories for the compiler to look in, and pkg-config hildon-1 -libs outputs the list of libraries for the compiler to link with and the directories to find them in. Although they could be used separately as `pkg-config hildon-1 -cflags` and `pkg-config hildon-1 -libs`, in the above example they were joined as a single instance because it is easier to understand.

	~~'''Note'''~~

	Note that the type of single quote used in the compile command above is significant.		N.B. Note that the type of single quote used in the compile command above is significant.

	==Stepping through Hello World ==		==Stepping through Hello World ==
Line 150:		Line 149:
	This section explains the Hello World example above step-by-step.		This section explains the Hello World example above step-by-step.

	The following lines define the callback function that is called when the button is "clicked". We ignore both the widget and the data in this example, but usually developers would need to handle events from them.		The following lines define the callback function that is called when the button is clicked. We ignore both the widget and the data in this example, but usually developers would need to handle events from them.

	<tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>
Line 182:		Line 181:
	</tt>		</tt>

	In this simple example, a new HildonWindow is created. In cases with nested views, a HildonStackableWindow ~~should be used~~.		In this simple example, a new HildonWindow is created. In cases with nested views, use a HildonStackableWindow.

	<tt>window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>		<tt>window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
	</tt>		</tt>

	This call registers a window as belonging to the program. This allows applying program-wide settings to all the registered windows, such as~~, for example,~~ assigning a common menu to all the registered windows by setting it to the program.		This call registers a window as belonging to the program. This allows applying program-wide settings to all the registered windows, such as assigning a common menu to all the registered windows by setting it to the program.

	<tt><span>'''<span><font color="#000000">hildon_program_add_window</font></span>'''</span> <span><font color="#990000">(</font></span>program<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">))</font></span>		<tt><span>'''<span><font color="#000000">hildon_program_add_window</font></span>'''</span> <span><font color="#990000">(</font></span>program<span><font color="#990000">,</font></span> <span>'''<span><font color="#000000">HILDON_WINDOW</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">))</font></span>
Line 198:		Line 197:
	</tt>		</tt>

	This call creates a new HildonButton. This button allows to set two labels, one main label and another secondary one. You can also set the size of the button and the order of the labels. Notice that you can use GtkButton's in Hildon applications in case you ~~don't~~ need the additional features that Hildon provides.		This call creates a new HildonButton. This button allows to set two labels, one main label and another secondary one. You can also set the size of the button and the order of the labels. Notice that you can use GtkButton's in Hildon applications in case you do not need the additional features that Hildon provides.

	<tt> button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_button_new_with_text</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>		<tt> button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_button_new_with_text</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>
Line 218:		Line 217:
	</tt>		</tt>

	~~Once~~ everything is set up with all signal handlers in place and the button placed in the window, we ask GTK to "show" the widgets on the screen.		When everything is set up with all signal handlers in place and the button placed in the window, we ask GTK to "show" the widgets on the screen.

	<tt><span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>		<tt><span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>

imported_>tatiana: /* Getting started */

2009-09-03T13:01:19Z

Getting started

← Older revision		Revision as of 13:01, 3 September 2009
Line 49:		Line 49:
	The last line enters the GTK+ main processing loop.		The last line enters the GTK+ main processing loop.

	<tt><span>'''<span><font color="#000000">~~gtk_widget_main~~</font></span>'''</span> <span><font color="#990000">();</font></span> <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#000000">gtk_main</font></span>'''</span> <span><font color="#990000">();</font></span>
	~~gpointer data <span><font color="#990000">)</font></span>~~
	~~<span><font color="#FF0000">{</font></span>~~
	<span>'''<span><font color="#000000">g_print</font></span>'''</span> <span><font color="#990000">(</font></span><span><font color="#FF0000">"Hello World!</font></span><span><font color="#CC33CC">\n</font></span><span><font color="#FF0000">"</font></span><span><font color="#990000">);</font></span>
	~~<span><font color="#FF0000">}~~</font></span>
	</tt>		</tt>

imported_>tatiana: /* Stepping through Hello World */

2009-09-01T14:07:26Z

Stepping through Hello World

← Older revision		Revision as of 14:07, 1 September 2009
Line 156:		Line 156:
	The following lines define the callback function that is called when the button is "clicked". We ignore both the widget and the data in this example, but usually developers would need to handle events from them.		The following lines define the callback function that is called when the button is "clicked". We ignore both the widget and the data in this example, but usually developers would need to handle events from them.

	<tt>~~<span>'''<span><font color="#000000">gtk_widget_main</font></span>'''</span> <span><font color="#990000">();</font></span>~~ <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>
	gpointer data <span><font color="#990000">)</font></span>		gpointer data <span><font color="#990000">)</font></span>
	<span><font color="#FF0000">{</font></span>		<span><font color="#FF0000">{</font></span>

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

2009-08-18T07:56:00Z

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

← Older revision	Revision as of 07:56, 18 August 2009
(No difference)

imported_>zerojay: /* Getting started */

2009-08-10T17:34:51Z

Getting started

← Older revision		Revision as of 17:34, 10 August 2009
Line 1:		Line 1:
	=Getting started=		=Getting started=
	Before starting to develop your Hildon applications you need to get and properly ~~install and~~ configure Maemo SDK. You can download and learn how to use the latest SDK in [http://maemo.org/development/sdks/ Maemo SDK Releases]		Before starting to develop your Hildon applications you need to get, install and properly configure the Maemo SDK. You can download and learn how to use the latest SDK in [http://maemo.org/development/sdks/ Maemo SDK Releases].

	To begin our introduction to Hildon, we start with the simplest program possible - base.c. This program creates a window and has no way of exiting except to be killed by using the shell.		To begin our introduction to Hildon, we start with the simplest program possible - base.c. This program creates a window and has no way of exiting except to be killed by using the shell.
Line 35:		Line 35:
	<tt><span>'''<span><font color="#000000">hildon_gtk_init</font></span>'''</span> <span><font color="#990000">(&</font></span>argc<span><font color="#990000">,</font></span> <span><font color="#990000">&</font></span>argv<span><font color="#990000">);</font></span></tt>		<tt><span>'''<span><font color="#000000">hildon_gtk_init</font></span>'''</span> <span><font color="#990000">(&</font></span>argc<span><font color="#990000">,</font></span> <span><font color="#990000">&</font></span>argv<span><font color="#990000">);</font></span></tt>

	This function replaces a call to <code>gtk_init()</code> and also initializes the Hildon library. This function also performs a call to g<code>~~tk_init~~()</code>. ~~for~~ more information on GTK+ initialization and arguments that can ~~pass~~ to your application on the command line, see [http://library.gnome.org/devel/gtk/unstable/gtk-General.html#gtk-init GTK+ Reference Manual]. The next two lines of code create and display a window.		This function replaces a call to <code>gtk_init()</code> and also initializes the Hildon library. This function also performs a call to <code>gtk_init()</code>. For more information on GTK+ initialization and arguments that can be passed to your application on the command line, see [http://library.gnome.org/devel/gtk/unstable/gtk-General.html#gtk-init GTK+ Reference Manual]. The next two lines of code create and display a window.

	<tt> window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>		<tt> window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
Line 56:		Line 56:
	</tt>		</tt>

	This call exists in every GTK+ application and therefore in every Hildon application. When control reaches this point, GTK+ sleeps waiting for X events (for example, button or key presses), timeouts, or file IO notifications to occur. In our simple example, however, events are ignored.		This call exists in every GTK+ application and therefore in every Hildon application. When control reaches this point, GTK+ sleeps waiting for X events (for example, button or key presses), timeouts, or file i/o notifications to occur. In our simple example, however, events are ignored.


Line 135:		Line 135:
	</tt>		</tt>

	As you can see in this simple example, ~~programming~~ Hildon ~~application~~ is slightly different from ~~common~~ GTK+ applications ~~programming~~. We are going to review these differences through the next chapters.		As you can see in this simple example, writing Hildon applications is slightly different from writing standard GTK+ applications. We are going to review these differences through the next chapters.

	==Compiling Hello World ==		==Compiling Hello World ==
	To compile use the following:		To compile, use the following command:

	<div class="graybox">		<div class="graybox">
Line 144:		Line 144:
	</div>		</div>

	This uses the program pkg-config, which can be obtained from Freedesktop. The program reads the .pc which ~~comes~~ with Hildon to determine what compiler switches are needed to compile programs that use ~~Hildon~~. pkg-config hildon-1 -cflags outputs a list of include directories for the compiler to look in, and pkg-config hildon-1 -libs outputs the list of libraries for the compiler to link with and the directories to find them in. Although they could be used separately as `pkg-config hildon-1 -cflags` and `pkg-config hildon-1 -libs`, in the above example they were ~~joint~~ as a single instance because it is easier to understand.		This uses the program pkg-config, which can be obtained from [http://www.freedesktop.org/wiki/Home Freedesktop]. The program reads the .pc files which come with Hildon to determine what compiler switches are needed to compile programs that use it. pkg-config hildon-1 -cflags outputs a list of include directories for the compiler to look in, and pkg-config hildon-1 -libs outputs the list of libraries for the compiler to link with and the directories to find them in. Although they could be used separately as `pkg-config hildon-1 -cflags` and `pkg-config hildon-1 -libs`, in the above example they were joined as a single instance because it is easier to understand.

	'''Note'''		'''Note'''
Line 152:		Line 152:
	==Stepping through Hello World ==		==Stepping through Hello World ==

	This section explains the Hello World example above step by step.		This section explains the Hello World example above step-by-step.

	The following lines define the callback function that is called when the button is "clicked". We ignore both the widget and the data in this example, but usually developers would need to ~~???do things with~~ them.		The following lines define the callback function that is called when the button is "clicked". We ignore both the widget and the data in this example, but usually developers would need to handle events from them.

	<tt><span>'''<span><font color="#000000">gtk_widget_main</font></span>'''</span> <span><font color="#990000">();</font></span> <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#000000">gtk_widget_main</font></span>'''</span> <span><font color="#990000">();</font></span> <span>'''<span><font color="#0000FF">static</font></span>'''</span> <span><font color="#009900">void</font></span> <span>'''<span><font color="#000000">hello</font></span>'''</span><span><font color="#990000">(</font></span> GtkWidget <span><font color="#990000"><nowiki>*</nowiki></font></span>widget<span><font color="#990000">,</font></span>
Line 163:		Line 163:
	</tt>		</tt>

	The following is the definition of the main function ~~???like it is usually done in programs written~~ in C.		The following is the definition of the main function, similar to the standard main function you would find in any C program.

	<tt> <span><font color="#009900">int</font></span>		<tt> <span><font color="#009900">int</font></span>
Line 169:		Line 169:
	</tt>		</tt>

	~~Next~~ code ~~declares~~ pointers to an object of type HildonProgram which represents an application running in the Hildon framework. Pointers to the widgets which show the application are also declared.		The next lines of code declare pointers to an object of type HildonProgram which represents an application running in the Hildon framework. Pointers to the widgets which show the application are also declared.

	<tt> HildonProgram <span><font color="#990000"><nowiki>*</nowiki></font></span>program<span><font color="#990000"><nowiki>;</nowiki></font></span>		<tt> HildonProgram <span><font color="#990000"><nowiki>*</nowiki></font></span>program<span><font color="#990000"><nowiki>;</nowiki></font></span>
Line 186:		Line 186:
	</tt>		</tt>

	In this simple example a new HildonWindow is created. In cases with nested views, a HildonStackableWindow should be used.		In this simple example, a new HildonWindow is created. In cases with nested views, a HildonStackableWindow should be used.

	<tt>window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>		<tt>window <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_window_new</font></span>'''</span> <span><font color="#990000">();</font></span>
Line 202:		Line 202:
	</tt>		</tt>

	This call creates a new HildonButton. This button allows to set two labels, one main label and another secondary one. You can also set the size of the button and the order of the labels. Notice that you can use GtkButton's in Hildon applications in case you don't need ~~those~~ additional features.		This call creates a new HildonButton. This button allows to set two labels, one main label and another secondary one. You can also set the size of the button and the order of the labels. Notice that you can use GtkButton's in Hildon applications in case you don't need the additional features that Hildon provides.

	<tt> button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_button_new_with_text</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>		<tt> button <span><font color="#990000"><nowiki>=</nowiki></font></span> <span>'''<span><font color="#000000">hildon_button_new_with_text</font></span>'''</span> <span><font color="#990000">(</font></span>HILDON_SIZE_AUTO<span><font color="#990000">,</font></span>
Line 210:		Line 210:
	</tt>		</tt>

	Here a signal handler is attached to the newly created button so that when it emits the "clicked" signal, our <code>hello()</code> function is called. The data is ignored, so we simply pass in NULL to the <code>hello()</code> callback function. Obviously, the "clicked" signal is emitted when the button is pressed.		Here, a signal handler is attached to the newly created button so that when it emits the "clicked" signal, our <code>hello()</code> function is called. The data is ignored, so we simply pass in NULL to the <code>hello()</code> callback function. Obviously, the "clicked" signal is emitted when the button is pressed.

	<tt><span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"clicked"</font></span><span><font color="#990000">,</font></span>		<tt><span>'''<span><font color="#000000">g_signal_connect</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">G_OBJECT</font></span>'''</span> <span><font color="#990000">(</font></span>button<span><font color="#990000">),</font></span> <span><font color="#FF0000">"clicked"</font></span><span><font color="#990000">,</font></span>
Line 222:		Line 222:
	</tt>		</tt>

	Once everything is set up, with all signal handlers in place and the button placed in the window, we ask GTK to "show" the widgets on the screen.		Once everything is set up with all signal handlers in place and the button placed in the window, we ask GTK to "show" the widgets on the screen.

	<tt><span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>		<tt><span>'''<span><font color="#000000">gtk_widget_show_all</font></span>'''</span> <span><font color="#990000">(</font></span><span>'''<span><font color="#000000">GTK_WIDGET</font></span>'''</span> <span><font color="#990000">(</font></span>window<span><font color="#990000">));</font></span>

imported_>danielwilms: 1 revision

2009-07-13T11:36:02Z

1 revision

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