Editing MADDE/Qt extended example/Part1

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.

Learn more about Contributing to the wiki.

== PART 1: Create a project and the basic UI in QtCreator ==

=== Start a new project with QtCreator ===

In a first step you have to create a project in QtCreator. Windows user should consider to save the project in the MADDE folder, to make the testing on device easier. Please follow these steps to do that:

File -> New File or Project
 
 Select:
 Qt4 Gui Application -> OK
 
 Choose a Name and location for the project -> Next
 
 Select no additional module -> Next
 
 Leave the class information as it is -> Next
 
 Finally click on Finish

Now the project is created and the result should be the following:

[[Image:01_project_created.png | 600px]]

The structure of the new project is the following:

wiki-example
     Forms
       mainwindow.ui
     Headers
       mainwindow.h
     Sources
       mainwindow.cpp
       main.cpp

=== Create the user interface ===

The goal of the next step is to use QtDesigner to create the user-interface. To get a general idea about QtDesigner, .ui files and how you can use them in your application, please consider the [http://doc.trolltech.com/4.5/designer-manual.html QtDesigner manual], which provides you further information. The following shows, how to build a simple UI for the example application, which should contain a [http://doc.trolltech.com/4.5/qlistwidget.html QListWidget] and three [http://doc.trolltech.com/4.5/qpushbutton.html QPushButtons]. In the first step after creating the project, you have to open the mainwindow.ui file, which you will find in "Forms". In the view you should see now the main window of the application. Now you can start creating the customised user-interface:

'''1. Remove menuBar, mainToolBar, statusBar'''

As it is shown on the picture above, please remove these three components, as they are not supported in Maemo5.

[[Image:02_remove_bars.png | 500px]]

'''2. Change the size of the mainwindow to 800x400.'''

In the down-right corner you can specify the preferred size of the window. Please make sure, that it is 800x400.

[[Image:03_change_size.png | 200 px]]

'''3. Create and place the needed components'''

As described earlier, we need one QListWidget and three QPushButtons. Drag them from the list besides onto the mainwindow. It makes sense to give them reasonable names, which you can do in the object-list in the upper right corner. The mainwindow should now look like:

[[Image:04_button_layout.png | 500px]]

In the next step, please select first the three buttons and then click on "Lay Out Vertically" like in the picture above. After that is done select the list widget and the button-layout together and click on "Lay Out in a Grid", as you can see in the following picture.

[[Image:05_list_button_grid.png | 500px]]

Finally please maximise the grid-layout to fill the whole mainview and change the label of the push-buttons by double-clicking on them to "Add", "Remove" and "Open". By double-clicking on the list-widget you can add an item like "No file added yet" and disable it in the properties. The result should be like:

[[Image:06_result.png | 600px]]

=== On Device ===

Now it is already possible to test the result on the device. Therefore you can use the mad-developer client. Please have a look at the chapters, which explain:

* [[MADDE/Device_runtime | how to set up the mad-developer client]]
* how to test the example

Following this, the result should look similar to this screenshot:

[[Image: screenshot_01.png | 400px]]

=== Useful links: ===
* [http://qt.nokia.com/products/developer-tools QtCreator]
* [[Qt4Hildon | Qt & Maemo]]
* [http://doc.trolltech.com/4.5/designer-manual.html QtDesigner manual]
* [http://doc.trolltech.com/4.5/classes.html Documentation Qt 4.5 classes]

Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!

Summary:

Cancel | Editing help (opens in new window)

Retrieved from "http://wiki.maemo.org/MADDE/Qt_extended_example/Part1"

Personal tools

Navigation

Views

Editing MADDE/Qt extended example/Part1

@@ Line 1: / Line 1: @@
-== Create a project and the basic UI in QtCreator ==
+== PART 1: Create a project and the basic UI in QtCreator ==
 === Start a new project with QtCreator ===
-In a first step you have to create a project in QtCreator. '''Windows user should consider to save the project in the MADDE folder''' (default location: C:\MADDE\<version>\home\<username>), to make the testing on device easier. Please follow these steps to do that:
+In a first step you have to create a project in QtCreator. Windows user should consider to save the project in the MADDE folder, to make the testing on device easier. Please follow these steps to do that:
   File -> New File or Project
@@ Line 33: / Line 33: @@
         mainwindow.cpp
         main.cpp
 === Create the user interface ===
@@ Line 73: / Line 77: @@
 [[Image:06_result.png | 600px]]
 === On Device ===
@@ Line 88: / Line 94: @@
 === Useful links: ===
 * [http://qt.nokia.com/products/developer-tools QtCreator]
-* [[Qt4 Hildon|Qt & Maemo]]
+* [[Qt4Hildon | Qt & Maemo]]
 * [http://doc.trolltech.com/4.5/designer-manual.html QtDesigner manual]
 * [http://doc.trolltech.com/4.5/classes.html Documentation Qt 4.5 classes]
-[[Category:Development]]
-[[Category:Qt]]