Ring Documentation, Release 1.4.

1

ant debug

51.3. Building the project 428
CHAPTER

FIFTYTWO

DESKTOP AND MOBILE DEVELOPMENT USING RINGQT

In this chapter we will learn how to use the Qt framework classes in our Ring applications to create Desktop and
Mobile Applications.

52.1 The First GUI Application

In this example we will create an application to ask the user about his/her name. When the user type the name in the
textbox then click on “Say Hello” button, the textbox value will be updated by adding “Hello ” to the name.
Load "guilib.ring"

MyApp = New qApp {

win1 = new qWidget() {

setwindowtitle("Hello World")
setGeometry(100,100,370,250)

label1 = new qLabel(win1) {
settext("What is your name ?")
setGeometry(10,20,350,30)
setalignment(Qt_AlignHCenter)
}

btn1 = new qpushbutton(win1) {
setGeometry(10,200,100,30)
settext("Say Hello")
setclickevent("pHello()")
}

btn1 = new qpushbutton(win1) {
setGeometry(150,200,100,30)
settext("Close")
setclickevent("pClose()")
}

lineedit1 = new qlineedit(win1) {
setGeometry(10,100,350,30)
}

show()
}

429
Ring Documentation, Release 1.4.1

exec()
}

Func pHello
lineedit1.settext( "Hello " + lineedit1.text())

Func pClose
MyApp.quit()

Program Output:
At first we type the name in the textbox

Then we click on the say hello button

52.1. The First GUI Application 430
Ring Documentation, Release 1.4.1

52.2 Using Layout

The next example is just an upgrade to the previous application to use the vertical layout.
Load "guilib.ring"

MyApp = New qApp {

win1 = new qWidget() {

setwindowtitle("Hello World")
setGeometry(100,100,400,130)
label1 = new qLabel(win1) {
settext("What is your name ?")
setGeometry(10,20,350,30)
setalignment(Qt_AlignHCenter)
}
btn1 = new qpushbutton(win1) {
setGeometry(10,200,100,30)
settext("Say Hello")
setclickevent("pHello()")
}
btn2 = new qpushbutton(win1) {
setGeometry(150,200,100,30)
settext("Close")
setclickevent("pClose()")
}
lineedit1 = new qlineedit(win1) {
setGeometry(10,100,350,30)
}
layout1 = new qVBoxLayout() {
addwidget(label1)
addwidget(lineedit1)
addwidget(btn1)
addwidget(btn2)
}
win1.setlayout(layout1)
show()
}

exec()

}

Func pHello
lineedit1.settext( "Hello " + lineedit1.text())

Func pClose
MyApp.quit()

The application during the runtime!

52.2. Using Layout 431
Ring Documentation, Release 1.4.1

52.3 Using the QTextEdit Class

In this example we will use the QTextEdit Class
Load "guilib.ring"

New qApp {

win1 = new qWidget() {

setwindowtitle("QTextEdit Class")
setGeometry(100,100,500,500)

new qtextedit(win1) {
setGeometry(10,10,480,480)

}

show()
}

exec()
}

During the runtime we can paste rich text in the qtextedit widget

52.3. Using the QTextEdit Class 432
Ring Documentation, Release 1.4.1

52.4 Using the QListWidget Class

In this example we will use the QListWidget Class
Load "guilib.ring"

New qApp {

win1 = new qWidget() {

setGeometry(100,100,400,400)

list1 = new qlistwidget(win1) {
setGeometry(150,100,200,200)
alist = ["one","two","three","four","five"]
for x in alist additem(x) next
setcurrentrow(3,2)
win1.setwindowtitle("Items Count : " + count() )
}

52.4. Using the QListWidget Class 433
Ring Documentation, Release 1.4.1

btn1 = new qpushbutton(win1) {
setGeometry(10,200,100,30)
settext("selected item")
setclickevent("pWork()")
}

btn2 = new qpushbutton(win1) {
setGeometry(10,240,100,30)
settext("Delete item")
setclickevent("pWork2()")
}

show()
}

exec()
}

func pWork
btn1.settext(string(list1.currentrow()))

func pWork2
list1 {
takeitem(currentrow())
}

The application during the runtime

52.4. Using the QListWidget Class 434
Ring Documentation, Release 1.4.1

Another Example:
Load "guilib.ring"

New qApp {

win1 = new qWidget() {

setGeometry(100,100,500,400)

list1 = new qlistwidget(win1) {
setGeometry(150,100,200,200)
alist = ["one","two","three","four","five"]
for x in alist additem(x) next

setcurrentrow(3,2)
win1.setwindowtitle("Items Count : " + count() )
}

btn1 = new qpushbutton(win1) {
setGeometry(10,200,100,30)
settext("selected item")
setclickevent("pWork()")
}

btn2 = new qpushbutton(win1) {
setGeometry(10,240,100,30)
settext("Delete item")
setclickevent("pWork2()")
}

show()
}

exec()
}

