CodeClash: Timer Implementations in Android

I’ve been an addict on looking for several ways to implement a concept, compare solutions, and do performance testing on solutions. In this episode of CodeClash (and it’s TV-ish to say), we’ll be comparing implementations of a countdown timer which is UI-visible in Android.

First stop, using a native java Thread

I just made this up (but working), with the help of a bit of research. I arrived with the solution thinking about implementing a timer in a J2SE platform. Instantiating a Thread with an anonymous function of type Runnable as its parameter. As a general practice sleep() method is called to stall before succeeding statements are ran.

		Thread k = new Thread(new Runnable() {
		    @Override
		    public void run() {
		        try {
		            for(itr=0 ; itr<1 ; itr++) {
		                Thread.sleep(1000);
		                runOnUiThread(new Runnable() {  
		                    @Override
		                    public void run() {
		                        tv.setText(itr+""); 
		                		Log.i("exec speed of Thread", System.currentTimeMillis()-startTime+"");
		                        return;
		                    }
		                });
		            }
		            return;
		             
		        } catch (InterruptedException e) {
		            // TODO Auto-generated catch block
		            e.printStackTrace();
		        }
		    }
		});
		 
		k.start();

It is not possible to access a View from a background process (our Thread) But with the use of the method runOnUiThread this would do the trick wrapping our setText method by a new Runnable.

To determine the execution speed we placed our indicators at the best positions. First, we declared our starting point before the instantiation of the Thread, and our end point after the TextView has been set that will indicate the end of the whole execution.

The Judgement

We are looking at 25 lines of code in this implementation and that for me would look lengthy for such simple feature. 2 anonymous functions have been declared which MAY be an efficiency concern for it may use more memory, and the way that it looks, it’s messy.

On the other hand, I see this code as flexible. We can have several commands before the sleep() if our intention requires such. Coding in a lowly level like this make it highly customizable.

Next Stop, using the CountDownTimer. It Exists!

		CountDownTimer timer = new CountDownTimer(1000, 1000) {
			 
		    public void onTick(long msNow) {
		        tv.setText("" + msNow / 1000);
		    }
		 
		    public void onFinish() {
		        tv.setText("00");
		    }
		 };
		  
		 timer.start();

I know you may be thinking, this is way simple than the other one. More readable, and reliable. Yes, it is. Implementing Timers using this class is the most widely used. It’s direct to the point which made it simple. The anonymous declaration contain 2 methods, onTick and onFinish. It is pretty much self explainable maybe. onTick is called every 1000 millisecond (as what is declared in the second parameter).

The Judgement

The highlight of this implemenation is its simplicity. Contains 12 lines of code, and is highly readable

On the other hand, we can only execute statements AFTER the tick, and none is allowed before the tick. Counted against writability but is not a serious issue for we can formulate workarounds to achieve that.

You may say that this only counts down, and doesn’t go up. It is plausible, and it’s up to your arithmetic skills.

The Rundown

Comparing execution times and memory usage

Implementation
Method
Run #1 Run #2 Run #3 Run #4 Run #5 Average
Thread 1123 ms
21704 bytes
1098 ms
13064 bytes
1097 ms
12592 bytes
1126 ms
12584 bytes
1114 ms
12432 bytes
1111.6 ms
14475.2 bytes
CountDownTimer 1090 ms
20960 bytes
1104 ms
13600 bytes
1098 ms
12960 bytes
1092 ms
12664 bytes
1094 ms
12792 bytes
1095.6 ms
14595.2 bytes

Execution times are above 1000 because the end of our speed test lies AFTER the timer executes. That is, after 1 second. Stats show that Thread has 111ms excess time in execution after a second, and across all runs, deviance between execution times is fluctuating.

On the other hand, CountDownTimer has only 95ms excess time in execution, and pretty much accurate across the runs (except the 1st and 2nd).

Although its different just by 120 on the average, it gave me quite a surprise that Thread used less memory.

Who wins this code clash? I say, CountDownTimer. It’s clean, it’s reliable. But unless you want your code to be pretty low level and highly customizable, go for Thread.

