Dropian QML Dropbox Client for Symbian - app showcase
Note: This is an entry in the Symbian Qt Quick Components Competition 2012Q1
IntroductionDropian 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:
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:
Every MenuItem has a specific action. Explanations follow going from top to bottom as presented in the schematics.
Show deleted items dynamically changes to Hide deleted items. On top of that, it unveils hidden items in file list or hides them respectively. Basically, that is all it does. Deleted items have opacity reduced by 50% to distinguish themselves. Shame that Dropbox didn't provide a way to undelete files, but I like to be prepared. Dropbox keeps your deleted files for 30 days after deletion so this might be useful for someone who just wants to check it out.
Create new opens a submenu offering to create a new Note, Photo or a Folder.
Note editor is quite simple. TextArea is used to provide basic text input and editing. No HTML is supported at this point. Text editing actions like cut, copy, paste and rest are provided by component itself so there was nothing extraordinary that had to be done. It is a pretty complete and standalone component. When you are done making a short note, pressing the tick icon will prompt the user for a name. Input field for the name can be left blank and generic name for a note will be chosen and note itself will go into upload queue to its final destination into the current directory in the cloud.
Creating new folders required a dialog that was not provided from any components libraries. Simple as it is, it was made out of three parts. Dialog was used as a base, TextInput for user interaction but controlled with a regular expression for unwanted characters and then couple of plain Buttons for actual commands. This invention of InputDialog will be used in variety of other features in Dropian. It has proven itself to work and adjust against any problems opposed.
You might notice there is no screenshot or description of how to create a new Photo. Answer to this question is trivial, but was not trivial to code. I tried out some example code snippets floating around on how Qt handles Symbian camera. I didn't like the design nor the effort that was needed to make it work top notch. In this case I had to reach deep in the bag of magic tricks. Solution was partly done in Symbian C++. From end user perspective this is as good as it gets. Clicking on Photo MenuItem native camera application on Symbian is triggered. A single shot mode is enabled, and at this point Symbian takes over control, calculates and allocates optimal resolution depending on your free memory available. I have never seen this go under 3 megapixels and it goes up as high as your maximum camera resolution goes. Observing some other applications, I noticed that they all set the lowest possible resolution to make sure it actually works. Dropian provides maximum quality available from the system on demand. After a successful photo shoot, picture is uploaded to the current folder in users Dropbox. Native camera application shuts down and user is brought back to Dropian seamlessly.
Download items provides a way to do multiple file downloads. Files only are supported because there is no way to predict how deep a recursive loop would go in case of directories. Eventually, it would lead to a very cumbersome and resource demanding loop that would end up in application lock down. When Dropbox service has an elegant way of downloading, or uploading, directories it will be enabled. This state of multiple choice has its own toolbar with 2 buttons which is dynamically applied when called for.
Sharing multiple links is done in two steps. Files or directories can be shared. Once picked, a request to generate a shortened link is sent to the server. With server response a SelectionDialog is shown with 3 or 4 options. In Dropian free version user can copy the link to system clipboard and paste it anywhere and in any application, send an SMS or an e-mail with his generated links. Paid version of Dropian, however, in addition to all 3 options previously mentioned, can generate a list of QR codes for direct exchange of links without any bandwidth usage. By choosing SMS or e-mail option, default Symbian applications are opened filled with previously formatted links.
Edit items triggers a sub-menu for moving, copying or deleting multiple items at once. Move and Copy are a 3 step processes, while Delete is only a 2 step process. They all start by picking the items on which operation will be performed. When selection is over, a custom and complex dialog is shown, listing only possible target directories. MoveCopyDialog is made out of Dialog component, ListView and 2 Buttons. Seems very simple and user friendly but underneath it is highly refined and very devious. ListView is populated with directories only, but Dropian database is filled with complete file list provided by server, including both file and directory entries. In short, Dropian caches your Dropbox not only while you roam through it, but even when you perform file operations like move or copy. Working like this, Dropian learns extremely fast and saves data traffic. Right button inside the MoveCopyDialog changes its value depending if your target directory is the root one or other. If it is the root you can cancel and close the dialog, otherwise you can go back up one directory and close the dialog any time by standard dialog close button located in top right corner. Deleting of multiple items prompts the user for confirmation to avoid accidents and unwanted data loss. It is handled with an out of the box QueryDialog.
Thumbnails MenuItem is visible only if at least 1 file in the current directory can be used to generate a thumbnail. If there are none, item is hidden in the menu. There is no maximum number limit of thumbnails that can be generated and displayed. Clicking on this will collect necessary paths for thumbnail generation and create a thumbnail page. Thumbnails can be displayed in 3 sizes; small, medium and large. They are cached locally on the filesystem and if found, no request will be made to generate again. Cache can be cleared from Settings page at any moment user desires. A fancy animation mimicking behavior of Windows Phone 7 tiles is entertaining the user while thumbnails are generated and downloaded from the server.
Clicking on a thumbnail opens another custom Dialog mashed up from Dialog, Image and ListView components. This ThumbnailDialog offers users to Reload the thumbnail, Download the actual picture and send it via MMS or e-mail. Sending options open default native applications with media attached. User is left to choose the recipient and edit the rest of the MMS or e-mail freely.
At last, the last entry in main menu is Settings. A click creates a Settings page, a playground for user information and application tweaking. Label is the dominant component here, although there are some very different but standard components too. Page is divided into sections by custom Rectangles made to look and feel like the TopBar. Among Labels and Buttons there is an interesting Slider for choosing thumbnail size. Depending on one of the three possible positions, it will highlight the according label beneath it. Besides viewing his storage information, download target folder and other info, user can toggle the theme between default Dark and fancy Light one. Toolbar icon with Dropian logo creates the About page which contains a brief description, people and brands that helped or in any significant way influenced development.
All of the above dialogs, components, file manipulation actions were described for multiple items at once. Naturally, all the methods shown above work for a single item too. Single item menu has some additional features depending on mime type or origin of the item. No matter if it is a file or directory, MenuItems are dynamically shown and hidden in the ContextMenu. Extra actions are Preview, Previous versions and Thumbnail. In that order, Preview will open any image, audio, video or text file in default browser, Previous versions creates another page, where user can simply restore any revision of file selected and Thumbnail opens a ThumbnailDialog previously introduced. In some future update, plan is to gradually implement dedicated image, video and audio handlers. For example, MeeGo browser cannot stream audio, but opens the rest just fine. Symbian browser, in the other hand, doesn't like audio at all and has some problems with streaming video mime types. PDF and text viewers are also in the pipeline. Revision page is made out of ListView populated with file versions as one would expect.
Last, but not the least, there should be a paragraph about how can you perform a Search in Dropian. There are 2 ways to do that depending of the scope of your search. User can search only inside the current folder for a certain expression in the file name. Hits are shown, while the rest of items are hidden. Another way is to perform a thorough search of users' entire Dropbox, starting from root directory. Results are displayed in a specially created page, divided in sections. Section delegate is a simple Rectangle with Text. Results are sorted in a very strict and logical way. Every operation available upon the item in Search page is the same as in the main file list. Once you find what you are looking for, you can immediately do with it whatever you wish, just like you were browsing from the main file list.
Everything already mentioned and written is available for free. Additional features, to whom they are worth, are available for the smallest possible price from Nokia Store. Buyer can record and upload audio notes, generate QR codes out of links and password protect access to Dropian and Dropbox. Audio notes recorder is attached to default device microphone. Symbian doesn't allow anything but exclusive mode so graphics are simplified, while MeeGo has no problem of changing the height of colored part of microphone when sound pressure level changes.
QR codes can be generated from any links inside the application. They are made variable, meaning that the shorter link will have lower version QR code. Error correction level is set to Quality. Maximum version of QR code is set to level 10 , anything above is not really readable by phone cameras. Making QR codes minimize their version depending on link length in bits is done solely to make it possible to share and read QR codes even by EDoF camera devices. Multiple QR codes can be generated and this is done with help of WorkerScript. Generating QR codes of high version level can block user interface and this had to be done in a different thread like this. Once multiple codes are generated, they are displayed in a dialog within a ListView.
Protecting unwanted access is done from Settings page. A strength meter is applied and each character entered has its weight calculated. An unlock dialog is shown every time application window goes into deactivated state, no matter what the cause was.
Updates will bring even more features and adequate pricing. Once an update is pushed out, fixes for bugs and possible issues will be applied to the free version but with omitted features. Dropian has come a long way in both functionality and design. I'm sure it can be improved a lot more. Luckily, people that use Dropian approach me with requests, ideas, bug reports and a lot more. Long list of wishes is then produced into code to be used by many others.
Being around for almost 2 years, I can only say that porting Dropian to Qt Quick Components was a smart decision. February alone, when the first Qt Quick Components release went out, is entitled for one third or downloads in 2 years total.
Available both for Symbian and MeeGo devices, Dropian can exclusively be downloaded from Nokia Store.
Dropian FREE is at current version 1.0.0
Download Dropian 1.0.0 FREE
Dropian is at current version 1.0.1