kinetic-declarative plasma integration
Marco Martin
notmart at gmail.com
Fri May 15 21:53:51 CEST 2009
On Friday 15 May 2009, aaron.kennedy at nokia.com wrote:
> Hi Marco,
>
> On 15/05/09 11:34 PM, "ext Marco Martin" <notmart at gmail.com> wrote:
> > tanks a lot for the input on qmodels, i assumed the qt docs were missing
> > on that part, now i've generated them and i see..
> >
> > what i'm looking about specifically is seeing how feasible is to use
> > those list views in the gsoc i'm mentoring about a plasma based
> > mediacenter (well, depends also when we want to release something,
before
> > or after 4.6)
> >
> > so i'm looking on what we would need in that case:
> >
> > doesn't seems to be any way to set the currentIndex of any of the views
> > simply by clicking on an item (can implement a mouseRegion on the
> > delegate, but doesn't seem to be a way for the item to know what is its
> > index into the view?)
>
> Now you *have* found some limitations in our documentation :)
>
> You're correct in that the way to select an item on click is to have the
> delegate contain a MouseRegion that does it. By design we've tried to
> limit codifying "behavior" (like click to select) into our elements;
> preferring the flexibility of allowing the designer to define it as they
> see fit. Of course there is a balance to strike here - convenience vs
> flexibility - and whether or not we've got it right is another question.
>
> The index of an item is available magically to the delegate as the "index"
> context property. A delegate can check whether it is the current item by
> comparing its index to the list's currentIndex, or by using an "attached
> property". Attached properties are a concept we borrowed from Windows
> Presentation Foundation which allow one object to augment another with
> addition properties - in this case the ListView class adds a
> "ListView.isCurrentItem" property to the *root* element of the delegate.
neat, quite straightforward.
but i see that ListView has ListView.isCurrentItem GridView
GridView.isCurrentItem and so on..
i think would be better to have that property consistently named, like
ItemView.isCurrentItem so that would be easier moving delegates between
different list types? (maybe keeping the ListView.* if there are properties
specific of a particular view?)
what i've come up is attached, it's a first rough example of a view more or
less of the same shape i think we could be interested for the mediacenter
gsoc..
it shows some problems tough, they could be things that i did wrong or bugs..
the highlight covers first item while it's behind the other ones (this happens
in the shipped examples too) i guess wrong z value?
anchors, should be updated automatically? i have the icon with the property
anchors.horizontalCenter: parent.horizontalCenter, but when i make it bigger
the image is no longer centered: does the horizontal position have to be
explicitly updated in the state definition or should be done automatically?
and finally the last :) i enlarge the grid cells with key bindings, this works
except for a thing: the active item is in the state "Details", and when it
gets back to the normal state the size of the icon is not updated, and i think
it should, since the base width is defined from the cell size? (for inactive
items works fine)
i'm a bit in a nagging mode but i hope this kind of feedback will be useful ;)
Cheers,
MArco Martin
> I've attached a simple example that implements click to select, and also
> changes the selected item's color.
quite clarifying those two examples, probably if they would be shipped
alongside the other one it would be helpful :D
> > PathView doesn't seem to be controllable with the keyboard (even by
> > implementing KeyActions into the delegate and changing the active index
> > doesn't seem to work, but nothing automatic anyways)
>
> Having default keyboard behavior for a PathView is tricky - depending on
> the shape of the path you might want any one of the up/down/left/right keys
> to move forwards and backwards in the items. So we took the easy way out
> and left it up to the user :)
>
> I've attached an example showing how to use KeyActions to key left and
> right through the PathView items. This is one of the balancing acts I
> mentioned above where we feel that its a little too far to the
> flexible/inconvenient side - I expect that we'll probably eventually add a
> way of setting a default key behavior for PathView so that you don't have
> to do this every time.
>
> > is there a way for an item to notice when it becomes active and changing
> > its state as a consequence? i.e, having the active item maybe slightly
> > bigger and with more info, like the recipes example (but here the item
> > zooming is triggered by a mouse click)
>
> This is also demonstrated in the listview example I mention above.
>
> Cheers,
>
> Aaron
-------------- next part --------------
Rect {
width: 600; height: 300; color: "black"
Component {
id: PetHighlight
Rect { color: "#555555"
pen.width: 0
radius: 5}
}
Component {
id: PetDelegate
FocusRealm {
id: wrapper
width: List.cellWidth; height: List.cellHeight;
property real detailsOpacity : 0
VerticalLayout {
width: parent.width
y: 10
Image {
id: Pic
source: picture
width: List.cellWidth/1.2-mainText.height*3-10
height: List.cellWidth/1.2-mainText.height*3-10
filter: Reflection { }
anchors.horizontalCenter: parent.horizontalCenter
}
Text { id: mainText
color: "white"
text: 'Name: ' + name;
anchors.horizontalCenter: parent.horizontalCenter }
Item {
id: details
opacity: wrapper.detailsOpacity
width: parent.width
VerticalLayout {
Text { text: 'Type: ' + type; color:"white";
width: parent.width
hAlign:"AlignHCenter" }
Text { text: 'Age: ' + age; color:"white";
width: parent.width
hAlign:"AlignHCenter" }
}
}
}
MouseRegion {
id: pageMouse
anchors.fill: parent
onClicked: { List.currentIndex = index;}
}
KeyActions {
focus: true
return : "print('you pressed enter on '+name)"
digit1 : "List.cellWidth = List.cellWidth - 20;List.cellHeight = List.cellHeight - 20";
//FIXME: the icon size of the active item is not updated correctly
digit2 : "state='*';List.cellWidth = List.cellWidth + 20;List.cellHeight = List.cellHeight + 20;state='Details'";
}
states: [
State {
name: "Details"
when: List.currentIndex == index
//only in ListView?
when: wrapper.ListView.isCurrentItem
SetProperty { target: Pic; property: "width"; value: List.cellWidth-mainText.height*3-10}
SetProperty { target: Pic; property: "height"; value: List.cellWidth-mainText.height*3-10}
SetProperties { target: wrapper; detailsOpacity: 1; }
}
]
transitions: [
Transition {
// Make the state changes smooth
ParallelAnimation {
ColorAnimation { duration: 500 }
NumericAnimation {
duration: 300; properties: "detailsOpacity,x,yPosition,height,width,cellWidth,cellHeight"
}
}
}
]
}
}
GridView {
id: List
width: parent.width;
height: parent.height
model: MyListElementsModel;
delegate: PetDelegate
// orientation: Horizontal
highlight: PetHighlight
focus: true
flow: "TopToBottom"
}
/*PathView {
id: List
width: parent.width;
height: parent.height
model: MyPetsModel;
delegate: PetDelegate
// orientation: Horizontal
focus: true
path: Path {
startX: 120; startY: 100
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
}*/
ListModel {
id: MyListElementsModel
ListElement {
picture: "content/pics/pancakes.jpg"
name: "Polly"
type: "Parrot"
age: 12
size: "Small"
}
ListElement {
picture: "content/pics/fruit-salad.jpg"
name: "Penny"
type: "Turtle"
age: 4
size: "Small"
}
ListElement {
picture: "content/pics/hamburger.jpg"
name: "Warren"
type: "Rabbit"
age: 2
size: "Small"
}
ListElement {
picture: "content/pics/lemonade.jpg"
name: "Spot"
type: "Dog"
age: 9
size: "Medium"
}
ListElement {
picture: "content/pics/vegetable-soup.jpg"
name: "Whiskers"
type: "Cat"
age: 2
size: "Medium"
}
ListElement {
picture: "content/pics/fruit-salad.jpg"
name: "Joey"
type: "Kangaroo"
age: 1
size: "Medium"
}
ListElement {
picture: "content/pics/pancakes.jpg"
name: "Kimba"
type: "Bunny"
age: 65
size: "Large"
}
ListElement {
picture: "content/pics/lemonade.jpg"
name: "Rover"
type: "Dog"
age: 5
size: "Large"
}
ListElement {
picture: "content/pics/hamburger.jpg"
name: "Tiny"
type: "Elephant"
age: 15
size: "Large"
}
}
}
More information about the Plasma-devel
mailing list