Showing posts with label lwuit. Show all posts
Showing posts with label lwuit. Show all posts

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

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.

Jun 28, 2012

LWUIT for Series S40

Hi, all

Nokia has done a great job on its Series S40! Of course, they are low cost devices, but they are quite functional and bring good specifications (touch, GPS, Wi-fi, etc). In addition, the design of some of them is very pleasant and thin, for instance, the Asha family. I tried Asha 303, X3-02 and C3-00, and I liked the result!

Other good news is that Series S40 has a powerful Java ME environment. A bunch of JSRs are supported (most of them present in the whole series), specific Nokia API, e.g. Maps API (you gotta check out this one!) and In-App Purchasing, and Nokia IDE (Eclipse-based) and many other tools. Nokia is now releasing its SDK 2.0 for Series S40, along with new devices: Asha 305, 306 and 311. All of them now full touch. 

Now let's stick to the post's title.


Taking the opportunity of the launch of its new SDK, Nokia is also releasing LWUIT for Series 40, a work done with LWUIT team, which built an optimised version of LWUIT for S40 with a number of styling, theming, and functional changes. This version has a total integration with some features presente on S40 devices, e.g. native keyboard and S40 gesture framework. LWUIT for S40 can be used to create applications targeted at Series 40 5th Edition and newer devices.

This optmization has provided some notable changes on LWUIT components (e.g. Form, List, TextArea, TextField, etc) so they can take advantage of platform's features and look more integrated to S40's UX. On the other hand, these changes are transparent to developers. So if you are already familiar with LWUIT's APIs, don't worry!

You can find all those changes and other useful information, e.g. installation and other resources, about LWUIT for S40 in this Wiki page.

The link to donwload is here.

Nokia, thanks for boosting Java ME for real.

See you in the next post...

May 23, 2011

Facebook API ME & HTMLComponent: Not going well.

Hi, all

Yesterday, I took the day to work on my new project: Facebook API ME. The development is going well, btw. As I explained in the previous posts, the great challenge of this project is the authentication process, since it requires certain browser integration, which is not a trivial thing considering Java ME.

Anyway, the API is now working properly using Browser component from eSWT library. eSWT is available in most Nokia and Sony Ericsson devices. I intend to release it for developers this week. I will let you guys know.

Regarding LWUIT integration, using HTMLComponent, the work is not going so well. HTMLComponent is not working well with Facebook's authentication pages. Actually, it works well on login page, where the username/password are informed. On the other hand, the page where the user authorizes the app to access his account is not displayed properly. HTMLComponent is not able to display the "Accept" and "Deny" submit buttons. Because of that, the authentication process is not complete.

I tried to check out LWUIT's latest source code from SVN repository, but it seems they are refactoring the code for some reason. There is an error in one of the classes. Because of that, I was not able to generate a jar file. Is there anybody here that could help with that?

I also intend to work on Blackberry integration, using BrowserField component. But as I am not a Blackberry expert, I have to study a little bit to understand how it works so I can work with it.

I let you guys posted.

See you in the next post...

Mar 16, 2011

Facebook and Java ME: How to authenticate?

Hi all,

Last month, I have developed a tiny API that integrates a Java ME app into Facebook. The implementation was not a big deal, except the authentication process. Since Facebook uses OAuth 2.0, it requires that any app that wants to integrate into Facebook's services must authenticate via its web login page. We all know that displaying HTML page in Java ME is not a easy task, since we have no LCDUI component that renders HTML. Fortunately, LWUIT already provides that via HTMLComponent.

But how to accomplish that if my app is not based on LWUIT? Hard question, huh? In my case, fortunately, the app that I had to integrate into Facebook is based on eSWT, which provides a Browser component. Because that, I was able to access the Facebook's login page and track the whole process in order to retrieve the token access required to access the methods from Facebook API.

My point in this post is: how to integrate Java ME app into Facebook API without a browser component? What is the trick? Parser the web login page's content and simulate the form submission programmatically? How have you guys have done that?

In intend to release my Facebook API in a near future. So I would like to know a better approach to implement the authentication process, so this API do not get tied to any specific framework.

See you in the next post...

Oct 22, 2010

JPhone and JOS: It could work

Hi all,

Since iOS and Android came out as two big waves flooding the entire mobile world, leveraged by Apple and Google (and its partners) and their incredible devices, developers have wondered what is going to be the future of other mobile platforms. In our case, Java ME.

There are a lot of discussions in the internet about this topic. Actually, I have already exposed my point of view on this matter. However, I am not here today to extend this discussion. In fact, I would like to demonstrate how Java ME could be at a better place.

In my opinion, one of the greatest advantage of iOS and Android platforms have compared to Java ME is a rich and uniform base. Who develops for either one knows that there is a bunch of APIs that allow us to build very compelling apps. In addition, those APIs will always be there. So developers do not have to worry about fragmentation.

In any event, we know that Java ME has a different concept, which is to provide a base platform aimed to run on low, mid and high-end devices. Because this difference of hardware, not all JSRs specified by JCP are available on any Java ME-enabled device.

Since the existent set of specified JSRs, I believe that Java ME could be at a better place. Java ME has a very rich set of JSRs at JCP that could also provide a very rich and uniform base for Java ME devices. If we had a manufacturer interested on implementing all of them in a single device, I believe Java ME developers would not be so afraid. Sony Ericsson and Nokia have done a good work on providing devices with a very good set of APIs. However, it is not enough to compete with the other players.

So, let's imagine such device. Let's call it JPhone, running JOS. Now, let's outline some JSRs that could be present on it.
A lot of stuff, huh? And here I am just considering JSRs that at least are compatible with CLDC and at final release stage. There are a bunch of other ones in JCP, but they are either CDC compliant, rejected or stuck. I am assuming that once a JSR reaches final release stage, it is feasible to be implemented. So it would be ready to go on JPhone.

