desenvolvendo widgets qml para o kde plasma

IX Conferência Latino-Americana de Software Livre – Out/2012

Desenvolvendo Widgets QML para o KDE Plasma Sandro Andrade


KDEAgenda

● Novos requisitos para UX's

● Qt e QML

● KDE Plasma

● Plasma Widgets

● Seu Plasma Widget em 20 minutos

● O Futuro


KDE

Cross-platformInterfaces flúidas

Desempenho em mobileAdaptabilidade

Alta produtividade

Novos requisitos para UXs


KDEQt e QML

● 17 anos de história

● Criado pela Trolltech

● Mais de 900 classes e funcionalidades em diversas áreas, além de GUIs

● Adquirido pela Nokia em 2008

● LGPL, Free Qt Foundation e Open Governance

● Adquirido pela Digia em 2012

● Versão 5.0 Beta 2 já disponível


KDEQt e QML

● Porque Qt ?● Cross-platform● Excelente produtividade● Excelente desempenho● Ampla documentação● Comunidade ativa e parte de um grande ecossistema● Utilizado pelo Skype, Autodesk, Google, VLC, VirtualBox, dentre

muitos outros● Possibilidade de uso com outras linguagens


KDEQt e QML

UXs com Qt - Opção 1 (Qt Widgets)

gridLayout = new QGridLayout(Form); label = new QLabel(Form); gridLayout->addWidget(label, 0, 0, 1, 2); lineEdit = new QLineEdit(Form); gridLayout->addWidget(lineEdit, 0, 2, 1, 2); horizontalSpacer = new QSpacerItem(121, 20, QSizePolicy::Expanding, QSizePolicy::Minimum); gridLayout->addItem(horizontalSpacer, 1, 0, 1, 1); pushButton = new QPushButton(Form); gridLayout->addWidget(pushButton, 1, 1, 1, 2); pushButton_2 = new QPushButton(Form); gridLayout->addWidget(pushButton_2, 1, 3, 1, 1);


KDEQt e QML

UXs com Qt - Opção 2 (QML)

Rectangle { width: 360; height: 180; color: "#343434" Grid { columns: 2 spacing: 10 Text { id: text text: "Enter your password:"; color: "white"; font.bold: true } ...


KDEQt e QML

● Porque QML ?● Maior produtividade● Fácil de aprender● Excelente desempenho● Boa documentação● Melhor integração com o trabalho dos designers● Facilmente integrável com C++, se necessário

● Componentes mais complexos para UXs ainda estão sendo desenvolvidos


KDEKDE Plasma

● O que é o Plasma ?

Para o desenvolvedor

Application Frameworkpara desenvolvimento

de UXs

Para o usuário final

Workspace padrão do KDE


KDEKDE Plasma

● Plasma Desktop


KDEKDE Plasma

● Plasma Netbook


KDEKDE Plasma

● Plasma Active


KDEKDE Plasma

● Porque KDE Plasma ?● Extremamente configurável

– Seis layouts diferentes

● Excelente desempenho● Amplo uso de QML● 90% do código é compartilhado entre os diferentes “flavours”● Diversas plataformas-alvo:

– Desktops, netbooks, tablets

– No futuro: GPS's, setup boxes, TVs, veículos, geladeiras, ...


KDEPlasma Widgets

● O que são Plasma Widgets ?● Mini-aplicações que podem ser executadas no workspace, panel

ou qualquer outro containment do Plasma● 128 widgets diferentes oficialmente distribuídos pelo KDE● Muitos outros desenvolvidos pela comunidade


KDEPlasma Widgets

● Histórico do desenvolvimento de Plasma Widgets:● 1a geração:

– Desenvolvidos em C++

● 2a geração:– Desenvolvidos em JavaScript, Python ou Ruby

● 3a geração (recomendação atual do KDE):– Desenvolvidos em QML + JavaScript


KDESeu Plasma Widget em 20 minutos● Estrutura geral de um Plasma Widget:

● <seu-widget>/metadata.desktop● <seu-widget>/contents/main/ui/main.qml


KDESeu Plasma Widget em 20 minutos● metadata.desktop

[Desktop Entry]Name=Hello QMLComment=A hello world widget in QMLIcon=chronometer X-Plasma-API=declarativeappletscriptX-Plasma-MainScript=ui/main.qmlX-Plasma-DefaultSize=200,100 X-KDE-PluginInfo-Author=Frederik [email protected]

X-KDE-PluginInfo-Website=http://br.kde.org/X-KDE-PluginInfo-Category=ExamplesX-KDE-PluginInfo-Name=org.kde.hello-qmlX-KDE-PluginInfo-Version=0.0 X-KDE-PluginInfo-Depends=X-KDE-PluginInfo-License=GPLX-KDE-PluginInfo-EnabledByDefault=trueX-KDE-ServiceTypes=Plasma/AppletType=Service


KDESeu Plasma Widget em 20 minutos● main.qml

import QtQuick 1.0import org.kde.plasma.graphicswidgets 0.1 as PlasmaWidgets Item { width: 64 height: 64 PlasmaWidgets.IconWidget { id: icon Component.onCompleted: setIcon("flag-red") anchors.centerIn: parent }}


KDESeu Plasma Widget em 20 minutos● Testando seu widget:

● plasmoidviewer <caminho-para-raiz-do-widget>

● Instalando:● Plasmapkg -i (-u) <caminho-para-raiz-do-widget>


KDESeu Plasma Widget em 20 minutos● Um leitor simples de feeds RSS

● Data Sources● plasmaengineexplorer

PlasmaData Engine

PlasmaWidget 1

PlasmaWidget 2

PlasmaWidget 3


KDEO Futuro

● QML como tecnologia promissora para interfaces flúidas cross-platform

● KDE Plasma como application framework para desenvolvimento de UXs em diversos form factors

● Muitas novidades com o KDE Frameworks 5:● Melhor modularização● Melhor desempenho● Número ilimitado de dispositivos-alvo


KDEMini-curso de QML

● Amanhã

● 10h as 13h

● Espaço Argentina – Laboratório 2

● Lamarque Souza


KDE

Perguntas ? [email protected] / @andradesandro http://www.kde.org / http://br.kde.org

mailto:sandroandrade@kde

http://www.kde.org/

desenvolvendo widgets qml para o kde plasma

Technology