Comments and Suggestions are very welcome and appreciated.

Stats are generated by codes below

		final long startTime = System.currentTimeMillis();
		final Runtime rt = Runtime.getRuntime();
		rt.gc();
		final long memSys = rt.totalMemory() - rt.freeMemory();
		Thread k = new Thread(new Runnable() {
		    @Override
		    public void run() {
		        try {
		            for(itr=0 ; itr<1 ; itr++) {
		                Thread.sleep(1000);
		                runOnUiThread(new Runnable() {  
		                    @Override
		                    public void run() {
		                        tv.setText(itr+""); 
		                		Log.i("exec speed of Thread", System.currentTimeMillis()-startTime+"");
		        				long memory = ( rt.totalMemory() - rt.freeMemory() ) - memSys;
		        				Log.i("used memory in bytes", "Used Memory: "+memory);
		                        return;
		                    }
		                });
		            }
		            return;
		             
		        } catch (InterruptedException e) {
		            // TODO Auto-generated catch block
		            e.printStackTrace();
		        }
		    }
		});
		 
		k.start();
		final long startTime2 = System.currentTimeMillis();
		final Runtime rt = Runtime.getRuntime();
		rt.gc();
		final long memSys = rt.totalMemory() - rt.freeMemory();
		CountDownTimer timer = new CountDownTimer(1000, 1000) {
			 
		    public void onTick(long msNow) {
		        tv.setText("" + msNow / 1000);
		    }
		 
		    public void onFinish() {
		        tv.setText("00");
				Log.i("exec speed of CountDownTimer", System.currentTimeMillis()-startTime2+"");
				long memory = ( rt.totalMemory() - rt.freeMemory() ) - memSys;
				Log.i("used memory in bytes", "Used Memory: "+memory);
		    }
		 };
		  
		 timer.start();

Sending JSON Data From Android to a PHP Script

In my previous blog Meet JSON! I talked about how JSON is used in the mainstream. Now, how do we send JSON Objects from Android to a server script written in PHP?

In this tutorial we will pass a JSONObject with our message to our server code written in PHP. Our server reads our JSON, reverse our message, and send it as a reply. I will not be discussing in detail the server code, and the java client code (MainActivity.java) for these are not my main topic in this Blog. I will be merely give emphasis on “Sending” the data.

PHP

Our server code

<?php 

if( isset($_POST["json"]) ) {
     $data = json_decode($_POST["json"]);
     $data->msg = strrev($data->msg);

     echo json_encode($data);

}

For those who don’t understand these lines of PHP code, in our first line we’re saying that if $_POST[“json”] has a value, then we execute. You may want to read about Server and Request variables in PHP. In the next line, we decode the json data inside $_POST[“json”] and catch it. Reverse the String in the “msg” entity of the object, encode and echo.

Our MainActivity.java (ANDROID)

package com.coffeecodes.coffecodesdoodle;

import org.json.JSONException;
import org.json.JSONObject;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		try {
			JSONObject toSend = new JSONObject();
			toSend.put("msg", "hello");

			JSONTransmitter transmitter = new JSONTransmitter();
			transmitter.execute(new JSONObject[] {toSend});

		} catch (JSONException e) {
			e.printStackTrace();
		}

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

Now I’ll just discuss the important lines which is wrapped in the try block. Observe toSend.put(“msg”, “hello”). looking back to our server code, “msg” is our critical data to be reversed. JSONTransmitter is our class that will be tackled below. Because it is a child of AsyncTask class, the way we execute a command is transmitter.execute(new JSONObject[] {toSend}). In our parameter, I passed an array of JSONObject which only contains 1 object, the toSend.

Let’s have this class that will send JSON object as String to PHP.

JAVA


import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.params.HttpConnectionParams;
import org.json.JSONObject;

import android.os.AsyncTask;
import android.util.Log;

public class JSONTransmitter extends AsyncTask<JSONObject, JSONObject, JSONObject> {

    String url = "http://10.0.2.2/coffeeCodes/";

