PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV Mobile 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • My first project
  • Creating the project
  • My first window
  • Overview
  • Creating the window
  • Displaying a message
  • First test
  • First deployment on the device
  • Principle
  • Implementation
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.
Lesson duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
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.

Caution

The setup of a Windows Mobile application can be created with a 32-bit WINDEV Mobile editor only.
My first project

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.

Answer

A corrected project is available. To open this project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "My Pocket project (Answer)".
  • To create a project:
    1. Start WINDEV Mobile 25 if necessary.
    2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
    3. In the home page, click "Create a project" then "Windows CE".
      Home page of the project

      The project creation wizard starts. The different steps of the wizard help you create your project. The information specified in this wizard can be modified later.

      Remark

      Other method for creating a project:
      1. Click Create an element among the quick access buttons of WINDEV Mobile menu.
      2. The element creation window appears: click "Project".
    4. The wizard proposes to create a blank project or a project based on an example. Select "Create a blank project" and go to the next step.
    5. The next step is used to detect the parameters of device connected to the PC.
      Detecting device characteristics
      • If your device is connected, click "Click here to automatically detect the device".
      • If no device is connected, go to the next step to manually define the characteristics of device used.
    6. The next step is used to describe your device.
      Device description
      Go to the next step.
    7. The wizard proposes to type the name of project, its location and its description. In our case, this project will be named "My_Pocket_Project". WINDEV Mobile proposes to create this project in the "\My Mobile Projects\My_Pocket_Project" directory. You can keep this location or modify it via the [...] button.
      Project creation wizard
    8. Go to the next step ("Next" button).
    9. The wizard proposes to add documents. Go to the next step.
    10. 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".

      Express

      The SCM is not available in the Express version. This step is not shown.
    11. 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.
    12. This step is used to define the style book. Select "Elegant".
      Remark: This skin template can be found in "Obsolete skin templates for Windows Mobile and others".
    13. The other wizard steps not being important for our first project, click "End" in the left section of wizard.
    14. Click on "Finish" at the bottom of the wizard. The project is automatically created.
    15. The element creation window appears. This window is used to create all elements that can be associated with a project.
My first window

Overview

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:
    1. 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 Create a new element among the quick access buttons of WINDEV Mobile:
      Quick access buttons
    2. The window creation wizard starts.
    3. 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.

      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.
    4. 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.
    5. Specify the name of the element: "Welcome" (here, the element corresponds to the WINDEV Mobile window).
    6. The element name ("WIN_Welcome") is automatically proposed.
      Saving an element

      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 "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
    7. 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:
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control. The control appears in creation mode under the mouse pointer.
    2. 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.
    3. Right-click the control that was just created. The popup menu of control is displayed. Select "Description" from this popup menu. The Button control description window appears.
  • Modify the control characteristics by entering the following information:
    Describing the Button control
    1. This control is named: "BTN_Display".
    2. The control caption is: "Display"
  • Validate the control description window ("OK" button). The control 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 use our first WLanguage function: Info.

    Remark

    The programming language supplied with WINDEV Mobile is named WLanguage. It is a 5th-generation language (5GL) that includes highly sophisticated commands.
    1. 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.
    2. Open the popup menu of the control (right click).
    3. Select "Code". This option opens the code editor of WINDEV Mobile, where all WLanguage statements can be typed.
    4. 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. Simply select the desired word and press Enter to validate. You can focus on the algorithm.

Remark

When writing this code in the code editor, you may have noticed that the different elements use different colors. 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 "Home" pane, in the "Environment" group, expand "Options" and select "Options of the code editor").
Info displays the message passed as parameter.
  • Save the modifications by clicking Save an element 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.
First test
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.
    1. Click Run the test of a window among the quick access buttons (or press F9).
    2. Validate (if necessary) the information message regarding the simulator mode.
    3. 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.
    4. Click the "Display" button.
      Window being tested
    5. 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

Principle

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.

Implementation

  • To generate the Windows Mobile application:
    1. On the "Project" pane, in the "Generation" group, click "Generate" (you can also click Generate application among the quick access buttons).
    2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate ("OK" button).
    3. The mobile executable creation wizard starts.
    4. The first step of the wizard allows you yo define the name and icon of the application.
      Executable creation wizard
      The icon of the executable can be chosen in the WINDEV Mobile image catalog:
      • Click on Popup menu of an image on the right of the control "Name of icon".
      • Select "Catalog" from the popup menu that is displayed.
      • The image catalog window appears.

        Remark

        As soon as an image can be used (in a control, window, report, ...), the "Catalog" button is available (via the menu displayed by the Popup menu of an image 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:
        • specify the keyword corresponding to the search,
        • validate. The images found are automatically displayed.
        By double-clicking the requested image, this one is generated and included in your project.
    5. The other steps are not required by our application. Click "2- Copy to mobile" on the left of the wizard.
    6. This step is used to define the options for copying files to the mobile device:
      File copy options

      Caution

      The setup of a Windows Mobile application can be created with a 32-bit WINDEV Mobile editor only.
    7. 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.
    8. Validate and end the wizard.
That's it, our first application is generated and run on the Windows Mobile device.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment