Feb 12, 2014

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...

Jan 30, 2014

Pull Down to Refresh v1.1 for LWUIT

Hi, all

Just to let you guys know that I just released a new version of Pull Down to Refresh for LWUIT.

This version brings some bug fixes and two minor features. For intance, now you can use images for "arrow" and "refresh" icons that are stored in the app's resource theme; and set an extra length for the pulling gesture, so you can calibrate when refresh should be triggered.

For those that are using v1.0, you will also notice a slight behavior change in the component. Now by default, it is always visible. On the other hand, you can make it always hidden as well. There is new constructor that makes it possible.

You can download the new component's version by clicking here.

It is worth mentioning that PullDownRefresh is under MIT license.

Enjoy the update!

See you in the next post...

Nov 20, 2013

Networking ME v1.1: URLLabel and URLButton for LWUIT

Hi, all

Continuing our two-parts introduction post about the news in Networking ME v1.1.

In the first post, we introduced the new content listeners. Now in this second one, we will show you three LWUIT components built on top of the library: ImageListener, URLLabel and URLButton.

ImageListener class is a content listener for LWUIT Image. Such as the class name, It works same as the ImageListener class for LCDUI Image. (This component could have been introduced in the fist post, but I decided to talk about it here, since this post is focused on LWUIT)

...
URL url = new URL("http://www.emobtech.com/images/pic.png");
HttpRequest req = new HttpRequest(url);
//
RequestOperation oper = new RequestOperation(req);
oper.start(new ImageListener() {
    public void onImage(Image image) {
        Label imgLabel = new Label(image);
        //        
        form.addComponent(imageLabel);
    }
...
});
...

This code snippet downloads an image from an URL. The image's bytes are converted to a LWUIT Image object and then it is added to the form to be displayed. Easy, huh? So, keep reading, you will be introduced to a easier way to accomplish the same result.

...
URL url = new URL("http://www.emobtech.com/images/pic.png");
URLLabel imageLabel = new URLLabel(url);
//
form.addComponent(imageLabel);
...

How about this? A lot easier, right? URLLabel class receives an URL as parameter in a constructor and downloads the image automaticaly. Once download is down, the image is displayed. It reminds me the ease of displaying images in HTML pages, by just informing the image's URL in the "img" tag's "src" attribute.

Besides the URL, URLLabel has an optional parameter that works as a placeholder, displayed while the image is downloaded. This placeholder can be either a String or Image object.

Last but not least, URLButton class has the same features as URLLabel. Use this one in case the image you want to display is touchable.

...
URL url = new URL("http://www.emobtech.com/images/pic.png");
URLButton imageButton = new URLButton(url);
//
form.addComponent(imageButton);
...

This finishes our our two-parts introduction post about the news in Networking ME v1.1. I reinforce the invitation to visit the project's website and download the release v1.1.0.

Hopefully everybody has enjoyed the news.

See you in the next post...

Networking ME v1.1: New Content Listeners

Hi, all

I would like to announce that Networking ME v1.1 has been released. Networking ME is a feature-rich networking library for Java ME platform. This new version comes with interesting and useful features that will make developers' life easier.

I will split this introduction into two posts: This first one, I will talk about the new content listeners. Second one, I will introduce some new components specifically designed for LWUIT.

Networking ME comes with new content listener for parsing contents, i.e, CSV, XML and JSON. See below some code snippets:

...
URL url = new URL("http://www.emobtech.com/csv/file.csv");
HttpRequest req = new HttpRequest(url);
//
RequestOperation oper = new RequestOperation(req);
oper.start(new CSVListener() {
    public void onCSV(String[][] csv) {
        String name = csv[0][1];
        String email = csv[0][2];
    }
...
});
...

CSVListener class delivers a CSV content parsed to a String matrix, where it is possible to navigate through the lines and columns.

...
URL url = new URL("http://www.emobtech.com/xml/file.xml");
HttpRequest req = new HttpRequest(url);
//
RequestOperation oper = new RequestOperation(req);
oper.start(new SAXListener(new UserHandler()) {
    public void onSAX(DefaultHandler handler) {
        User[] users = ((UserHandler)handler).getParsedUsers();
    }
...
});
...

