Toying with QML StackView

I didn’t have time to program today, I had to attend to some issues that’s been piling up. So, basically what I did today was part of what I’m going to do in the application I’m building. Now that I got most of the puzzle complete I have to sit down and do some design decisions in the application on how I’m going to lay everything out:

  • Communication between objects
  • How to ensure responsiveness on different displays.
  • How to organize QML files, which is by far the hardest since I’m not that familiar with QML. There seems to be no standard way to organize the files you create.

Anyway, this is what I did today:

Code:

import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.2


StackView {


    id: stack
    initialItem: redview

    Component {
        id: redview
        Rectangle {
            id: reddy
            width: parent.width
            height: parent.height
            color: "red"
            border.color: "black"
            border.width: 3

            Text {
                id: blah
                color: "white"
                anchors.centerIn: parent

                text: qsTr("Jump to [lightblue view]")
 
            }
               MouseArea {
                    anchors.fill: parent
                    onClicked: stack.push(lightblueview)
                }


        }

    }

    Component {
        id: lightblueview

        Rectangle {
            id: bloo
            width: 400
            height: 500
            color: "lightblue"
            Text {
                id: blah
                color: "white"

                anchors.centerIn: parent
                text: qsTr("Jump to [red view]")
            }
            MouseArea {
                anchors.fill: parent
                onClicked: stack.push(redview)
            }
        }
    }

}

StackView isn’t that bad to use. It’s incredibly easy and the more I read it seems that I’m going to have a good time using it. Hopefully things will work out on my end.

I think QMLs only difficulty right now is actually knowing the all the attributes, members of each QtQuick control, dialog, UI element. I feel it’s really overwhelming.

My initial views on QML

My preconceived notions of technology have led me to really stupid decisions in the past. I’m a fool, a blithering fool.

With that opening I hope to at least share some thoughts on QML. My first view on QML wasn’t proper, it was all doom and gloom when I saw QML was some sort of hybrid monster coming to get you with JavaScript. And JavaScript have left me a bit bitter when it comes to debugging and organization in general, more towards debugging though. Debugging is what we do literally every day, there’s no such thing as write 300 LOCs and call it a day.

And I was led on with that thought, my dislike of JavaScript kept me away from trying QML for a while. Until I saw this introduction video.

After finishing the video there was this surge of ideas coming to me. What works? What doesn’t work? What should I try first? How to redistribute this later on? How to take care of cross-platform in a way that sucks less? Exciting times, really.

Now let me mention JavaFX for a moment before Sun Microsystem “killed it” in favor of a traditional API. QML and JavaFX shares similarities. QML, I feel, has the upper hand in some ways.


import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.geometry.Insets;
 
var list = ["apples", "bananas", "oranges", "pears", "cabbage"];
 
ScrollView {
  width: 250
  height: 250
  managed: false
  node: VBox {
    padding: Insets {top: 10, left: 10, bottom: 10, right: 10}
    spacing: 10
    content: [
      PasswordBox {promptText: "enter password"}
      Separator {}
      ChoiceBox {
        items: list
      }
      ListView {
        vertical: false
        items: list
      }
    ]
  }
}

Taken from Steve On Java

That was JavaFX before it got killed. I still remember when it was first announced I got all excited because building UI applications in Java wasn’t exactly a walk in the park. It was hard and there wasn’t a “best practice” guides to keep me informed on how to manage each guide and how to see each object. I feel like Qt documentation explains Qt Widgets UI elements way better than other UI toolkits I’ve used, which isn’t many by the way.

But, in a way JavaFX script shouldn’t have died.

On the other hand we have this beast the Qt Team developed. A scripting language that could communicate using JavaScript, QML, and C++ and the things it does blows my mind.

So, my initial views on that were; “My God, it’s going to be hell communicating with the C++ backend”. It turned out to be a not so bad experience. You could even expose C++ classes to the QML and register them, and even protect some of the methods you didn’t want to share.

Most importantly, the ability to make your application support scripting. Bringing a whole set of APIs in your core C++ application and expose it to JavaScript sounds like I’ve won a trip to Disney land with all expenses paid.

Wrapping it up, I’m hoping to cook something good for QML and I’m really looking forward to see what I can do!