Now that KDE 4 has been available for some time, we can see that its good looks is one of its most appealing features. In the meanwhile, fluid and rich UIs became a standard in the mobile world. Together, these trends made users see their desktop from a new perspective, where software must go beyond functionality and look nice too. High level initiatives like the Plasma new generation desktop, KWin composite effects and the new Oxygen themes, as well as low level ones like the Qt Animation Framework and the Declarative UI, are enabling us to reach such high level of user experience, something that used to be a 'plus' but is now a 'must'. An often overlooked tool that helps making KDE aesthetically better is the Layouting mechanism. The simple idea of describing how things look instead of moving elements to hardcoded positions on the screen has great and unexplored potential. We want to show how KDE projects can take advantage of that. This talk will cover flexible layouts, self-animated layouts and animation between different layouts, recent features we have been developing for Qt framework, together with Qt Software. Subjects will include the use cases that drove us, implementation constraints we had, APIs, usage and the benefits that arise from the use of such technologies.

1. The Unusual Suspect:
Layouts for sleeker KDE applications
Caio Marcelo de Oliveira Filho
Eduardo Madeira Fleury
July 6th, 2009

2. 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

3. 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

4. Layouts in Qt
• Engine that handles geometry of items
• Widgets can use layouts to manage its children
• Today: Linear, Grid, Stacked and Form

5. Covered in this presentation
• Flexible Layouts
• Custom Layouts
• Application of Layouts and Widgets
• Multiple Layouts
• Integration with Declarative UI

6. FLEXIBLE LAYOUTS

7. 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

8. CUSTOM LAYOUTS

9. 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

10. 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

11. LAYOUTS
OR
CONTAINER WIDGETS

12. 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

13. Layouts or Container Widgets?
• Layouts handle child widgets
• Container Widgets handle data (e.g. models)
• Container Widget = Layout + Widget Factory

14. MULTIPLE LAYOUTS

15. Multiple Layouts
• Application screens are dynamic
• Different states associated to the interface
• Single set of widgets, multiple layouts
• Animate from one layout to another

16. DECLARATIVE UI INTEGRATION

17. 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

18. Thank you! :-)

19. 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

20. Caio Marcelo de Oliveira Filho
caio.oliveira@openbossa.org
Eduardo Madeira Fleury
eduardo.fleury@openbossa.org
http://eduardofleury.com
Freenode #qt-kinetic