func pWork

nbrOfItems = list1.count()
curItemNbr = list1.currentrow()
curValue = list1.item(list1.currentrow()).text()

win1.setwindowtitle( "After Select - NbrOfItems: " + nbrOfItems +
" CurItemNbr: " + curItemNbr + " CurValue: " + curValue )

btn1.settext( string(list1.currentrow() ) + " --- " +
list1.item(list1.currentrow()).text() )

func pWork2
list1 {
takeitem(currentrow())

nbrOfItems = count()
curItemNbr = currentrow()
curValue = item(currentrow()).text()

52.4. Using the QListWidget Class 435
Ring Documentation, Release 1.4.1

win1.setwindowtitle("After Delete - NbrOfItems: " + nbrOfItems +
" CurItemNbr: " + curItemNbr +" CurValue: " + curValue )
}

52.5 Using QTreeView and QFileSystemModel

In this example we will learn how to use the QTreeView widget to represent the File System
Load "guilib.ring"

New qApp {

win1 = New qWidget() {

setwindowtitle("Using QTreeView and QFileSystemModel")
setGeometry(100,100,500,400)

New qtreeview(win1) {
setGeometry(00,00,500,400)
oDir = new QDir()
ofile = new QFileSystemModel()
ofile.setrootpath(oDir.currentpath())
setmodel(ofile)
}

show()
}

exec()
}

The application during the runtime

52.5. Using QTreeView and QFileSystemModel 436
Ring Documentation, Release 1.4.1

52.6 Using QTreeWidget and QTreeWidgetItem

In this example we will learn about using the QTreeWidget and QTreeWidgetItem classes
Load "guilib.ring"

New qApp {

win1 = new qWidget() {

setwindowtitle("TreeWidget")
setGeometry(100,100,400,400)

layout1 = new qvboxlayout()

tree1 = new qtreewidget(win1) {
setGeometry(00,00,400,400)
setcolumncount(1)
myitem = new qtreewidgetitem()
myitem.settext(0,"The First Step")
addtoplevelitem(myitem)
for x = 1 to 10
myitem2 = new qtreewidgetitem()
myitem2.settext(0,"hello"+x)
myitem.addchild(myitem2)

52.6. Using QTreeWidget and QTreeWidgetItem 437
Ring Documentation, Release 1.4.1

for y = 1 to 10
myitem3 = new qtreewidgetitem()
myitem3.settext(0,"hello"+x)
myitem2.addchild(myitem3)
next
next
setheaderlabel("Steps Tree")
}

layout1.addwidget(tree1)
setlayout(layout1)

show()
}

exec()
}

The application during the runtime

52.7 Using QComboBox Class

In this example we will learn about using the QComboBox class

52.7. Using QComboBox Class 438
Ring Documentation, Release 1.4.1

Load "guilib.ring"

New qApp {

win1 = new qWidget() {

setwindowtitle("Using QComboBox")
setGeometry(100,100,400,400)

New QComboBox(win1) {
setGeometry(150,100,200,30)
alist = ["one","two","three","four","five"]
for x in aList additem(x,0) next
}

show()
}

exec()
}

The application during the runtime

52.8 Creating Menubar

In this example we will learn about using the QMenuBar class

52.8. Creating Menubar 439
Ring Documentation, Release 1.4.1

Load "guilib.ring"

MyApp = New qApp {

win1 = new qWidget() {

setwindowtitle("Using QMenubar")
setGeometry(100,100,400,400)

menu1 = new qmenubar(win1) {
sub1 = addmenu("File")
sub2 = addmenu("Edit")
sub3 = addmenu("Help")
sub1 {
oAction = new qAction(win1) {
settext("New")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Open")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Save")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Save As")
}
addaction(oAction)
addseparator()
oAction = new qaction(win1) {
settext("Exit")
setclickevent("myapp.quit()")
}
addaction(oAction)
}
sub2 {
oAction = new qAction(win1) {
settext("Cut")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Copy")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Paste")
}
addaction(oAction)
addseparator()
oAction = new qAction(win1) {
settext("Select All")
}
addaction(oAction)
}
sub3 {
oAction = new qAction(win1) {

52.8. Creating Menubar 440
Ring Documentation, Release 1.4.1

settext("Reference")
}
addaction(oAction)
sub4 = addmenu("Sub Menu")
sub4 {
oAction = new qAction(win1) {
settext("Website")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Forum")
}
addaction(oAction)
oAction = new qAction(win1) {
settext("Blog")
}
addaction(oAction)
}
addseparator()
oAction = new qAction(win1) {
settext("About")
}
addaction(oAction)
}
}
show()
}
exec()
}

