Android Development 101-Modify “Hello World” app

This post covers how to run android development codes directly on smartphones (not AVDs) and how to modify the “Hello World” app to create powerful apps.

1. How to run android development codes directly on smartphones?
In order to run android development codes on smartphones, we need to do two things. On the smartphone’s side, we need to launch the “USB debug mode”. On the PC’s side, we need to install the driver for the smartphone. Then we plug in the smartphone to the PC, and we can see the phone shown at the “Device View” of Eclipse. If we run the codes as “Android Application”, then we can choose to run the codes on our smartphones. If the codes executes successfully, the app will automatically show in the smartphone.

2. How to modify “Hello World” app?
There is a file “activity_main.xml” in the directory of project->res->layout. Open this file and you will find code like this.

TextView in activity_main.xml

And in the project->res->values->string.xml, you will find code like this.

strings.xml

Obviously, @string/hello_world in activity_main.xml refers to the content defined in the strings.xml. And the content is “Hello world!”. So if we want the app to show something different, we can change the content of hello_world or create another string like hello_world. For example, if we want to show “The Lord of Rings”, we can modify the activity_main.xml and strings.xml as follows.

We can also open the Graphical Layout of activity_main.xml to use GUI to insert texts or images to the app.
3. Some Tips
1. In AndroidManifest.xml, we can modify SDK version to let our app run in older or latest smartphones.
2. Use “Quick Access” to find the View of “File Explorer”. Under this view, we can transfer files between PCs and smartphones.
3. The R.java in the project->gen directory is automatically generated. Generally, this file will automatically refresh if we modify the project. If not, we can just delete R.java and this file will be regenerated.

OOP in JavaScript

In this post, I discuss some basic concepts about OOP (Object Oriented Programming) in JavaScript, including how to create objects and classes, how to set properties and methods for a class to be private and public, how to do inheritance, etc.

For more details on the OOP, you can refer to this post: http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/.

1. How to create objects directly?

In general, there are two ways to create an object in JavaScript. Below are two examples.

var obj = {   property1: value1,   property2: value2,   method1: function() {      return this.property1;   },   method2: function(value) {     this.property2 = value;   } };

var obj = new Object(); obj.property1 = value1; obj.property2 = value2; obj.method1 = function() {   return this.property1; }; obj.method2 = function(value) {   return this.property2 = value; };

2. How to create classes?


function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function(){
     console.log("I am "+this.name);
  };
}
obj me = new Person("Jincheng", 23);
me.sayName();


3. How to add methods for a class?


function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function(){
     console.log("I am "+this.name);
  };
}
obj me = new Person("Jincheng", 23);
me.sayName();
//Add method makeFriends to class Person
Person.prototype.makeFriends = function(friendName) {
  console.log(this.name+" make friends with "+friendName);
};
me.makeFriends("Jane");

Tips: For each class, there is a corresponding prototype. If we want to add a method to an already-defined class, then we use the prototype of this class, just like what I show in the above example. After adding a method to the class, all objects of this class will automatically have this method.

4. How to set properties and methods to be private and public?

In default, the properties and methods of a class is public, then we can access the properties and methods outside the class. If we want some properties and methods to be private, we need to define the properties as variables and methods as functions as if this class doesn’t exist. Below is an example.

function Person(name, age, sex) {
  this.name = name; //defaultly, it is public
  var age = age;//the property "age" is private
  this.method1 = function() { //public function
    console.log("method1");
  };
  var method2 = function() {//private function
    console.log("method2");
  };
}
var me = new Person("Jane");
console.log(me.name);
console.log(me.age);//it's wrong, since the property age is private
me.method1();
me.method2();//it's wrong, since the method method2 is private


5. How to do inheritance?


function Animal(name, numLegs) {
  this.name = name;
  this.numLegs = numLegs;
  this.bark = function() {
    console.log("I am barking");
  };
}
function Penguin(name) {
  this.name = name;
  this.numLegs = 2;
}
//class Animal becomes the father of Penguin
Penguin.prototype = new Animal();
var penguin = new Penguin("jack");
penguin.bark();//class Penguin inherits method bark from its father


JavaScript Learning Class 101

A quick guide to JavaScript grammar:

http://www.codecademy.com/en/glossary/javascript

An excellent online JavaScript Interpreter, where you can directly write, test and share your JavaScript code:

http://repl.it/

1. How to get the length of the string “cake”?

“cake”.length  (not “cake”.length())

2. How to comment in JavaScript?

Using // before a line to comment this line, just like C++ and Java. For MATLAB and Latex, you should use %.

3. What are the comparison operators for “Equal to ” and “Not Equal to”?

Equal to ===

Not Equal to !==

This is very different from other programming languages.

A simple explanation would be that == does just value checking ( no type checking ) , whereas , === does both value checking and type checking . Seeing the examples may make it all clear. It is always advisable that you never use == , because == often produces unwanted results

Syntax

expression == expression
expression === expression

Example

'1' == 1 //true (same value)
'1' === 1 // false  (not the same type)

true == 1 // true (because 1 stands for true ,though it's not the same type)
true === 1 // false (not the same type)

4. How to print out things?

Using console.log(string), for example, console.log(“I am right”);

5. How to obtain the substring of a string?

“some string”.substring(x, y) gives the substring starting from x and finishing at y-1. The index of a string starts from 0. For example, “hello”.substring(0,2) returns “he”.

6. How to declare a variable?

Using var. Note that in JavaScript, all types of variables are declared using var.

var a = 2;

var b = “hello”;

7. How to get an input value from the user?

Use prompt. For example, var input = prompt(“Input a number”);

8. How to declare a function called mulBy2?

