PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
New WINDEV Mobile 23 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Starting WINDEV Mobile
  • Development environment
  • The editor
  • The menu bar (ribbon) in details
  • The environment colors
Lesson 1.1. Discover WINDEV Mobile
This lesson will teach you the following concepts
  • Starting WINDEV Mobile

Estimated time: 10 mn
Table of contentsNext Lesson
Overview
WINDEV Mobile is an IDE (Integrated Development Environment) allowing you to develop applications for Android, iOS, Universal Windows (Windows 10), Windows Mobile, ... in several fields: business, industrial, medical, hospitality, ... The developed applications can give access to information stored in the databases.
This tutorial will explain how to create your applications (with or without database) and how to improve them by using the different features proposed by WINDEV Mobile.
Starting WINDEV Mobile
  • Start WINDEV Mobile 23 (if not already done).
  • A welcome wizard starts if WINDEV Mobile 23 was never started before. This wizard is used to:
    • If you worked with an earlier WINDEV Mobile version, this wizard allows you to retrieve the existing configurations.
    • If you are a new user, this wizard allows you to configure your environment. This allows you to choose the screen configuration used and to configure the Control Centers.
  • If WINDEV Mobile 23 was already started, identify yourself if necessary. The development environment starts. The home window is displayed.
    This home window is used to:
    • create a project,
    • open an existing project,
    • open an example,
    • open one of the projects found in the tutorial.
  • Let's take a look at the development environment of WINDEV Mobile. To do so, from the home window:
    • Click "Tutorial".
    • Click "iOS/Android application (Answer)".
    • The corresponding project is opened in the editor. The project dashboard is displayed. The project dashboard gives an overall view of the progress of a project, via several elements (called widgets).
Development environment

The editor

The development environment of WINDEV Mobile includes a specific interface and several editors allowing you to create the different elements of your applications.
For example, the window editor is used to create windows, the report editor is used to create reports, ...
  • To discover WINDEV Mobile, we are going to open the "Product form" window:
    1. Press CTRL + E.
    2. In the window that is displayed, type the name of window to open: WIN_Product_form.
    3. Validate. The window is displayed in the editor.
All editors are using the same environment:
WINDEV Mobile editor
  1. Menu of editors, displayed in ribbon format (we'll see how to use it in the next paragraph).
  2. Current editor (window editor in this case). This space allows you to see the element currently created or modified in WYSIWYG (What You See Is What You Get).
  3. Panes. The interface of WINDEV Mobile includes several panes allowing you to quickly access different types of information.
    Some examples:
    • the "Project explorer" pane (displayed on the right) is used to list all project elements by category.
    • the search pane (displayed at the bottom) is used to perform searches in the entire project and in its elements.
    If necessary, these panes can be quickly hidden by pressing [CTRL] + [W].
  4. Bar of opened documents. This bar is used to quickly see all opened elements. A simple click on the button corresponding to the element displays it in its own editor.

The menu bar (ribbon) in details

The menu bar of WINDEV Mobile is presented in ribbon format. This ribbon includes panes in which the different options of editors are grouped.
We are going to take a closer look at the main ribbon elements, as well as how we will be using it in this tutorial.
Ribbon of WINDEV Mobile
The different ribbon elements
The ribbon includes 3 areas:
  • the button area, on the left (1).
  • the pane area, at the top (2).
  • the option area (3).
Let's take a closer look at these areas.
The button area (1)
The button area groups the quick access buttons. These buttons are used to perform the most usual operations, common to all editors: save, open, create, ...
The 3 logos found at the top of this area are specific:
  • The product logo is used to display the "About" window, the custom menus and the drop-down menus found in the former interface of editors.
  • The 2 other logos are used to restore the toolbars and the drop-down menus found in the former interface of editors.
The pane area (2)
Pane area
The different ribbon panes are used to access the options of different editors for the current project. Several types of panes are available:
  • the current pane: The name of current pane is displayed on a white background and an orange line is displayed above the name.
  • the popup panes, specific to the current element: The pane name is displayed in orange.
  • the available panes: The pane name is displayed in white.
The option area (3)
Option area
The options displayed in the ribbon differ according to the selected pane. Several types of options are available:
  • Options to check,
  • Buttons to click,
  • Button with arrow used to expand the options. Two types of buttons with arrow are available:
    • the buttons with arrow used to expand a menu
    • the buttons with arrow used to expand a menu (click on the arrow) or to perform a default action (click on the button icon).
The options are organized by group. Each group of options has a name and it can also include a group button . This button is used to perform a specific action according to the current group: display the description of current element, display the help, ...
In this tutorial, to identify a menu option, we will be talking about panes and groups. For example: To display the help, on the "Home" pane, in the "Online help" group, click "Help".

The environment colors

The environment is using a light theme by default.
Several other themes are also available:
  • Light theme, grey ribbon. In this mode, the menu bar is not colored anymore: it is grayed.
  • Gray theme. In this mode, the environment and the interface windows are displayed on a light gray background.
  • Dark theme. In this mode, the environment and the interface windows are displayed on a black or dark gray background.
  • To modify the theme used by the environment:
    1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General options of WINDEV Mobile".
    2. In the "Editor" tab, in the "Themes" area, select the theme to use.
    3. Validate. The theme will be taken into account during the next start of WINDEV Mobile.
Note: To improve the readability of this manual, the light theme will be used for the different images that illustrate the operations to perform.
Table of contentsNext Lesson
Minimum required version
  • Version 23
Comments
Click [Add] to post a comment