Desenvolvendo Widgets QML para o KDE PlasmaIX Conferência Latino-Americana de Software Livre – Out/2012 Sandro Andrade Agenda KDE

● Novos requisitos para UX's ● e QML ● KDE Plasma ● Plasma Widgets ● Seu Plasma Widget em 20 minutos ● O Futuro

IX Conferência Latino-Americana de Software Livre – Out/2012 Novos requisitos para KDE UXs

Cross-platform Interfaces flúidas Desempenho em mobile Adaptabilidade Alta produtividade

IX Conferência Latino-Americana de Software Livre – Out/2012 Qt e QML KDE

● 17 anos de história ● Criado pela Trolltech ● Mais de 900 classes e funcionalidades em diversas áreas, além de GUIs ● Adquirido pela em 2008 ● LGPL, Free Qt Foundation e Open Governance ● Adquirido pela Digia em 2012 ● Versão 5.0 Beta 2 já disponível

IX Conferência Latino-Americana de Software Livre – Out/2012 Qt e QML KDE

● 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

IX Conferência Latino-Americana de Software Livre – Out/2012 Qt e QML KDE

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);

IX Conferência Latino-Americana de Software Livre – Out/2012 Qt e QML KDE

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

IX Conferência Latino-Americana de Software Livre – Out/2012 Qt e QML KDE

● 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

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

● O que é o Plasma ?

Para o usuário final Para o desenvolvedor

Workspace padrão do KDE Application Framework para desenvolvimento de UXs

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

● Plasma Desktop

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

● Plasma Netbook

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

● Plasma Active

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

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

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

● 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

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

● 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

IX Conferência Latino-Americana de Software Livre – Out/2012 Seu Plasma Widget em 20 KDE minutos

● Estrutura geral de um Plasma Widget:

/metadata.desktop ● /contents/main/ui/main.qml

IX Conferência Latino-Americana de Software Livre – Out/2012 Seu Plasma Widget em 20 KDE minutos

● metadata.desktop

[Desktop Entry] Name=Hello QML X-KDE-PluginInfo-Website=http://br.kde.org/ Comment=A hello world widget in QML X-KDE-PluginInfo-Category=Examples Icon=chronometer X-KDE-PluginInfo-Name=org..hello-qml

X-KDE-PluginInfo-Version=0.0 X-Plasma-API=declarativeappletscript

X-Plasma-MainScript=ui/main.qml X-KDE-PluginInfo-Depends= X-Plasma-DefaultSize=200,100 X-KDE-PluginInfo-License=GPL

X-KDE-PluginInfo-EnabledByDefault=true X-KDE-PluginInfo-Author=Frederik Gladhorn X-KDE-ServiceTypes=Plasma/Applet [email protected] Type=Service

IX Conferência Latino-Americana de Software Livre – Out/2012 Seu Plasma Widget em 20 KDE 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 } }

IX Conferência Latino-Americana de Software Livre – Out/2012 Seu Plasma Widget em 20 KDE minutos

● Testando seu widget:

● plasmoidviewer ● Instalando:

● Plasmapkg -i (-u)

IX Conferência Latino-Americana de Software Livre – Out/2012 Seu Plasma Widget em 20 KDE minutos

● Um leitor simples de feeds RSS

● Data Sources ● plasmaengineexplorer

Plasma Plasma Plasma Widget 1 Widget 2 Widget 3

Plasma Data Engine

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

● 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

IX Conferência Latino-Americana de Software Livre – Out/2012 Mini-curso de QML KDE

● Amanhã ● 10h as 13h ● Espaço Argentina – Laboratório 2 ● Lamarque Souza

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

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

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