- This lesson will teach you the following concepts
- Required configuration for iOS
- My first project
- Creating the project
- My first window
- Creating the window
- Displaying a message
- First test
- First deployment on the device
- Transferring the WINDEV Mobile project onto Mac
- Compiling the project in Xcode
Lesson 3.1. My first iOS project
This lesson will teach you the following concepts
- Required configuration.
- Creating an iOS project (iPhone or iPad).
- My first window.
- My first test.
- First deployment.
Estimated time: 40 mn
To start developing with WINDEV Mobile for an iOS platform, we are going to create a first project. This project will contain a window used to display a message.
This first example will present the main concepts of development for iOS with WINDEV Mobile.
Before creating our first project for iOS, the development computer must be configured.
Required configuration for iOS
To develop a WINDEV Mobile application for iPhone/iPad, you must own:
- 1 PC,
- 1 Mac,
- 1 iPhone and/or iPad (optional).
Why a PC?
WINDEV Mobile 25 is a Windows application that can be used in Windows 7, 10, ...
The application will be created on PC before it is compiled on Mac.
This PC requires no setup of Mac/Apple tools.
Why a Mac?
A Mac is required because the project generated on PC must be compiled in a specific compiler to generate iOS applications. The minimum version of operating system must be iOS 8.
Xcode is a development environment that is used to develop iOS applications (iPhone and iPad). This tool will be used to compile the applications generated with WINDEV Mobile.
The minimum version of Xcode must be version 8.
Creating the project
We are now going to create our first project for iOS.
|A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)".|
- To create a project:
- Start WINDEV Mobile 24 (if not already done).
- Display the WINDEV Mobile home page if necessary (Ctrl + <).
- In the home page, click "Create a project" then "iOS application".
- The wizard for project creation starts. The different wizard steps help you create your project. The information specified in this wizard can be modified later.
|Tip: Other method for creating a project:|
- Click among the quick access buttons of WINDEV Mobile menu.
- The window for creating a new element is displayed: click "Project".
- The wizard proposes to type the name of project, its location and its description.
In our case, this project will be named "My_iOS_Project". WINDEV Mobile proposes to create this project in the "\My Mobile projects\My_iOS_Project" directory. You can keep this location or modify it via the [...] button.
- Go to the next step via the arrows found at the bottom.
- The wizard proposes to add documents. Go to the next step.
- 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.
- The wizard proposes to choose the type of devices affected by the project:
- Generate an application for all iPhones and iPads.
- Generate an application for all iPhones.
- Generate an application for all iPads.
- Generate an application for a specific device.
|If the application is intended to operate on several iOS devices (phones with different sizes or with different resolutions for example), we advise you to use one of the following options; |
- "Generate an application for all iPhones and iPads",
- "Generate an application for all iPhones".
- For this example, select "Generate an application for all iPhones".
- In the left section of wizard, click "Charters". This step is used to define the programming charter. Don't modify the suggested options. Go to the next step via the arrows found at the bottom.In the left section of the wizard, click "Guidelines". This step is used to define the code style. Don't modify the suggested options. Go to the next step via the arrows found at the bottom.
- This step is used to define the style book of application. We will choose "ActivPhone 7".
- The other wizard steps not being important for our first project, click "End" in the left section of wizard.
- Click the validation button at the bottom of wizard. The project is automatically created.
- The window for creating a new element is displayed. This window is used to create all elements that can be associated with a project.
The first window allows the user to display a welcome message via the "Display" button.
You may think this is too basic but we advise you to create this window. You may be surprised by how intuitive and how easy it is to use the editor of WINDEV Mobile. Furthermore, this window will allow you to discover concepts that are fundamental for the rest of this tutorial and to see the entire process for developing an iOS application with WINDEV Mobile.
Creating the window
- To create the window:
- In the window for creating a new element, click "Window" then "Window".
|As a new project was created, the window for creating a new element is automatically displayed.|
To display the window for creating a new element, all you have to do is click
among the quick access buttons of WINDEV Mobile:
- The window creation wizard starts.
- In the list of proposed windows, select "Blank". The skin template used is displayed at the bottom right of wizard. The "ActivPhone 7" skin template that was selected when creating the project is selected by default. You can choose another skin template proposed in the list.
|The 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. No ugly interface anymore.|
- Validate. The window is automatically created in the editor. The window for saving an element is displayed. This window displays:
- the element title. For a window, this title will be displayed in the Action Bar of window.
- the element name that corresponds to the window name. This name will be used in programming.
- 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.
- Specify the title of the element: "Welcome". The name of the element is automatically proposed: "WIN_Welcome".
|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 is using a programming charter.|
The programming charter is used to define a prefix for each type of object, allowing you to quickly identify the element:
You have the ability to disable this charter if you don't want to use it: on the "Project" pane, in the "Other actions" group, expand "Charter" and uncheck "Use the charter".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 is using a code style.
- a window starts with "WIN_",
- a button starts with "BTN_",
The code style is used to define a prefix for each type of object, allowing you to quickly identify the element:
If you do not want to use this code style, you can simply disable it: on the "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
- a window starts with "WIN_",
- a button starts with "BTN_",
- Click on the green button to save the window.
Displaying a message
You are now going to create a button used to display a message.
- To create the "Display" button:
- On the "Creation" pane, in the "Usual controls" group, click . The button appears in creation under the mouse.
- Move the mouse toward the position where the control will be created in the window (at the top of window for example). To drop the control in the window, all you have to do is perform a new left mouse click.
- Perform a right mouse click on the control that was just created. The popup menu of control is displayed. Select "Description" from this popup menu. The description window of button is displayed.
- Modify the control characteristics by typing the following information:
- This control is named: "BTN_Display".
- The control caption is: "Display".
|To modify the button name and caption, we have been using the description window of control (also called "7-tab window"). |
The button name and caption can also be modified from the window currently in edit:
- Click the control to select it.
- Press the Enter or Space key: the caption becomes editable.
- Type the new caption and validate.
- Validate the description window of control (green button). The new control caption appears in the window editor.
- We are going to display a message in a dialog box (a small window proposed by the system). To do so, we will be using our first WLanguage function: the function Info.
|The programming language supplied with WINDEV Mobile is named WLanguage. It is a 5th-generation language (5GL) that includes highly sophisticated commands.|
- Select the control if necessary.
- When the control is selected, several handles appear around the control.
- To select the edit control, all you have to do is click it with the mouse.
- Display the popup menu of control (right mouse click on the control).
- Select "Code". This option opens the code editor of WINDEV Mobile, in which all WLanguage statements can be typed.
|The code editor proposes different events for each type of control. These are the events related to the control.|
Therefore, two events are displayed for the "Button" control:
Note: Additional events can be added if necessary.
- Initialization, run when displaying the window.
- Click, run when the user clicks the button
- Write the following code In the "Click" event of the "BTN_Display" control:
Note about the assisted input: As soon as the first two characters are typed, WINDEV Mobile proposes all words of WLanguage vocabulary containing these characters. The assisted development is a very powerful feature. No more mistake when typing an element name: the syntax errors are reduced. All you have to do is select the requested word and press Enter to validate. You can focus on the algorithm.
|When typing this code in the code editor, you have noticed that different colors are used by the different elements. This is the syntactic coloring. The code editor allows you to easily identify the different elements handled by the code:|
These colors can be modified element by element in the options of code editor (on the "Home" pane, in the "Environment" group, expand "Options" and select "Options of the code editor").
- the WLanguage functions are colored in blue,
- the character strings (between quotes) are colored in purple,
- the names of controls are colored in cyan.
displays the message passed in parameter.
- Save the modifications by clicking among the quick access button (on the left of ribbon) or by pressing Ctrl + S.
- Close the code editor (cross at the top right of code editor). The window re-appears.
For an iOS application, WINDEV Mobile offers several types of tests:
- Project or window test on the development computer using the simulation mode. This test simulates an iOS device on the development computer. This test is useful when the developer does not have a Mac or an iOS device to compile the application. However, this test does not allow you to use the hardware components of device (GPS, SMS, camera, etc.).
- Project test directly on the device. This test is useful when the developer does not have a Mac to compile the application. All the components of the device are accessible.
- We will now run the window test in simulation mode.
- Click among the quick access buttons (or press F9).
- Validate (if necessary) the information message regarding the simulator mode.
- The created window is started in execution, in a shell corresponding to the selected device (iPad or iPhone).
- Click the "Display" button.
- Validate the system window that is displayed.
- Click the "x" button found in the simulator shell to close the window.
- The WINDEV Mobile editor is redisplayed.
- Do you have an iPhone? Now, let's test the project directly on the device.
- First of all, make sure all the following conditions are met:
- the iPhone/iPad and the development workstation must be on the same network (Wifi, for example).
- WMDev must be downloaded to the iPhone/iPad (https://itunes.apple.com/us/app/WMDev/id1437792304).
- the following network ports must be open:
If a firewall is used, it must be configured to allow the use of these ports.
- 64000 (64000 à 64005 if several WINDEV Mobiles are running simultaneously).
- Among the quick access buttons, select " Debug on a mobile device". The window for connecting to an iOS device appears. This window contains a specific QR code.
- Start WMDev on the mobile device (iPhone or iPad).
- Click on "+" and then on the button displaying a bar code.
- Scan the barcode displayed under WINDEV Mobile in the connection window of an iOS device.
- The mobile application starts on the iOS device.
First deployment on the device
To run the application in stand-alone mode on the device, you must:
- Generate the iOS application (or Xcode project) in WINDEV Mobile.
- Transfer the generated Xcode project onto Mac in order to compile it.
- Compile the project in Xcode in order to generate the program.
- Then, the program can be installed on the connected device or started in the Xcode emulator. It will run in stand-alone mode.
Let's take a look at these different steps.
- To generate the iOS application:
- On the "Project" pane, in the "Generation" group, click "Generate" (you also have the ability to click among the quick access buttons).
- WINDEV Mobile proposes to select the first project window. In our example, select the "WIN_Welcome" window and validate (green button).
- The wizard for generating an iPhone/iPad application starts.
- The first wizard step is used to:
- define the application name, the company and the copyright.
- enter the bundle identifier.
|This identifier is the unique identifier of your application beside Apple. It is defined and saved on the Apple developer account.|
This identifier will be used to save your application in order to run its test and to deploy it. By default, WINDEV Mobile automatically proposes an identifier that respects the development standard of Apple. This identifier can be modified.
- type the email address that will be used by default to send the error reports generated by the application.
- Go to the next step. You have the ability to specify the path of different application icons. Several icons can be supplied:
- icons for iPad and iPad Retina (only if the application proposes windows for iPad),
- icons for all iPhone models (for example, iPhone 4S and iPhone 6 Plus have different resolutions).
- Go to the next step.
- Specify the characteristics of the start image (splash screen).
- Go to the next step. Specify the version number of the generated application.
- Go to the next step. This step is used to include specific files (data files, images, ...). This possibility will not be used in our example. Keep the default options.
- Go to the next step. This step is used to specify:
- whether the application is allowed to be resized or not (Split View). The option allows the end user to display two windows of two different applications side by side on some devices.
- whether files can be shared with iTunes. If this option is checked, you will have the ability to retrieve the application files on Mac during the synchronization. For example, if data files have been supplied with the application, the iTunes application will allow you to retrieve these files.
- the minimum iOS version required to run the application.
- Go to the next step. This step is used to define the signature options required for Xcode 8.
See Signature of iOS applications for more details.
- Validate the wizard (green button). The generation is performed in the EXE folder of project directory. The directory containing the source code that will be used on Mac is named "Project_name.xcode.gen" ("My_iOS_Project.xcode.gen" in our example). This is the directory that must be copied onto Mac. Click the "Open the generation directory" button.
The other operations must be performed on Mac. You must:
- Transfer the WINDEV Mobile project onto Mac.
- Compile the project in Xcode.
Transferring the WINDEV Mobile project onto Mac
- To transfer the WINDEV Mobile project onto MAC:
- Copy the entire folder generated in the EXE directory onto an external media (USB key, external hard disk, shared directory with MAC on network). This directory is named <Project Name>.xcode.gen.
- Paste this folder on the MAC that will compile the application.
- Open the folder on MAC and open the file named "Project_name.xcodeproj".
- The project is opened in Xcode.
Compiling the project in Xcode
WINDEV Mobile automatically generates an Xcode project for your iOS compilations. To simplify the implementation of applications, WINDEV Mobile generates a “Scheme” for Xcode.
- To compile the project in Xcode:
- In the drop-down list found in the top left corner, select the compilation options. Select the scheme (corresponding to your application) then the compilation target (device currently connected or a simulator).
- To start the compilation, select “Product .. Clean” then “Product .. Build”.
- A status report of compilation is displayed at the top (“Succeeded”, otherwise the number of warnings and errors). You have the ability to click these symbols to see the list of errors/warnings.
- Once the program is compiled without error, you can start the simulation (“Product .. Run”).
- If the compilation target is the simulator, the application is started in the simulator window.
- If the compilation target is the connected device, the application is started on the device.
Then, you have the ability to run the test of your application on your iPhone or iPad.
Click [Add] to post a comment