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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.