- This lesson will teach you the following concepts
- Home page
- The window creation wizard starts.
- In the list of proposed windows, select "Blank"
- Skin templates allow you to quickly create outstanding interfaces
- To do so, we will use our first WLanguage function
- the following network ports must be open
- define the application name
- enter the bundle identifier
- Go to the next step
- If the compilation target is the simulator, the application is started in the simulator window
- %00000369% %00000369%
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.
Lesson duration: Estimated time
Overview. 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.
Required configuration for iOS
See for more details (download addresses, ...).
Compiling a WINDEV Mobile project in Xcode
See the online help for more details (download addresses, ...).
My first project. Creating the project
We are now going to create our first project for iOS.. Answer
A corrected project is available
To open this project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)".
The wizard for project creation starts
|The different steps of the wizard help you create your project|
The information specified in this wizard can be modified later
- Other method for creating a project:
- Click among the quick access buttons of WINDEV Mobile menu..
- Create a document.
- The element creation window appears. click "Project".
- The first step of the wizard allows you to define the project execution platform. In our case, select "iOS only" and go to the next step of the wizard. Execution platform.
|The wizard proposes to create a blank project or a project based on an example|
Select "" and go to the next step
|Create a blank project: 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. Remark. 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", .
- Using anchors (see and ) will allow the application to operate on all devices
- Lesson 3.2 Interface (UI). Lesson 5.2 Developing the application
- Project creation wizard. For this example, select "Generate an application for all iPhones" and go to the next step.
- 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.
- Project creation wizard.
|Go to the next step ("Next" button).|
- 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..
- This window is used to create all elements that can be associated with a project.. NOTE5. NOTE5_1. My first windowOverview. The first window that we will create 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"
- Remark. 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
"Ninja", the skin template that was selected when creating the project, is selected by default. You can choose another skin template proposed in the list. Remark
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, there is no risk of obtaining an ugly interface..
The window is automatically created in the editor
|The window for saving an element is displayed|
This save window shows:: 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|
Specify the title of the element
|"Welcome". The name of the element is automatically proposed. "WIN_Welcome"|
- Remark. 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 "" pane, in the "" group, expand "" and uncheck "Use code style".. Project
- Other actions: Code style. Save the window by clicking "OK".: Displaying a message.
|You are now going to create a Button control used to display a message.|
To create the Button control:
|Select "Description" from this popup menu: The description window of the Button control appears.. Modify the control characteristics by entering the following information|
The control caption is: "Display".Remark: To modify the name and caption of the Button control, we have been using the control description window (also called "7-tab window"). The control name and caption can also be modified from the window currently being edited:
- Describing the Button control
- This control is named
Click the control to select it
Validate the control description window ("OK" button): The new control caption appears in the window editor
- Press the Enter or Space key
- the caption becomes editable.
- Type the new caption and validate.
- We are going to display a message in a dialog box (a small window proposed by the system)
To do so, we will use our first WLanguage function
- Remark. 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
- Remarks. When the control is selected, several handles appear around the control. To select a control, simply click on it.. Open the control popup menu (right click on the control).
- Select "Code": This option opens the code editor of WINDEV Mobile, in which all WLanguage statements can be typed
- Remark: 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:
Additional events can be added if necessary.
- Write the following code In the "Click" event of the "BTN_Display" control:.
- //############: Info("Hello")
- 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 mistakes when entering the name of an element. the syntax errors are reduced: All you have to do is select the requested word and press Enter to validate.
When typing this WLanguage code in the code editor
|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 (between quotes) are colored in purple,:
- the names of controls are colored in cyan..
- These colors can be modified element by element in the options of the code editor (on the "" pane, in the "" group, expand "" and select "Options of the code editor").
- Environment. Options.
|displays the message passed as parameter.|
|Save the modifications by clicking among the quick access button (on the left of ribbon) or by pressing Ctrl + S. Save the element|
Close the code editor (cross at the top right of code editor)
NOTE6_1: First test
- The window re-appears.
- For an iOS application, WINDEV Mobile offers several types of tests
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).|
Run the window test
|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.|
Click "x" in the menu above the simulator box to close the window.
- Validate the system window that is displayed
- Window test
The WINDEV Mobile editor appears again.
- 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 ()
the following network ports must be open
64000 (64000 to 64005 if several WINDEV Mobiles are running simultaneously):
- 27280. If a firewall is used, it must be configured to allow the use of these ports. From the quick access buttons, select the " Debug on a new iPhone/iPad" option.. The window for connecting to an iOS device appears.
- This window contains a specific QR code. . Debugging on a new iPhone or iPad.
- Connecting to an iOS device
- Launch 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
- WINDEV Mobile proposes to select the first project window
- In our example, select the "WIN_Welcome" window and validate ("OK" button).. First project window
- 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:.
- Compile the project in Xcode in order to generate the program.:
Let's take a look at these different steps..
- Then, the program can be installed on the connected device or started in the Xcode emulator.
- It will run in stand-alone mode.
- Implementation. To generate the iOS application:. On the "" pane, in the "" group, click "" (you can also click among the quick access buttons).. Project
- iOS generation.
- The wizard for generating an iPhone/iPad application starts..
define the application name
enter the bundle identifier
- This identifier is the unique identifier of your application for Apple
- It is defined and registered on the Apple developer account.
- This identifier will allow you to register your application so that it can be tested and deployed
- 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 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
- Open the folder on MAC and open the file named "Project_name.xcodeproj"..
- See for more details.. Signature of iOS applications
- See the online help for more details.. Validate the wizard ("Finish"). 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 to the Mac. Click the "Open the generation directory" button.
- The other operations must be performed on Mac. You must:
- Transfer the WINDEV Mobile project to the Mac.. Compile the project in Xcode.. Transferring the WINDEV Mobile project to the Mac
- To transfer the WINDEV Mobile project to the MAC:
- Copy the entire folder generated in the EXE directory to 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.
- 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 compilation status report appears at the top ("Succeeded", or 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.. 1410087565
- %00000368% %00000368%
%00000370% %00000370%. %00000371% %00000371%
- %00000372% %00000372%
- %00000373% %00000373%. %00000374% %00000374%
- %00000375% %00000375%
- %00000376% %00000376%. %00000377% %00000377%
- %00000378% %00000378%.
- %00000379% %00000379%.
- %00000380% %00000380%.
Click [Add] to post a comment