1. IX Conferência Latino-Americana de Software Livre – Out/2012
Desenvolvendo Widgets QML
para o KDE Plasma Sandro Andrade
2. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEAgenda
● Novos requisitos para UX's
● Qt e QML
● KDE Plasma
● Plasma Widgets
● Seu Plasma Widget em 20 minutos
● O Futuro
3. IX Conferência Latino-Americana de Software Livre – Out/2012
KDE
Cross-platform
Interfaces flúidas
Desempenho em mobile
Adaptabilidade
Alta produtividade
Novos requisitos para
UXs
4. IX Conferência Latino-Americana de Software Livre – Out/2012
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
5. IX Conferência Latino-Americana de Software Livre – Out/2012
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
6. IX Conferência Latino-Americana de Software Livre – Out/2012
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);
7. IX Conferência Latino-Americana de Software Livre – Out/2012
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
}
...
8. IX Conferência Latino-Americana de Software Livre – Out/2012
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
9. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEKDE Plasma
● O que é o Plasma ?
Para o desenvolvedor
Application Framework
para desenvolvimento
de UXs
Para o usuário final
Workspace padrão do KDE
10. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEKDE Plasma
● Plasma Desktop
11. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEKDE Plasma
● Plasma Netbook
12. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEKDE Plasma
● Plasma Active
13. IX Conferência Latino-Americana de Software Livre – Out/2012
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,...
14. IX Conferência Latino-Americana de Software Livre – Out/2012
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
15. IX Conferência Latino-Americana de Software Livre – Out/2012
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
16. IX Conferência Latino-Americana de Software Livre – Out/2012
KDESeu Plasma Widget em 20
minutos
● Estrutura geral de um Plasma Widget:
● <seu-widget>/metadata.desktop
● <seu-widget>/contents/main/ui/main.qml
17. IX Conferência Latino-Americana de Software Livre – Out/2012
KDESeu Plasma Widget em 20
minutos
● metadata.desktop
[Desktop Entry]
Name=Hello QML
Comment=A hello world widget in QML
Icon=chronometer
X-Plasma-API=declarativeappletscript
X-Plasma-MainScript=ui/main.qml
X-Plasma-DefaultSize=200,100
X-KDE-PluginInfo-Author=Frederik Gladhorn
X-KDE-PluginInfo-Email=gladhorn@kde.org
X-KDE-PluginInfo-Website=http://br.kde.org/
X-KDE-PluginInfo-Category=Examples
X-KDE-PluginInfo-Name=org.kde.hello-qml
X-KDE-PluginInfo-Version=0.0
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true
X-KDE-ServiceTypes=Plasma/Applet
Type=Service
18. IX Conferência Latino-Americana de Software Livre – Out/2012
KDESeu Plasma Widget em 20
minutos
● main.qml
import QtQuick 1.0
import 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
}
}
19. IX Conferência Latino-Americana de Software Livre – Out/2012
KDESeu Plasma Widget em 20
minutos
● Testando seu widget:
● plasmoidviewer <caminho-para-raiz-do-widget>
● Instalando:
● Plasmapkg -i (-u) <caminho-para-raiz-do-widget>
20. IX Conferência Latino-Americana de Software Livre – Out/2012
KDESeu Plasma Widget em 20
minutos
● Um leitor simples de feeds RSS
● Data Sources
● plasmaengineexplorer
Plasma
Data Engine
Plasma
Widget 1
Plasma
Widget 2
Plasma
Widget 3
21. IX Conferência Latino-Americana de Software Livre – Out/2012
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
22. IX Conferência Latino-Americana de Software Livre – Out/2012
KDEMini-curso de QML
● Amanhã
● 10h as 13h
● Espaço Argentina – Laboratório 2
● Lamarque Souza
23. IX Conferência Latino-Americana de Software Livre – Out/2012
KDE
Perguntas ?
sandroandrade@kde..org / @andradesandro
http://www.kde.org / http://br.kde.org