SAXListener class uses the Simple API for XML (SAX) implementation, from JSR 172, to deliver a XML content parsed to a handler object, which holds the content.

...
URL url = new URL("http://www.emobtech.com/json/file.json");
HttpRequest req = new HttpRequest(url);
//
RequestOperation oper = new RequestOperation(req);
oper.start(new JSONListener() {
    public void onJSON(JSONObject jsonObject) {
        String value = jsonObject.get("key");
    }
...
});
...

JSONListener class uses the JSON.org Parser implementation, to deliver a JSON content parsed to a JSONObject object, where it is possible to access all keys, values, arrays, etc. In case you need, in the release package, you can find the JSON.org jar file in the lib folder.

Networking ME also provides other content listeners from previous versions, i.e, TextListener, BinaryListener and ImageListener (for LCDUI).

That's it! I invite everybody to visit the project's website, check out more code snippets about the other features and - why not? -  to download the release v1.1.0. By the way, it is always good to mention, Networking ME is under MIT.

See you in the next post...

Sep 27, 2013

CurrencyMe: The Power of Nokia Asha Platform

Hi, all

Today I would like to announce my new app CurrencyMe: the perfect tool to follow over 30 currencies rates in real-time.

Based on your local currency, the app displays the conversion rate to other currencies. Pretty useful tool for investors or travellers.

CurrencyMe was developed in order to show off the power of new Nokia Asha Platform, currently represented by the device Nokia Asha 501.

Asha Platform is built on top of CLDC 1.1 and MIDP 2.1.

Regarding user interface, there is a tailored version of LWUIT, which brings interesting new components. LCDUI can also be used.

CurrencyMe is a very simple app, however, it was possible to implement a good set of features, in order to use as many new components as possible brought by Asha platform.

See below the list of all components X features:

PopupChoiceGroup: A new LWUIT component that allows to pick a value from a popup list. It is used for the user to pick the default currency.

FormItem: A new LWUIT component that consists of one or two rows, can optionally receive a main icon displayed on the left and a smaller action icon displayed on the right, and it can be used to trigger up to two actions. It is used in the About screen to display the details of the app, i.e., name, version and vendor.

HeaderBar: A new LWUIT component that allows the user to create a custom HeaderBar which can be added on Form, to create informative and interactive header bars, and has action buttons. It is used to display the screens' title. This component provides a spinner, which makes easy to show that some background operation is in progress, e.g., loading data from the Internet.

GroupHeader: A new LWUIT component that allows to create a header which can be added on Form, and is used to separate a group of items. It is used to group the settings in the Settings screen.

Switch: A new LWUIT component used to quickly switch between two opposite values. It is used to switch on/off automatic data refresh during start-up.

LocaleManager: A class from Internationalization API (JSR-238) that allows apps to retrieve locale information stored on the device  It is used identify device's locale to figure out the local currency.

Formatter: A class from Internationalization API (JSR-238) that allows apps to make use of internationalization services provided by the API. It is used to format the date/time and value of the rates, according to device's regional settings.

Network State Changes: A set of classes that allows to identify the network state, e.g. if there is a SIM card inserted or wi-fi is connect. It used to prevent the user to refresh data in case there is no Internet connectivity.

Besides all these new components, other libraries were used as well:

CurrencyMe is integrated to Nokia Ad Exchange, a private mobile advertising exchange offering access to the top ad networks in the world. It was very is get the app integrated.

Networking ME, a networking library for Java ME platform, was used to implement the access to currency rates service.

To collect data about app's usage and send data to Google Analytics, Google Analytics ME was used for this task.

Besides showing the tools that were used to build this app, it is also important to show the code for it. For that, I decided to provide the app's source code so you guys can take a look. This code is under GPL. There are some good reusable components to work with Record Store, NAX, GA, etc. For these ones, MIT license is applied.

To download the source code, click here!

Hopefully you guys enjoy the app and the source code.

See you in the next post...

Jul 19, 2013

