Today, we bring you a new report on the Maui Project progress.

Are you a developer and want to start developing cross-platform and convergent apps, targeting, among other things, the upcoming Linux Mobile devices? Then join us on Telegram: https://t.me/mauiproject.

If you are interested in testing this project and helping out with translations or documentation, you are also more than welcome.

The Maui Project is free software from the KDE Community developed by the Nitrux team.
This post contains some code snippets to give you an idea of how to use MauiKit. For more detailed documentation, get in touch with us or subscribe to the news feed to keep up to date with the upcoming tutorial.

We are present on Twitter and Mastodon:
https://twitter.com/maui_project
https://mastodon.technology/@mauiproject

 


New and better controls.

https://invent.kde.org/kde/mauikit

Some new controls added, and old ones have been reviewed, cleaned up, and improved.

MauiKit controls are based on Kirigami or QQC2 controls and expand upon them to meet our vision for a multiplatform, convergent environment. While some may have an equivalent in QQC2 and Kirigami, the equivalent does not fit our needs. Many controls were built from scratch to follow the Maui HIG, like the Page, ToolBar, SelectionBar, Dialog, AppViews, etc.. These provide responsive and dynamic sizing, flickable behavior and curated interaction patterns depending on device based-input (touch or mouse). MauiKit extends Kirigami in the same manner as Kirigami extends QQC2.

New Controls

The new controls we added help you to quickly build apps with user interfaces that work equally well on desktop and mobile platforms. MauiKit will automatically change the look and behavior of your app, depending on the platform it is running on.

One of the new additions is the AppViews control; this control handles the navigation of the application views and creates the extra controls that help to indicate and switch the views.

On touch devices, AppViews control works as a swipe view, which can is navigated using swipe gestures while on desktops; it works similarly to a stack view, in a more static way, using the indicator buttons.
Additionally, an AppViewLoader control has been added, which handles the dynamic creation of the views to avoid overloading the CPU or memory with too many views being loaded at the same time.

By default, AppViews displays four visible indicators in the header bar; if there are more than four views, those are listed under a “+” button into a popup menu.
By using the new attached properties AppView.title and AppView.iconName, the AppViews control takes care of creating the header bar indicator for each view, no matter what another control is being used in the AppsView: a Page, SwipeView or Rectangle, so think of the AppsView control as handling these:

  • the views indicators
  • the views interaction behavior
  • and Layout.
By using AppViews, you don’t have to worry about its navigation or about binding each view to different buttons, and MauiKit can better handle the style according to our Maui Human Interface Guidelines.
Below are a short code snippet and a demo of Vvave using this new control.

https://invent.kde.org/kde/mauikit/-/blob/master/src/controls/labs/AppViews.qml

import org.kde.mauikit 1.1 as maui

Maui.AppViews

{

  Page

  {

     Maui.AppView.title: “Gallery”

     Maui.AppView.iconName: “gallery”
    
     Kirigami.Theme.highlightColor: “pink”

  }

}

All the Maui apps that make use of this style of multi-view layout now utilize this control. The following is an example from vvave:

 

 

Another addition is the AltBrowser component, that next to the ListBrowser and GridBrowser, can be used to display contents with a few extra features, such a responsive sizing, lasso selection, and pinch gestures support, etc..
The new AltBrowser component makes use of the ListBrowser, and GridBrowser controls to switch between a grid or a list view automatically. You just need to set the list and grid delegate representations and indicate which view to use list or grid.
This new control is also now being used on the Maui Apps that allow viewing contents as a list or grid.

https://invent.kde.org/kde/mauikit/-/blob/master/src/controls/labs/AltBrowser.qml

 

The SettingsDialog is a new component to quickly craft a settings popup dialog, handling the UI and Layout of the dialog for you.
You can use it with the SettingsSection component, which can have a title and description labels; this complementary control makes internal use of the Kirigami FormLayout for a responsive layout.
A Kirigami FormLayout will manage the SettingsSection children, so its children should be positioned using the Layout attached properties.

https://invent.kde.org/kde/mauikit/-/blob/master/src/controls/labs/SettingsDialog.qml

import org.kde.mauikit 1.1 as MauiLab
import org.kde.kirigami 2.9 as Kirigami

