QML

1. Thiago Lacerda openbossa - INdT QML

2. Por quê? • Muito código necessário, quando se usa a antiga API de UI do Qt (GraphicsView) • Diminuindo a velocidade para criar UIs • Qualquer modificação == compilar código

3. O que é QML? • Introduzido no Qt 4.7 • Linguagem declarativa para criar UIs ricas • Descreve a “cara” da UI, assim como seu comportamento • UI é tratada como uma arvóre de objetos, com propriedades • (colocar exemplo de properties)

4. Benefícios • Facilidade para criar UIs ricas • Menos código • Totalmente integrada com o Qt • Integrada com JavaScript • Fácil para modularizar o código • Estreita a relação entre os desenvolvedores e designers • Plugins • Sem compilação

5. Tipos básicos do QML • bool • int • string • real • variant • url • color • date

6. Tipos básicos do QML • double • list • point • rect • time • ...

7. Elementos básicos do QML • Item • Component • QtObject

8. Elementos gráficos e textuais • Text • Image • BorderImage

9. Mouse e interação • MouseArea • Flickable • Keys

10. Posicionadores e repetidores • Column • Row • Grid • Repeater

11. Anchor Layout • Define relações entre as âncoras dos itens • Poder posicionar os itens usando o conceito de âncoras

12. Anchor Layout • Exemplo

13. Propriedades • Componentes QML tem propriedades que podem ser lidas e modificadas por outros objetos • Propriedades podem ser criadas pelo desenvolvedor

14. Property Binding • Faz um “bind” do valor de uma propriade, para ter sempre o valor de outra propriedade • O valor da propriedade é automaticamente atualizado, caso o valor da outra seja mudado

15. Property Binding • Qualquer expressão JavaScript também pode ser usado • Acessar propriedades de objetos, chamar funções e usar objetos JavaScript (built-in)

16. Elements and Objects as Property Values • O “binding” também pode ser feito com objetos • Tenha cuidado quando referenciar o pai de um objeto que está sendo usado como “binding”

17. Property Aliases • Não aloca espaço para essa propriedades to tipo “alias” • Conecta a nova propriedade diretamente com outra (como um túnel) • Tem o mesmo tipo da propriedade destino

18. Elemento Binding • Usado para assegurar que a propriedade “target” sempre terá um determinado valor • O “binding” nunca é perdido

19. Signals e Handlers • Signals: Mesmo conceito do Qt • Cada sinal tem o seu handler, sempre no formato: on<signalName>

20. Signals e Handlers • Cada propriedade do QML tem seu signal • Consequentemente, cada signal da propriedade, também terá seu handler • Formato: on<propertyName>Changed

21. Eventos de Mouse • Signals e handlers para interagir com eventos de mouse • Elemento MouseArea • Signals • pressed • clicked • canceled • doubleClicked • released

22. Eventos de Mouse • Exemplo

23. Eventos de Mouse • Os handlers da MouseArea recebem um MouseEvent como parâmetro • Com ele podemos • Saber que botão do mouse foi apertado • Posição do mouse • Objeto “mouse”

24. Criando Componentes • Componente é algum elemento QML que pode ser instanciado • Geralmente definido em um arquivo .qml • Reutilização de código

25. Criando Componentes • Exemplo:

26. Criando Componentes • Componentes criados no mesmo diretório são vistos sem problemas • Quando utilizar dentro de outro arquivo, o nome deve ser igual ao usado para nomear o arquivo • Component.onCompleted e Component.onDestruction • Handlers usados para fazer alguma ação quando o componente acaba de ser carregado ou destruído

27. Criando Componentes • Componentes também podem ser definidos dentro do próprio Item • Criação feita com o método createObject

28. Estados • Componentes podem ter vários estados • Dependendo do estado, algumas ações podem ser tomadas, propriedades mudadas, etc. • Exemplo: um sinal de trânsito • Conjunto de propriedades definidas em um elemento State

29. Estados • Elementos de um State • PropertyChanges • StateGroup • StateChangeScript • ParentChange • AnchorsChanges • Propriedade state é sempre presente em um Item • Item sempre inicia no estado “default”

30. Criando Estados

31. Criando Estados • Estados podem ser ativados de acordo com alguma condição, usando a propriedade “when”

32. Animações e Transições • Durante mudança de estados, podemos querer mudanças animadas nas propriedades • Para animar entre mudança de estados, usamos o elemento Transition • Animações • SequentialAnimation • ParallelAnimation • Behavior • PropertyAction • ScriptAction

33. Animações e Transições • Animação de propriedades • PropertyAnimation • NumberAnimation • ParentAnimation • AnchorAnimation

34. Animações e Transições • Exemplo

35. Animações e Transições • Exemplo

36. Views e Models • Views são coleções de itens • Views do QML • ListView • GridView • PathView • WebView

37. View e Models • Você diz como será cada item da sua view • Delegate • O model deve ser fornecido para lista preencher seu conteúdo • Possibilidade de exportar seus models em C++ para o QML

38. Views e Models • ListModel • Hierarquia de elementos com “roles”

39. Views e Models • XmlListModel • Constrói um model através de um arquivo XML • Roles são especificados pelo XmlRole

40. Views e Models • Exemplo

41. Criando Tipos • Tipos mais complexos podem ser criados no C++ e exportados pro QML • Herdam de QObject • Plugins são utilizados para isso

42. Criando Tipos • Primeiro cria-se uma classe que herda de QDeclarativeExtensionPlugin • Crie seu tipo, derivando de QObject e exporte as propriedade usando a macro Q_PROPERTY • Registre seu tipo com o método registerTypes() • Exporte seu plugin usando a macro Q_EXPORT_PLUGIN2 • Crie um arquivo qmldir, para expor seu plugin e seus tipos QML

43. Criando Tipos • Criando seu tipo

44. Criando Tipos • Exemplo de Plugin

45. Criando Tipos • Depois dos passos anteriores podemos no QML fazer

46. Criando Tipos • Maneira mais fácil de criar um plugin • Wizard do QtCreator • Cria seu arquivo .pro • Cria o esqueleto do seu plugin • Cria o qmldir • Cria seu tipo inicial