Getting Started Programming with QML/pt-BR: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
h2. Começando a programar com QML
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}


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+''.
== Começando a programar com QML ==
<br />h3. QML para criar Interfaces de Usuário
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+''.
<br />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 &quot;Sistema Qt de Meta-Objetos&amp;quot;: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.
<br />[[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor5_editmenu.png|QML Example Code]]
<br />Para executar o código de exemplo em QML, apenas proveja o arquivo arquivo QML como argumento para a ferramenta &quot;qmlviewer&amp;quot;: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:<br /># Definindo um Botão e um Menu<br /># Implementando uma Barra de Menu<br /># Criando um Editor de Texto<br /># Decorando o Editor de Texto<br /># Extendendo QML usando 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 [http://doc.qt.nokia.com/4.7/metaobjects.html 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.
 
[[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor5_editmenu.png|QML Example Code]]
 
Para executar o código de exemplo em QML, apenas proveja o arquivo arquivo QML como argumento para a ferramenta [http://doc.qt.nokia.com/4.7/qmlviewer.html 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:
# 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 ===
=== Definindo um Botão e um Menu ===
Line 15: Line 24:
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.
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 &quot;Rectangle&amp;quot;:http://doc.qt.nokia.com/4.7/qml-rectangle.html. O Rectangle tem propriedades para controlar a aparência e localização do elemento.
Em QML, o item visual básico é o elemento [http://doc.qt.nokia.com/4.7/qml-rectangle.html Rectangle]. O Rectangle tem propriedades para controlar a aparência e localização do elemento.


<code>import Qt 4.7
<code>import Qt 4.7


Rectangle {<br /> id: simplebutton<br /> color: &quot;grey&amp;quot;<br /> width: 400<br /> height: 200<br /> Text:<br />}<br /></code><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''.
Rectangle {
id: simplebutton
color: "grey"
width: 400
height: 200
Text:
}
</code>
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.
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.
Line 31: Line 48:
=== Usando Modelos de Dados e Interfaces ===
=== Usando Modelos de Dados e Interfaces ===


QML possui diferentes &quot;interfaces&amp;quot;:http://doc.qt.nokia.com/4.7/qdeclarativemodels.html que exibem diferentes &quot;modelos de dados&amp;quot;: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 &quot;VisualItemModel&amp;quot;: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 &quot;ListModel&amp;quot;:http://doc.qt.nokia.com/4.7/qml-listmodel.html, precisam de um representante para exibir seus dados.
QML possui diferentes [http://doc.qt.nokia.com/4.7/qdeclarativemodels.html interfaces] que exibem diferentes [http://doc.qt.nokia.com/4.7/qdeclarativemodels.html 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 [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html VisualItemModel] contêm itens que já possuem interfaces, tais como elementos Rectangle e elementos UI importados. Outros tipos de modelos, tais como o elemento [http://doc.qt.nokia.com/4.7/qml-listmodel.html 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 &quot;ListView&amp;quot;: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 /><code><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 /></code>
Nós declaramos dois itens visuais no menuListModel, o FileMenu e o EditMenu. Nós personalizamos os dois menus e os exibimos usando um [http://doc.qt.nokia.com/4.7/qml-listview.html ListView]. O arquivo Menubar.qlm contêm a declaração QML e um simples menu de edição é definido em EditMenu.qml.
<code>
VisualItemModel{
id: menuListModel
FileMenu{
width: menuListView.width
height: menuBar.height
color: fileColor
}
EditMenu{
color: editColor
width: menuListView.width
height: menuBar.height
}
}
</code>


O elemento &quot;ListView&amp;quot;: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.
O elemento [http://doc.qt.nokia.com/4.7/qml-listview.html 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.


<code><br />ListView{<br /> id: menuListView
<code>
ListView{
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
//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<br /> model: menuListModel
//the model contains the data
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 /></code>
//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
}
</code>


(…)
(…)

Latest revision as of 16:12, 4 May 2015

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++

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

(…)

Extendendo QML usando Qt C++