    @Override
    protected JSONObject doInBackground(JSONObject... data) {
        JSONObject json = data[0];
		HttpClient client = new DefaultHttpClient();
		HttpConnectionParams.setConnectionTimeout(client.getParams(), 100000);

		JSONObject jsonResponse = null;
        HttpPost post = new HttpPost(url);
		try {
	        StringEntity se = new StringEntity("json="+json.toString());
	        post.addHeader("content-type", "application/x-www-form-urlencoded");
	        post.setEntity(se);

	        HttpResponse response;
			response = client.execute(post);
			String resFromServer = org.apache.http.util.EntityUtils.toString(response.getEntity());

			jsonResponse=new JSONObject(resFromServer);
			Log.i("Response from server", jsonResponse.getString("msg"));
		} catch (Exception e) {	e.printStackTrace();}

        return jsonResponse;
    }

}

On our class declaration of JSONTransmitter in line 1, we extended the AsyncTask class that passes 3 data types. AsyncTask is used for proper execution of Threads in Android. Inside our diamond operator , the first data type we declared is for the parameters’ type, then for progress and result respectively. In our case, we pass parameters to our JSONTransmitter object in JSONObject type. we broadcast update also in JSONObject, and we return the result in JSONObject.

String url = "http://10.0.2.2/coffeeCodes/";

Yes, it is what it looks like. http://10.0.2.2/coffeeCodes/ is where our server script will be hosted. well usually in web development we use “localhost” instead of 10.0.2.2 . But if we use localhost in this matter, localhost will be referring to your emulator’s system rather than your apache server (or what not). If you don’t have a clue on how we came up with “localhost” and how to put up your server codes, you would want to watch this first.

JSONObject json = data[0];

You might wonder about this first statement in our doInBackground method. The “data” variable is in JSONObject which is in array format. So what we did here is to take the first item in the array. Well that would be our scope of this program, only one JSONObject will be executed, just to make things simple.

HttpClient client = new DefaultHttpClient();

Think of “client” as Harry Potter’s Owl ;). it will be the one to send and execute data that we will build.

HttpPost post = new HttpPost(url);

“post” is our envelope. it carries our JSONObject and other necessary details such as to where we would send out message. In this case, we passed “url” (the class variable) as our send address.

StringEntity se = new StringEntity("json="+json.toString());
post.addHeader("content-type", "application/x-www-form-urlencoded");
post.setEntity(se);

And these are our contents. If you are familiar with HTTP headers, this won’t look like an alien to you. The handler of our json would be the StringEntity se. and if you noticed, we mutated our json to string form and as it would look like, it will be… json = {“msg” : “hello”}

So, let’s do the magic.

HttpResponse response = client.execute(post);
String resFromServer = org.apache.http.util.EntityUtils.toString(response.getEntity());

jsonResponse=new JSONObject(resFromServer);
Log.i("Response from server", jsonResponse.getString("msg"));

client.execute(post); The owl just flew and immediately came back and dropped the reply to your mailbox, “HttpResponse response”. Because we don’t speak Parrseltongue, we need a translator org.apache.http.util.EntityUtils.toString(response.getEntity()). Assuming that it is in JSON format, we then pass the response to our JSON parser JSONObject(resFromServer) and finally output our message to the LogCat.

Screenshot from 2013-10-20 12:21:39

Meet JSON !

Ever wondered about ways to connect users of your Android App through the internet with less difficulty in data manipulation? One way would be developing the application fully as a web app and view it on a WebView. But sometimes you may still want to have implementations using its native features. And JSON can help you with that. Well, not in the process of data streaming but in easy data manipulation.

JavaScript passing Post data to PHP via AJAX

$.post(url, 
       {action:"register", params:"params"}, 
       function(data) {
             console.log(data);
});

I have been using JSON objects to be passed through the ajax call like the above jQuery code, for quite some time and that’s it. One time I became so curious about this technology about why I see it everywhere. If JSON can be passed between JS and PHP, would it be possible if I use it within Android and send ’em to a PHP Server code? Then I visited JSON official site

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

– JSON.org

