The Unusual Suspect: Layouts for sleeker KDE applications

Post on 15-Jan-2015

1.094 views 0 download

description

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.

Transcript of The Unusual Suspect: Layouts for sleeker KDE applications

The Unusual Suspect:

Layouts for sleeker KDE applications

Caio Marcelo de Oliveira FilhoEduardo Madeira FleuryJuly 6th, 2009

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

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

Layouts in Qt

• Engine that handles geometry of items

• Widgets can use layouts to manage its children

• Today: Linear, Grid, Stacked and Form

Covered in this presentation

• Flexible Layouts

• Custom Layouts

• Application of Layouts and Widgets

• Multiple Layouts

• Integration with Declarative UI

FLEXIBLE LAYOUTS

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

CUSTOM LAYOUTS

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

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

LAYOUTSOR

CONTAINER WIDGETS

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

Layouts or Container Widgets?

• Layouts handle child widgets

• Container Widgets handle data (e.g. models)

• Container Widget = Layout + Widget Factory

MULTIPLE LAYOUTS

Multiple Layouts

• Application screens are dynamic

• Different states associated to the interface

• Single set of widgets, multiple layouts

• Animate from one layout to another

DECLARATIVE UI INTEGRATION

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

Thank you! :-)

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

Caio Marcelo de Oliveira Filhocaio.oliveira@openbossa.org

Eduardo Madeira Fleuryeduardo.fleury@openbossa.org

http://eduardofleury.com

Freenode #qt-kinetic