Page

Introduction

Pages define the end-user interface of a Mendix application. Every page is based on a layout. A page fills the “gaps” defined by a layout with widgets such as the data view and data grid.

Performing Basic Functions

You can perform the following basic functions when working in the page editor:

• Open a page
• Create a page
• Delete a page
• Add elements on a page
• View element properties
• Arrange elements on a page
• Changing the parameters of a page

Opening a Page

To open a page in Studio Pro, do the following:

1. In the App Explorer, open a module where this page is located.

2. Navigate to the page’s location inside the module. A page can be listed as an individual element or be included in the Pages folder:

   

3. Select a page you want to open and double-click it.

The selected page is opened.

Creating a Page

To create a new page, do the following:

1. In the App Explorer, right-click the module or a folder you want to create a page in and select Add page:

   

2. In the Create Page dialog box, fill in the Page name and select a Navigation layout.

   

3. Click OK.

A new page is created.

Deleting a Page

To delete a page, do the following:

1. In the App Explorer, select a page you would like to delete and right-click it.
2. In the displayed list, select Delete and confirm your choice by clicking Delete in the pop-up dialog.

The selected page is deleted.

Adding Elements on a Page

The way you can add an element on a page depends on a mode you are editing your page in. For more information on modes, see the Page Editor Modes section.

In Structure mode, there are several ways to add an element on a page:

• Through the Toolbox:

  1. Open the Toolbox, and select the Widgets or Building blocks tab.
  2. Select an element you would like to add and drag this element onto your page.

• Through the menu at the top of the page:

  1. Do one of the following:

     • Select frequently-used widgets (a data view, a data grid, a template grid, or a list view).
     • Click Add widget or Add building block, find an element in a list, and click Select:

     

  2. Click a drop-zone on a page to position an element.

• By right-clicking a drop-zone:
  

  1. Right-click a drop-zone you want to insert an element into.
     

  2. Select between adding a widget or a building block.
     

     

     
     

  3. Select an element you would like to add and confirm your choice by clicking Select.

In Design mode, you can add elements though the Toolbox. Do the following:

1. Open the Toolbox, and select the Widgets or Building blocks tab.
2. Select an element you would like to add and drag this element onto your page.

Viewing Element Properties

To view properties of an element, do one of the following:

1. Select an element and open Properties pane to view its properties.
2. Right-click an element and select Properties from the list of options that opens.
3. Double-click an element.

Arranging Elements on a Page

To cut/copy/paste you can use the following shortcuts:

• Ctrl + Z / Ctrl + C / Ctrl + V
• Command + Z / Command + C / Command + V

To delete an element from a page, select this element and press Delete or right-click an element and select Delete in a drop-down menu.

Changing the Parameters of a Page

To change the parameters of the page, click the Parameters button in the top bar. This opens a dialog box which allows you to add, modify, and remove parameters. The Parameters button shows the current number of parameters in its caption, while its tooltip shows the name and type of each parameter. For more information about page parameters, see the Parameters section in Page Properties.

Page Editor Modes

There are two different ways to edit your page:

• Structure mode, which clearly shows the relationship between page elements, together with additional information about each element
• Design mode, a WYSIWYG (What You See Is What You Get) editor which better reflects what the page will look like when it is published

You can toggle between the modes by clicking the Design mode or Structure mode button on the right of the top bar.

By default, pages open in Design mode, but if you prefer Structure mode, this can be set as default in the Preferences (Edit > Preferences > Work Environment > Default Page Editor). For more information, see the Default Page Editor section in Preferences.

Both modes allow you to edit your page by doing the following:

• Dragging widgets from the Toolbox pane onto the page
• Dragging widgets, and their contents, from one place on the page to another
• Viewing and editing properties of each widget in the Properties pane
• Opening a Properties dialog box from the menu you get when you right-click the widget

Additionally, the Page Explorer can be used in combination with Structure mode or Design mode, which shows a tree view of your page structure and contains the same editing capabilities.

Structure Mode

In Structure mode, the page widgets are laid out so that it is easy to see the logical relationship between them. It has the following features which are not available in Design mode:

• You can zoom a page in or out using the Zoom drop-down menu in the upper-right corner of a page

• Widgets are shown with additional information easily visible – for example, data sources for data grids and the width assigned to columns

  

• Each widget has a drop-zone before/above and after/below it – this makes it easier to place widgets correctly when they appear close together in Design mode

• Right-click a drop-zone allows you to insert a widget into it

• The top bar of the page consists of icons representing the most frequently used widgets – these cannot be dragged, but are positioned by clicking a drop-zone after selecting the widget (the last two open a dialog box that lets you choose an element from a list of widgets/building blocks)

  

• Widgets are shown without styling applied to them, but you can see which widgets do have styling applied via the class or style property by clicking the Show styles button (available for Web page templates and layouts only).

  

Design Mode

In Design mode, the page is laid out as it will appear when published so that it is easy to see the spatial relationship between the elements.

For example, the example page shown in Structure mode, above, will look like this in Design mode for a desktop:

It has the following features which are not available in Structure mode:

• The widgets are shown as they will be on the page – for example two text widgets which are laid out vertically in structural mode may actually be laid out horizontally when the app is published, and this will be reflected in Design mode

• The page layout can be seen for different device modes – for example phone or browser by clicking the appropriate device mode button:

  

• The widgets have design properties and CSS classes and styles applied to them so you can see what they will look like

• Toggle showing conditionally-visible widgets in the top bar:

  

• X-ray mode to visualize the structure of a page

X-Ray Mode

Structure mode allows you to see a completely detailed view of your app in progress. Design mode gives you a more simplified view of the app as your end-user might see it.

X-ray mode is a way to visualize certain structures of a page while in Design mode. It offers you a similar experience as Design mode, but you get more detailed information on structures and page elements.

When enabled, certain widgets appear larger (and are outlined bodly) so they are easier to work with. X-ray mode affects structures such as Container, Layout Grid, and Data View widgets. In addition, widgets such as Data View will show information on their data sources, even if the widget is not currently selected. These extra effects are removed when X-ray mode is turned off.

X-ray mode can be enabled and disabled by clicking the button in the top bar from Design mode. It can also be enabled or disabled using these shortcuts:

• Windows: Ctrl + Alt + X
• Mac: Command + Alt + X

Here is a page as shown in Design mode with X-ray mode disabled:

Here is the same page with X-ray mode enabled:

Read More

• Pages
• Page Properties
• Page Explorer
• UI Recommender