ZetCode Ruby Qt Tutorial

8/13/2019 ZetCode Ruby Qt Tutorial

1/64

ZetCode Ruby Qt tutorial

This is Ruby Qt tutorial. In this tutorial you will learn the basics of GUI programming in Qt

with Ruby language. The tutorial is suitable for beginners and intermediate programmers.

Qt

Qt is a cross-platform application development framework. ome of the well known

applications developed with Qt are !"#$ %pera$ Google #arth and kype. Qt was first

publicly released on &ay '((). It is dual licensed. That means$ it can be used for creating

open source applications as well as commercial ones. Qt toolkit is a very powerful toolkit. It

is well established in the open source community.

Introduction to Ruby Qt

In this part of the Ruby Qt tutorial$ we will introduce the Qt toolkit and create our first

programs using the Ruby programming language.

The purpose of this tutorial is to get you started with the Qt toolkit with the Ruby language.

Images used in this tutorial can be downloadedhere.I used some icons from the tango icons

pack of the Gnome pro*ect.

About

Qt is one of the leading toolkits for creating graphical user interfaces. Ruby is a popularscripting language.

Creating a Tooltip

The first e+ample will show a tooltip. , tooltip is a small rectangular window$ which gives a

brief information about an ob*ect. It is usually a GUI component. It is part of the help system

of the application.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## This code shows a tooltip on# a window.## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'

class Qt(pp ) Qt::*id+et

de initialize

'
http://zetcode.com/img/gui/qtruby/images.ziphttp://zetcode.com/img/gui/qtruby/images.ziphttp://zetcode.com/img/gui/qtruby/images.ziphttp://zetcode.com/img/gui/qtruby/images.zip


2/64

super

set*indowTitle ,Tooltip,

setToolTip ,This is Qt::*id+et,

resize -$ %-$ oe 0$$ 0$$

show endend