There are two ways to declare a function.

function mulBy2(number) {

    return number * 2;

}

var mulBy2 = function(number) {

    return number * 2;

};

9. How to get the type of a variable?

Use typeof. For example, var temp = prompt(“input your age”); typeof(temp);

10. How to create a two dimensional array?

var twoDimArray = [[1, 2, 3], [4, 5, 6]]; //create a 2×3 two dimensional array

var twoDimJagArray = [[1], [2,3]];//the first row has 1 element, the second row has 2 elements

tips: we can create a array containing different data types.

var array = [1, ‘a’, [1, 2]];

11. How to create an object?

var obj = {                                        var obj2 = new Object();

  key1: value1,                                    obj2.key1 = value1;

  key2: value2,                                    obj2.key2 = value2;

  key3:value3                                      obj2.key3 = value3;

};

var obj3 = {

  key1: value1,

  key2: {

  key21: value21,

  key22: value22

},

  key3:value3

};

12. How to create a class?

function Rectangle(height, width) {
    this.height = height;
    this.width = width;
    this.calcArea = function() {
    return this.height * this.width;
    };
// put our perimeter function here!
    this.calcPerimeter = function() {
    return 2 * (height + width);
    }
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

Android Development 101-Install software and Create “Hello World” app

This is a post focused on introducing the knowledge for Android development 101 class. The objective is to create a “Hello World” app. I will describe the environment settings (for Windows 7) and some basic tips for building an android app.

1. Software and Installation 

• JDK (JRE is included in it.) (http://www.oracle.com/technetwork/java/javase/downloads/index.html)
• ADT bundle for Windows (https://developer.android.com/sdk/index.html)

Tips: Make sure the OS version matches the JDK and ADT bundle. For example, if your laptop is installed with 64-bit operating system, then  JDK (download the windows x64 version) and ADT bundle (windows x86_64) should both be 64-bit version. After you successfully install JDK,  you can open the eclipse to verify the installation. If eclipse launches smoothly, then you succeed.

2. Android SDK Manager

Now we open the eclipse, and click Window->Android SDK Manager. Then you need to select the android platform, such as Android 4.3 (API level 18, Jelly Beans), Android 2.3.3 (API level 10, Gingerbread). I decide to develop apps for both Android 2.3.3 and Android 4.3, so I select “SDK Platform”, “ARM EABI v7a System Image”, “Intel x86 Atom System Image” under Android 4.3 and “SDK Platform”, “Intel x86 Atom System Image” under Android 2.3.3. Also, I select the “Android Support Library” and “Intel x86 Emulator Accelerator (HAXM)” under Extras. After you have selected what you want, just install these packages.

Tips: “Android Support Library”  under Extras is to help support modern Android functionality in older phones. “Intel x86 Emulator Accelerator (HAXM)” under Extras is to accelerate the Intel x86-based emulators, if you don’t install it, the launch time is almost intolerable.

How to launch “Intel x86 Emulator Accelerator (HAXM)”?

Go to the directory of the HAXM, in my laptop, the directory is  \adt-bundle-windows-x86-20131030\sdk\extras\intel\Hardware_Accelerated_Execution_Manager. In this directory, there is a file called “IntelHAXM.exe”, just double-click it to launch the HAXM. If you encounter the problem “Intel Visualization Technology (VT-x) is not turned on in your system”, then perhaps you need to go to BIOS to enable the VT-x function. (For ThinkPad, press F1 to get into the BIOS interface.) After you complete the configuration in BIOS, then re-install “IntelHAXM.exe”. Then the acceleration function should be okay.

3. Android Virtual Device (AVD)

Now we open the eclipse, and click Window->Android Virtual Device Manager.  Click the button “New” to create new virtual android devices with various parameters, including the size and resolution, android version, CPU(Intel or ARM), RAM, internal storage, SD card size, etc. Note that if you select the Intel CPU, make sure you launch the accelerator as we have mentioned in the second part “2. Android SDK Manager“.

4. Create “Hello World” App

Open the eclipse, and create a new Android Application Project. Give an application name (the name shown in the play store), project name and package name. We need to pay attention to the “Package Name”, which is  a unique identifier for your application. It is how multiple versions of the same application are considered the “same app”. Then click “Next” repeatedly until “Finish”. After you successfully create an Android Application Project, run the project as an “Android Application”. Then you will see the emulator launches and shows “Hello world!”.

5. Telnet to the Emulator

First, open the function of telnet in your windows system in the following way. Control Panel->Programs and Features->Open or Close Windows Functions->select “Telnet Sever” and “Telnet Client”. After you finish, go to the cmd console and type “telnet” to see if “telnet” works or not.

For the first emulator, the port number is 5554. Type “telnet localhost 5554” to enter the Android Console, in this console you can try many commands, such as sending a message to 5554 from 5556 by entering “sms send 5556 hello”, giving a call to 5554 from 5556 by entering “gsm call 5556” , canceling the call to 5554 from 5556 by “gsm cancel 5556”, killing the emulator by “kill” , etc.

Also emulators can communicate, for example, currently we launch two emulators, one with port number 5554 and the other with 5556. Emulator 5554 can send messages to 5556 by selecting 5556 as the receiver just like what we do when using our android phones .

There are many shortcuts operations for the emulators, such as we can press “CTRL+F12” to show the portrait and landscape view of the emulator.

6. Useful Views in Eclipse for Developing Android Apps

Logcat view: debug messages from the phone and emulator

Devices view: show the information of devices/emulators

How to launch “Logcat” and “Devices” views in Eclipse?

Two methods:

• Using the search box in the up right corner to search “logcat” and “devices”.
• select Windows->Show View to select the two views