Getting Started Programming with QML/pt-BR

h2. 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+.
h3. 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":http://doc.qt.nokia.com/4.7/metaobjects.html, 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":http://doc.qt.nokia.com/4.7/qmlviewer.html. 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++

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":http://doc.qt.nokia.com/4.7/qml-rectangle.html. O Rectangle tem propriedades para controlar a aparência e localização do elemento.

import Qt 4.7

Rectangle {<br /> id: simplebutton<br /> color: &quot;grey&amp;quot;<br /> width: 400<br /> height: 200<br /> Text:<br />}<br />

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":http://doc.qt.nokia.com/4.7/qdeclarativemodels.html que exibem diferentes "modelos de dados":http://doc.qt.nokia.com/4.7/qdeclarativemodels.html. 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":http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html contêm itens que já possuem interfaces, tais como elementos Rectangle e elementos UI importados. Outros tipos de modelos, tais como o elemento "ListModel":http://doc.qt.nokia.com/4.7/qml-listmodel.html, 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":http://doc.qt.nokia.com/4.7/qml-listview.html. O arquivo Menubar.qlm contêm a declaração QML e um simples menu de edição é definido em EditMenu.qml.

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

O elemento "ListView":http://doc.qt.nokia.com/4.7/qml-listview.html 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.

<br />ListView{<br /> id: menuListView

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

//the model contains the data<br /> model: menuListModel

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

(…)

Criando um Editor de Texto

(…)

Decorando o Editor de Texto

(…)