MauiLab.SettingsDialog
{
            MauiLab.SettingsSection
            {
                title: qsTr("Navigation")
                description: qsTr("Configure the app plugins and behavior.")

                Switch
                {
                    icon.name: "image-preview"
                    checkable: true
                    checked:  root.showThumbnails
                    text: qsTr("Show Thumbnails")
                    onToggled:  root.showThumbnails = ! root.showThumbnails
                }

                Switch
                {
                    text: qsTr("Show Hidden Files")
                    checkable: true
                    checked:  root.showHiddenFiles
                    onToggled:  root.showHiddenFiles = !root.showHiddenFiles
                }

                Switch
                {
                    text: qsTr("Single Click")
                    checkable: true
                    checked:  root.singleClick
                    onToggled:
                    {
                        root.singleClick = !root.singleClick
                        Maui.FM.saveSettings("SINGLE_CLICK",  root.singleClick, "BROWSER")
                    }
                }

                Switch
                {
                    text: qsTr("Restore Session")
                    checkable: true
                    checked:  root.restoreSession
                    onToggled:
                    {
                        root.restoreSession = !root.restoreSession
                        Maui.FM.saveSettings("RESTORE_SESSION",  root.restoreSession, "BROWSER")
                    }
                }
            }

            MauiLab.SettingsSection
            {
                title: qsTr("Interface")
                description: qsTr("Configure the app UI.")

                Switch
                {
                    text: qsTr("Show Status Bar")
                    checkable: true
                    checked:  root.showStatusBar
                    onToggled:  root.showStatusBar = !root.showStatusBar
                }
            }
        }

 

 

Controls Updates:

The ToolActions control groups together a set of actions that are related, either by being autoexclusive between them or not.
It allows you also to mark a group of actions as checkable. Besides this, the ToolActions control can be collapsed on constrained spaces into a single button and then positioning the actions into a menu popup. The expanded and collapsed representations respect the auto exclusive and checkable properties.
The new updates to this control bring an improved look and feel by visually grouping the actions as joined buttons.
A few examples and an example code snippet:

https://invent.kde.org/kde/mauikit/-/blob/master/src/controls/ToolActions.qml

Maui.ToolBar
{
    leftContent: [
        
        Maui.ToolActions
        {
            expanded: true
            autoExclusive: false
            checkable: false
            
            Action
            {
                icon.name: "go-previous"
                onTriggered : currentBrowser.goBack()
            }
            
            Action
            {
                icon.name: "go-next"
                onTriggered: currentBrowser.goNext()
            }
        },
        
        Maui.ToolActions
        {
            id: _viewTypeGroup
            autoExclusive: true
            expanded: headBar.width > Kirigami.Units.gridUnit * 32
            currentIndex: Maui.FM.loadSettings("VIEW_TYPE", "BROWSER", Maui.FMList.LIST_VIEW)
            onCurrentIndexChanged:
            {
                if(currentTab && currentBrowser)
                currentBrowser.settings.viewType = currentIndex
                
                Maui.FM.saveSettings("VIEW_TYPE", currentIndex, "BROWSER")
            }
            
            Action
            {
                icon.name: "view-list-icons"
                text: qsTr("Grid")
                shortcut: "Ctrl+G"
            }
            
            Action
            {
                icon.name: "view-list-details"
                text: qsTr("List")
                shortcut: "Ctrl+L"
            }
            
            Action
            {
                icon.name: "view-file-columns"
                text: qsTr("Columns")
                shortcut: "Ctrl+M"
            }
        }
    ]
}

 

 

Nonexclusive and uncheckable undo and redo actions. Checkable and nonexclusive formatting actions.

Collapsed ToolActions (nonexclusive and uncheckable) – Expanded representation

 

The Maui ToolBar is flickable when its content size does not fit the available width; now, this scrolling behavior can be quickly triggered on the desktop via mouse input by the wheel handler.
Besides this helpful feature, the implementation of this control has been curated and tweaked for better performance.

The Page control got a pleasant update to its header bar, besides having a header bar that can be dynamically moved to the bottom for accessibility on phones, it can also now react to content not clipping behind it, by making it blurry.
So, to make use of this new control, the page content must not be clipping.

The AboutDialog now picks the application developer credits; you just need to set such meta-information using the single instance of MauiApp, like this:
MauiApp::instance()->setCredits ({QVariantMap({{"name", "Camilo Higuita"}, {"email", "milo.h@aol.com"}, {"year", "2019-2020"}}),
                QVariantMap({{"name", "Anupam Basak"}, {"email", "anupam.basak27@gmail.com"}, {"year", "2019-2020"}})});

 

 

 

The List and Grid templates: ListItemDelegate, GridItemTemplate, and ItemDelegate and more specific GridBrowserDelegate, ListBrowserDelegate, LabelDelegate, and ListDelegate, now allow for prototyping more powerful delegates quickly.
These delegates have a standard layout of an icon or image and some information labels, and also can accept more content like a regular QQC2 layout,  depending on the grid(ColumnLayout) or list(RowLayout) representation, and can have a checkable state to allow multiselection quickly.
With recent updates, their sizes are more responsive according to the amount of information being shown, and space such information takes. As a result, the delegates are not oversized for no good reason.
The update also brings these fixes:
  • The image source and the icon source properties handle their sizing separately.
  • Better highlight and checked states.
  • Allows to being quickly dragged, just need to set the drag metadata information, and set them as draggable, and they are ready to interact with external apps or other drop areas.
