Basic4android development tutorial translation (2) visual design and guessing

To learn this tutorial, refer to the following Tutorial:
Install basic4android and Android SDK
Hello world-install the android Simulator

In this tutorial, we will use the designer to create layout. This layout includes a text box and a button.
You need to guess a random number. You can enter a number in the text box and click the button to submit the number.
Then, the system prompts the user through the "toast" information that the number entered is larger or smaller than the number selected by the system.

-Create a new project and save it.
-Select the menu to open the designer.

The designer consists of two parts: "Control Panel" and "Control Panel", which is part of the IDE and contains all attributes and options:

The other part is the "visual" component running on the simulator:

As its name suggests, the visualization panel can display layout and allow you to move and change the size of views.
If layout is changed on the visualization panel, the stored values on the control panel are also changed.

Since all the data is stored on the control panel, we don't have to worry about the simulator crash or being turned off. When you connect to it next time, layout will automatically display it again.

Connect the device first. Click Tools-connect.
This step takes several seconds. Please note that the IDE will keep this connection until the IDE is closed and the designer will not be disconnected.

Use the Add View menu to add a button, an edittext, and a label.
Set the corresponding attributes and locations as follows:

Change the drawable attribute of the activity to gradientdrawable to achieve the effect of Transition Colors.

Tips: When you work on a small monitor, you will find it very convenient to click "top most" (in the upper right corner of the Control Panel. in this way, the control panel is displayed at the top of the page without being blocked by the simulator.

Save the layout and name it layout1.

Layout isImportant ConceptsBecause it establishes a complete boundary between your code and design.
Layout is saved as a file with the extension ". bal ". each project may have several such files. Unless you explicitly load a layout file, it will not have any impact on your project.

Once you save a layout, it will be automatically added to "File Manager". You can see it in the "Files" Panel on the Right of IDE.

We will use the button's click event.
Each view has an eventname value. It is an attribute in the designer. When a view is added to a program, it is passed as a parameter to the initialize process.
To use an event, you should use the following format to write a sub-Program (which is actually very simple ):
Sub <eventname >_< event> (event parameters ).

In the designer, the eventname attribute defaults to the view name.
If we want to call the button's click event by using the value of the eventname of the button, we should write it in the following format:
Sub button#click

So here is the complete code:

Code:

Sub Process_Globals

End Sub

Sub Globals
Dim MyNumber As Int
Dim EditText1 As  EditText'will hold a reference to the view added by the designer
End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("Layout1") 'Load the layout file.
  MyNumber = Rnd(1, 100)  'Choose  a  random  number between  1  to 99
End Sub

Sub Button1_Click
    If EditText1.Text > MyNumber Then
    ToastMessageShow("My number is smaller.", False)
     Else If EditText1.Text < MyNumber Then
         ToastMessageShow("My number is larger.", False)
     Else
        ToastMessageShow("Well done.", True)
     End If
    EditText1.SelectAll
End  Sub

Notes:
-Each activity module has an activity object. You can use this object to access the activity.
-Activity. loadlayout can be used to load the layout file.
-Other views can also load layout files. For example, panel and tabhost. For tabhost, each page can be created by loading the layout file.
-To access the views added in the designer, we need to define them in sub globals.
-Toastmessageshow is used to display a short period of information and disappears after a short period of time.
Here, toast message is not very suitable, because sometimes it cannot be prompted when the keyboard is opened.

Tips for writing event subroutines:
In IDE, first write sub, and then press the Space key. You will see a small prompt "press tab to insert event Declaration ".
Press the tab key to select an object category and select an event.

Now you are writing the required event name and press Enter.

Supports multiple screen resolutions and orientations

Each layout file can contain a series of layout variants. Each layout variant stores values of different positions and sizes of views.
For example, if you change the text of any view, all variants will automatically change. However, if you change the view position, only the value of the current variant will be affected.
Please note that proportional scaling is automatically performed if necessary. This means that layout scales automatically when we are running on a high-resolution device.
However, you can create different variants for different Scaling Options.

When you load a layout file, the variant that best matches the device will be loaded.

Generally, you need two variants:
-320x480, scale = 1 (160 DPI). This is the default vertical ratio.
-480x320, scale = 1 (160 DPI). default horizontal ratio.

Okay. Open the designer again. Load the layout1 file.
Select "new variant" and select 480x320 (second option ).

Select the simulator and press Ctrl + F11 to change the direction of the simulator.
Please note that the device layout details will appear under the variant list.

If you change layout:

You can change the currently selected variant and then see how it affects the visible layout.
Save the layout and run the program.
Change the direction of the simulator to see how layout is changed.

Every time the direction changes, Android will destroy the old activity and create a new activity. every activity. loadlayout will be called again. therefore, unfortunately, the number to be guessed Will be reselected. of course, this will be easy to correct... but this is not what this tutorial will do.

Download the project file from the attachment.
Tips for this tutorial:
-The files menu of IDE contains an "export as ZIP" option. This option is used to generate a zip file that contains all the required files.

File: http://www.basic4ppc.com/android/fil...ssMyNumber.zip