The application during the runtime

52.8. Creating Menubar 441
Ring Documentation, Release 1.4.1

52.9 Creating Toolbar

In this example we will learn about using the QToolBar class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setwindowtitle("Using QToolbar")
setGeometry(100,100,600,400)

abtns = [
new qpushbutton(win1) { settext("Add") } ,
new qpushbutton(win1) { settext("Edit") } ,
new qpushbutton(win1) { settext("Find") } ,
new qpushbutton(win1) { settext("Delete") } ,
new qpushbutton(win1) { settext("Exit")
setclickevent("win1.close()") }
]

tool1 = new qtoolbar(win1) {
for x in abtns addwidget(x) addseparator() next
setmovable(true)
setGeometry(0,0,500,30)

52.9. Creating Toolbar 442
Ring Documentation, Release 1.4.1

setFloatable(true)
}

show()
}

exec()
}

The application during the runtime

52.10 Creating StatusBar

In this example we will learn about using the QStatusBar class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setwindowtitle("Using QStatusbar")
setGeometry(100,100,400,400)

status1 = new qstatusbar(win1) {
showmessage("Ready!",0)

52.10. Creating StatusBar 443
Ring Documentation, Release 1.4.1

}

setstatusbar(status1)
show()
}

exec()
}

The application during the runtime

52.11 Using QDockWidget

In this example we will learn about using the QDockWidget class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setwindowtitle("QDockWidget")
setGeometry(100,100,400,400)

label1 = new qlabel(win1) {
settext("Hello")

52.11. Using QDockWidget 444
Ring Documentation, Release 1.4.1

setGeometry(300,300,100,100)
}

label2 = new qlabel(win1) {
settext("How are you ?")
setGeometry(100,100,100,100)
}

dock1 = new qdockwidget(win1,0) {
setwidget(label1)
SetAllowedAreas(1)
}

dock2 = new qdockwidget(win1,0) {
setwidget(label2)
SetAllowedAreas(2)
}

adddockwidget(Qt_LeftDockWidgetArea,dock1,Qt_Horizontal)
adddockwidget(Qt_LeftDockWidgetArea,dock2,Qt_Vertical)

show()
}
exec()
}

The application during the runtime

52.11. Using QDockWidget 445
Ring Documentation, Release 1.4.1

52.12 Using QTabWidget

In this example we will learn about using the QTabWidget class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setwindowtitle("Using QTabWidget")
setGeometry(100,100,400,400)

page1 = new qwidget() {
new qpushbutton(page1) {
settext("The First Page")
}
}

page2 = new qwidget() {
new qpushbutton(page2) {
settext("The Second Page")
}
}

page3 = new qwidget() {
new qpushbutton(page3) {
settext("The Third Page")
}
}

tab1 = new qtabwidget(win1) {
inserttab(0,page1,"Page 1")
inserttab(1,page2,"Page 2")
inserttab(2,page3,"Page 3")
setGeometry(100,100,400,400)
}

status1 = new qstatusbar(win1) {
showmessage("Ready!",0)
}

setstatusbar(status1)
showMaximized()
}

exec()
}

The application during the runtime

52.12. Using QTabWidget 446
Ring Documentation, Release 1.4.1

52.13 Using QTableWidget

In this example we will learn about using the QTableWidget class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setGeometry(100,100,1100,370)
setwindowtitle("Using QTableWidget")

Table1 = new qTableWidget(win1) {

setrowcount(10) setcolumncount(10)
setGeometry(0,0,800,400)
setselectionbehavior(QAbstractItemView_SelectRows)

for x = 1 to 10
for y = 1 to 10
item1 = new qtablewidgetitem("R"+X+"C"+Y)
setitem(x-1,y-1,item1)
next
next

}

setcentralwidget(table1)
show()

}

52.13. Using QTableWidget 447
Ring Documentation, Release 1.4.1

exec()
}

The application during the runtime

52.14 Using QProgressBar

In this example we will learn about using the QProgressBar class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {

setGeometry(100,100,600,150)
setwindowtitle("Using QProgressBar")

for x = 10 to 100 step 10
new qprogressbar(win1) {
setGeometry(100,x,350,30)
setvalue(x)
}
next

show()
}
exec()
}

The application during the runtime

52.14. Using QProgressBar 448
Ring Documentation, Release 1.4.1

