Symbian-Developers

The Official Developers Section => Symbian Software Development Discussions => The Developers Section => Qt Application Development => Topic started by: dracodragon on January 15, 2012, 06:33:10 pm

Title: A simple qml app example for beginners
Post by: dracodragon on January 15, 2012, 06:33:10 pm
This thread is going to be about a tutorial for amateur developers who are interested in symbian Qt apps development.. This is my first attempt at formal forum writing n tutorial... Hope you find it useful.

=======================================================
The first thing to be done is to download the Qt SDK (Software Development Kit) from http://qt.nokia.com/downloads. I'd prefer downloading the offline installer so that u could reinstall later if needed.

There's generally some bugs present in the installer, sometimes the packages don't get installed properly, which could cause lack of options while running the SDK, or errors during creating the output files... I personally faced the problem in win7, worked smoothly in XP though. (hope u r not one of the unlucky people around)

=======================================================
 Once you set it up nad get it running, the SDK has a complete set of things needed for even the highest level of app development. There's a nice HELP feature, with examples, which comes extremely handy after you get a little familiar with the code.

Suppose you want to know about a specific part of code, like what attributes u can set in a "toolButton"... keep the cursor on the word ToolButton{ } and press F1. U'll get a all the info u need.
In case u r a studious person, u can go for reading everything right from the basics, it has it all.

=======================================================
Next you want to begin a project (that's the name of software in nerdy language). You have a option between Qt Quick (qml) and Qt C++ type of app. I'll write about the pros and cons of each type in another thread. To say simply, qml is slower but beautiful witout putting any effort & Qt c++ has raw power, but u need to spend time to make it beautiful. (Ofcrse u can combine both, which needs high skill, n makes the app PERFECT).
For general small apps, qml is OK. I'm gonna write about creating a qml based app in this thread

=======================================================
The first app you make, is better to make copying a example. you can find many examples here http://doc.qt.nokia.com/latest/qdeclarativeexamples.html
Though I personally feel that all of 'em are quite too complex for beginners

=======================================================
I'm giving one example here from my own, let us know in the comments if u get stuck or face issues.

1) Start with creating a Qt-quick project > mobile app > built-in symbian elements. Give it names, set the preferences, tick symbian device & simulator n click OK. ***Select the project folder location inside the folder where u installed the SDK or else it'd not compile later
2) You'll be presented with the default qt appearance of mobiles, with the toolbar and status bar already set.
3) Let's make a simple basic calculator, drag three TextAreas from the resource bar, and also four buttons into the screen area
4) Place them nicely. (I'm not going into the ANCHORS stuff right now, will write abt it later. Without anchors, ur app will look bad when orientation is changed)
5) Click on the textareas and name them something easy (id: "xyz"), u'll need the names while coding. Suppose you name them txt1, txt2 n txt3
6) Now set the four button texts to +, - , x, /
7) Click on the + button and select edit in the upper left side of sdk
6) you'll have a code looking like this:
Code: [Select]
Button {
id:...
text:"+"
height:
width:
....
....
}

insert the following at the end so it looks like this:
Code: [Select]
Button {
id:...
text:"+"
....
height:
width:
....
onClicked: txt3.text = txt1.text*1 + txt2.text*1
}

7) Run the simulator by selecting Qt simulator in the bottom left side of sdk n pressing play. and you'll have your first app running.
8) To install it in the mobile, select symbian device, n then press play. It'd say error, no device connected after compiling.
9) Go to project folder n u'll find a sis file there, install it, n u'll have ur app in ur mobile

=======================================================
Some explanations:
onClicked is the attribute of qml buttons. Inside it u can give all the commands needed to execute when button is clicked. if you write more than one line of code inside, contain it inside { .... }

U''ll notice qml is surprisingly similar to java, whereas qt c++ is pure c++ coding.
Here, in the code, while taking the inputs from txt1, it is multiplied by a number so that when addition is done, it as added as a number rather than as string

Similarly u could add the code in the other 3 buttons too

=======================================================
Here's enough till now, I'll try to add some screenshots later, till then let me know about ur probs n achievments in the comment. I'll keep suggesting ideas n ways to take it to the next level[/size][/font]

[attachment deleted by admin]
Title: Re: A simple qml app example for beginners
Post by: scubix on January 15, 2012, 07:04:06 pm
Gr8 attempt dude!!
Really respect u a lot for dat!!
Keep up the gud work nd nd ur first +1 added!!
Title: Re: A simple qml app example for beginners
Post by: syarmwawa on January 15, 2012, 07:10:27 pm
greatz share mate...:) +1 for u....:)
Title: Re: A simple qml app example for beginners
Post by: vds5344 on January 15, 2012, 08:49:16 pm
omg! :o :D I've been waiting for this. Great I'm not able to stop myself but will try As i get my hands on a pc. Great +5
Title: Re: A simple qml app example for beginners
Post by: UpakulRox on January 15, 2012, 11:00:51 pm
thanks a lot!!
Title: Re: A simple qml app example for beginners
Post by: Allstar12345 on January 16, 2012, 12:10:22 am
very very great post +1 post made stick !
Title: Re: A simple qml app example for beginners
Post by: dracodragon on January 16, 2012, 01:37:25 pm
It'd be great if other devs also post abt their projects. We could share our ideas and suggestions  :)
Title: Re: A simple qml app example for beginners
Post by: UpakulRox on January 16, 2012, 02:54:44 pm
It'd be great if other devs also post abt their projects. We could share our ideas and suggestions  :)
Bro, if u have any developers as your friend, do invite them here
Title: Re: A simple qml app example for beginners
Post by: UpakulRox on March 18, 2012, 03:47:57 am
Thats cool!
Title: Re: A simple qml app example for beginners
Post by: vds5344 on March 18, 2012, 11:53:23 am
what's cool?
Title: Re: A simple qml app example for beginners
Post by: kartik.bose on May 13, 2012, 03:55:19 am
Awesome anand :)
YOUR HARDWORK IS REALLY APPRETIATED! +2
Title: Re: A simple qml app example for beginners
Post by: kartik.bose on May 29, 2012, 02:18:01 am
Quote
3) Let's make a simple basic calculator, drag three TextAreas from the resource bar, and also four buttons into the screen area
i am stuck on this . . .cant understand!
Title: Re: A simple qml app example for beginners
Post by: et3rnal on May 29, 2012, 01:24:04 pm
This is great, we really need like this basic stuff to start with so we get the language the syntax

hope to see more like this tut
Title: Re: A simple qml app example for beginners
Post by: Shides on July 20, 2012, 01:43:39 am
Hi, this is my first post in Symbian Developers Blog! ;) I'm a italian boy that love Symbian like you all ;)

Thank you for the beginners example! ;)
I'm a Java programmer and I would like to learn the QT Programming but I would like to know if in QML it is possible to create "intelligent" software with if/while/for or methods declarations or it is possibile to create only simple software that can only modify the state of screen objects?
Title: Re: A simple qml app example for beginners
Post by: Allstar12345 on July 20, 2012, 02:36:02 am
Hi, this is my first post in Symbian Developers Blog! ;) I'm a italian boy that love Symbian like you all ;)

Thank you for the beginners example! ;)
I'm a Java programmer and I would like to learn the QT Programming but I would like to know if in QML it is possible to create "intelligent" software with if/while/for or methods declarations or it is possibile to create only simple software that can only modify the state of screen objects?

I believe it is possible but only on the  app screen itself with QML
Title: Re: A simple qml app example for beginners
Post by: SANJAY on November 26, 2012, 11:00:07 pm
Nice share mate!