Basic4Android Tutorial: Model-View-Control Approach

(Based on Basic4Android Version 2.5 and Android SDK 18)

BASIC4ANDROID LAYOUT DESIGNER, EVENTS AND ACTIONS

A) CREATE NEW PROJECT

B) DESIGN THE LAYOUT

C) SAVE THE LAYOUT

D)CONNECT TO EMULATOR

E) EDIT THE CODES

F) ADDING 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.