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.0ApplicationWindow {
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
-
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.