No guys, this post is not related to Apple Inc or Steve Jobs but to my previous post 🙂 We now are in a position to have our development setup ready for Qt app development on Android so lets begin with the actual stuff. I shall take an example of the digital clock app you had seen in the previous post (reproduced here for your sake).
For some Qt newbies, its also going to be a tutorial on using Qt Creator effectively. We shall cover UI design and then do some coloring and stuff like that to make it more beautiful. Then we shall code the app so that your clock works.
Requirements
For your reference, I have put up this simple app on my git repo or maybe you can get the tarball from here
Step 1
Start the Necessitas Qt Creator and create a new Qt Gui Application from File > New File or Project > Qt Widget Project > Qt GUI Application
Step 2
Choose the project name and location and after that choose the Qt version as Qt for Android which we created in the last post.
You can also select the Desktop version to for prototyping your app for the desktop x86 host. Once the project is created you can see the auto generated files under Project as shown below. The file tuxologycloxk.cpp is the one in which all the logic goes.
Step 3
Under Forms, click the .ui file and start making the UI. Its a pretty easy job actually, you have to drag and drop the required widgets and arrange them properly in something called as layouts. Just analyse a bit how I have created the UI for the clock.
You can drag and drop the Widgets from the left panel to the form view and the corresponding Objects will be created in the right top panel as shown above. The property for each project can be set directly from here only. For eg. the initial value (initValue) for the lcdNumber object has been set as 1200 above. You can actually set the widgets background as well as the whole application colour palette by changing properties of the respective objects.
Notes on StyleSheets
You can also apply styleSheets to make your app a bit beautiful too. For example the Exit text that you see in the application is actually a button with some styles applied. You can set styles using the UI editor quite easily. Just right click the corresponding widget and click on Change styleSheet. You will get window as shown below in which you can apply your desired style.
The above stylesheet changes a button from the boring button widget to a sleek black button which mixes well with the application’s look and feel.
Step 4
Look closely and you will understand that writing code is no big deal too. Just refer my digital clock source and browse through the code to understand it. Just a small reminder on creating signals and slots – You can click on the widget directly to create slots for the specific signals they will emit. For eg. right click Exit and select Go to slot.. A dialog box will ask you the signal which will be emitted and when you hit Ok a slot in the code will be automatically generated. Now you can write whatever code you want to implement in that slot.
Step 5
Assuming that you have created the application, you can do some other settings too. Just click on Projects on the left panel and you will see different targets for you application. We had opted for Android as well as Desktop in the beginning so both shall be shown here. Click on Run and then Details under Package Configuration. You will see some configuration tabs as shown below. You can fine tune some stuff from here of course such as Android Permissions, app name, app icon etc.
You also have an option to either deploy local Qt libs for the device or use device’s libs. If you have installed Ministro from Android market to your device, just leave it to use the devices qt libs. However, if you are going to use the emulator, make sure you get the Ministro apk from here and install it on the emulator by selecting the third option below.
Once all is set its time to connect your device, set platform as Android and hit Run (Ctrl+R) You can see the compile output on the compile output window and the debug messages in Application Output window (hit Alt+3 or Alt+4 to switch) Watch out for any build issues too. I hope the same stuff works fine with an AVD too as I haven’t tried that out actually. I do all my testing on my rooted Sony Xperia mini x10 Pro and the first image in this post is what you should get if you try to build the TuxologyClock project for your device.
Thats all Folks! Happy hacking!
Tuxology 