• Required configuration.
• Creating an Android/iOS project.
• My first window.

	Estimated time: 1 h

Required configuration for Android

• The JDK: The JDK (Java Development Kit) distributed by Oracle is used to compile the generated Java files.
• The Google Android SDK: The Android SDK (Software Development Kit) is a set of files and applications distributed by Google to allow applications to be compiled for Android.
  Caution: The Android SDK includes groups of files that correspond to the versions of the platform on the devices (6, 7, etc.).
  The download and setup of the Android SDK are proposed if necessary when generating the Android application from WINDEV Mobile.
• Gradle tool: This tool is required to compile and generate Android applications. Gradle can be downloaded and installed if necessary when generating the Android application from WINDEV Mobile.

Required configuration for iOS

Creating the project

	Answers	A completed project is available. To open this project: Go to the WINDEV Mobile home page (Ctrl + <). Click "Tutorial", then in "Part 2 - Lesson 2.1 - My first Android/iOS application", double-click "My Android/iOS project - Answers".

• To create an Android / iOS cross-platform project:
  1. Start WINDEV Mobile 28.
  2. Go to the WINDEV Mobile home page (Ctrl + <).
  3. On the home page, click "Create a project" ( icon) and select "Android or iOS application".
     
  4. The project creation wizard starts. The different steps of the wizard will help you create your project. The information specified in this wizard can be modified later.
     

     	Note	Tip: Another method for creating a project: Click in the quick access buttons of the WINDEV Mobile menu. The new element window appears: click "Project".
  5. The first step of the wizard allows you to define the project execution platform:
     
     In our case, select "Android and iOS cross-platform" and go to the next step.
  6. The wizard proposes to create a blank project or a project based on an example. Choose "Create a blank project" and go to the next step.
  7. The wizard prompts you to choose the type of devices the project is intended for:
     • Generate an application for phones and tablets.
     • Generate an application for phones.
     • Generate an application for tablets.
       

       	Note	If the application is intended to operate on several Android and/or iOS devices (e.g. phones of different sizes or different resolutions), it is recommended to use one of the following options: "Generate an application for phones and tablets", "Generate an application for phones". In this case, WINDEV Mobile proposes the smallest resolution to create the windows of the application. Using anchors (see Lesson 2.3 Interface (UI) and Lesson 4.2 Developing the application) will allow the application to be used on all devices.

       
  8. In this example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.
  9. The wizard prompts you to enter the project name, location and description. We will name our project "My_iOS_Android_Project". By default, WINDEV Mobile creates this project in "\My projects\My_iOS_Android_Project". You can keep this location or change it via the [...] button.
     
  10. Go to the next step.
  11. The wizard proposes to add documents. Go to the next step.
  12. This step allows you to use the Source Code Manager (SCM). We will not use it in this example. Select "No, do not use SCM". Go to the next step.
      

      	Express	Remark: The Source Code Manager (SCM) is not available in the Express version.
  13. This step is used to define the code style. Don't change the suggested options. Go to the next step.
  14. This step allows you to define the style book of the application. Choose "Phoenix".
      
  15. We can skip the other steps of the wizard for our first project. Click "Finish" directly. The project is automatically created. Two project configurations are automatically created:
      • an "iOS application" configuration, which is automatically selected.
      • an "Android application" configuration.
      The window creation and generation wizards will automatically show the options that correspond to the current configuration in the editor.
  16. The new element window appears. This window is used to create all elements that can be associated with a project.

Overview

Creating the window