52.15 Using QSpinBox

In this example we will learn about using the QSpinBox class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setGeometry(100,100,450,260)
setwindowtitle("Using QSpinBox")
new qspinbox(win1) {
setGeometry(50,100,350,30)
setvalue(50)
}
show()
}
exec()
}

The application during the runtime

52.15. Using QSpinBox 449
Ring Documentation, Release 1.4.1

52.16 Using QSlider

In this example we will learn about using the QSlider class
Load "guilib.ring"

New qApp {

win1 = new qMainWindow() {

setGeometry(100,100,500,400)
setwindowtitle("Using QSlider")

new qslider(win1) {
setGeometry(100,100,50,130)
settickinterval(50)
}

new qslider(win1) {
setGeometry(100,250,250,30)
settickinterval(50)
setorientation(Qt_Horizontal)
}

show()

}

exec()
}

The application during the runtime

52.16. Using QSlider 450
Ring Documentation, Release 1.4.1

52.17 Using QDateEdit

In this example we will learn about using the QDateEdit class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setwindowtitle("Using QDateEdit")
setGeometry(100,100,250,100)
new qdateedit(win1) {
setGeometry(20,40,220,30)
}
show()
}
exec()
}

The application during the runtime

52.17. Using QDateEdit 451
Ring Documentation, Release 1.4.1

52.18 Using QDial

In this example we will learn about using the QDial class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setGeometry(100,100,450,500)
setwindowtitle("Using QDial")
new qdial(win1) {
setGeometry(100,100,250,300)
}
show()
}
exec()
}

The application during the runtime

52.18. Using QDial 452
Ring Documentation, Release 1.4.1

Another Example
Load "guilib.ring"

New qApp {
win1 = new qMainWindow()
{
setGeometry(100,100,450,500)
setwindowtitle("Using QDial")
button1 = new QPushButton(win1){
setGeometry(100,350,100,30)
settext("Increment")
setClickEvent("pIncrement()")
}

button2 = new QPushButton(win1){
setGeometry(250,350,100,30)
settext("Decrement")
setClickEvent("pDecrement()")
}
pdial = new qdial(win1) {

52.18. Using QDial 453
Ring Documentation, Release 1.4.1

setGeometry(100,50,250,300)
setNotchesVisible(true)
setValue(50)
SetValueChangedEvent("pDialMove()")
}
lineedit1 = new qlineedit(win1) {
setGeometry(200,400,50,30)
setalignment(Qt_AlignHCenter)
settext(string(pdial.value()))
setreturnPressedEvent("pPress()")
}
show()
}
exec()
}

func pIncrement
pdial{val=value()}
pdial.setvalue(val+1)
lineedit1{settext(string(val+1))}

func pDecrement
pdial{val=value()}
pdial.setvalue(val-1)
lineedit1{settext(string(val-1))}

func pPress
lineedit1{val=text()}
pdial.setvalue(number(val))

func pDialMove
lineedit1.settext(""+pdial.value())

52.18. Using QDial 454
Ring Documentation, Release 1.4.1

52.19 Using QWebView

In this example we will learn about using the QWebView class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setwindowtitle("QWebView")
myweb = new qwebview(win1) {
setGeometry(10,10,600,600)
loadpage(new qurl("http://google.com"))
}
setcentralwidget(myweb)
showMaximized()
}
exec()
}

The application during the runtime

52.19. Using QWebView 455
Ring Documentation, Release 1.4.1

52.20 Using QCheckBox

In this example we will learn about using the QCheckBox class
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setwindowtitle("Using QCheckBox")
new qcheckbox(win1) {
setGeometry(100,100,100,30)
settext("New Customer!")
}
showMaximized()
}
exec()
}

The application during the runtime

52.20. Using QCheckBox 456
Ring Documentation, Release 1.4.1

Another Example:
Load "guilib.ring"

New qApp {
win1 = new qMainWindow() {
setGeometry(100,100,400,300)
setwindowtitle("Using QCheckBox")

### 0-Unchecked 1-Checked

CheckBox = new qcheckbox(win1) {
setGeometry(100,100,160,30)
settext("New Customer!")
setclickedEvent("HandleClickEvent()")
}

show()
}
exec()
}

Func HandleClickEvent

if CheckBox.isChecked() = 1
CheckBox.settext("New Customer. Check 1-ON")
else
CheckBox.settext("New Customer. Check 0-OFF")
ok

52.21 Using QRadioButton and QButtonGroup

In this example we will learn about using the QRadioButton and QButtonGroup classes
Load "guilib.ring"

52.21. Using QRadioButton and QButtonGroup 457