Pull Down to Refresh for LWUIT

Hi, all

I believe most of you here have heard about "Pull Down to Refresh" gesture. Shortly, it is a very used gesture on iOS apps, created by Loren Brichter, which users perform to refresh contents on the screen, just pulling down a list using the thumb.

So, now that you are contextualized about "Pull Down Refresh", I would like to inform that this famous gesture has just arrived to Java ME/LWUIT world.

Pull Down to Refresh for LWUIT was an old idea of mine, but just this week I sat down and decided to code a component that implemented this gesture. I was not sure whether it was going to work, but for my surprise it worked, and you will see how easy it is to get it integrated into your apps.

...
Form form = new Form("PullDownRefresh") {};
form.setLayout(new BorderLayout());
//
List list = new List(new String[] {...});
list.setRenderer(new DefaultListCellRenderer());
//
final PullDownRefresh refresher = new PullDownRefresh();
refresher.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent evt) {
        new Thread() {
            public void run() {
                // Perform some process
                //
                refresher.endRefreshing();
            }
        }.start();
    }
});
//
form.addComponent(BorderLayout.NORTH, refresher);
form.addComponent(BorderLayout.CENTER, list);
//
form.show();
...

As you can see in the code snippet above, all you have to do is to create an instance of PullDownRefresh class and add it at first position of a Form object and register an ActionListener object to be notified when a refresh operation is triggered. With this notification, you can start a process to perform any operation, e.g., refresh the Form's data. Once the operation is concluded, just call the endRefreshing() method, so the component can return to its default state. Easy, huh?

Watch the video below and see PullDownRefresh component in action:



Cool, huh? :)

PullDownRefresh component is totally customizable. For instance, you can change the style, images and labels. Check out the Javadoc and you will know how.

You can download the component right away by clicking here. Besides the source code, there is also sample MIDlet.

By the way, PullDownRefresh is under MIT license.

I hope everybody finds this new component useful and let me know your comments.

See you in the next post...

Update (Feb 17th, 2014):

There is a new version of this component. For further details, check this post.

Jul 12, 2013

Networking Library for Java ME: Networking ME

Hi, all

One more time, it is a pleasure for me to announce another project of mine for this amazing platform: Networking ME.

Networking ME is a networking library for Java ME platform. It's built on top of Generic Connection Framework and other foundation technologies. It has a modular architecture with well-designed, feature-rich APIs that are easy to use.

For this initial release, I focused on HTTP connections, which notoriously is the most used protocol by internet services nowadays, because of its versatility and interoperability.

To work with HTTP connections in Java ME is not complicated itself, as you may know. On the other hand, it requires a good number of lines of code to make things happen, e.g., start a new thread, handle exceptions (either I/O or security), parse the result response, etc. Besides, there are some lack of features, e.g., session management, cookie tracking, URL redirect, etc. Because of these matters, I decided to develop Networking ME and make mine and developers' life easier.

Networking ME was created based on some codes of mine, which I used to implement the same tasks mentioned above in some apps that I worked on. Finally, I have decided to compile them all in a library, so my future apps and other developers could use them as well.

Stop talking and show me the code!, you may be thinking. :) Alright, here it goes:

...
URL url = new URL("http://www.emobtech.com");
HttpRequest req = new HttpRequest(url);
//
RequestOperation oper = new RequestOperation(req);
oper.start(new TextListener() {
    public void onText(String text) {
        System.out.println(text);
    }
    public void onFailure(Request req, RequestException e) {
        System.out.println(exception.getMessage());
    }
});
...

Easy and clean, huh?

The code above shows a basic HTTP request. In the project's Wiki you will find more example usages, e.g. download image, POST data, upload file, etc. It is just an appetizer.

In terms of requirements, Networking ME is implemented using MIDP 2.0 and CLDC 1.0. That's pretty much what all Java ME devices available in the market support at least.

That's it! I invite everybody to visit the project's website and take a look at everything and download the release v1.0.0. By the way, Networking ME is under MIT.

I am really excited about this new project and I hope everybody like and find it useful.

See you in the next post...

News

Loading...