Object inheritance with Javascript

Prototype can be used to define data member and function member to a object. It also is used to realize inheritance for javascript. In order to inherit an object from another object, we set the new the new function's prototype to the existing function as show below:
function base()
{ this.inbase = 2;}

base.prototype.inbaseProto = 3;
base.prototype.getint = function()
{
return 3;
}

derived.prototype = new base;
function derived()
{ this.inderived = 4;}

derived.prototype.inderivedProto = 5;

x = new derived;
s = x.getint();

alert(base.inbase + ', ' + x.inbaseProto + ', ' + x.inderived + ', ' + x.inderivedProto + ', ' + s );
The result is "2, 3, 4, 5, 3";

Jonathan

Use prototype to make javascript object oriented

Unlike other object oriented language, javascript does not support the common way of defining data member or function member. However, this can be supported in javascript by using prototype.
For javascript, when a function is defined, it automatcally gets a data member of prototype, which also has a constructor method by default- i.e the function itself. The constructor is used to create the instance of the object. If any data members or function members are defined on this prototype object, then all instances created by the function will automatically have those data members and function members defined, similar to other object oriented lanaguages, the code is shown below,
function f(){
}
f.prototype.datamember=3.14159;

// create the object method
function f2(o){
alert(o);
}
f.prototype.funcmember=f2;

Note for prebuild types, only object, image, string, data and array can have their prototype changed to add new data members and function members, which means you can extend new function into those prebuild types. With the following code, then all instance of object will have the newprop as 123.
Object.prototype.newprop = "123";

Note if a same named property is defined in both object instance itself and object propotype, then the object instance property will take priority.
Jonathan

Function object and this in javascript

Unlike other languages, function in javascript is an object same as other instance object. For example, if the following function is defined
function f(m,n) {
this.x = m;
this.y = n;
}

Then calling
var o1 = f;
Then the type of o is an object that represents the function. It is not a instance that is created by the f function.

Now let us see what happens if calling
var o2 = new f;
This time, the function serves as the construct to create a instance . The instance has two data member x, and y, whose values are not initialized. To set the data member values, calling
var o3 = new f(1, 2);

Now try to use the function in a different way as showing below
var o3 = f(2, 3);
This time, the function f is not used as a constructor, instead it is just a normal javascript method call, inside the function f, this pointer points to the window object of the current html page, and it just sets two new data members to the window object.

Another thing unique in javascript is, although any object instance can add new data members by just calling assigning operation as below
this.x = somevalue;

It can not do so to directly call a javascript funtion on an instance object. Instead, it must first assign the function to the instance's member before calling the function on it.
this.f = somefunction;
this.f();

By the way, the this point in javascript function call chain is not inherited. So if within a function A, the this points to instance Obj1, then calling function b from function A, within the function b, the this pointer is the global object, instead of Obj1. If you want to set the this pointer Obj1 to be function b's this pointer, then you must first assign function b as a member of Obj1, and then calling function as its member function. This also explains why we need to assign onclick attribute to a external function and then call onclick to keep the current html element as the external function's this object.

Relative or absolute path in URL

When a javascript method or html link refers to an element in the url, if the relative path is used, the path base is the current displaying html page. As a result, the target location will be different depending on the current displaying page's location. If the javascript method or html page refers to an element using absolute path format, then it is always based on the root folder of the virtual directory, and the target location is irrelevant to the current displaying page's location.

The format of absolute path starts with a single forward slash, avoiding using a back slash since some clients may not support it.

The format of relative path starts without any slash. If the relative path starts with '../', it will go to the parent folder of the current displaying page. However, if it already reaches the root folder of the virtual directory, then the root folder will be used to locate the target item.

Jonathan

Show Dialog with onBackPressed and onPause method

onPause method in Android activity is for saving the UI state data, when onPause is called, the OS already puts the current activity in background and starts to render the target activity. So no any UI related operation (for example, showing a dialog box, etc.) should be put into onPause method.

