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

Opening a Page

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

1. In the Project 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 Project 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 Project 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:

1. Through the Toolbox:

   1. Open the Toolbox and select Widgets or Building blocks tab there.

      

   2. Select an element you would like to add and drag this element onto your page.

2. Through the menu at the top of the page:

   1. Do one of the following:

      1. Select frequently-used widgets (a data view, a data grid, a template grid, or a list view).
      2. 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.

3. By right-clicking a drop-zone:
   

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

   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 Widgets or Building blocks tab there.
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.

Page Editor Modes

There are two different ways to edit your page:

• Structure mode, the default editor 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 switch to the WYSIWYG editor from the default editor by clicking the Design mode button in the page editor. You can return to the structural editor by clicking Structure mode.

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

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:

• Widgets are shown with additional information easily visible – for example, data sources for data views 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

• There is a menu at the top of the page of data widgets – these cannot be dragged, but are positioned by clicking a drop-zone after selecting the widget

  

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

  

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 tablet:

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:

  

Read More

• Pages
• Page Properties