PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
New WINDEV Mobile 24 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 7.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
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 the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My Pocket project (Answer)".
  • To create a project:
    1. Start WINDEV Mobile 24 (if not already done).
    2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
    3. In the home page, click "Create a project" then "Windows CE".

      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.

      Remark

      Other method for creating a project:
      1. Click among the quick access buttons of WINDEV Mobile menu.
      2. The window for creating a new element is displayed: click "Project".
    4. 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_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.
    5. Go to the next step via the arrows found at the bottom.
    6. The wizard proposes to add documents. Go to the next step.
    7. 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.
    8. The next step is used to detect the parameters of device connected to the PC.
      • 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.
    9. The description window of your device is displayed.
      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 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.
    12. This step is used to define the style book. Select "Elegant".
    13. The other wizard steps not being important for our first project, click "End" in the left section of wizard.
    14. Click the validation button at the bottom of wizard. The project is automatically created.
    15. The window for creating a new element is displayed. 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 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 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 among the quick access buttons of WINDEV Mobile:
    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

      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.
    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.

      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 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:
      • a window starts with "WIN_",
      • a button starts with "BTN_",
      • etc.
      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.
      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. Click the green button to validate.

Displaying a message

You are now going to create a button used to display a message.
  • To create the "Display" button:
    1. On the "Creation" pane, in the "Usual controls" group, click . The button appears in creation under the mouse.
    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, all you have to do is perform a new left mouse click.
    3. 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:
    1. This control is named: "BTN_Display".
    2. The control caption is: "Display"
  • Validate the description window of control (green 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 be using 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. Display the popup menu of control (right mouse 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 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.

Remark

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:
  • 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 code editor (on the "Home" pane, in the "Environment" group, expand "Options" and select "Options of the code editor").
Info 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 re-appears.
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 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.
    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 is redisplayed.
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 also have the ability to click among the quick access buttons).
    2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate (green button).
    3. The wizard for creating a mobile executable starts.
    4. 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.

        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 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 the "2- Copy onto the mobile" link found on the left of the wizard.
    6. This step is used to define the options for copying files onto the mobile device:

      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 required version
  • Version 24
Comments
Click [Add] to post a comment