Revision as of 22:11, 29 February 2012 by knobtviker (Talk | contribs)

Dropian QML Dropbox Client for Symbian - app showcase

From Nokia Developer Wiki
Jump to: navigation, search

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

Article Metadata
Tested with
Devices(s): Nokia C6-01, Nokia C7 Astound, Nokia C7-00, Nokia E6-00, Nokia E7-00, Nokia N8-00, Nokia X7-00, Nokia 700, Nokia 701
Platform(s): Symbian Anna/PS1, Symbian Belle, Qt 4.7.4
Dependencies: QtMobility 1.2, Qt Quick Components 1.1
Keywords: Dropbox, cloud, Components
Created: knobtviker (07 Feb 2012)
Last edited: knobtviker (29 Feb 2012)



Dropian logo.png
Dropian is a fully functional Dropbox client. It caches your files and folder using a secure database and minimizes bandwidth completely.

You can move, copy, delete, rename, download and upload single or multiple files at the same time. Dropian works with the new Dropbox API v1 enabling sharing files or folders with your friends via SMS or e-mail and searching your Dropbox for wanted files as well. You can restore previous versions or stream your files from your Dropbox onto your device.
Older application versions were based on QWidget and compiled on various Qt releases, depending on targeted platform in range from 4.6 to 4.7. Only recently, with latest available Dropian version, user interface was ported to use only Qt Quick Components for Symbian.


A complex application like Dropian is based on PageStackWindow. Out of total eleven, three pages are statically created every time application is run. These are always available on the stack, while eight other pages are created and managed dynamically on demand.

Upon finished installation and first run, user is presented with a WebView loading a Dropbox Authorization web endpoint. This is the one and only time user is asked to input its personal data. Dropbox handles username and password over a secure connection and usual OAuth authorization flow continues. Authentication is finished once a token is acquired and users file list is loaded and presented. No personal data has been saved and all tokens are encrypted and stored in a protected database. Every time application has information to display, InfoBanner is used from Extras Components library.

File list page is one of the static pages and it is the most important page in Dropian. Users will spend most of their time using the application in this view. There is more to this page than it meets the eye. Basic structure is displayed in the following picture:

File list page anatomy

Starting from the top StatusBar is provided by operating system and always visible and interactive. There is not much here to discuss as this area has not been exploited yet. Provides consistent native look and feel at the moment.

TopBar is a creation of mine in order to extend functionalities of ToolBar Component, reduce menus in size and quantity and still obey Symbian design guidelines. Every single pixel is interactive depending on which section of the application is currently active. Black icons on the left and right are actually buttons. Left one will always take you into root directory and the right one changes its purpose when needed, from a closing button to opening search dialog, which is also embedded in this custom made component. Space in between shows current directory path and once clicked it positions ListView to its beginning. This is provided by using Label component and a MouseArea.

ListView itself is simple and is used as it is without any special modifications. However, item delegate is quite complex. Same delegate is used for displaying different data depending on the item being a directory or a file. This delegate is also another custom component tailored to my special needs out of plain QML elements like MouseArea, Rectangle, Image and Text, then modified with various anchor, size, opacity and other properties. There is a lot of manipulation done by expressions before displaying the model to the list, in a graphical manner speaking.
A slight difficulty that is hidden or not easily recognized is the so called MoreIndicator arrow placed on the right side of delegates when presenting a directory. I wanted to maintain a visual identity on both Harmattan and Symbian platforms. As this is a Harmattan Qt Quick Component and as such is not provided for Symbian, I took the liberty to peek into its source code and duplicate it for Symbian as my own custom component. Ironically, at that moment, MoreIndicator had a bug of not displaying properly on Harmattan, so I ended up manufacturing my own component with a few added properties for both platforms. Let's call it an upgraded cloned component.

The word squircle is a portmanteau of the words "square" and "circle". Just as same as application name Dropian is derived from Dropbox for Symbian. The same rule was applied for iconography. Application icon was designed by @boroda1 representing drops and droplets of bytes coming together into one main, bigger drop. Directory and file type icons were based on existing guideline templates but heavily modified to fit nicely together with the rest of the application.

Lastly, it's worth mentioning a few details about ToolBar. With only 3 static pages out of 11, I decided to provide each page with its own ToolBarLayout and ToolButton set. Not to be misunderstood, every dynamically created page has its own ToolBar aswell. Presented in the picture above you can see, from left to right, an exit button, go to transfers page button and open file browser button. Button on far right triggers application main menu. Many details will be revealed about each shortly.
Exit button is displayed only in root directory. While inside any other users Dropbox directory it is shown as a back arrow and provides a way to go up one directory all the way straight to root directory. Frankly, I'm not sure that this is 100% in accord to guidelines but I do not intend to change it because I was approached by many people requesting a firm differentiation of root directory and all the rest. I can only guess they didn't want to click themselves out of the application mindlessly.

There is a hidden gem here. Well, hidden most of the time. There is no standard component to use in order to achieve pull to refresh contents of your list behavior. Personally, I wasn't impressed by examples found and seen. Simply rotating an image of an arrow is not satisfactory. Finally, I devised a way, purely made in QML code, without any images to do so. With a lot of code I can show the user how much more to pull is left by filling up a circular shaped Rectangle and what to do when user pulled enough. Works quite intuitive but is yet far from perfection.

Accessed by clicking on second tool button from the left, represented by up and down arrow icon in file list toolbar, transfers page is not much different than the file list page. Made from ListView, and again, with a custom item delegate, it provides quick access of files being downloaded or uploaded. Transfers, meaning downloads and uploads from and to Dropbox, are the only part of application that needed a Qt layer underneath Qt Quick Components to be done properly. Numerous facts and situations had to be addressed while making the user interface as smooth as it can be. Multiple files can be transferred at once. At this moment, files are transferred in queue and not parallel, all at once. Main reason for this decision was to ensure data is transferred without any loses or corruption. Parallel transfers are under development with main goal to increase speed and even maybe implement true syncing thus taking Dropbox API to its maximum potential. It is important to say here that transfers are not being logged in any way by Dropian due to the fact it might pose as a privacy intrusion of users activity. What this means is that every time you start Dropian, your Transfers will be blank and initialized.

Item delegate has 3 main states: queued, downloading or uploading, all combined into one single custom made component with an ability to transform itself into any state. While an item is in queued mode a static, non running, BusyIndicator is shown instead of the green download or blue upload icon. In this state, if user interacts by clicking, he gets presented with a dialog of canceling the transfer in progress. Once the transfer commits, BusyIndicator starts running, a ProgressBar fills up according to percentage of data transferred. Upon completion, BusyIndicator is stopped and hidden, transfer icon is shown accompanied with file metadata information and a timestamp of finalizing the transfer. Simplistic InfoBanner with item name will inform the user of download or upload being finished. Clicking on transfer item in this final state directly prompts the system and opens the file itself.
Once again, I stress out, transfers are not logged and they will populate the list only for a valid Dropian session currently in use.

Back in the day when QWidget was cool there was a class known as QFileDialog which provided a way to connect to native filesystem on Symbian and get a path of a file when requested. Early versions of Dropian used that class but it was abandoned after multiple incoming bug reports strictly tied up to QFileDialog and its erratic behavior. Not to mention inability to provide a flexible list for multiple paths that can be modified at any time by user. Dropian took the hard way out of this situation. Sturdy skeletal construction was developed from scratch to incorporate a basic way of accessing Symbian filesystem and provide multiple paths for upload.
Mystical folder icon in file list toolbar grants the user access to device filesystem without him or her forcing to minimize or close the application. The fastest models and delegates were constructed to achieve instant access and avoid out of memory errors. Another ListView, another typically designed item delegate and standard rules of page hierarchy and behavior are applied here. Unusual detail about this page becomes evident once Dropian has been started. This page does not populate its ListView until user itself demands it. One could call this a placeholder mimic when talking about pages and stacks. Reason for precaution like this lies in the fact that no developer can predict what user actually has on its filesystem. Certain inconveniences might prolong booting time to unacceptable heights.
Looking at the toolbar you can see a Home icon and obvious Upload selected items icon. Upload is self explanatory while Home needs a story to back it up. Home button takes you straight to "C:\Data\". This is a home directory of device end user as far as Qt is concerned. While drafting the code for file manager, I personally needed a fast way to get into C: drive and it was accomplished like this. My residual developer leftover was quickly adopted by end users. Sometimes features happen accidentally.

Coming along slowly but thoroughly, we come to the juicy stuff. I will admit that at the current state Dropian suffers from a mild case of menunitis. ContextMenu is overused and filled with various commands, sub-menus and quick toggles, all presented by plain MenuItem. Before I digress into specifics, I must share a very hilarious observation here. A very large group of users approached and asked why did I deprecated Settings or Thumbnails. After some online debugging and general confusion, cause of the problem was found. When given a large menu with rich features, users of Qt Quick Components are not accustomed to scrolling inside the menu. I can't say it's an excuse because menus in Symbian are scrollable since the old days of Series 60. Nowadays, in modern and more fluid graphic interfaces some do not expect it to work. So, please, scroll your menus. Explore the hidden treasures there.

In order to avoid confusion and hard time following the rest of the article, here is a simple schematics of main application menu:

Menu schematics

Every MenuItem has a specific action. Explanations follow going from top to bottom as presented in the schematics.



Add categories below. Remove Category:Draft when the page is complete or near complete

472 page views in the last 30 days.