The responsive size of the list delegate is shown below; if there is no text in the second row, the height is adapted( Index items with right size info vs. not info), the size is adjusted automatically.

 

 

The Apps

All the apps making use of the multiselection pattern now have the selection button in the application header bar for quick access, this makes more sense on touch devices, so for other input-driven devices, this is hidden by default, since their selection can be made by lasso or keyboard shortcuts.
Vvave, Pix, and Nota now have keyboard shortcuts for multiselection and some other quick actions, as fast saving files, opening files, marking as a favorite, and browsing images.

Nota

https://invent.kde.org/kde/nota

Nota now has multiselection keyboard shortcuts; the sidebar now integrates with the rest of the selection and selection bar.

This update brings a new settings dialog to configure the editor options and other features, such as line numbers, embedded terminal, syntax highlighting, and fonts.

VVave

https://invent.kde.org/kde/vvave

Delegates have been cleaned up and are now much lighter by making full use of MauiKit templated delegates.

Pix

https://invent.kde.org/kde/maui-pix

Pix received fixes to the viewer, and the thumbnails rollbar now can be scrolled by using the wheel handler, this comes thanks to Kirigami <3

Index

https://invent.kde.org/kde/index

Index now supports independent embedded terminals per browser view; this means that you can use a terminal per split view and per tabs, allowing you to be more efficient when hacking:

Also, the Columns view now has a proper scrollbar at the bottom for better scrolling between the multiple path columns

Station

https://invent.kde.org/kde/maui-station

Station now correctly closes open tabs, and the split views work as expected.

It also now uses the MauiKit ToolActions.

Library

https://invent.kde.org/kde/maui-library

Library has been updated to latest MauiKit version and makes use of the new and updated controls, such as AltBrowser, ToolActions, and AppViews

The Maui Style

The Maui Style is meant to be used more widely now, is going to cover the AppImages, Windows, macOS, and Android; therefore some fixes have been added for such platforms, such as better sizes for non-touch devices and consistency in the highlighting style:

Better MenuItem styling, ToolButton and TextField size consistency, TextField style on placeholder text for focus mode.

We added a better overlay state when a popup in modal mode is opened.

Supported platforms

For Windows and macOS, now Vvave, Index, and Nota correctly display the application icon.

On Android, Index now correctly lists the external storage SD cards.

In Progress and Testing

In progress is support for dark mode on significant platforms, like in Android, Windows, and macOS; on Linux, you have even better color scheme functionality.

There is also some initial work on testing the usage of KIO on macOS and Windows for Android; however, it is still not a possible option due to the platform restrictions, the same for IOS.

Also in progress is the TabsView control, to allow the quick creation of pages with tabs support and orderable tabs. This will be a great inclusion since a few Maui Apps currently implement this separately, like Index, Station, and Nota.
Client-Side decorations give much more freedom to designers and developers to create stunning user interfaces. Qt 5.15 support for CSD will be better, and new support has been added, and some tests have been performed, and some apps would look even more beautiful with such features, such as Pix and Vvave. This video shows these features we are testing:

 

The translucency effect, this is for fun purposes and proof of concept, but very helpful to know it is possible

Join the discussion 5 Comments

  • thomas says:

    Hi, I really like Maui and have several questions.

    1. By checking the Discover app it looks to me that currently Kirigami doesn’t look good on desktop, it feels like a mobile app. From the screenshots it looks like Maui might fix this problem. So is Maui that flexible to cover both mobile and desktop environments?

    2. Why not merge Maui and Kirigami? Maybe you could find some common ground, is it really worth to have 2 separate projects because of some small design differences?

    3. Why did you choose a GPL license and not LGPL like Kirigami? I think it makes it unusable for a project that uses a permissive license like MIT or BSD.

    4. Do you plan to push Maui Kit to Debian?

    Thanks

    • Camilo Higuita says:

      1- That’s our main goal: true convergence, the same app for mobile and desktop, and not a stripped-down version for mobile and powerful one for desktop.
      2- Kirigami is a much wider toolkit while MauiKit is more focused, so there will be things we at Nitrux we will want to include that won’t fit Kirigami, therefore we have MauiKit, for such independent controls. The projects will evolve and merge or diverge in some aspects, I don’t see nothing wrong on that.
      3- The license is to be reviewed, but I myself haven’t got time to do it properly.
      4- We will distribute Maui Apps as AppImages for Linux, some other distros already have packages in their repos, like Neon, Manjaro, and OpenSuse. Besides that we will also distribute APKs, EXE and App packages, which is a handful, so we will need help from the community to reach other distributions.

Leave a Reply

© 2017-2020 Some Rights Reserved. Made with ♥ by Nitrux Latinoamericana S.C.