A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

QML Thiago Lacerda openbossa - INdT. Por quê? Muito código necessário, quando se usa a antiga API de UI do Qt (GraphicsView) Diminuindo a velocidade para.

Apresentações semelhantes


Apresentação em tema: "QML Thiago Lacerda openbossa - INdT. Por quê? Muito código necessário, quando se usa a antiga API de UI do Qt (GraphicsView) Diminuindo a velocidade para."— Transcrição da apresentação:

1 QML Thiago Lacerda openbossa - INdT

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

20 Signals e Handlers Cada propriedade do QML tem seu signal Consequentemente, cada signal da propriedade, também terá seu handler Formato: on 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 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


Carregar ppt "QML Thiago Lacerda openbossa - INdT. Por quê? Muito código necessário, quando se usa a antiga API de UI do Qt (GraphicsView) Diminuindo a velocidade para."

Apresentações semelhantes


Anúncios Google