Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Newbie help to creat a GUI with breadcrumbs



  • 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


  • Moderators

    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.


Log in to reply