I would also add LWUIT to this list. I believe that all efforts put on LWUIT, since ORACLE (that time Sun) embraced it, have come this project to a higher level of maturity and capabilities. Today, we have seen great things being developed with it. At Java One, there were many presentations regarding LWUIT being capable to build very compelling smartphone apps.

This my list is close to what is proposed by MSA. However, I would like to see no optionality, i.e., MSA subset or even hardware dependency.

We can't forget about the Java language itself. Today we are stuck in Java 1.3 language. On the other hand, there are some great new features, e.g., generics, enumerations, auto boxing, etc, in Java 5, which most developers can no longer live without.

Java has many more things to offer and that could be present on JPhone, e.g., collections, network, I/O, etc. Considering the hardware that runs iOS and Android, full Java SE 6 could run properly on it too.

Another leak of Java ME is related to an application model. iOS and Android have theirs, which are based on Model-View-Controller pattern. On the other hand, Java ME let this task on developers' hands. Java ME needs to provide more references for them.

Java ME also leaks providing a better solution for data storage. Record Store is not enough at all. On the other hand, iOS and Android provide their SQLite implementations. It is time for ORACLE to start thinking of using its huge background on it to help Java ME.

I know that my proposal is kind of surreal, but it seams to be a receipt for success of iOS and Android. Windows Phone 7 tends to follow it letter by letter.

See you in the next post...

    Oct 17, 2010

    Beyond Smartphones: Rich Applications and Services for the Mobile Masses

    Hi all,

    I would like to share you this presentation by Terrence Barr (@terrencebarr), at JavaOne 2010. Terrence introduces some tools that allow us to build rich and compelling smartphone-like applications. To demonstrate how to put all this technologies together, he develops a very interesting social networking mash-up app.

    Terrence points out three technologies in his presentation:
    To access the presentation, click here. It is a short one, but its content is valuable and really worths a view.

    See you in the next post...

    Oct 4, 2010

    LWUIT: In the spotlight at Java One

    Hi all,

    LWUIT was one of the most mentioned topics related to mobility at Java One. This year, there were many sessions related to it, for instance:

    • Beyond Smartphones: Rich Applications and Services for the Mobile Masses
    • Developing Java TV Applications with LWUIT for DTVi-J (Ginga-J) Brazil
    • LWUIT Cheat Sheet: How to Optimize Your LWUIT-Based Java ME Applications
    • Introducing Java TV Widget Development
    Since LWUIT has joined ORACLE (since times of Sun), it has achieved a huge visibility and importance in mobile scenery. Now, developers are more aware of what they can do for their apps, regarding UI. Instead of struggling to implement their own UI frameworks, now they know that there is a good option to invest on. In addition, LWUIT has also worked hard to provide more features and be more stable as new versions are released.


    Today, I would like to share with you this short presention about LWUIT 1.4 and some other related topics, e.g., Virtual Keyboard, HTMLComponent, etc, that was also presented at Java One. Who hold this presention were Ariel Levin and Chen Fishbein. Two key LWUIT developers.

    I hope you like, since it gives a good overview of what now you can do with LWUIT 1.4.

    See you in the next post...

    Sep 22, 2009

    LWUIT book: Finally!!!

    Hi all,

    A couple of weeks ago, a person from Packt Publishing got in touch with me, asking me to post a review on their new book, titled “LWUIT 1.1 for Java ME Developers”. I felt that this review could be quite interesting for the Java ME community, since LWUIT is becoming a very popular tool and I decided to give it a shot. I read the book and commented my findings.

    In general, the book is very good. Covers all the topics in details, explaining what we can and cannot do with LWUIT. In addition, the book also pops up LWUIT’s hood and shows what lies beneath. However, there some gaps and faults too. To check out the full review, click here.

    To have a better idea on what you will find in this book, click here and read a free chapter: Using Themes. To buy the book right away, you can go straight to Packt Publishing website.

    See you in the next post…

    Sep 30, 2008

    LWUIT Tutorial

    Hi all,

    Sun Developer Network (SDN) just released a quick tutorial about LWUIT. Do not you remember it? It is that project that is attempting to bring Swing framework for J2ME. This tutorial is very interesting for whom is interested in starting to develop great user interfaces for your application.

    This is the link for the tutorial: http://java.sun.com/developer/technicalArticles/javame/lwuit_intro/

    Have fun!

    See you in the next post...

    Aug 15, 2008

    Swing on Java ME too?

    Hi all,

    It seems that some people have been worked hard to bring the Swing framework to Java ME platform. As I said in the last post, I am not that fan of projects like that, but this one seems to be good. Since it comes to improve the Java ME applications' user interfaces, which is very limited by LCDUI components.

    The project's name is LWUIT, which stands for LightWeight User Interface Toolkit. This one was presented on Java One of this year to Java community. It is based on Swing framework, but all its components were designed and implemented carefully, so that they use as less memory as possible. What make all of them feasible for Java ME devices.

    The main features of LWUIT are:
    • Layouts (FlowLayout, BorderLayout, BoxLayout and GridLayout)
    • Themes (Use of different themes)
    • Touch screen support
    • Integration with 3D elements
    • Animations and screen transition
    • I18n
    • Modal dialogs
    This project is hosted on Java.net (see link below) under the GPL v2.0 license, which permits to create commercial applications and not to share the code, since you just include LWUIT's jar file. In the project's website, you will find many resources (e.g. binaries, javadocs, samples, tutorials, etc) to start to work with LWUIT.

    https://lwuit.dev.java.net/

    See you in the next post...