|
|
|
|
|
- Lesson 1 - My first Android/iOS project
- Cross-platform project
- Creating the project
- First window: display a message
- How to create the window?
- Displaying a message
- To sum up
Tutorial - My first Android/iOS application
Lesson 1 - My first Android/iOS project We will cover the following topics: - My first Android/iOS project.
- My first window.
1 h To start developing with WINDEV Mobile, we will create our first project. It will be a cross-platform project intended for Android and iOS. This project will only contain a window to display a message. The platforms will be differentiated only when the application is generated and deployed. We will see how to deploy an application in the following tutorials: To start developing with WINDEV Mobile, we need to create a project. We will create our first project for Android and iOS.
Warning
This project will be used in the different lessons of this tutorial.
To create a project, simply follow the steps of the project creation wizard: - Start WINDEV Mobile if necessary.
- Go to the WINDEV Mobile home page (Ctrl + <).
- Click "Create a project" ( icon), then select "Android or iOS application".
- The project creation wizard starts.
The information specified in this wizard can be modified later. - The first step of the wizard allows you to define the project execution platform:
We will create a cross-platform application. Select "Android and iOS cross-platform" and proceed to the next step.
- The wizard prompts you to choose the type of devices the project is intended for:
If the application will run on different types of Android and/or iOS devices (e.g. phones of different sizes or 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 uses the smallest resolution to create the windows of the application. You can use anchors to adapt the application to any device. - In this example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.
- The wizard then allows you to choose the style book. Select "Phoenix".
The style book is defined based on skin templates. Skin templates allow you to quickly create outstanding interfaces. A skin template defines the window style as well as the style of all the controls that will be used in the window. Thus, the interface will always be cohesive and beautiful. - Go to the next step.
- The wizard prompts you to enter the project name and location. We will name our project "My_iOS_Android_Project". By default, WINDEV Mobile creates the project in ".\My projects\My_iOS_Android_Project". You can keep this location or change it via the [...] button.
- Click "Done".
The following actions are automatically performed: - The project is automatically created.
- Two project configurations are also created:
- an "iOS application" configuration, which is automatically selected.
- an "Android application" configuration.
We will take a closer look at these project configurations later in this tutorial. - The new element window appears. It allows you to create all the elements that can be associated with a project. Don't close this window, we will use it to create the first window of the application.
First window: display a message The first window allows the user to display a welcome message via the "Display" button. How to create the window? To create the window, we will use the window for creating new elements: - In the "New" window, click "Window", then "Window". The window creation wizard opens.
- 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.
- Confirm.
The window is automatically created in the editor. The save window appears. This window is used to specify: - the element title. This title will be displayed in the Action Bar of the window.
- the element name (window name in this case). This name will be used programmatically.
- the element location. This location is the directory where the element will be saved (by default, the project directory)
In this example: - Enter the title of the element: "Welcome". The name of the element is automatically suggested: "FEN_Bienvenue".
- Confirm.
Key information: The window name (that will be used in the code) is created automatically from the element title. If you want, you can simply write a name different from the element title.
The window is displayed in the window editor. As the default configuration is an iOS configuration, it uses the style of iOS windows. This window is composed of multiple areas: - The system bar, which shows the time.
- The Action Bar. Action Bars replace the window title bar and display a range of information: the application icon, the window title, certain menu options, and so on.
- The content area of the window, which will contain the different controls of the application.
Displaying a message The first window has now been created. We will now create a Button control to display a message.
To create the "Display" Button control: - On the "Creation" tab, in the "Usual controls" group, click . The control appears in creation mode under the mouse pointer.
- 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, simply click the window. The control appears with a box and sizing handles to indicate that it is selected.
How to select a control? Simply click a control to select it. Selection handles then appear around the control. If the control is already selected, you can click the control again to edit the caption.
We will change the characteristics of this control: - Right-click the control previously 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:
- Control name: "BTN_Display".
- Control caption: "Display".
- Click OK to confirm changes in the control description window. 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: - Click the Button control to select it.
- On the "Alignment" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
- The result appears immediately.
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 option. Positioning not to your liking? Move the mouse to stop hovering over the alignment options: the fields are returned to their original position. In this lesson, we will display a message in a dialog box when the button is clicked. To do so, we will use the Info WLanguage function. - Select the control (when the control is selected, sizing handles appear around it).
- Right-click the control to open its context menu.
- Select "Code". This option opens the WINDEV Mobile code editor, in which all WLanguage statements can be typed.
The code editor lets you write all WLanguage instructions, organized in events associated with controls. - Write the following WLanguage code in the "Click BTN_Display" event:
Info displays the message passed as parameter.
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. This lesson enabled us to create a project, a window and a field: the most important elements of an application. In the next lesson, we will test the window. Corrected project: If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the window we created in this lesson. To open the corrected project, on the home page, click on "Tutorial", then in the "Tutorial - My first Android/iOS application" area, click on the "Open corrected project" link.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|