If there is a need to do UI related operation, like prompting user to save the pending change or cancel the current operation, then those UI related operation should be put into menu handler or onBackPressed method.

Showing Dialog in Android Application

First, different from other platforms, showing dialog in Android will not block the current execution. So that the code behind Dialog.show() will be executed immediately without waiting the dialog gets closed. As a result, anything that needs to be called after closing the dialog should be put into dialog's button handling method.

Second, there is not a single method that can be called to show a dialog. The simplest code to show a dialog box is as follows

Builder alertDialog = new AlertDialog.Builder(this);
alertDialog.setTitle("my title");
alertDialog.setMessage("my message.");
alertDialog.show();

Third, if you do not want user to cancel the dialog by selecting the back key, then call the following method before alertDialog.show();
alertDialog.setCancelable(false);

Finally, if you want user to select a yes/no option by clicking a button in the dialog box, two other methods should be called to set these button's text and callback methods. A full functioning dialog is showing below:

AlertDialog.Builder ad = new AlertDialog.Builder(myActivity.this);
ad.setTitle("my title");
ad.setMessage("my message");
ad.setPositiveButton("Yes", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int arg1) {
// do yes operation
}
});

ad.setNegativeButton("No", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int arg1) {
// do no operation
}
});

ad.setCancelable(true);
ad.setOnCancelListener(new OnCancelListener() {
@Override
public void onCancel(DialogInterface dialog) {
// do cancel operation
}
});

ad.show();


Note if you show two dialogs (that is, calling Dialog.show()) within a single method, then the second dialog will show on the top of the first one. Only after the second dialog gets dismissed, then the first one will become the active dialog.

Jonathan

ListView, ListAdapter, ListActivity in Android

ListView is derived from View class, so it can be used by Activity in the similar way as EditText or Button View. ListView is also derived from ViewGroup, so it has the ability to contain a list of view for the list item.
In order to show the list view, the only method that needs to be called is
setAdapter( ListAdapter adapter). The ListAdatper parameter provides the views for showing each list item.

ListAdapter class mentoned in setAdapter method is responsible to render list item. Its first responsibility is holding the data of list item, which is passed as paramter to its constructor. The second responsibility is returning a view for each item when asked by ListView classm, the layout resource of the item view is passed to it as another paramter in its constructor.

Now let us take a look at ListActivity, basically, it is a activity that has a listView in it. In order to show a list items, the only method needs to be called is setListAdapter(adapter) in the overrided onCreate method. The following is the simple code to show a string array in listActivity, it does not even require to define any layout resources.

public class MyListActivity extends ListActivity {
@Override
public void onCreate(Bundle data) {
super.onCreate(data);
ArrayList myString = new ArrayList();
myString.add("string1");
myString.add("string2");
myString.add("string3");
myString.add("string4");
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, myString);
setListAdapter(adapter);
}
}

Jonathan

Fix Link Error When Viewing Android Offline Document

After installing Android offline document for Android SDK API 11 and opening index.html from Windows File explorer, clicking any link (like Reference or SDK) on the index page will cause an error. The reason is the link automatically adds the root driver again in the new address, so the target address becomes an invalid one as showing below.
C:\C:\Program Files (x86)\Android\android-sdk-windows\docs\reference\android\text\util\package-summary.html

A quick fix is creating a virtual directory in IIS and point it to the android document folder, and then open index.html from the virtual directory as below, then everything works as supposed.
http://localhost/androiddoc/index.html

Jonathan

Use FLAG_ACTIVITY_NEW_TASK flag when starting activity

When calling startActivity, the new activity will live in the same screen stack (context) as the caller. Sometime, the caller may not have an activity context, for instance, starting an activity from Broadcastreceive.onReceive() method, or starting an activity from a service. In these cases, call startActivity will cause an exception of "Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK", since the new activity does not have a context to live in.

To fix the issue, setting FLAG_ACTIVITY_NEW_TASK to the intent as follows, then a new context will be created for the new activity.

myIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);


Jonathan