app 1 Qt::(pplication.new (R23Qt(pp.newapp.e4ec

The e+ample creates a window. If we hover a mouse pointer over the area of the window$ a

tooltip pops up.

re&uire 'Qt'

The re&uirekeyword imports necessery types that we will use in the application.


The e+ample inherits from a Qt::*id+et. The idget class is the base class of all user

interface ob*ects. The widget is the atom of the user interface. It receives mouse$ keyboard

and other events from the window system.

set*indowTitle ,Tooltip,

This method call creates a title for the window.

setToolTip ,This is Qt::*id+et,

The setToolTipmethod creates a tooltip for the idget ob*ect.

resize -$ %-$

ere we set the width and the height of the window.

oe 0$$ 0$$

The oemethod moves the window on the screen.

show

hen everything is ready$ we show the window on the screen.

app 1 Qt::(pplication.new (R23Qt(pp.new

app.e4ec

/


3/64

These three lines set up the application.

0igure1 Tooltip

Centering a window

In the second e+ample$ we will center the window on the screen.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## This pro+ra centers a window# on the screen.## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'

*56T7 1 -$78527T 1 %-$


de initialize super

set*indowTitle ,Center, resize *56T7 78527T

center show end

de center &dw 1 Qt::6es9top*id+et.new

screen*idth 1 &dw.width screen7ei+ht 1 &dw.hei+ht

4 1 screen*idth ; *56T7< / y 1 screen7ei+ht ; 78527T< /

oe 4 y endend

2


4/64


The Qt toolkit does not have a single method to center a window.

*56T7 1 -$78527T 1 %-$

These two constants define the width and height of the application window.

&dw 1 Qt::6es9top*id+et.new

The Qt::6es9top*id+etclass provides information about the screen.

screen*idth 1 &dw.width

screen7ei+ht 1 &dw.hei+ht

ere we determine the screen width and height.

4 1 screen*idth ; *56T7< / y 1 screen7ei+ht ; 78527T< /

ere we calculate the +$ y coordinates of the centered window. To center a window on the

screen$ we need to know the si3e of the screen and the si3e of the window.

oe 4 y

e move the window to the computed +$ y coordinates.

Quit button

In the last e+ample of this section$ we will create a 4uit button. hen we press this button$

the application terminates.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial#

# This pro+ra creates a &uit# button. *hen we press the button# the application terinates.## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'


de initialize

5


5/64


6/64

0igure1 Quit button

This section was an introduction to the Qt toolkit with the Ruby language.

Layout management

In this part of the Ruby Qt programming tutorial$ we will introduce layout managers.

hen we design the GUI of our application$ we decide what components we will use and

how we will organi3e those components in the application. To organi3e our components$ we

use speciali3ed non visible ob*ects called layout managers. There are several options in Qt.

e can use absolute positioning$ built-in layout managers or create a custom layout manager.

e can also visually build the layouts using the Qt "esigner.

Qt has some important built-in layout managers. The Qt::3Bo4Aayoutclass lines up widgets

vertically. Qt::7Bo4Aayoutlines up widgets hori3ontally. The Qt::2ridAayoutclass lays

out widgets in a grid. The grid layout is the most fle+ible layout manager. The bo+ layoutscan be nested into one another to create comple+ layouts.

Absolute positioning

In most cases$ programmers should use layout managers. There are a few situations$ where

we can use absolute positioning. In absolute positioning$ the programmer specifies the

position and the si3e of each widget in pi+els. The si3e and the position of a widget do not

change$ if you resi3e a window. ,pplications look different on various platforms$ and what

looks %! on 6inu+$ might not look %! on &ac. 7hanging fonts in your application might

spoil the layout. If you translate your application into another language$ you must redo yourlayout. 0or all these issues$ use the absolute positioning only when you have a reason to do

so.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## 5n this pro+ra we lay out wid+ets# usin+ absolute positionin+.## author: Jan Bodnar# website: www.zetcode.co

# last odiied: "epteber $%

8


7/64

re&uire 'Qt'


de initialize super

set*indowTitle ,(bsolute,

init=ui

resize 0$$ ?$ oe 0$$ 0$$

show end

de init=uiset"tyle"heet ,Q*id+et D bac9+round;color: #E%E%E% F,

bardeGo 1 Qt::>i4ap.new ,bardeGo.Gp+, rotunda 1 Qt::>i4ap.new ,rotunda.Gp+, incol 1 Qt::>i4ap.new ,incol.Gp+,

barAabel 1 Qt::Aabel.new sel barAabel.set>i4ap bardeGo barAabel.oe $ $

rotAabel 1 Qt::Aabel.new sel

rotAabel.set>i4ap rotunda rotAabel.oe E$ %H$

inAabel 1 Qt::Aabel.new sel inAabel.set>i4ap incol inAabel.oe %I$ -$

endend


In this e+ample$ we show three images using the absolute positioning.

barAabel 1 Qt::Aabel.new selbarAabel.set>i4ap bardeGo

The Qt::Aabelwidget is used to hold the image.

barAabel.oe $ $

e use the oemethod to position the label on the window at +9/:$ y9/:.

hen we resi3e the window$ the labels retain their initial si3e.

;


8/64

0igure1 ,bsolute positioning

Buttons example

In the following e+ample$ we will position two buttons in the bottom right corner of the

window.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## 5n this pro+ra we use bo4 layouts# to position two buttons in the# botto ri+ht corner o the window.## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'


de initialize super

set*indowTitle ,Buttons,

init=ui

resize 00$ %I$ oe 0$$ 0$$

show end

de init=ui bo4 1 Qt::3Bo4Aayout.new sel


9/64

hbo4 1 Qt::7Bo4Aayout.new

o9 1 Qt::>ushButton.new ,, sel apply 1 Qt::>ushButton.new ,(pply, sel

hbo4.add*id+et o9 % Qt::(li+nRi+ht

hbo4.add*id+et apply

bo4.add"tretch % bo4.addAayout hbo4 endend


e use nested bo+ layouts to get our intended layout.

bo4 1 Qt::3Bo4Aayout.new selhbo4 1 Qt::7Bo4Aayout.new

e use one vertical and one hori3ontal bo+.

o9 1 Qt::>ushButton.new ,, selapply 1 Qt::>ushButton.new ,(pply, sel

These are the two buttons that will go into the bottom right corner of the window.

hbo4.add*id+et o9 % Qt::(li+nRi+ht

e put the ok button into the hori3ontal bo+. The second parameter is the stretchfactor. It

e+pands the area allotted to the ok button. It takes all available space left. The alignment of

the windget inside this area is controlled by the third parameter. The Qt::(li+nRi+htwill

align the button to the right.

bo4.add"tretch %

This line creates a vertically e+panded white space$ which will push the hori3ontal bo+ with

the buttons to the bottom.

bo4.addAayout hbo4

The hori3ontal bo+ is nested into the vertical bo+.

(


10/64

0igure1 =uttons e+ample

Windows example

The following is a more complicated e+ample with nested bo+ layouts.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## 5n this pro+ra use bo4 layouts# to create a *indows e4aple## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'


de initialize super

set*indowTitle ,*indows,

init=ui

resize 0-$ 0$$ oe 0$$ 0$$

show end

de init=ui bo4 1 Qt::3Bo4Aayout.new sel

bo4% 1 Qt::3Bo4Aayout.new hbo4% 1 Qt::7Bo4Aayout.new hbo4 1 Qt::7Bo4Aayout.new

windAabel 1 Qt::Aabel.new ,*indows, sel edit 1 Qt::Te4t8dit.new sel

edit.set8nabled alse

actiate 1 Qt::>ushButton.new ,(ctiate, sel

':


11/64

close 1 Qt::>ushButton.new ,Close, sel help 1 Qt::>ushButton.new ,7elp, sel o9 1 Qt::>ushButton.new ,, sel

bo4.add*id+et windAabel

bo4%.add*id+et actiate bo4%.add*id+et close $ Qt::(li+nTop hbo4%.add*id+et edit hbo4%.addAayout bo4%

bo4.addAayout hbo4%

hbo4.add*id+et help hbo4.add"tretch % hbo4.add*id+et o9

bo4.addAayout hbo4 % setAayout bo4

endend


In this layout$ we use two vertical and hori3ontal bo+es.

bo4 1 Qt::3Bo4Aayout.new sel

This is the base layout of the e+ample.

windAabel 1 Qt::Aabel.new ,*indows, sel

0irst goes the label widget. It goes simply to the top of the vertical bo+.

bo4%.add*id+et actiatebo4%.add*id+et close $ Qt::(li+nTophbo4%.add*id+et edithbo4%.addAayout bo4%

bo4.addAayout hbo4%

In the center part of the window we have a te+t edit widget and two vertically lined up

buttons. The buttons go into a vertical bo+. The buttons are aligned to the top within this

vertical bo+. The vertical bo+ and the te+t edit go into a hori3ontal bo+. This hori3ontal bo+

goes to the base vertical bo+$ *ust below the label widget.

hbo4.add*id+et helphbo4.add"tretch %hbo4.add*id+et o9

bo4.addAayout hbo4 %

The help and the ok button go into another hori3ontal bo+. There is an e+panded white spacebetween these two buttons. ,gain$ the hori3ontal bo+ goes to the base vertical bo+.

''


12/64

setAayout bo4

The base vertical bo+ is set to be the main layout of the window.

0igure1 indows e+ample

New Folder example

In the last e+ample$ we use the Qt::2ridAayoutmanager to create a >ew 0older layout

e+ample.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial## 5n this pro+ra use the 2ridAayout# to create a @ew Kolder e4aple.## author: Jan Bodnar# website: www.zetcode.co# last odiied: "epteber $%

re&uire 'Qt'


de initialize super

set*indowTitle ,@ew Kolder,

init=ui

resize 0$$ 0$$

oe 0$$ 0$$

'/


13/64

show end

de init=ui

+rid 1 Qt::2ridAayout.new sel

naeAabel 1 Qt::Aabel.new ,@ae, sel nae8dit 1 Qt::Aine8dit.new sel te4t 1 Qt::Te4t8dit.new sel o9Button 1 Qt::>ushButton.new ,, sel closeButton 1 Qt::>ushButton.new ,Close, sel

+rid.add*id+et naeAabel $ $ +rid.add*id+et nae8dit $ % % 0 +rid.add*id+et te4t % $ E +rid.setColun"tretch % % +rid.add*id+et o9Button E +rid.add*id+et closeButton E 0

endend

app 1 Qt::(pplication.new(R23ushButton.new ,Blue, sel blueb.setChec9able true blueb.oe %$ %%$

connect blueb "52@(A,clic9ed


22/64

s&uare 1 Qt::*id+et.new sels&uare.set2eoetry %-$ $ %$$ %$$s&uare.set"tyle"heet ,Q*id+et D bac9+round;color: s F, color.nae

e create a s4uare widget. e set its si3e. ,t the beginning$ it is black. In Qt$ we use style

sheets to customi3e the appearance of a widget.

Inside the on=clic9edmethod$ we determine the colour value and update the s4uare widget

to a new colour.

red 1 color.red+reen 1 color.+reenblue 1 color.blue

ere we determine the current colour of the s4uare widget.

i redb.isChec9ed

red 1 --else

red 1 $end

The red part of the colour is changed$ depending on the state of the red toggle button.

color 1 Qt::Color.new red +reen blue

e create a new colour value.

s&uare.set"tyle"heet,Q*id+et D bac9+round;color: s F, color.nae(C5TL 1 I$$M(=C(>(C5TL 1 I-$

class Burnin+ ) Qt::*id+et

de initializeparentainter.new sel

draw*id+et painter

painter.end end

de draw*id+et painter

w 1 width.to=

slid=width 1 parent.+etCurrent*idth

step 1 w / 6535"5@"(C5TL< W slid=width(C5TL< W KSAA=C(>(C5TL(C5TL painter.set>en yellowColor painter.setBrush Qt::Brush.new yellowColor painter.drawRect Qt::RectK.new $ $ ull >(@8A=78527T painter.set>en redColor painter.setBrush Qt::Brush.new redColor painter.drawRect Qt::RectK.new ullU% $ till;ull>(@8A=78527T else

i slid=width V $ painter.set>en yellowColor painter.setBrush Qt::Brush.new yellowColor painter.drawRect Qt::RectK.new $ $ till >(@8A=78527T end

)2


54/64

end

painter.set>en Qt::Color.new P$ P$ P$ painter.setBrush Qt::@oBrush painter.drawRect $ $ w;% >(@8A=78527T;%

newKont 1 ont newKont.set>oint"ize I painter.setKont newKont

or i in %..nu.len+th< painter.drawAine Qt::AineK.new iWstep % iWstep A5@8=*56T7

etrics 1 Qt::KontMetrics.new newKont

w 1 etrics.width nuXi;%Y painter.drawTe4tQt::>ointK.newiWstep;w/ 65"T(@C8


55/64

de onChan+ed al cur=width 1 al wid+et.repaint end

de +etCurrent*idth return cur=width endend


In this file$ we create the =urning widget.

class Burnin+ ) Qt::*id+et

The custom widget is based on the *id+etwidget.

>(@8A=78527T 1 0$65"T(@C8 1 %PA5@8=*56T7 1 -6535"5@" 1 %$KSAA=C(>(C5TL 1 I$$M(=C(>(C5TL 1 I-$

These are important constants. The >(@8A=78527Tdefines the height for the custom widget.

The 65"T(@C8is the distance of the numbers on the scale from the top of their parent border.The A5@8=*56T7is the vertical line width. The 6535"5@"is the number of parts of the scale.

The KSAA=C(>(C5TLis the ma+imum capacity of the media. ,fter it is reached$ overburning

happens. This is visuali3ed by a red color. The M(=C(>(C5TLis the ma+imum capacity of a

medium.

nu 1 X ,I-, ,%-$, ,-, ,0$$,,0I-, ,E-$, ,--, ,H$$, ,HI-, Y

e use these numbers to build the scale of the =urning widget.

de paint8ent eent

painter 1 Qt::>ainter.new sel

draw*id+et painter painter.endend

The drawing of the custom widget is delegated to the draw*id+etmethod.

slid=width 1 parent.+etCurrent*idth

e use it to get the currently selected slider value.

w 1 width.to=

))


56/64

e get the width of the widget. The width of the custom widget is dynamic. It can be resi3ed

by a user.

till 1 w / M(=C(>(C5TL< W slid=width(C5TL< W KSAA=C(>(C5TLote that we use floating point values. e get greater precision in

drawing.

painter.set>en redColorpainter.setBrush Qt::Brush.new redColorpainter.drawRect Qt::RectK.new ullU% $ till;ull >(@8A=78527T

These three lines draw the red rectangle$ indicating the overburning.

painter.drawRect $ $ w;% >(@8A=78527T;%

This is the perimeter of the widget. The outside rectangle.

painter.drawAine Qt::AineK.new iWstep % iWstep A5@8=*56T7

ere we draw the small vertical lines.

w 1 etrics.width nuXi;%Ypainter.drawTe4tQt::>ointK.newiWstep;w/ 65"T(@C8


57/64

0igure1 The =urning widget

In this part of the Ruby Qt tutorial$ we have demonstrated how to create a custom widget.

Nibbles

In this part of the Ruby Qt programming tutorial$ we will create a >ibbles game clone.

Nibblesis an older classic video game. It was first created in late ;:s. 6ater it was brought to

A7s. In this game the player controls a snake. The ob*ective is to eat as many apples as

possible. #ach time the snake eats an apple$ its body grows. The snake must avoid the walls

and its own body.

&e(elopment

The si3e of each of the *oints of a snake is ':p+. The snake is controlled with the cursor keys.

Initially$ the snake has three *oints. The game starts immediately. hen the game is finished$

we display Game %ver message in the center of the window.

=oard.rb*56T7 1 0$$78527T 1 0$$6T="5Z8 1 %$(AA=6T" 1 *56T7 W 78527T / 6T="5Z8 W 6T="5Z8" 1 P

68A(L 1 %E$

4 1 X$Y W (AA=6T"y 1 X$Y W (AA=6T"

class Board ) Qt::*id+et

de initializeparent

Documents

ZetCode Ruby Qt Tutorial