Monday, October 7, 2013

Basic4Android Tutorial: Getting Started

(Based on Basic4Android Version 2.5 and Android SDK 18)

BASIC4ANDROID GETTING STARTED

-----
Objectives:
-Creating Hello World
-Debugging
-Understanding Life Cycles
-----
Contents

A) CONFIGURING JAVA AND ANDROID SDK PATH

1) Before using B4A, you need to configure the Java and Android SDK Path.
1a) In Main Application Window, go to menu Tools/Configure Paths.
1b) The following is an example of program paths required by B4A, i.e javac.exe (version 6) and android.jar (Android API level 17)
(Your computer setting may have different paths).

B) CREATING A NEW PROJECT

1) When you run B4A program, it automatically creates a new project for you.

C) USER INTERFACE OF THE MAIN WINDOW

1) Menu bar
2) Toolbar
3) Project Explorer Panel
a) Modules - the codes that you write
b) Files - the files that you use
c) Logs - the log records of you project activities
d) Libs - the bundled resource that you include in the project
4) Main Panel.
a) Tab - shows the name of the module, i.e Main.
b) Code Editor - shows the codes, nicely colored texts with numbered code lines.
c) Status bar - highlighting current issue.

D) SETTING UP AN ANDROID EMULATOR

1) Save your project first.
1a) Create a new folder in My Documents called "b4aprojects"
1b) In "b4aprojects" folder, create a sub-folder called "HelloWorld".
1c) In "HelloWorld" folder, save your project as "HelloWorld".
1d) As a result, you get the following outcome in File Explorer:
2) Run the project.
2a) Go to Tool Bar and find the run button ,  .
2b) You may get the following error message. If you don’t, skip to STEP E.
2c) The error tells you that you need to provide an emulator or a device to host the project execution.
3) Create the Emulator.
3a) Go to menu Tools/Run AVD Manager
3b) When Android ADK Manager windows pops up, choose menu Tools/Manage AVDS
3c) Click New…
3d) Set as follows and click OK.
3e) Select the AVD Name and Click Start…
3f) Launch options.
Click Launch.
3g) Android Emulator started.
        
3h) It will take some time for the emulator to boot.
When the padlock icon appears on the screen, click and drag to right to unlock the screen.

E) RUNNING THE PROJECT

1) While the emulator is alive, get back to the B4A main window and look for the run button,  .
Click the run button.
2) Outcome:
3) The Compile & Debug window.
Take note that the window tells you to Press Stop button in order to stop the debugger.
4) Stop debugging.
Click the Stop button to stop debugging.
5) Notice that the title displayed on the screen is B4A Example. We will change the title to Hello World.
5a) Leave the emulator aside and get back to B4A Main Application Window.
5b) Go to Code window and look for  Project Attributes Region (line no.1).
There is a code segment “#ApplicationLabel:” with the value “B4A Example”
5c) Replace the text “B4A Example” with “Hello World”.
6) Run.
6a) Outcome:

F) READING THE LOG OUTPUT

1) Log window helps the programmer to monitor the internal changes during the runtime of a program.
1a) Go to log tab and find the Clear button.
Click Clear to clear up any existing logs.
2) Run your Hello World program again.
2a) Notice that new entries appear in the log window.

G) UNDERSTANDING THE ANDROID APP LIFECYCLE

1) App Lifecycle refers to the state of the application from the point it is started until the point it is closed.
2) To understand the changes in the state, we will write a log function in Hello World app to send log entry during state changes.
2a) If your app is running, stop it.
2b) Edit your codes as follows: (refer line no. 30, 35 and 39)
2c) Outcome:
Notice that the entry “---Create---“ and “---Resume---“ appears in the log window.
2d) Now press [ESC] key (i.e. Close App)
Notice that the entry “---Pause---“ is added to the log window.
4) Understanding the lifecycle is important because Android App may experience disruption such as phone call etc. during the runtime and we do not want the App to lose data during state changes.  You can try the following steps to see what happen to log window:
4a) Stop your App runtime.
4b) Clear the Log Window.
4c) Run your App.
4d) Press [HOME] key.
4e) Press the App icon,
4f) Look for Hello World icon and click it,
 
4g) After the Hello World App appears on screen, Press [ESC] key.
4h) What happen to log window?

No comments:

Post a Comment