Thursday, September 26, 2013

BASIC4ANDROID LAYOUT DESIGNER, EVENTS AND ACTIONS


A) CREATE NEW PROJECT

1) Create a new project, save it in b4aprojects/guess/guess.b4a

B) DESIGN THE LAYOUT

2) Look for the menu "Designer". Click it.
3) Two windows pop up on the screen
3a) Designer window.
3b) Abstract Designer.
3c) Use the menu Add View/... to add Button, Edit Text and Label to the layout. Position the objects as follows:

C) SAVE THE LAYOUT

4) Save the layout.
4a) Save as layout1.

D)CONNECT TO EMULATOR

5) Connect to the device.
5a) Double-click to the chain icon to connect.
5b) Connected.
5c) If your layout designer is connected to the emulator, you would be able to see the objects on the emulator screen.
5d) You can directly adjust the size and position of the objects on the screen.

E) EDIT THE CODES

6) Update the existing codes.
6a) Find the Sub procedure Activity_Create(...) and update as follows:
6b) Notice that the Emulator screen is filled up by the layout1.
7) Edit the layout again.
7a) If the app is running, stop it first.
7b) Open Designer window.
7c) While label1 is selected, set the Text as follows:
7d) Continue editing until your view is as follows:
7e) Change the Activity properties "Drawable" to GradientDrawable
7f) Outcome:
7g) Tick Top Most property to make the layout stay on top of the emulator screen.
7h) Close the Designer window.
8) Check the layout file in the Main Window.
8a) In the right panel, find the Files tab.
8b) Click the tab and you should be able to see the layout file, i.e layout1.bal

F) ADDING EVENTS AND ACTIONS

9) We want to add an action to the button click even.
9a) Open the Designer again (go to menu bar and click Designer item)
9b) Right-click the Button, select Generate/Click.
9c) Close the Designer window and get back to Main Window.
9d) Notice that new codes have been added.
9e) Insert a new line as follows:
10) Run.
10a) When you click the button you would get the toast message "Well done".
11) Stop the program and complete the codes as shown in the B4A manual.

BASIC4ANDROID TOAST (ToastMessageShow)

-----
Toast Message is a message that is displayed on screen for a short period of time and gradually disappear. It is useful for debug purpose.

1) Download startup file, HelloWorld1.zip and unzip it.
2) Open the file HelloWorld.b4a

3) Edit the code as follows:

4) Run your App.

4a) You should notice the toasts:
Followed by…


4b) And if you press [ESC] key, you get:

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?