And I said to myself… “OOOOHHHHHH! this means big for my coding convention”. Immediately, ideas came passing through my mind of a lot of possibilities of my future projects. I now use JSON widely across all my projects in PHP, Android, and plainly Java and I want to share it with you.

This blog entry will not be focusing on the technical details of what JSON is or how its data structure was designed and how. Those details can be acquired by going to the official website. The purpose of this entry is to invite non JSON users to pretty much follow the trend.

Where is JSON used in today’s mainstream tech? It’s everywhere ! ! !

Not to mention, Youtube, flickr, Facebook, Google+, and the list goes on.

So What Are The Possibilities If I use JSON?

A lot, basically. One of it is that you could make a RESTful Web API. But because I Love Android, I would focus in Android realm.

In this one I would like to show an implementation using Android.

JAVA (CLIENT)


	HttpClient client = new DefaultHttpClient();
	HttpConnectionParams.setConnectionTimeout(client.getParams(), 100000);

        HttpPost post = new HttpPost("http://localhost/jsonTest"); 
                                      // or whatever url you have to your chosen folder
        
        HttpResponse httpResponse = client.execute(post);

        // catch whatever the server prints
        String response = org.apache.http.util.EntityUtils.toString(httpResponse.getEntity());
        
        // to be continued
     /* ... */

PHP (SERVER)

        $userInfo = array("first_name"=>"john", "last_name"=>"doe");
        echo json_encode($userInfo); // outputs as string

JAVA

Going back to our Java code, we can then instantiate a JSONObject for the caught JSON string

     /* ... */
     JSONObject resFromServer = new JSONObject(response);

     // AND THEN...
     Log.i("user first and last name", 
                       resFromServer.getString("first_name")
                       +" "+resFromServer.getString("last_name"));

We can now get any data within the object by calling the method .getString() for strings, .getInt() for Integer data type, getDouble, getBoolean, and more depending on what data type you want to retrieve.

But of course, these codes alone WILL NOT work. BUMMER.

Android would only allow you to call HTTP methods using an object that inherits AsyncTask. For a complete tutorial on how to send and retrieve JSON data from and to Android, read Sending JSON Data From Android to a PHP Script, which for now is still on draft.

JQuery: Append New HTML Elements and Inherit Event Handlers

Click, loading whole page, click, loading whole page, click, loading whole page

Waiting for a page to load is tiring for you visitor and often the cause of Page Abandonment. With just 4 seconds of loading time, you lose 25% of your visitors according to Google Analytics and KISSMetrics. This is also one of the reasons why Ajax has become an industry standard in web development.

Although we won’t be talking about Ajax in this blog entry, this post will show how to add elements dynamically to your page without loading the whole page again. Implementation is purely done in JQuery and HTML.

<div id="wrap">
    <div class="box" style="width:50px;height:50px;background:#000;"></div>
</div>
<input id="btn" type="button" value="Click Me!" />

Attach this script to the <head> or at the bottom-most part of the page.

$(".box").click( function() { // event triggered if .box is clicked
     $(this).remove(); // remove this element on click
});

$("#btn").click( function() { // run this code if button is clicked
     var html = "<div class='box' style='width:50px;height:50px;background:#000;'></div>"; // or any html element you want
     $("#wrap").append(html); // This line makes the magic
});

Notice that the pre-written html of .box is the only one responding to the click event, the added boxes don’t. That’s because the event handler is not vissible to the appended element. So how to fix it? Let’s apply Event Delegation.

$("#wrap").on("click", ".box", function() { // event is triggered if you click within the #wrap and apply handler to .box
    $(this).remove(); // remove this element on click
});

$("#btn").click( function() { // run this code if button is clicked
    var html = "<div class='box' style='width:50px;height:50px;background:#000;'></div>"; // or any html element you want
    $("#wrap").append(html); // This line makes the magic
});

So what’s the difference? On the first script we attached and event handler to .box (div with class name box). In that manner, the event handler will only be attached to the existing .box upon the reading of the script.

On the other hand,

Attaching an event handler to the parent, which is the #wrap, will propagate the handler to its children whether a newly added one or a static one. This will make all elements inside the #wrap div respond to you event handler.

Thanks for reading.