- This lesson will teach you the following concepts
- 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 Windows Mobile project
This lesson will teach you the following concepts
- Creating Windows Mobile project.
- My first window.
- My first test.
- First deployment.
Estimated time: 1 h
To start developing with WINDEV Mobile for a Windows Mobile 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 Windows Mobile with WINDEV Mobile.
|The setup of a Windows Mobile application can be created with a 32-bit WINDEV Mobile editor only. |
Creating the project
We are going to create our first project for Windows Mobile. If you own the mobile device (Smartphone or Pocket PC) on which the application must be run, we advise you to connect this device to the development computer. Therefore, the device characteristics will be automatically detected and proposed when creating the Windows Mobile project.
|A corrected project is available. To open this project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "My Pocket project (Answer)".|
The first window allows the user to display a welcome message via a "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 Windows Mobile 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 "Elegant" skin template that was selected when creating the project is selected by default.
|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.|
- 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 title 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 name of the element: "Welcome" (here, the element corresponds to the WINDEV Mobile window).
- 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 code style.|
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_",
- Validate by clicking "OK".
Displaying a message
You are now going to create a Button control to display a message.
- To create the "Display" Button control:
- On the "Creation" pane, in the "Usual controls" group, click . The control appears in creation mode under the mouse pointer.
- 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, simply click again.
- Right-click the control that was just created. The popup menu of control is displayed. Select "Description" from this popup menu. The description window of the Button control appears.
- Modify the control characteristics by entering the following information:
- This control is named: "BTN_Display".
- The control caption is: "Display"
- Validate the control description window ("OK" button). The control appears in the window editor.
Note about the assisted input
- 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, where all WLanguage statements can be typed.
- Write the following code In the "Click" event of the "BTN_Display" control:
: 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. You can focus on the algorithm.
|When writing this code in the code editor, you may have noticed that the different elements use different colors. 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 window (cross in the top right corner of code editor). The window reappears in the window editor.
For a Windows Mobile application, WINDEV Mobile allows you to run the application test on the development computer via the simulation mode. This test simulates a Windows Mobile device on the development computer. This test is useful when no Windows Mobile device can be used by the developer. However, this test does not allow you to use the hardware components of device (SMS, ...).
- 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. The simulator shell corresponds to:
- the device connected to the development computer,
- the device chosen in the wizard for project creation.
- 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 appears again.
First deployment on the device
To run the application in stand-alone mode on the mobile device, you must:
- Connect the device via a USB port.
- Generate the application.
- Choose to copy and start the executable on the connected mobile. Copying the application can take several seconds.
- To generate the Windows Mobile application:
- On the "Project" pane, in the "Generation" group, click "Generate" (you can also click among the quick access buttons).
- WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate ("OK" button).
- The wizard for creating a mobile executable starts.
- The first wizard step is used to define the application name and icon.
The executable icon can be chosen in the image catalog of WINDEV Mobile:
- Click on on the right of the control "Name of icon".
- Select "Catalog" from the popup menu that is displayed.
- The window of image catalog is displayed.
|As soon as an image can be used (in a control, window, report, ...), the "Catalog" button is available (via the menu displayed by the button). This allows you to select an image among the images supplied in the image catalog of WINDEV, WEBDEV and WINDEV Mobile.|
To perform a search in the image catalog:
By double-clicking the requested image, this one is generated and included in your project.
- specify the keyword corresponding to the search,
- validate. The images found are automatically displayed.
- The other steps are not required by our application. Click the "2- Copy onto the mobile" link found on the left of the wizard.
- This step is used to define the options for copying files onto the mobile device:
|The setup of a Windows Mobile application can be created with a 32-bit WINDEV Mobile editor only.|
- The options to choose depend on your configuration:
- If a mobile device is connected, select "Yes: Copy the executable to Pocket PC" as well as "Run the application on Pocket PC at the end of copy". In this case, once the executable is generated, the application will be automatically copied and started on the mobile.
- If no mobile is device connected, select "No: Don't copy the executable to Pocket PC". In this case, the application can be deployed on the mobile devices via a setup procedure.
- Validate and end the wizard.
That's it, our first application is generated and run on the Windows Mobile device.
Click [Add] to post a comment