The Unusual Suspect: Layouts for sleeker KDE applications
-
Upload
openbossa -
Category
Technology
-
view
1.094 -
download
0
description
Transcript of The Unusual Suspect: Layouts for sleeker KDE applications
![Page 1: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/1.jpg)
The Unusual Suspect:
Layouts for sleeker KDE applications
Caio Marcelo de Oliveira FilhoEduardo Madeira FleuryJuly 6th, 2009
![Page 2: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/2.jpg)
Who are we?
• Nokia research institute in Brazil – INdT
• openBossa – FOSS stream at INdT
• Collaborating with Qt Software / KDE:
- Qt Kinetic that's us :-)←
- Qt Webkit
- Plasma Netbook
- ItemViews-NG
![Page 3: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/3.jpg)
Background
• Fluid and Rich UIs have become a standard
• Collaborative work: designers and developers
• Several initiatives to enhance KDE looks
- High level
- Low level
• Layouting tools needed to evolve
![Page 4: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/4.jpg)
Layouts in Qt
• Engine that handles geometry of items
• Widgets can use layouts to manage its children
• Today: Linear, Grid, Stacked and Form
![Page 5: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/5.jpg)
Covered in this presentation
• Flexible Layouts
• Custom Layouts
• Application of Layouts and Widgets
• Multiple Layouts
• Integration with Declarative UI
![Page 6: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/6.jpg)
FLEXIBLE LAYOUTS
![Page 7: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/7.jpg)
Flexible Layouts
• Layout behavior based on its configuration
• Designers can interact with the layout
• More power, less layouts
• AnchorLayout available at Qt Gitorious
• Edje relative positioning is similar
![Page 8: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/8.jpg)
CUSTOM LAYOUTS
![Page 9: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/9.jpg)
Custom Layouts
• Layout behavior rules based on its engine
• Developers implement custom algorithms
• Abstract / Hide internal decisions
• Powerful handling of item addition / removal
• Internal animations
![Page 10: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/10.jpg)
Usage of Flexible vs Custom
• C++: Call methods x Create subclass
• Call methods: Good for high level tool or QML
• Subclasses: More control, require a developer
![Page 11: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/11.jpg)
LAYOUTSOR
CONTAINER WIDGETS
![Page 12: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/12.jpg)
Container Widgets
• Also responsible for children geometries
• Usually create its own items
• ItemViews: “delegates” or “item creators”
• Can be flexible too (e.g. ItemViews-NG)
• Container Widget = Engine + Widget Factory
![Page 13: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/13.jpg)
Layouts or Container Widgets?
• Layouts handle child widgets
• Container Widgets handle data (e.g. models)
• Container Widget = Layout + Widget Factory
![Page 14: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/14.jpg)
MULTIPLE LAYOUTS
![Page 15: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/15.jpg)
Multiple Layouts
• Application screens are dynamic
• Different states associated to the interface
• Single set of widgets, multiple layouts
• Animate from one layout to another
![Page 16: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/16.jpg)
DECLARATIVE UI INTEGRATION
![Page 17: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/17.jpg)
Declarative UI Integration
• Layouts are declarative!
• Layout integration still in discussion
• Use property propagation to “anchor” items
• Support for layouts would be useful:
- Different layouts
- Optimization
![Page 18: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/18.jpg)
Thank you! :-)
![Page 19: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/19.jpg)
Qt Labs America
• Qt / KDE place in America, starting in Brazil
• Promotion and mentoring of FOSS projects
• Tech-days in universities
• Working together with KDE
![Page 20: The Unusual Suspect: Layouts for sleeker KDE applications](https://reader036.fdocuments.us/reader036/viewer/2022081806/54b74f3d4a79592b5b8b459c/html5/thumbnails/20.jpg)
Caio Marcelo de Oliveira [email protected]
Eduardo Madeira [email protected]
http://eduardofleury.com
Freenode #qt-kinetic