Getting Started Programming with QML/pt-BR

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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

QML Example Code

Para executar o código de exemplo em QML, apenas proveja o arquivo arquivo QML como argumento para a ferramenta qmlviewer. 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:

1. Definindo um Botão e um Menu
2. Implementando uma Barra de Menu
3. Criando um Editor de Texto
4. Decorando o Editor de Texto
5. Extendendo QML usando Qt C++

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. O Rectangle tem propriedades para controlar a aparência e localização do elemento.

import Qt 4.7

Rectangle {
 id: simplebutton
 color: "grey"
 width: 400
 height: 200
 Text:
}

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 que exibem diferentes modelos de dados. 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 contêm itens que já possuem interfaces, tais como elementos Rectangle e elementos UI importados. Outros tipos de modelos, tais como o elemento ListModel, 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. O arquivo Menubar.qlm contêm a declaração QML e um simples menu de edição é definido em EditMenu.qml.

 VisualItemModel{
 id: menuListModel
 FileMenu{
 width: menuListView.width
 height: menuBar.height
 color: fileColor
 }
 EditMenu{
 color: editColor
 width: menuListView.width
 height: menuBar.height
 }
 }

O elemento ListView 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.

ListView{
 id: menuListView

//Anchors are set to react to window anchors
 anchors.fill:parent
 anchors.bottom: parent.bottom
 width:parent.width
 height: parent.height

//the model contains the data
 model: menuListModel

//control the movement of the menu switching
 snapMode: ListView.SnapOneItem
 orientation: ListView.Horizontal
 boundsBehavior: Flickable.StopAtBounds
 flickDeceleration: 5000
 highlightFollowsCurrentItem: true
 highlightMoveDuration:240
 highlightRangeMode: ListView.StrictlyEnforceRange
 }

(…)

Criando um Editor de Texto

(…)

Decorando o Editor de Texto

(…)