Newbie help to creat a GUI with breadcrumbs

johnco3

Hello, this is my first post on the forum. I've been really struggling with trying to put a GUI application together (initially on the Windows desktop) using Qt Quick in the latest QT 5.1.1. Eventually, I will be porting this application to an embedded Linux based environment - but that is a ways off at this stage.

The GUI application consists of a breadcrumb bar in the top area (for which I used a ToolBar). The main content area of the application consists of a TabView with 3 left aligned horizontal tabs. The breadcrumbs always indicate the level that the user is at within a currently selected tab.

Each screen in the content area typically consists of ListViews of banded text and as the user selects a particular row of this text, the breadcrumb bar on the top of the screen follows. The areas where I am really puzzled are:

(1) How can I use a QML horizontally aligned tab widget without having to make a new C++ Widget extension (as far as I can tell, the TabView only supports top or bottom tabs, and I need my text tabs to be to the left in the content area). I will probably have to use 3 tab buttons and a rectangle to simulate a tab view.

(2) With the navigation described above, it seems like the StackView would be a good candidate for navigating back and forth through the breadcrumb bar - but I'm not sure how to anchor the breadcrumb content to just the content area of the screen.

(3) I have a very large C++ based project containing several data models that need to be displayed as ListViews in the content area. I cannot change this code as it is used with other output devices. I seem to recall that in order to bridge the gab between C++ and QML that I would need to extend public QAbstractListModel however I am not sure how I should build these extensions - do I just include them as CPP/H files with them QML?

Any guidance would be greatly appreciated. Shown below is my feeble attempt at a main.qml and also I attach a screenshot of what I am trying to achieve.

@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.0

ApplicationWindow {
id:root
title: "Honeywell (wADL)"
width: 480
height: 272

// this is the breadcrumb bar - make nice icons later
toolBar: ToolBar {
    RowLayout {
        Button { iconSource: "images/house_48.png"; text: "Home"}
        Button { iconSource: "images/house_48.png"; text: "LRU 1" }
        Button { iconSource: "images/house_48.png"; text: "Loads" }
        Item { Layout.fillWidth: true }
    }
}

StackView {
    id: stackView
    initialItem: componentPage
    delegate: StackViewDelegate {
        function transitionFinished(properties){
            properties.exitItem.opacity = 1
        }

        property Component pushTransition: StackViewTransition {
            PropertyAnimation {
                target: enterItem
                property: "opacity"
                from: 0; to: 1
            }
            PropertyAnimation {
                target: exitItem
                property: "opacity"
                from: 1; to: 0
            }
        }
    }
}

Component {
    id: componentPage
    ColumnLayout {
        Label {
            text:"Component loaded with index: " + parent.Stack.index
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
        }
        Label {
            text:"Component loaded with index: " + parent.Stack.index
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
        }
    }
}

RowLayout {
    id: navBar
    Rectangle {
        width: 120;
        ColumnLayout {
            anchors.fill: parent
            spacing: 2
            width: 80
            Button {
                text: "DataLoad"
            }
            Button {
                text: "Maint."
            }
            Button {
                text: "Settings"
            }
            Item { Layout.fillHeight: true }
        }
    }
    Rectangle {
        color: "white"
        Layout.fillWidth: true
    }
}

}
@

!https://www.dropbox.com/s/f3ccnsfovxinrhq/dataload-upload-select-loadset.png(GUI Screen)!

John

sierdzio

Sorry in advance for being concise, I don't have much time right now. Feel free to ask for clarification.

You can probably separate the tabs into a simple ListView (just hack it so that it looks like tabs), and then load the content of a given tab with Loader (or use States if you prefer)

I don't understand this bit, but I haven't read your post fully. Maybe I'll get back to this later. Just a hint: KDE project probably has some ready-made breadcrumb components.

OK this is quite complicated territory. I advise going step by step, carefully reading the documentation (it's really good, but it's hard to wrap your head around some concepts). Start with a simple QStringList as a model (just to get a feel of how it works) and then slowly start adapting your code so that it can handle your data models.