Hello World with Qtopia (Part 3 – User Interface Files)

Posted by – May 28, 2008

The majority of applications requires a user interface to allow user interaction with application functionalities, this third part of our article will talk about the user interface files that are xml files used to define the contents of Qtopia graphical elements like dialog boxes and windows.

In the example below we are defining a QWidget called HelloWorldBase, this widget is the main window of helloworld application, it contains a QLineEdit (input box), a QLabel and a QPushButton each of then can be declared in xml using the <widget> tag where the class attribute indicate the widget type and name attribute holds the object instance name. Each widget may have default values for its properties, you can define the widget properties using <property> tag, a property requires a name that must be supplied on name attribute of this tag.

helloworld.ui:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<ui version="4.0" >
 <!--Binding this interface file to HelloWordBase class-->
 <class>HelloWorldBase</class>
 <!--
The main window of this application will be a QWidget
with HelloWorldBase as class name
-->
 <widget class="QWidget" name="HelloWorldBase" >
  <!--
 The geometry property will set the placement and
 dimensions of HelloWorldBase window
 -->
  <property name="geometry" >
   <rect>
    <x>0</x>
    <y>0</y>
    <width>217</width>
    <height>116</height>
   </rect>
  </property>
  <!--
 The application window title can be defined
 using windowTitle property
 -->
  <property name="windowTitle" >
   <string>Hello World!</string>
  </property>
  <!--Adding a input box to the window called txtName-->
  <widget class="QLineEdit" name="txtName" >
   <property name="geometry" >
    <rect>
     <x>30</x>
     <y>40</y>
     <width>161</width>
     <height>20</height>
    </rect>
   </property>
  </widget>
  <!--Adding a label to the window called lblName-->
  <widget class="QLabel" name="lblName" >
   <property name="geometry" >
    <rect>
     <x>30</x>
     <y>20</y>
     <width>45</width>
     <height>14</height>
    </rect>
   </property>
   <property name="text" >
    <string>Name</string>
   </property>
  </widget>
  <!--Adding a button to the window called btnSay-->
  <widget class="QPushButton" name="btnSay" >
   <property name="geometry" >
    <rect>
     <x>70</x>
     <y>80</y>
     <width>75</width>
     <height>24</height>
    </rect>
   </property>
   <!--Setting the default label of btnSay button-->
   <property name="text" >
    <string>Say</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

In the next article we will show how can we bind some of the user interface controls declared in this file to events and objects instances in our application classes.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>