Nessa aula vamos apresentar o editor de QML do Qt Creator, que permite a rápida prototipação de interfaces e até mesmo aplicativos completos.
Esse material é baseado na documentação do Qt Quick disponível em: http://qt-project.org/wiki/Qt_Quick.
Em aulas anteriores vimos que é possível desenvolver interfaces de duas formas distintas:
Nessa aula vamos descrever como usar o editor do Qt Create para criar documentos QML a partir do módulo Qt Quick 2.2 do Qt5.
O Qt Quick é um arcabouço desenvolvido e mantido pelo Projeto Qt, que se tornou disponível a partir do Qt 4.7. O Qt Quick é baseado em uma linguagem declarativa que permite a construcão de interfaces dinâmicas, com transições fluidas e efeitos, comuns atualmente em dispositivos móveis. Essa linguagem é chamada de QML (Qt Modeling Language).
O QML é interpretado pelo módulo Qt Declarative, um interpretador que executa interfaces descritas em QML. Uma grande vantagem dessa linguagem é que ela não requer conhecimento de C++.
O Qt Creator é um ambiente visual para desenvolver interfaces usando Qt Quick e que oferece:
O QML é uma linguagem declarativa para definição de interfaces que facilita a integração entre JavaScript e objetos do Qt (QObjects). O QML é baseado em elementos gráficos ao invés de widgets. A versão atual oferece mais de 80 elementos. Dentre os tipos mais usuais podemos citar:
Uma interface descrita em QML deve utilizar elementos gráficos para definir a aparência da interface e outros elementos como de interação e estado que definem o comportamento da interface. Esses elementos são estruturados na forma de uma árvore de objetos com propriedades. As propriedades dos elementos é definida usando JavaScript.
Abra o Qt Creator. A figura abaixo mostra a janela inicial do Qt Creator 3.1
em um computador apple rodando Mac OS X.
Agora vamos criar um esqueleto de um aplicativo em QML.
Clique em File --> New File or Project. Uma janela como
abaixo deve aparecer. Selecione Applications e Qt Quick
UI e então clique no botão Choose.
Você deve escolher um nome para o applicativo e definir
também o diretório onde ele vai ser colocado.
Por exemplo, o proj1 será criado no
diretório qt.
Na próxima janela, selecione o QuickQt 2.2, como mostrado abaixo:
O Qt Create permite que o projeto seja adicionado como subprojeto de
outro projeto Qt ou colocar o seu projeto sob um controlador de
versão, como o git. Embora a gente recomende que você utilize
controle de versão, nessa aula vamos continuar sem e simplesmente
clique no botão Done.
Pronto!
O Qt Create deve mostrar agora no editor um esqueleto como abaixo.
O código do esqueleto é reproduzido abaixo.
import QtQuick 2.2
Rectangle {
width: 360
height: 360
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
Text {
anchors.centerIn: parent
text: "Hello World"
}
}
Observe que um programa em QML começa com um import dos pacotes necessários, nesse caso, o "QtQuick 2.2.".
Lembre-se que uma interface descrita em QML é descrita na forma de uma árvore de elementos. Nesse exemplo, o Rectangle, que é um elemento visual do Qt Quick, será a janela principal e a raiz da árvore. O Rectangle contém, dentro dele, dois outros elementos: o MouseArea e o Text.
Nesse código, as propriedades width e height do Rectangle recebem o valor 360. Esses valores, à esquerda do caractere ':' (dois pontos), podem ser definidos usando código em JavaScript. É importante saber que esses valores, ao invés de serem atribuídos, são referênciados. No caso de atribuições, os valores das propriedades seriam definidos no instante da atribuição, e esse valor não é mais alterado até uma segunda atribuição. No caso de uma referência, sempre que um valor associado a expressão JavaScript utilizado para definir a propriedade mudar, o valor da propriedade também é mudado (atualizado).
O MouseArea do Rectangle é um elemento de interação, que define uma área que recebe a entrada do mouse. Nesse caso, essa área ocupa toda aregião do elemento pai (o Rectangle) e, quando o elemento é clicado (recebe um clique do mouse), a aplicação é fechada.
O Text é um elemento visual que exibe texto. Nesse caso, o texto "Hello World" é exibido no centro do Rectangle.
Para testar esse aplicativo, basta clicar no triângulo verde na coluna
da esquerda do Qt Create, ou
Agora que você testou a sua instalação, clique aqui para aprender um pouco mais sobre como
prototipar interfaces usando o Qt Quick e QML.
