Open Source & Free  

Building A Chat App With Codename One Part 3

Building A Chat App With Codename One Part 3

Header Image

In the previous section we went over the login with Google process, in this section we’ll go over the login with Facebook.
At this time we’ll skip the “invite friends” option since that is blog post all on its own and we can just add that functionality
to the completed application.

Facebook has a “get friends” API call that we can use, the downside of that is that it will only return our
friends that have already joined the app so we won’t be able to contact anyone on an arbitrary basis.

Getting Started – Configuration

Getting started with Facebook is pretty similar to the Google process and you can learn about it here.

You need to go to and signup to create an application:

Create New App

You need to repeat the process for web, Android & iOS (web is used by the simulator):

Pick Platform

For the first platform you need to enter the app name:

Pick Name

And provide some basic details:


For iOS we need the bundle ID which is the exact same thing we used in the Google+ login to identify the iOS app
its effectively your package name:


You should end up with something that looks like this:


The Android process is pretty similar but in this case we need the activity name too.

Important: notice there is a mistake in the screenshot, the activity name should match the main class name followed
by the word Stub (uppercase s). In this case it should be SocialChatStub.


Just like on Google+ we need to generate a hash to verify that the app is indeed ours to Facebook and we do this
using the same keytool approach using the command line:

keytool -exportcert -alias (your_keystore_alias) -keystore (path_to_your_keystore) | openssl sha1 -binary | openssl base64


Lastly you need to publish the Facebook app by flipping the switch in the apps “Status & Review” page as such:

Enable The App

Project Configuration

We now need to set some important build hints in the project so it will work correctly. To set the build hints just right click the project
select project properties and in the Codename One section pick the second tab. Add these entries into the table:


The app ID will be visible in your Facebook app page in the top left position.

The Code

So now that all of that is in place we would want it to work with our app…​

Add the event handling for logging in with Facebook as such:

loginWithFacebook.addActionListener((e) -> {
    tokenPrefix = "facebook";
    Login fb = FacebookConnect.getInstance();
    doLogin(fb, new FacebookData(), false);

Notice that the client ID, redirect, secret etc. are all relevant to the simulator login and won’t be used on Android/iOS
where native Facebook login will kick into place.

Similarly to the Google+ implementation we’ll create a class to abstract the Facebook connection based on the interface
we defined the last time around:

class FacebookData implements UserData {
        String name;
        String id;

        public String getName() {
            return name;

        public String getId() {
            return id;

        public String getImage() {
            return "" + id + "/picture";

        public void fetchData(String token, Runnable callback) {
            ConnectionRequest req = new ConnectionRequest() {
                protected void readResponse(InputStream input) throws IOException {
                    JSONParser parser = new JSONParser();
                    Map<String, Object> parsed = parser.parseJSON(new InputStreamReader(input, "UTF-8"));
                    name = (String) parsed.get("name");
                    id = (String) parsed.get("id");

                protected void postResponse() {

                protected void handleErrorResponseCode(int code, String message) {
                    //access token not valid anymore
                    if(code >= 400 && code <= 410){
                        doLogin(FacebookConnect.getInstance(), FacebookData.this, true);
                    super.handleErrorResponseCode(code, message);
            req.addArgumentNoEncoding("access_token", token);

This is really trivial code, we just connect to Facebooks Graph API and provide the token. From here on its
just a matter of parsing the returned data which contains only two keys for the user name and the unique id
which we can use later on when setting up a chat.

That’s it for Facebook login, next time we’ll get into accessing the contacts and showing the contacts form UI.

the original post discussed using the email address as the unique user ID which was the initial direction
we were going for. But we since decided to go in a different route with user ID’s (similar to the Facebook experience).
We also made some minor changes to error handling logic making the code more robust.

This is a multi-part series of posts including the following parts:

You can check out the final source code of this tutorial here.

Leave a Reply