• May 02, 2024, 04:43:11 am

Author Topic: A simple qml app example for beginners  (Read 8429 times)

0 Members and 1 Guest are viewing this topic.

dracodragon

  • Guest
A simple qml app example for beginners
« 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]
« Last Edit: January 16, 2012, 12:12:00 am by allstar12345 »

Offline scubix

  • New Member
  • **
  • Posts: 15
  • Reputation: 1
Re: A simple qml app example for beginners
« Reply #1 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!!

Offline syarmwawa

  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,638
  • Reputation: 1173
  • SYmbian FTW!!!!!!!
  • Current Phone: : Nokia 5800 & Nokia C7 with Sexy Belle & 701 FTW...
Re: A simple qml app example for beginners
« Reply #2 on: January 15, 2012, 07:10:27 pm »
greatz share mate...:) +1 for u....:)

Offline vds5344

  • The mortal
  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,281
  • Reputation: 196
  • Pissed by kids.
    • Symbian Developers
  • Current Phone: : Nokia c6 01
Re: A simple qml app example for beginners
« Reply #3 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

Offline UpakulRox

  • Retired
  • Respected Member
  • ***
  • Posts: 609
  • Reputation: 184
  • A Symbian Fanboy
    • Symbian-Developers
  • Current Phone: : Nokia N8
Re: A simple qml app example for beginners
« Reply #4 on: January 15, 2012, 11:00:51 pm »
thanks a lot!!

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: A simple qml app example for beginners
« Reply #5 on: January 16, 2012, 12:10:22 am »
very very great post +1 post made stick !

dracodragon

  • Guest
Re: A simple qml app example for beginners
« Reply #6 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  :)

Offline UpakulRox

  • Retired
  • Respected Member
  • ***
  • Posts: 609
  • Reputation: 184
  • A Symbian Fanboy
    • Symbian-Developers
  • Current Phone: : Nokia N8
Re: A simple qml app example for beginners
« Reply #7 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

Offline UpakulRox

  • Retired
  • Respected Member
  • ***
  • Posts: 609
  • Reputation: 184
  • A Symbian Fanboy
    • Symbian-Developers
  • Current Phone: : Nokia N8
Re: A simple qml app example for beginners
« Reply #8 on: March 18, 2012, 03:47:57 am »
Thats cool!

Offline vds5344

  • The mortal
  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,281
  • Reputation: 196
  • Pissed by kids.
    • Symbian Developers
  • Current Phone: : Nokia c6 01
Re: A simple qml app example for beginners
« Reply #9 on: March 18, 2012, 11:53:23 am »
what's cool?

Offline kartik.bose

  • Developer
  • Happy Member
  • ****
  • Posts: 196
  • Reputation: 55
  • Symbian FanBoy Till I Die
  • Current Phone: : C7-00 wit SuperBelle
Re: A simple qml app example for beginners
« Reply #10 on: May 13, 2012, 03:55:19 am »
Awesome anand :)
YOUR HARDWORK IS REALLY APPRETIATED! +2

Offline kartik.bose

  • Developer
  • Happy Member
  • ****
  • Posts: 196
  • Reputation: 55
  • Symbian FanBoy Till I Die
  • Current Phone: : C7-00 wit SuperBelle
Re: A simple qml app example for beginners
« Reply #11 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!

Offline et3rnal

  • Viewer
  • *
  • Posts: 3
  • Reputation: 0
  • Nokia Power User
  • Current Phone: : N9
Re: A simple qml app example for beginners
« Reply #12 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

Offline Shides

  • Viewer
  • *
  • Posts: 3
  • Reputation: 0
  • Symbian Power User
  • Current Phone: : Nokia X7-00 Belle
Re: A simple qml app example for beginners
« Reply #13 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?

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: A simple qml app example for beginners
« Reply #14 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