Android 2.x Programming Course Announced

As promised in an earlier blog post, we have just announced our first Android programming class.

WA1921 Enterprise Android Application Development

From the web page of the course:

Android is an open source platform for mobile computing. Applications are developed using familiar Java and Eclipse tools. Many vendors and carriers offer Android based devices (phones). Android is enjoying a healthy growth, in terms of hand set sells, applications available and new project starts. This course teaches students the architecture, API and techniques to create robust, high performance and appealing applications for the Android devices. While most courses from other vendors focus only on the mobile device, this course also deals with the server side architecture. This makes the class ideal for enterprise class businesses.

JSONObject No Longer Breaks Encapsulation

JSON is a string representation of a JavaScript object.  It’s been around since the dawn of JavaScript, but only recently gained popularity due to Ajax.  It’s commonly used as a data format for transmitting information from the server to the client.  The appeal of JSON is that the client doesn’t have to write a lot of code to update the page.  All he has to do is convert the JSON back to a JavaScript object (one line of code).  Then he can access the properties of the object and potentially update several portions of the page.

For example, below is the equivalent JSON for a JavaScript object representing a customer:

{"id":10,"name":"J. Buchman","active":true}

Below is the client code that is used to convert the JSON to a JavaScript object and update two div elements in the web page.

var customer = eval( "(" + replyString + ")" );

document.getElementById("name").innerHTML = customer.name;

document.getElementById("active").innerHTML = customer.active;

<div id="name"></div>
<div id="active"></div> 

On the server side, a utility library is typically used to convert Java objects into JSON strings.  www.json.org, which is responsible for monitoring all JSON related activities, provides such a library for Java.  The org.json.JSONObject class represents a JavaScript object.  Its toString method is to used to produce a JSON string.  When creating a  JSONObject, you typically do so based on some existing Java object.  Unfortunately, you need to declare all of its fields as public, which breaks encapsulation.

For example:

public class Customer {

   public int id;
   public String name;
   public boolean active;
}

To create the JSON string, you would:

1.  Construct an instance of the Customer class and initialize it.

2.  Construct an array of Strings specifying the class’s public field names.

3.  Construct a JSONObject passing in the Customer instance and array of Strings.

4.  Call the JSONObject’s toString method.

For example:

Customer c = new Customer(); 
c.id = 10; 
c.name = "John G. Reeves"; 
c.active = true; 

String propList[] = {"name", "id", "active"}; //List of public field names

JSONObject jo = new JSONObject(c, propList);

String replyData = jo.toString();

 

However, things have changed.  A new version of the JSONObject class was recently released, which no longer forces you to break encapsulation.  Instead, you can now pass in a JavaBean instance to the JSONObject constructor. 

JSONObject(Object bean)

The new constructor uses reflection to obtain the property names from the public methods that start with "get" or "is" followed by a capital letter.  Consequently, you can keep your fields private and have public methods for accessing them.  This way, you don’t break encapsulation.

Hence, your Customer class and JSON code are simplified and change to the following:

public class Customer {

   private int id;
   private String name;
   private boolean active;

public int getId() {
      return id;
   }
   

public void setId(int id) {
      this.id = id;
   }

// remaining getters and setters }

Customer c = new Customer(); c.setId(10); c.setName("John G. Reeves"); c.setActive(true);

JSONObject jo = new JSONObject(c);

String replyData = jo.toString();

For more information on JSON and other related Ajax topics, we recommend this training course:

WA1503 Comprehensive AJAX

Having Fun With jQuery UI

jQuery UI provides a rich user interface library. It builds on the core jQuery framework. So, you know that development will be quick and productive. If you are new to jQuery UI, follow these simple steps to get started.

Downloading jQuery UI

jQuery UI has a unique download builder. It allows you to build a custom package for download containing only the components that you need. You can also choose the theme and the version of jQuery UI to be downloaded. Head to the download page. To keep things simple, accept all the default settings. This will select the UI Lightness theme (at the time of writing this article). Then click on Download.

Installing jQuery UI

The library is composed of static files, like, CSS and JavaScript. You can put them directly in a web server’s document root. Or, you can package the distribution within a web application (WAR).

In this tutorial, we will use Apache web server. Within the document root, create a folder called “jqui”. Extract the downloaded ZIP file within that folder. You will get these subfolders under jqui.

 image

To validate the installation, open a browser and run the URL: http://HOSTNAME/jqui/. Where HOSTNAME is your machine’s host name. And, “jqui” is the name of the folder where we installed jQuery UI.

You should see the example page (index.html):

image

Using jQuery UI from a Web Page

To find out what JavaScript and style sheet documents you need to include, simply open up the index.html that came with jQuery UI. By default, these lines are relevant:

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js">
</script>

The style sheet will depend on your selection of theme. We are using the UI Lightness theme here.

In the same folder where you extracted jQuery UI, create a new file called test.html. Enter basic HTML there.

<!DOCTYPE html>
<html>
	<head>
	<title>jQuery UI Example Page</title>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

	<script type="text/javascript">
	$(function(){
		// Dialog			
		$('#my_dialog').dialog({
			autoOpen: false,
			width: 600,
			buttons: {
				"Ok": function() { 
					$(this).dialog("close"); 
				}, 
				"Cancel": function() { 
					$(this).dialog("close"); 
				} 
			}
		});
				
		//Button
		$('#dialog_button').button();

		$('#dialog_button').click(function(){
			$('#my_dialog').dialog('open');
				return false;
			});
			
	});
	</script>
	</head>
	<body>
		<!-- Dialog -->
		<div id="my_dialog" title="Having Fun">
			<p>Hello. jQuery UI is fun to play with!</p>
		</div>
		<button id="dialog_button">Open dialog</button>
	</body>
</html>

Save the file. Run it from the browser: http://HOSTNAME/jqui/test.html.

image

Click on the Open dialog button. You should see the popup dialog come up.

image

Congratulations! You have successfully completed your first jQuery UI application.

Fixing Style

By default, most of the themes, including UI Lightness use very large font sizes for the widgets. This is due to a strange assumption made by the designers that the font size for the body will be 62.5%. To fix the problem, we need to shrink the font size for the ui-widget class that is inherited by almost all widgets.

Add the following snippet within the <head>, anywhere below the line where the theme’s style sheet is included.

<style type="text/css">
    .ui-widget { font-size: 0.8em;}
</style>

Save and refresh the browser. This time, you will get a more acceptable font size.

image