Programação com OpenGL/QT Quick Game Programing: diferenças entre revisões

[edição verificada][edição verificada]
Conteúdo apagado Conteúdo adicionado
Linha 77:
 
=== Olá em QML ===
 
Para ter um melhor entendimento do QML, vamos começar uma implementação bem simples de
um aplicação QML:
 
<source lang="cpp">
import QtQuick 1.0
Rectangle {
id: panel
width: 400
height: 200
color: "# D0D0D0
 
Qt Quick Game Programming © 2010 QUIt Coding
Text {
id: helloText
text: "Hello QML!"
color: "red"
font.pointSize: 24
anchors.centerIn: parent
}
}
</source>
 
Como você pode ver, a sintaxe é bem semelhante a JSON com a maior parte com pares de "propriedade : valor"
Vamos agora conhecer cada parte para compreender o básico.
<source lang="cpp">
import QtQuick 1.0
</source>
 
Nesta linha importaremos os tipo de QML (Rectange, Image, ...) que vem com o Qt
e em todos os arquivos QML e sempre começaremos com esta linha. No Qt 4.7.0 a linha correta para usar
seria "import Qt 4.7", mas desde do Qt 4.7.1 "QtQuick" será usado no lugar.
Especificar o numero de versão é importante por questão de compatibilidade. isto garante que o
comportamento do código não ficará diferente em cada linguagem QML que será expandida no futuro
com novos elementos e recursos. Alguns recursos da novas versões não pode ser usado sempre, se disponível.
O numero de versão também deve ser usado depois de importar algum componente modificado.
Faremos mais algumas chamada assim nos capítulos seguintes.
<source lang="cpp">
Rectangle {
id: panel
width: 400
height: 200
color: "#D0D0D0"
</source>
Isto cria um retangulo com 400 pixel de largura e 200 pixel de altura.
Daremos a este retangulo uma id chamada "panel" to poder referencia-lo em outros lugares.
as cores usadas para preencher o retangulo é em RGB "#D0D0D0" (Cinza claro)
 
<source lang="cpp">
Text {
id: helloText
text: "Hello QML!"
color: "red"
font.pointSize: 24
anchors.centerIn: parent
}
</source>
 
Depois vamos criar um novo elemento Text, dentro do no retangulo. que será incializado com um "Olá QML!" em vermelho com fonte
de 24pt de tamanho, e será ancorado no centro do retangulo.
Ancorando itens relativo a outros elementos é dos poderosos recursos do QML
e faz um layout fácil e intuitivo.
Para rodar este exemplo, save ele como "hello.qml" e use o qmlviewer
o binário será provido pelo Qt SDK:
<source lang="bash">
kaj@T61KG:~/qml_hello$ qmlviewer hello.qml
</source>
Você verá que o texto em vermelho está no centro de um retangulo cinza claro, semelhante a este:
 
Claro que isto é apenas a demonstração superficial do que o QML pode fazer, depois aprofundaremos mais.
Todos nós precisamos conhecer direito agora que como escrever em QML é fácil e divertido!
 
=== Separaçao entre QML UI e a lógica da aplicação ===