• To create the window:
  1. In the "New" window, click "Window" then "Window".
     

     	Note	As a new project was created, the window for creating a new element is automatically displayed. To open the element creation window, simply click in the WINDEV Mobile quick access buttons:
  2. The window creation wizard starts.
  3. In the list of windows, select "Blank". Since the "iOS" configuration is selected by default, the wizard will prompt you to create a window for iPhone. The name of the skin template used is displayed at the lower-right section of the wizard. "Phoenix", the skin template we selected when creating the project is selected by default.
     

     	Note	Skin templates allow you to quickly create outstanding interfaces. A skin template defines the window style as well as the style of all controls that will be used in this window. Thus, the interface will always be cohesive and beautiful.
  4. Validate. The window is automatically created in the editor. The save window appears. This window allows you to specify:
     • the element title. This title will be displayed in the Action Bar of the window.
     • the element name that corresponds to the window name. This name will be used programmatically.
     • the element location. This location corresponds to the directory in which the physical file corresponding to the element is saved. The window is a "WDW" file, saved in the project directory.
  5. Specify the title of the element: "Welcome". The name of the element is automatically completed: "WIN_Welcome".
     
     
     

     	Note	Let's take a look at the window name proposed by WINDEV Mobile: this name starts with the letters "WIN_". This prefix is automatically added because the project uses a code style. The code style is used to define a prefix for each type of object, allowing you to quickly identify the element: a window starts with "WIN_", a button starts with "BTN_", etc. If you do not want to use this code style, you can simply disable it: on the "Project" tab, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
  6. Save the window by clicking "OK".
  7. The window is displayed in the window editor. This window is composed of multiple areas:
     • The system bar, which shows the time.
     • The Action Bar. The "Action Bars" replace the title bar of a window and display multiple information: the application icon, the window title, some menu options and the window drop-down menu.
     • The content area of the window, which will contain the different controls of the application.

Displaying a message

• To create the "Display" Button control:
  1. On the "Creation" tab, in the "Usual controls" group, click . The control appears in creation mode under the mouse pointer.
  2. Move the cursor to the position where you want to create the control (e.g. at the top of the window). To drop the control in the window, simply click on the window.
  3. Right-click the control that was just created. The context menu of the control appears. Select "Description" in this context menu. The Button control description window appears.

• Enter the following control details:
  
  1. The control name: "BTN_Display".
  2. The control caption: "Display".

	Note	We changed the name and caption of the Button control in its description window (also called "7-tab window"). You can also change the control name and caption from the window being edited: Click the control to select it. Press the Enter or Space key: the text becomes editable. Type the new caption and validate.

• Validate the control description window ("OK"). The new control caption appears in the window editor.

• To improve the UI of our first window, we will center the Button control in the window:
  1. Click the Button control to select it.
  2. On the "Alignment" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
  3. The result appears immediately.

	Note	WINDEV Mobile has many alignment options. If you don't know which alignment to choose, hover over the different options available in the "Alignment" tab. When you hover the mouse over an option, the controls selected in the window are automatically positioned and/or resized according to the hovered option. To apply the alignment, click the desired option. If you don't want to apply the alignment, simply exit the alignment options: the controls move back to their initial position.

• We will display a message in a dialog box (a system small window). To do so, we will use our first WLanguage function: Info.
  

  	Note	WLanguage is the programming language used by WINDEV Mobile. It is a 5th-generation language (5GL) that includes highly sophisticated commands.

  1. Select the control if necessary.
     Remarks:
     • When the control is selected, several handles appear around the control.
     • To select a control, simply click on it.
  2. Right-click the control to open its context menu.
  3. Select "Code". This option opens the WINDEV Mobile code editor, in which all WLanguage statements can be typed.
     

     	Note	The code editor proposes different events for each type of control. These are the WLanguage events related to the control. Two events are displayed for the "Button" control: "Initializing", run when the window is displayed. "Click", run when the user clicks on the control. Remark: Additional events can be added if necessary.
  4. Write the following WLanguage code in the "Click" event of the "BTN_Display" control:
     
     Info("Hello")

	Note	When typing this WLanguage code in the code editor, you probably noticed that the different elements use different colors. This is called syntax highlighting. The code editor allows you to easily identify the different elements handled by the code: the WLanguage functions are colored in blue, the character strings are colored in purple, the names of the controls are colored in cyan. These colors can be modified element by element in the options of the code editor (on the "Home" tab, in the "Environment" group, expand "Options" and select "Options of the code editor").

• Save the changes by clicking in the quick access buttons or by pressing Ctrl + S.

• Close the code editor (click the "X" icon in the upper-right corner of the code editor). The window editor appears again.