Getting Started Programming with QML/pt-BR
Começando a programar com QML
Bem vindo ao mundo do QML, a linguagem de interface de usuário (UI) declarativa. Neste guia “Começando a programar”, nós iremos criar uma simples aplicação editor de texto usando QML. Após ler este guia, você estará pronto para desenvolver suas próprias aplicações usando QML e Qt C++.
QML para criar Interfaces de Usuário
A aplicação que nós estamos criando é um simples editor que irá carregar, salvar e fazer manipulação de texto. Este guia consiste de duas partes. A primeira parte envolve fazer o design do layout e comportamento da aplicação usando linguagem declarativa em QML. Para a segunda parte, carregar e salvar arquivos serão implementados usando Qt C++. Usando o Sistema Qt de Meta-Objetos [doc.qt.nokia.com], nós podemos expor as funções C++ como propriedades que a QML pode usar. Utilizando QML e Qt C++, podemos dissociar de maneira eficiente a lógica de inferface da lógica de aplicação.
Para executar o código de exemplo em QML, apenas proveja o arquivo arquivo QML como argumento para a ferramenta qmlviewer [doc.qt.nokia.com]. A parte de C++ deste tutorial assume que o leitor possui conhecimento básico dos procedimentos de compilação do Qt.
Capítulos do tutorial:
- Definindo um Botão e um Menu
- Implementando uma Barra de Menu
- Criando um Editor de Texto
- Decorando o Editor de Texto
- Extendendo QML usando Qt C++
Definindo um Botão e um Menu
Componente Básico – Botão
Iniciaremos nosso editor de texto criando um botão. Funcionalmente, um botão possui uma área sensível ao mouse e uma label. Botões realizam ações quando o usuário pressiona um botão.
Em QML, o item visual básico é o elemento Rectangle [doc.qt.nokia.com]. O Rectangle tem propriedades para controlar a aparência e localização do elemento.
Primeiramente, a sentença import Qt 4.7 permite a ferramenta qmlviewer importar elementos QML que iremos usar posteriormente. Essa linha deve existir para todo arquivo QML. Note que a versão dos módulos Qt é incluída na sentença import.
Este simples retângulo possui um identificador único, simplebutton, que é associado a propriedade id. As propriedades do elemento Rectangle são associadas a valores listando a propriedade, seguida de dois pontos (’:’), e então o valor. No código de exemplo, a cor cinza é associada a propriedade color do elemento Rectangle. Similarmente associamos a largura e altura do Rectangle.
(…)
Implementando uma Barra de Menu
Nossa aplicação de edição de texto precisará de um meio para exibir menus usando uma barra de menu. A barra de menu trocará os diferentes menus e o usuário pode escolher qual menu mostrar. Troca entre menus implica que os menus precisam de mais estrutura que simplesmente exibi-los em uma linha. QML usa modelos e interfaces para estruturar os dados e exibi-los de forma estruturada.
Usando Modelos de Dados e Interfaces
QML possui diferentes interfaces [doc.qt.nokia.com] que exibem diferentes modelos de dados [doc.qt.nokia.com]. Nossa barra de menu irá exibir os menus numa lista, com um cabeçalho que mostra uma fileira de nomes de menus. As listas dos menus são declaradas dentro de um VisualItemModel. O elemento VisualItemModel [doc.qt.nokia.com] contêm itens que já possuem interfaces, tais como elementos Rectangle e elementos UI importados. Outros tipos de modelos, tais como o elemento ListModel [doc.qt.nokia.com], precisam de um representante para exibir seus dados.
Nós declaramos dois itens visuais no menuListModel, o FileMenu e o EditMenu. Nós personalizamos os dois menus e os exibimos usando um ListView [doc.qt.nokia.com]. O arquivo Menubar.qlm contêm a declaração QML e um simples menu de edição é definido em EditMenu.qml.
O elemento ListView [doc.qt.nokia.com] exibirá um modelo de acordo com um representante. O representante pode declarar os itens do modelo para exibi-los em um elemento Linha ou exibe os itens em uma grade. Nosso menuListModel já possui itens visíveis, portanto, não precisamos declarar um representante.
(…)
Criando um Editor de Texto
(…)
Decorando o Editor de Texto
(…)
Extendendo QML usando Qt C++
(…)