Four column UI

jech

Hello,

I'm trying to do a UI part, that would consist of 4 vertical lists. But only 2 of them will be visible at the same time. Please have a look at this picture:
!http://img811.imageshack.us/img811/36/qml.png(Layout)!

I tried to do it using Flickable for horizontal movement and List View for the vertical lists. But I found two problems I can't solve.

When scrolling List View, it moves over other UI elements. I don't want this, the List View shouldn't overlap it's parent element (which is the Flickable)
The Flickable works OK, but I need it to snap to borders of the Vertical Lists. I haven't found any possibility to do that. Do I need to code this manually in JavaScript or is there another option?

Thank you.

2beers

based on your scheme the best thing is to use 2 ListView . One for horizontal movement and the other for vertical. Every element in horizontal ListView is a vertical ListView with witdth= screenSize/2

If you want to snap to the borders you do on horizonatal ListView:

@highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem;@

Let me know if this helps you

jech

Thank you! After some problems I basically managed to do what I intended. Except of one thing - the overlapping List View. I'll illustrate that on one simple example:

file: test.qml
@import Qt 4.7

Rectangle {
id: main
width: 640
height: 360
color: "#343434"

Rectangle {
    id: rectangle1
    x: 110
    y: 53
    width: 421
    height: 255
    color: "#888888"

    LibraryList { width: 320; anchors.bottom: parent.bottom; anchors.left: parent.left; anchors.top: parent.top }
}

}
@

file: LibraryList.qml
@import Qt 4.7

Item {
ListModel {
id: contactModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}

Component {
    id: contactDelegate
    Item {
        width: parent.width; height: 40
        Column {
            Text { text: '<b>Name:</b> ' + name }
            Text { text: '<b>Number:</b> ' + number }
        }
    }
}

ListView {
    anchors.fill: parent
    model: contactModel
    delegate: contactDelegate
    highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    focus: true
}

}@

I want to keep the List View inside the light square. But if I drag the list, it overlaps it.

If you wish, you can download the test files "here":http://www.mediafire.com/?wszwwuia2k82wuu

I just started playing with QML yesterday, so I'm probably doing some stupid things...

2beers

hi. based on your example I don;t see how you can move the list horizontal. as you for the listview to be inside the square just add:
clip:true;

@ LibraryList { clip:true; width: 320; anchors.bottom: parent.bottom; anchors.left: parent.left; anchors.top: parent.top }@

2beers

regarding your first post I modified you code. hope this is what you are looking for. try to move horizontal :)

here is the code: http://www.mediafire.com/?p952x8mpipz68oz

jech

Thank you. The example was only meant to show the overlapping problem.

I already solved the horizontal scrolling in a similar way as in your example. But your code is better. Thanks a lot for your help!

jech

If I could have one more question, there's still one thing which isn't clear to me. How do I enable the behavior that if I click an item in a List View, the item gets selected and highlighted?

I studied all the examples and documentation, but I couldn't find the answer. So far it seems to me, that I will have to code an "onClicked" signal handler that will take care of it. But I believe the List View component should be able to handle this automatically. I managed to enable selection change by keyboard arrows, but not by mouse click.

2beers

I think you need to do a MouseArea for delegated component also keep a property with the index number.

than you do something like this:

onClicked: myListView.index=componentIndex

Not sure if it's a predefined way of doing this.

awahlig

Digging this out because the clicking issue is very important and hasn't been fully answered.

I'm starting to play with QML right now and this is the solution I've found.

My delegate is somewhat simpler but it shows the idea. ListView adds a "ListView" property to the delegates. This property has a "view" attribute that points to the ListView component. Of course this could be replaced with an identifier if the ListView has one. Now, the trick is to use indexAt() with delegate position to get the index and set that to currentIndex. That's it, items can be clicked now and the highlight will move to them.

@
delegate: Text {
text: name + ": " + number

        MouseArea {
            anchors.fill: parent
            onClicked: {ListView.view.currentIndex = ListView.view.indexAt(parent.x, parent.y)}
        }
    }

@

jech

You can use "index" property of your delegate, it's better IMO. Simply replace ListView.view.indexAt(parent.x, parent.y) with just index.

awahlig

Even better, thanks.

I think we're missing some tutorials on QML. There is no place (at least I don't see one) where you could find such information, apart from looking at API reference and trying to put something together yourself.

It actually gets worse than that, this wiki page on Forum Nokia suggest a totally akward and verbose solution:
http://wiki.forum.nokia.com/index.php/Using_QML_ListView

QtWS: Early Bird Tickets Available!

Four column UI