; If demo_1.cpp is not already in the
editor window, then in the Project
Explorer panel on the left, double-click demo_1.cpp to get the code in
the editor window.
; Add a space anywhere, and then
from the Eclipse menu, select
File→Save All.
; Select Project→Build All, then
Run→Run. If you are asked for a
debugger configuration, choose
gdb/mi.
; Your GUI now should appear. Close
it by clicking the close icon on the
top right.
Now, it’s time to add visual components to your bare form. On the left-hand panel, select the Qt tab to see
the visual components. Click and drag
across two Push Buttons, an LCD
Number, a Text Edit box, a Horizontal
Slider and a Progress Bar to get a form
similar to Figure 2.
You can see the properties of any
visual component by clicking on a
Figure 2.
Visual
Components
component and then examining the
property editor in the right-hand panel.
The properties are shown as a hierarchy
with the parent class first and then the
child classes. You may need to scroll
down to find the property you want to
change. In Figure 2, a button has been
selected and the property editor shows
its properties. The property called “text”
has been changed to MyButton, which
is not the name of the button, just the
message displayed. It’s worth spending
some time looking at all the properties
you can alter. Try also right-clicking
on visual components to see what you
can change. For example, right-click
on the text edit box and select Change
HTML. Type in some text, click OK,
and that text is now displayed in the
text edit box.
To create a menu for your form,
click at the top left where it says “Type
Here”, and type “File”. Your form now
has a menu option “File”.
Click on this again, and add a sub-
option “Save”. After finishing this
tutorial, it’s worth starting a new project
and playing with a range of visual
components, right-clicking on each and
WWW.LINUXJOURNAL.COM SEPTEMBER 2011 | 87
