topic Re: Material Design in ArcGIS AppStudio Questions

Material Design

GarethWalters3 — Tue, 04 Apr 2017 06:13:25 GMT

Hi everyone,

Now that the Material/Universal design components have moved to core QML controls, can you use them in AppStudio 1.4.18?

I have managed to color a rectangle but the theme and accent color is not working as expected.

In MyApp.qml:

import QtQuick 2.5

import QtQuick.Controls 2.1

import QtQuick.Controls.Material 2.1

import ArcGIS.AppFramework 1.0

App {

    width: 400

    height: 640

    Material.theme: Material.Light

    Material.accent: Material.Blue

    MaterialRectangle {

MaterialRectangle.qml

import QtQuick 2.5

import QtQuick.Controls 2.1

import QtQuick.Controls.Material 2.1

import ArcGIS.AppFramework 1.0

Rectangle {

    width: 400

    height: 640

    color: Material.color(Material.Teal)

    Material.theme: Material.Light

    Material.accent: Material.Yellow

    property int theValue

    Switch {

        id: switch1

        x: 143

        y: 161

        text: qsTr("Switch")

        checked: theValue >= 50

        enabled: theValue >= 50

    Dial {

        id: dial

        x: 108

        y: 228

        from: 0

        to: 100

        value: theValue

        onValueChanged: theValue = parseInt(dial.position * 100)

        Label {

            anchors.centerIn: parent

            text: theValue

            font.pointSize: 35

    SpinBox {

        id: spinBox

        x: 130

        y: 450

        value: theValue

        onValueChanged: dial.value = value

If I'm missing something, great. However, in the help from Qt it says that QQuickStyle needs to be set to ("Material"). Is this value the culprit? If not, is there a simple fix?

Material Style | Qt Quick Controls 2 5.8

Styling Qt Quick Controls 2 | Qt Quick Controls 2 5.8

Marika Vertzonis‌ Shobana Suresh‌ Stephen Quan any info would be greatly appreciated.

Cheers,

"Bruce"

Re: Material Design

StephenQuan1 — Tue, 04 Apr 2017 21:41:45 GMT

Regarding AppStudio 1.4.18, on desktop platforms, you can launch your app with the command line argument argument:

./app -style material

Alternatively, use Local Make to create C++ project files so that you can use QQuickStyle in the main.cpp:

QQuickStyle::setStyle("Material");

then build your app with Qt Creator.

Reference:

Qt5.8 > Styling Qt Quick Controls 2.

Re: Material Design

GarethWalters3 — Wed, 05 Apr 2017 23:21:26 GMT

Thanks for that Steve. Got it working on desktop to prove it works, however really need it on the other platforms. Will have to way up if the style is worth implementing local make just for this, because the cloud builder is so convenient.

Couldn't that be set as a property and then AppRun could know what to do, just like it does with the App width and height.

Perhaps a property of App could be QuickStyle: Enums.QuickStyleMaterial ?

Cheers,

Gareth

Re: Material Design

ShobanaSuresh — Wed, 05 Apr 2017 23:56:58 GMT

Gareth,

You could try adding a new environment variable QT_QUICK_CONTROLS_STYLE with value "material" in AppStudio Settings -> Environment.

Supported Environment Variables in Qt Quick Controls 2 | Qt Quick Controls 2 5.8

Qt documentation says "The style must be configured before loading QML that imports Qt Quick Controls 2. It is not possible to change the style after the QML types have been registered."

So, please try to delay load the QML file that imports "Qt Quick Controls 2" possibly using Loader.

Unfortunately this is a limitation in AppStudio 1.4. In the next release of AppStudio, there will be a way to configure the app's style. For e.g., if a file named qtquickcontrols2.conf is present in the app's root folder, both AppRun and apps built with AppMake will use this configuration file for setting the app's style.

Qt Quick Controls 2 Configuration File | Qt Quick Controls 2 5.8

Thanks

Shobana

cc: stephen_quan‌