- This lesson will teach you the following concepts
- Configuration required for Universal Windows 10
- My first project
- Creating the project
- My first window
- Creating the window
- Displaying a message
- First test
- First deployment on the device
Lesson 6.1. My first Universal Windows 10 project
This lesson will teach you the following concepts
- Required configuration.
- Creating a Universal Windows 10 project.
- My first window.
- My first test.
- First deployment.
Estimated time: 1 h
|Creating and generating a Universal Windows project is not available in Express version.|
To start working with WINDEV Mobile for Universal Windows 10, 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 Universal Windows 10 with WINDEV Mobile.
Before creating our first project for Universal Windows 10, the development computer must be configured.
Configuration required for Universal Windows 10
To develop a Universal Windows 10 App application, the following elements must be installed on the development computer:
- the Window 10 SDK of Microsoft. The SDK for Windows 10 (Software Development Kit) is a set of files and applications distributed by Microsoft to compile applications for the Windows 10 operating system.
- Visual Studio 2010 Redistributable Package.
- To use Universal Windows App APIs (UWA API), Visual Studio (version 2015 or later) must be installed.
- The creation of a Universal Windows 10 App project with WINDEV or WINDEV Mobile is available regardless of the system found on the development computer. To generate and deploy the application, the system found on the development computer must be Windows 8 (or later).
Creating the project
We are going to create our first project for Universal Windows 10.
|A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My UWA 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 "Universal Windows 10 App".
- 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.
|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 first wizard step is used to type the project name, its location and its description. In our case, this project will be named "My_UWA_Project". WINDEV Mobile proposes to create this project in the "\My Mobile projects\My_UWA_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.
- Specify the location of Windows 10 SDK required to generate applications. If the SDK was installed, the setup path is automatically proposed ("C:\Program Files (x86)\Windows Kits\10\bin" for example).
- Go to the next step via the arrows found at the bottom.
- The wizard proposes to choose the type of devices affected by the project:
- Generate an application for phones, tablets and PCs.
- Generate an application for phones only.
- Generate an application for tablets and PCs only.
|If the application is intended to operate on several Universal Windows devices (phones with different sizes or resolutions for example), we advise you to use one of the following options: "Generate an application for phones, tablets and PCs", "Generate an application for phones only". |
In this case, WINDEV Mobile proposes the smallest resolution to create the application windows. Using anchors (see Lesson 6.2 GUI Interface
) will allow the application to operate on all devices.
- In this example, we are going to generate an application for phones. Select "Generate an application for phones only" and go to the next step.
- This step allows you to use the SCM (Source Code Manager). We will not use this option in this tutorial. Click on "No, do not use SCM".
- 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.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 step is used to define the style book of application. We will keep "Material Design Blue Grey".
- 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 a Universal Windows 10 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.
- Select "Blank" in the list of windows. The "Material Design Blue Grey" skin template that was selected when creating the project is selected by default in the "Skin template" control (found at the bottom right of wizard).
|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 element name ("WIN_Welcome") is automatically proposed.
|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 validate the information displayed in the save 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 click in the window.
- 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: 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 a control, simply click on it.
- Display the popup menu of control (right mouse click).
- 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 or by pressing Ctrl + S.
- Close the code editor (cross at the top right of code editor). The window editor is redisplayed.
For a Universal Windows 10 application, WINDEV Mobile allows you to run the application test on the development computer via the simulation mode. This test simulates a Universal Windows 10 device on the development computer.
- 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.
- Choose (if necessary) the management mode of editor during the test (editor minimized or not).
- The created window is started in execution.
- Click the "Display" button.
- Validate the system window that is displayed.
- Any developer knows that running a program test can be a long and tiresome job. In WINDEV Mobile, a SINGLE CLICK allows you to run the test of window, report or procedure while you are creating it. This is both simple and fast!
- Click the "x" button found in the simulator shell to close the window.
- The WINDEV Mobile editor is redisplayed.
First deployment on the device
A Universal Windows 10 application can be directly run on the development computer if the system used is Windows 10. To run the application in stand-alone mode on the development computer, you must:
- Generate the Universal Windows 10 application in WINDEV Mobile.
- Then, the program will be installed on the computer. It will run in stand-alone mode.
Let's take a look at these different steps.
- To generate the Universal Windows 10 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 "WIN_Welcome" and validate (green button).
- The wizard for generating a Universal Windows 10 application starts.
- The first wizard step is used to select the generation mode of application. You can:
- Generate and deploy the application on a local computer: we will be using this option.
- Generate the application for Windows Store: this option is used to generate the application in order to distribute it via Windows store. See Deploying on the store for more details.
- Go to the next step.
- Specify the general information about the application: the application name, the company and the copyright. Go to the next step.
- Define the application version number. Go to the next step.
- Specify the path of different images used when starting the application: tile image, splash screen, ... Default images are automatically created for your application. Go to the next step.
- Specify the characteristics of the tile associated with the application. Go to the next step.
- Specify the custom error message displayed by the application. Go to the next step.
- You have the ability 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 the features used by the application. In this example, don't check anything and go to the next step.
- The Universal Windows 10 applications must be signed to operate. The wizard proposes to generate a certificate or to use an existing certificate. In this last case, all you have to do is select the requested certificate.
Caution: You must own and generate a certificate on the development computer to sign the application.
To generate a new certificate:
- Specify the name of certificate to generate.
- The next wizard step is used to create the certificate.
- Click the "Create the certificate" button. The Windows explorer displays the created certificate.
- In the explorer, display the popup menu of file (right mouse click) and select "Install the certificate". The wizard for importing the certificate starts.
- In the wizard, select the storage location: "Local computer". Click "Next".
- Select "Place all certificates in the following store".
- Click the "Browse" button and select the "Trust root certification authorities" store.
- Click the "Next" button until the end of wizard. A message is displayed, indicating that the import was successful.
- In the wizard, check "The certificate was successfully installed" and go to the next step.
- Validate the generation of application. The wizard gives you the ability to save the project.
- The wizard proposes to deploy the generated application. It allows you to:
- Deploy and start the application on the local computer.
- Deploy the application on a phone connected in USB.
- Deploy the application on a network phone.
- Select "Deploy and start the application on the local computer" and go to the next step. Enable the developer mode if necessary and validate the wizard.
- The corresponding tile is automatically created on the home screen of Windows 10 and the application is automatically started.
|See Universal Windows 10 App application: Deployment platform for more details about the different deployment modes of a Universal Windows 10 application.|
Click [Add] to post a comment