StocksMe: Development Notes

Hi, all

It is a great pleasure that I am here again to launch my newest app for the Nokia Asha platform, called StocksMe, and share with you some technical details involving its development.

In short, StocksMe is an app for people that follows the stocks market. Through a simple and straightforward user interface, this app allows the user to create their own list of indexes (e.g. NASDAQ) and/or companies (e.g. Nokia) to follow. The quotes have information like price, change, open, high/low, chart, etc. It's basically what every investor needs to make a decision to buy/sell stock shares.

StocksMe is available for download from the Nokia Store, for a price of $1.99.

This app was meant to be supported by ads, but in the last minute I changed my mind and decided to make it paid. It is all this article's fault. :)

Well... Now to the point that is the focus of this blog: development.

StocksMe was developed for the Nokia Asha 1.1 platform, but since it does not use anything specific to this release, the app also works perfectly in version 1.0.

The development environment was the Nokia Asha SDK 1.1, Nokia IDE for Java ME (based on Eclipse) and Nokia Asha 502 Emulator. The three pieces work very well and fully integrated. Just create the project, set the platform, code and run on the emulator/device. When you run the MIDlet, the IDE automatically starts the emulator to run the app.

During development, I did not try the function that lets you send the application to the device directly from the IDE. Only did in the old way, copying to the device and then manually running. I will try the first option next time.

The Nokia Asha 502 Emulator works very well and faithfully reproduces the environment found in the real device. However, as I do not have a Nokia Asha 502, I ended up performing the tests on my Nokia Asha 501.

Speaking of app's architecture, StocksMe’s is practically the same as CurrencyMe’s, which we talked about a while ago. It is based on the traditional MVC. For those who want to take a better look at this architecture, I suggest you to download CurrencyMe’s source code.

For the user interface, again opted by LWUIT for S40, which brings some new components (e.g. Switch, HeaderBar, FormItem, SearchBar), besides the looking and feel of the platform. Each version Nokia has brought good news for the LWUIT. I have greatly enjoyed working with this porting.

Specifically in this app, I used for the first time SearchBar component. This implements a kind of search bar, where you define a list of items that can be searched. As the user types, a list of the results is presented. Very useful for implementing a field with suggestions of values​​.

For the StocksMe, it was used for performing the search for indexes/companies from some string. But in this scenario, I have not used a fixed list for the results. As the user types the filter, I access a service that returns me the indexes/companies that match the criteria informed. Cool and flexible this component. Liked it!

Another component used that is worth the registry is the PullDownRefresh. This implements the gesture "Pull Down to Refresh". It was used in actions to update the data. My idea was to use gestures as much as possible, then this one could not miss.

PullDownRefresh v1.1 was developed during the development of StocksMe. To learn more, read this post.

It is also worth mentioning that Nokia has developed a similar PullDownRefresh component, RefreshLoadBar. I confess that I tried to use it, but the fact that it does not allow (at least I did not find how) me to translate the texts into other languages ​​made ​​me give it up.

Above, I mentioned that the LWUIT for S40 brings the Nokia Asha platform’s looking and feel. However, this does not mean we can not change some things. I made some adjustments to colors, fonts, margins, etc. In case I did it programmatically, through UIManager class, because I did not want to change the theme file that comes within the lib file.

Change the theme file can be a bad idea, if you decide to migrate to a new lib’s version. This can come with fixes and/or styles for new components, which will complicate your life, since you will have to do a merge or copy all of your changes to the new theme file.

To conclude the subject on user interface, I will try to discourse briefly about a technique I learned to make list scrolling faster. In turn, this technique is better off for lists whose items demand a more complex arrangement of the graphical components, which needs the use of containers, style changes and layout managers, for example.

This technique dispenses the use of the List and ListCellRenderer components. As you know, the List component uses a ListCellRenderer to paint its items on the screen. During the scrolling, List repeats this painting operation several times for each of its items. To paint, ListCellRenderer runs through your component hierarchy to obtain the final painting. This operation is slow for items with a large number of components. This is the case of StocksMe’s list of quotes, where each list item has four Labels and two Containers, besides using the BorderLayout layout manager.

The list scrolling was too slow, so I searched for tips to improve the performance. In LWUIT’s documentation, which comes with the Nokia Asha SDK, there are some topics on optimization, but one caught my attention: Image Buffering.

Image Buffering was demonstrated in RLinks app, which is one of the sample apps that comes with the SDK. It uses a Container instead of a List component. Items are also Containers that extend a class called ListItem (developed by the app). ListItem caches the outcome of its first paint operation in an image. So, in all successive paintings, this cached image is painted instead. If there is any change in the component’s state, this cached image is then discarded and a new one is generated. This technique avoids the components’ hierarchy be ran through for all painting operations, thus providing a significant performance gain.

The result in the list of quotes was excellent! Now it scrolls pretty smooth, thus increasing the user experience.

There are more points in this Image Buffering technique that deserve a more detailed explanation, but this is not the focus of this post. For those interested, I suggest taking a look at RLinks’s source code. I'm sure it will be useful for many developers.

Speaking of data access service, once again I opted to use Networking ME project. As explained in this post, this facilitates access to data via HTTP.

The stock quotes service used by the app, Yahoo! Finance, returns data in three formats: CSV, quotes; JSON, search indexes/companies; and image, chart. For this, I used the new handlers CSVListener, JSONListener and ImageListener (LWUIT), introduced in version 1.1. These new listeners facilitated my life, because I did not have to worry about any content parsing.

For those who want to know more about Networking ME, I suggest to stop by on the project page.

To conclude this post, I would like share a point about the app’s publishing. I always use in-app analytics, for better understanding on how users use it, in order to improve it. I do this through Google Analytics, using Google Analytics ME project. However, I had a surprise this time.

Seven days since I published the app, Nokia finally evaluates it. Result, the app was rejected! The reason was because I did not provide an opt-out for in-app analytics. This has changed recently and I was not aware about this. Anyway, I added the opt-out and three days after that the app was finally approved.

Stay tuned those who are publishing a new app or an update that this is now mandatory.

Well folks, those were the main technical details I would like to share with you. It was really cool to develop this app and I hope it is useful for its users. I already have several ideas to make it even better. Hopefully the number of downloads encourage me to work on them. :)

See you in the next post...