Button Qt Quick Components for Symbian Part 1 of 2

Uploaded by MobileDevVT on 04.01.2012

Hi, Welcome to my 7th video about Qt for Nokia
phones. In this video we will introduce you to Button Element from Qt Quick Components.
Also we will be using Text and a Rectangle element. We will tie all this things together
with few simple lines of code written in QML. You are just looking at the final project
run in simulator. When the app start the rectangle is yellow. On the top we have Text element.
Beneath we have rectangle, and under we have buttons. At the bottom we are using ToolBar.
We covered Toolbar in our Hello World Explained tutorial so be sure to check it out if you
haven’t. When we press buttons the color in the rectangle changes and text is updates.
When we go back the app closes. We will close the simulator for now.
Let’s just take a look at the code. I didn’t mentioned it last time but I guess
you figured it yourself – QML supports nesting of elements.
PageStackWindow is top level element and ToolBarLayout is it’s childe.
This means that PageStackWindow is parent object of ToolBarLayout.
ToolButton here is child of ToolBarLayout. This parent child relationship is useful when
we want to position elements one according to other. We can see that bottom of Toolbar
is anchored to its parent’s bottom this means PageStackWindow’s bottom.
It means that ToolBarLayout will be at the bottom of the screen.
You have also probably noticed that QtQuick colors syntax.
Elements are colored in Violet color, and their properties are colored in this red color.
String are green, and comments are green too.
Let’s get started. We will close this project. Go to File>Close
All Projects. We will create new Qt Quick project.
We have covered this in earlier tutorials. Be sure to watch movie “Hello World For
Sybian^3” video if you haven’t seen it yet.
You can find the link in the description below this video.
Go to File > New File or Project. Choose Qt Quick project and Qt Quick application.
Choose a name. I will call it RectangleColor.
It will be saved in C:\qt work\learning Choose Qt Quick Components for Symbian.
I will choose only to target Qt Simulator. No version control and then Finish.
O.K. So basically this is skeleton code generated for you by the Qt Creator wizard.
We have PageStackWindow, ToolBarLayout. So this only creates Tool Bar you have seen
in the simulator before. And it is putting the file MainPage.qml on
the stack so you can see it. We won’t modify this file at all.
Let’s open MainPage.qml O.K. Here it is.
We have Page element. It is top level element. And inside we have Text element. Text element
just says Hello World. I want to stress that everything written in
code in edit mode is visible here. So you can see Page element has an Id set
to mainPage and you can see that here in Designer, we are going to switch to Designer mode now.
Page element has the ID set to mainPage in Edit mode.
And you can see that here in Designer mode top level element in Navigator is called mainPage.
In properties pane you can see its ID is set to mainPage. We have set that in code.
Also if you click on Text and you change some properties in properties pane like property
Text: you will see the code updates automatically. Change the text in Designer so it says MyHello
world. You can also change the text color to red.
We can see in code the changes we made in Designer mode.
Let’s get back to Designer mode. We will add a button,
and a rectangle to our mainPage.
When I move things around you can see that guidelines are popping on the screen so they
help me to arrange the view. Now let’s arrange these elements.
Select Text Element and under Layout of the Properties pane we will set top Anchor to
Parent. We will also set the Margin to 100.
We have to move the rectangle a little bit down so we can see the text element.
We can also change the color of the text element to
lets change it back to white. And also lets change the size. Let’s change
it to 30 maybe? Put the text in the middle.
Under layout it is still in the middle. OK, now we can arrange the rectangle.
We will set left anchor and right anchor to the left and right boundaries of the MainPage
file. Parent mainPage Margin:80
O.K. Let’s make it 10.
Maybe 20. O.K. this looks nice.
OK so we set the right anchor to the parent (mainPage) 20 pixels from the right margin
of the main page. And our button is positioned nicely.
This ensures us if we rotate orientation of the page that our rectangle will be widened.
So it will always be 20 pixels from the side borders of the mainPage.
Let’s get back to Edit mode. We can see that some new object papered.
There are some new properties inside Text element.
We have defined color. Horizontal alignment is binded to Text.AlignCenter
This is for text inside Text element. Anchor.top is aligned to parent.top with margin
100 Anchor.horizontalCentered is set to parent.horizontalCentered
This is positioning for the whole Text Element And this positions the text inside the text
element. We can align the text to the center or to
the left or right. Font size is set to 30.
Now we will change ID property of the button. It will be “btnGreen”
Because this will be button for color green. And label of the button will be also “Green”.
Rectangle has ID rectangle1 We can change color of rectangle to yellow.
This is RGB coding of color but we can just type yellow here.
Anchors of the rectangle, we can see that we set parent right with margin 20 anchor.left
= parent.left with margin 20 also. Now we will make this button do something
useful. We will create onClicked signal handler.
This handler is called when there is a click. Since our signal handler is inside the button
it will be executed when the button is pressed. When the green button is pressed we want to
change text from the text box to Color: Green. So let’s write the line of code that does
this. Rectangle's color should also be changed to
green. We will also add this code.
And finally we want to write something to the console log.
We will write “Green button pressed”.
Now let’s modify our rectangle. We will change height property of the Recangle.
Rectangle's height will be calculated and it will amount to parent's height divided
by 3. Because of this rectangle will have different
height in portrait mode and different in landscape mode.
In portrait mode it will be higher and in landscape it will be shorter.
So let’s build this. Save all changes to document.
Build is processing. Let's run this.
In simulator our rectangle is yellow. Height of the rectangle is parent’s height
divided by 3 When we hit the green button the text of the
text label is changed to the “Color: Green” Color of the rectangle is changed to Green.
When we rotate the simulator the height of the rectangle is recalculated.
We can see that we have to adjust the position of button
And there is too much space from the text to the top of the screen.
In our next tutorial we will adjust the position of the elements on the screen, and we will
add two more buttons. The final program will be usable in portrait
and in landscape mode.