Thursday, December 26, 2013

QuickDictionary

The Qt5.2.0 is adding support for android and i couldn't be more excited. After fiddling around with the basic Qt based stuff, i realized that the QtQuick is the way to go for making interfaces for the mobile devices. The tutorial video about getting started with QtQuick is a good start for getting acquainted with the QtQuick.

The tutorial covers how to make scalable interfaces only the basic stuff though but it should be good enough to get you started.

Here is the URL:
http://qt-project.org/videos/watch/using-qt-quick-for-rapid-ui-prototyping-and-development

With this as a starting point iv'e been able to create a dictionary app with just QtQuick framework. Well why a dictionary app?

1) I found a really cool minimalistic UI design
2) Had a couple of cool looking color schemes that i could pick
3) I didn't have to create an infinite scrolling list :D
4) Minimal requirements.

With these i've started designing the application. Most of the tutorials claim that the mobile version will just work if the desktop version is working. This is mostly true but as you might expect.. it's not totally true. There are a couple of quirks i had to deal with while developing the dictionary app.

Here are the screenShots of the app on phone



1) Input Line edit has some weird behavior. We should set inputMethodHints: Qt.ImhNoPredictiveText to be able to use it properly.
2) Do not use eval for converting Json string to object. Use JSON.parse instead.
3) Making ui for different Display Sizes is tricky but easy with QtQuick.

Here is the video of the app in action on Nexus5



This needs some more tweaks to be awesome .. ill' be uploading the src soon on github.

Post a Comment