QML Page Element

Properties

Detailed Description

The screen area of a mobile device is small, so an application's user interface is often composed of a set of separate screens of content or "pages". You can use pages in conjunction with the PageStack component to provide a navigation system for your application. Another navigation alternative is the TabGroup component that provides parallel sets of content.

Defining the Content of a Page

Normally you base the pages (screens of content) of your application on the Page component but you can use other components or elements if you want. However, the benefit of the Page component is that it defines a contract how the page and the page stack interact. A Page component based page is notified when it becomes active or inactive and this allows you to perform various page-specific operations while the page is animated into the view or out of the view.

You can implement an application page either as a QML item or a QML component. You can regard a QML item as a particular page object and a QML component as a class definition of page objects. If your page is an item, you use the page directly as you have defined it. If you want to use a component page, you have to create an instance of that component page and use that instance. PageStack works transparently with either type of the page. The main thing you need to consider is how long you want the page to stay in the memory.

Example of a QML Page as an Item

The code snippet below defines a page as an item. It is a page with a text that can be accessed externally.

Example of a QML page in a component file

The page described above can also be declared in its own file. This is probably the type of a page you will use most often because it encapsulates the page in its own file making its maintenance easy. The following code snippet is from FilePage.qml file.

Life Cycle Signals of a Page

The page's life cycle phases are instantiation, activation, deactivation, and destruction. The following rules apply:

The page can switch between activation and deactivation phases any number of times during its life cycle.

When a page is activated it becomes visible on the screen and can be considered to be "the current" page.

If the page stack is not visible, the top-most page in the stack is deactivated and is not visible.

When the page stack becomes visible, the top-most page in the stack is activated.

When the page stack is made hidden the top-most page is deactivated.

When a any other than top-most page is popped off from the stack, it does not result in deactivation since the page is not active.

The status property indicates the current state of the page. Combined with the normal Component.onCompleted() and Component.onDestruction() signals you can follow the entire life cycle of the page as follows:

Defines the toolbar contents for the page. If the page stack is set up using a toolbar instance, it automatically shows the currently active page's toolbar contents in the toolbar. The default value is null resulting in the page's toolbar to be invisible when the page is active.

All other trademarks are property of their respective owners. Privacy Policy

Licensees holding valid Qt Commercial licenses may use this document in accordance with the Qt Commercial License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Nokia.