The Unusual Suspect:
Layouts for sleeker KDE applications

Caio Marcelo de Oliveira Filho
Eduardo Madeira Fleury
July 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
LAYOUTS
       OR
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 Filho
 caio.oliveira@openbossa.org

  Eduardo Madeira Fleury
eduardo.fleury@openbossa.org
   http://eduardofleury.com

    Freenode #qt-kinetic

The Unusual Suspect: Layouts for sleeker KDE applications

  • 1.
    The Unusual Suspect: Layoutsfor 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 andRich 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 thispresentation • Flexible Layouts • Custom Layouts • Application of Layouts and Widgets • Multiple Layouts • Integration with Declarative UI
  • 6.
  • 7.
    Flexible Layouts • Layoutbehavior 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.
  • 9.
    Custom Layouts • Layoutbehavior rules based on its engine • Developers implement custom algorithms • Abstract / Hide internal decisions • Powerful handling of item addition / removal • Internal animations
  • 10.
    Usage of Flexiblevs 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 • Alsoresponsible 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 ContainerWidgets? • Layouts handle child widgets • Container Widgets handle data (e.g. models) • Container Widget = Layout + Widget Factory
  • 14.
  • 15.
    Multiple Layouts • Applicationscreens are dynamic • Different states associated to the interface • Single set of widgets, multiple layouts • Animate from one layout to another
  • 16.
  • 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.
  • 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 deOliveira Filho caio.oliveira@openbossa.org Eduardo Madeira Fleury eduardo.fleury@openbossa.org http://eduardofleury.com Freenode #qt-kinetic