AppViews Class Reference

Inherits org::mauikit::controls::Page, and org::mauikit::controls::Page.

Properties
alias	content
alias	count
alias	currentIndex
alias	currentItem
QtObject	history
alias	interactive
int	maxViews

Public Member Functions
void	goBack ()

Detailed Description

Views switcher component.

Since

org.mauikit.controls 1.2

This controls inherits from MauiKit Page, to checkout its inherited properties refer to docs.

The AppViews control presents a set of children items as views - into an horizontal swipe view, that does not jump around when resizing the application window and that takes care of different gestures and keyboard shortcuts for switching/navigating between the views.

This component takes care of creating the button view-ports in its page header.

Each child element represents a view - and each one should have the AppView attached properties to give a title and icon to the view - so that it can be used as the text and icon for the view-port buttons. Some of the supported attached properties to be used are:

• AppView.title
• AppView.iconName
• AppView.badgeText

The badge item is handled by a MauiKit Badge control.

See also

Badge

AppView

The view ports as buttons in the header - the title is expanded for the current view on a wide mode, but compacted in a narrow space

AppViews
{
   id: _page
   anchors.fill: parent
   Controls.showCSD: true
   headBar.forceCenterMiddleContent: true
 
   Rectangle
   {
       AppView.title: "View1"
       AppView.iconName: "love"
 
       color: "blue"
   }
 
   Rectangle
   {
       AppView.title: "View2"
       AppView.iconName: "folder"
       AppView.badgeText: "30"
       color: "pink"
   }
 
   Rectangle
   {
       AppView.title: "View3"
       AppView.iconName: "tag"
 
       color: "blue"
   }
}

Notes

Positioning & Behaviours

There is not need to set the size or position of the child elements aka "views" - this component will take care of positioning them in the order they have been declared.

If a child-item or a "view" is hidden via the visible property, then it is also hidden for the view port buttons.

By default this component is not interactive with touch gestures, in order to not steal focus from other horizontal flickable elements - however you can enable it manually.

See also

interactive

Performance

Ideally do not add too many views, that are loaded simultaneously, since it will affect the application startup time. Instead you can load the views dinamically by using a Loader or the friend control AppViewLoader, which will take care of much of the loading task.

See also

AppViewLoader

Besides taking longer to load - too many views - will also make the header bar too busy with the view-port buttons. This can also be tweaked by setting the maximum number of views visible - the other ones will be tucked away into an overflow menu.

See also

maxViews

Inheritance & Shortcuts

This component inherits for the MauiKit Page control, so you can customize it by using the same properties that can be applied to a Page, such as moving the header to the bottom, adding extra toolbars, enabling the pull-back behaviours, etc.

See also

Page

The first four [4] views can be navigated by using keyboard shortcuts: [Ctrl + 1] [Ctrl + 2] [Ctrl + 3] [Ctrl + 4]

You can find a more complete example at this link.

Definition at line 108 of file AppViews.qml.

Property Documentation

content

alias AppViews::content

read

All the child items declared will become part of the views.

For each child element to be visible in the view port buttons, you need to use the AppView attached properties.

See also

AppView The content layout is handled by a swipe view.

Remarks

This is the default property

Definition at line 116 of file AppViews.qml.

count

int AppViews::count

read

The total amount of items/views.

Definition at line 131 of file AppViews.qml.

currentIndex

int AppViews::currentIndex

read

The index number of the current view.

Definition at line 121 of file AppViews.qml.

currentItem

Item AppViews::currentItem

read

The current item in the view.

Definition at line 126 of file AppViews.qml.

history

QtObject AppViews::history

read

The private object that handles the history workflow.

Warning

This is a private property and can not be accesed

Definition at line 155 of file AppViews.qml.

interactive

bool AppViews::interactive

read

Sets the views to be interactive by using touch gestures to flick between them.

Definition at line 136 of file AppViews.qml.

maxViews

int AppViews::maxViews

read

Maximum number of views to be shown in the view port buttons at the header bar.

The rest of views buttons will be collapsed into a menu button. By default the maximum number is set to 4.

Definition at line 145 of file AppViews.qml.

Member Function Documentation

goBack()

void AppViews::goBack

(

)

A quick function to request the control to go back to the previously visited view.

A history of visited views is kept, and invoking this method will pop the history one by one .

---

The documentation for this class was generated from the following file:

• AppViews.qml