You are on page 1of 87

E d i o 3

Janeiro-Fevereiro/2011

Primeiro captulo do livro: "Como pensar como um cientista da Computao"

C r ia n d o u m in s t a la d o r p a r a s u a s a p lic a e s c o m o InstallJammer

Ps no cho, cabea nas alturas...


Ah, os anos 80... Separando os psicodlicos anos 70 dos montonos anos 90. Esta msica do Ricardo Graa Melo foi tema do filme Garota Dourada, que tinha Marina que depois passou a ser conhecida como Marina Lima - no elenco. O filme era um romance despretensioso para adolescentes. A msica... bom meio fraquinha mas eu gostava na poca e... t bom, eu ainda gosto um pouco. O fato que cada vez que ouo a expresso "Cloud computing" ou "Computao nas nuvens" me vm mente o comeo daquela msica: "Ps no cho, cabea nas alturas...". No fcil. No que se refere tal da computao nas nuvens, concordo com a parte da cabea nas alturas, desde que mantidos os ps no cho. Ter dados como emails, textos, planilhas, fotos, etc. espalhados por servidores web, algo inevitvel, mas da at abrir mo de ter as minhas aplicaes e dados salvos na minha mquina existe uma distncia enorme. Em uma poca de grandes inovaes, natural que surjam "falsos profetas tecnolgicos", pregando conceitos que nos remetam a verdadeiras revolues. uma forma de conseguir a ateno para um assunto. Seja bem vinda a evoluo, mas certas coisas no precisam mudar to radicalmente. Nem tanto ao mar, nem tanto terra... Andr Vasconcelos

n d i ce
Primeira aula do Minicurso de Programao C++ com Qt (pgina 5)

Validar Entrada do Usurio (pgina 22) Editor Andr Luiz de Oliveira Vasconcelos Colaboradores Adriano H. Hedler Rafael Fassi Thiago Rossener Nogueira Frum QtBrasil InstallJammer (pgina 30) Iniciando na Programao com QML (pgina 41) Primeiro captulo do livro: Como pensar como um cientista da computao (pgina 74)

Minicurso de Programao C++ com Qt


"Quanto mais a gente ensina, mais aprende o que ensinou."
- Roberto Mendes & Jorge Portugal

Iniciar :: Minicurso de Programao C++ com Qt

deixar os "alunos" (se me permitem cham-los assim) prontos para passar para um prximo nvel de aprendizado, no qual a documentao do Qt e a experincia com a ferramenta sejam o bastante. Este curso ter basicamente trs fases, a saber: - Introduo programao em C++ - Orientao a Objetos com C++ - Desenvolvimento com Qt Nas duas primeiras fases so dedicadas exclusivamente ao aprendizado de C++, portanto no teremos contato algum com o Qt. Na ltima fase do curso, com o conhecimento de C++ adequado, passaremos ao desenvolvimento com Qt. Como eu costumava dizer quando dava aulas de informtica l pelos anos 90, no quero prosseguir com o curso enquanto exisitirem dvidas sobre o assunto de cada aula. Ento no vou definir um roteiro para o curso, ou definir prazos para o mesmo. Conto com o retorno dos alunos (por email) para ir ajustando o tempo e o contedo do curso. Para que possamos compartilhar as eventuais dvidas, sugestes, etc, criei um grupo especfico para este minicurso. Anote o endereo e o email do grupo: https://groups.google.com/group/professorvasconcelos?hl=pt-br professorvasconcelos@googlegroups.com

ma frase adequada para definir a filosofia da Revista Qt e a minha postura em relao ao pouco conhecimento ao qual tenho acesso. Compartilhando conhecimento, ao mesmo tempo em que exercitamos, estendemos a outros a oportunidade de aprender. Confirmando esta orientao da Revista Qt, estou publicando a partir desta edio, as aulas de um minicurso de programao em C++ com Qt. Voltado queles que queiram utilizar o Qt, conheam lgica de programao, mas no conheam a linguagem de programao C++, este curso abordar desde os aspectos fundamentais da programao nesta linguagem, passando por programao orientada a objetos at a criao e manuteno de projetos C++ com Qt. Para que tenhamos um melhor aproveitamento, as aulas tero um escopo mnimo e bem definido. Assim, cada assunto abordado ser esgotado atravs de vrios exemplos, demonstraes e exerccios. A ideia que tenhamos ao final de cada aula, o domnio do assunto objeto da mesma. bom destacar que este um "mini" curso, e portanto no tem a pretenso de cobrir TODOS os aspectos relacionados programao em C++, orientao a objetos ou ao Qt. A ideia

Revista Qt - Janeiro/Fevereiro-2011 [5 ]

Iniciar :: Minicurso de Programao C++ com Qt

Vamos combinar mais uma coisa: este canal - o grupo do Minicurso - deve ser usado apenas para questes relacionadas s aulas publicadas, ok? Para esta primeira fase no nosso curso, vamos precisar instalar e configurar em nossas mquinas o ambiente para desenvolvimento em C++. O compilador adotado ser o GCC para as plataformas Windows e Ubuntu Linux. Quem for utilizar o sistema operacional Windows precisa fazer o download do MinGW atravs do endereo: http://sourceforge.net/projects/mingw/

Quando concluir o download, execute o arquivo de instalao do MinGW. A primeira tela do instalador mostrada na figura 1.2:

figura 1.2 Clique no boto Next para continuar. A prxima tela apresenta ao usurio o aviso de que necessrio ter permisso de administrador para prosseguir com a instalao do MinGW (v. figura 1.3). figura 1.1

[6 ] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.3 O prximo passo na instalao permite que se instale verses mais atualizadas quando disponveis. Como acabamos de baixar o instalador, a verso selecionada j corresponde mais recente. Para continuar apenas clique no boto Next (figura 1.4).

figura 1.4 Na prxima tela (figura 1.5), temos a licena de uso do MinGW. Para prosseguir marque a opo "I accept the agreement", indicando que voc concorda com os termos da licena e clique novamente no boto Next.

Revista Qt - Janeiro/Fevereiro-2011 [7 ]

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.5 O prximo passo indicar ao instalador em qual diretrio dever ser instalado o MinGW. O diretrio sugerido pelo instalador o C:\MinGW. Quando a instalao for concluda, precisaremos desta informao para completar a configurao do nosso ambiente de desenvolvimento. Mais uma vez, clique no boto Next (figura 1.6).

figura 1.6 Na tela mostrada na figura 1.7, o usurio pode indicar um nome a ser usado no menu Iniciar do Windows para a pasta do MinGW. O nome sugerido pelo instalador MinGW mesmo. Caso no queira que o instalador crie uma opo para o MinGW no menu Iniciar do Windows, marque a opo "Don't create a Start Menu folder". Para prosseguir com a instalao clique no boto Next.

[8 ] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.7 O prximo passo da instalao permite que voc selecione componentes a serem instalados. Agora voc vai precisar fazer uma coisa antes de clicar no boto Next. Marque a opo C++ Compiler, que o motivo pelo qual estamos instalando o MinGW e depois... adivinha... clique no boto Next (figura 1.8).

figura 1.8 Finalmente o instalador nos apresenta um resumo das opes selecionadas nas telas anteriores e est pronto para iniciar a instalao propriamente dita, criando a estrutura de diretrios do MinGW com seus respecivos arquivos. Para iniciar o processo, clique no boto Install (figure 1.8).

Revista Qt - Janeiro/Fevereiro-2011 [9 ]

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.9 Durante o processo, o instalador exibir algumas informaes como a cpia e download de arquivos. Como sero feitos downloads de alguns arquivos, a velocidade da sua conexo com a Internet vai acabar determinando o tempo da instalao. Ao final do processo, ser apresentada a tela mostrada na figura 1.10.

figura 1.10 Pronto. O MinGW est instalado em sua mquina. Se voc aceitou a sugesto do instalador, o MinGW foi instalado no diretrio C:\MinGW. O compilador C++ que vamos usar em nosso curso, encontra-se no diretrio bin, dentro do diretrio MinGW (figura 1.11).

[10] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.11

Revista Qt - Janeiro/Fevereiro-2011 [11]

Iniciar :: Minicurso de Programao C++ com Qt

Agora voc precisa indicar ao Windows, o caminho para o compilador C++ do MinGW. Fazemos isso, alterando o contedo da varivel de ambiente PATH. Para ter acesso s variveis de ambiente do Windows, clique no menu Iniciar, selecione Painel de Controle -> Sistema -> Configuraes avanadas do sistema. Na janela "Propriedades do Sistema", clique no boto Variveis de Ambiente (figura 1.12).

Na janela "Variveis de Ambiente", selecione la varivel Path, na seo "Variveis do Sistema" (v. figura 1.13) e clique no boto Editar.

figura 1.12

figura 1.13

[12] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

Acrescente ;C:\MinGW\bin ao contedo do campo valor da varivel (v. figura 1.14). Clique no boto Ok e... pronto! Para saber se funcionou, abra uma janela do Prompt de Comando pela opo: Iniciar -> Acessrios -> Prompt de Comando e digite o comando mingw32-c++, Se tudo correu bem na instalao e configurao da varivel de ambiente Path, o sistema operacional dever emitir a mensagem: mingw32-c++: no input files, como mostra a figura 1.15. Isto encerra a configurao do nosso ambiente de desenvolvimento C++ no Windows.

figura 1.14

figura 1.15

Revista Qt - Janeiro/Fevereiro-2011 [13]

Iniciar :: Minicurso de Programao C++ com Qt

Agora a vez do Ubuntu Linux. A instalao do ambiente de desenvolvimento em C++ aqui ser mais simples do que no Windows. Basta executar o comando a seguir: $ sudo apt-get install build-essential Voc precisar ter a senha de root para executar esta operao. Para verificar se a instalao ocorreu com sucesso, voc pode executar o comando g++, como mostra a figura a seguir:

Bom, o ambiente para desenvolvimento em C++ est preparado, mas antes de comear a escrever nossos programas, precisamos definir qual o editor de textos utilizaremos. Existem muitas excelentes opes gratuitas de editores de texto prprios para o desenvolvimento em C++, mas como na terceira fase do nosso curso vamos enfatizar o desenvolvimento utilizando o Qt, acho uma boa idia adotar o editor do Qt Creator como editor oficial para o nosso curso. O Qt Creator na verdade muito mais do que apenas um editor de textos para programao em C++. uma IDE - Integrated Development Environment (Ambiente integrado de desenvolvimento). Neste curso, no entanto, utilizaremos apenas o editor, sem aproveitar as facilidades da IDE para criao e manuteno dos projetos. Com esta abordagem, conheceremos mais sobre os projetos em Qt, pois as IDEs "escondem" muito do trabalho envolvido no processo. como se estivssemos aprendendo a dirigir: usamos carros com cmbios manuais e no automticos. Depois que sabemos dirigir podemos optar por possuir um carro com cmbio automtico. De forma semelhante, depois que tiver domnio sobre o ambiente de desenvolvimento em Qt, voc pode (at deve) optar por usar as facilidades de uma IDE (como o Qt Creator). Como vamos precisar do Qt na terceira fase do curso, instale o Qt SDK, seguindo as instrues publicadas na primeira edio da Revista Qt (www.revistaqt.com).

figura 1.16 Se voc obteve o resultado acima, ento o compilador C++ e as bibliotecas de desenvolvimento em C e C++ foram devidamente instalados. A mensagem "g++: no input files" indica que voc executou o compilador sem indicar um arquivo a ser compilado. No se preocupe com isso agora. No final desta aula veremos como compilar um programa.

[14] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

Com o ambiente de desenvolvimento pronto e o editor de textos definido, podemos finalmente escrever o nosso primeiro programa em C++. Este programa apenas dever imprimir na tela a mensagem: "Funcionou!". No muita coisa, mas como primeiro programa j serve. Vamos l...Execute o Qt Creator (figura 1.17). Com o Qt Creator carregado, clique na opo File do Menu e selecione no menu a opo File e selecione a opo New File or Project (figura 1.18). Outra forma de fazer isso clicando a combinao de teclas Ctrl - N.

figura 1.18 Em seguida, na janela que vai ser aberta, selecione do lado esquerdo a opo C++ e do lado esquerdo a opo C++ Source File (figura 1.19). Depois de selecionar a opo "C++ Source File", clique no boto "Choose" para continuar. figura 1.17

Revista Qt - Janeiro/Fevereiro-2011 [15]

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.20 figura 1.19 Na prxma janela, voc deve informar o nome e a localizao do arquivo a ser criado. Para o nome, informe aula1.cpp e para a localizao informe o diretrio onde deseja criar o arquivo. Para facilitar referncias futuras, sugiro que crie um diretrio chamado minicurso e salve nele todos os arquivos criados nesta primeira fase do curso. No futuro, quando estivermos trabalhando com projetos de verdade, criaremos diretrios especicos para cada um deles. no meu caso, criei um diretrio chamado minicurso dentro de outro Documentos". diretrio chamado Projetos em "Meus

No caso do Ubuntu, criei um diretrio chamado minucurso dentro de um diretrio chamado Projetos em meu diretrio home. Depois de informados o nome do arquivo e sua localizao, clique no boto Next.

[16] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.22 Esta instruo identifica arquivos de cabealho a serem utilizados em nossos programas. Mais tarde veremos o que so arquivos de cabealho. Por ora, basta saber que esta a forma de utilizarmos em nossos programas, cdigos que esto declarados em outros arquivos. No caso do aula1, estamos usando o arquivo iostream que refere-se a uma biblioteca padro de C++ contendo funes para entrada e sada de dados. Usaremos neste programa, um objeto definido nesta biblioteca para sada de dados (impresso na tela do monitor de vdeo). A linha 2 foi deixada em branco para melhorar a legibilidade do programa, vejamos ento a linha 3: using namespace std;

figura 1.21 Clique no boto "Finish" para que o Qt Creator prossiga com a criao do arquivo aula1.cpp. O cdigo do nosso primeiro programa est na figura 1.22. Por enquanto voc pode no estar entendendo muito do cdigo, mas no se preocupe. Os programas apresentados neste curso sero explicados linha a linha. Na primeira linha do nosso programa temos a instruo: #include <iostream>

Revista Qt - Janeiro/Fevereiro-2011 [17]

Iniciar :: Minicurso de Programao C++ com Qt

Esta instruo serve para indicar que neste programa estamos A linha 8 foi deixada em branco e na linha 9 temos a instruo: usando o espao de nomes (namespace) chamado std. No futuro veremos o que vem a ser um espao de nomes (namespace). return 0; A linha 4 tambm foi deixada em branco, ento l vamos ns para Esta instruo indica que a funo main retorna o valor inteiro 0. a linha 5: Em alguns casos, podemos retornar valores diferentes de 0 para indicar situaes relacionadas ao encerramento do programa, int main (int argc, char * argv[]) como diferentes condies de erro. Veremos isto no futuro. Se isto lhe parece grego, no se preocupe. Com o decorrer do Salve o arquivo teclando CTRL - S e vamos compilar o nosso curso voc ir se familiarizando com a sintaxe do C/C++. Por pequeno programa. Veremos os procedimentos de compilao enquanto basta saber que esta linha declara uma funo no Windows e no Linux. chamada main. Este o ponto de entrada dos programas em C e em C++, a funo chamada automaticamente ao executar o programa. Na linha 6 temos um abre chaves - { - que indica o incio de um bloco de cdigo. Neste caso, o bloco que corresponde ao corpo da funo main. Na linha 10 temos o fecha chaves - } - indicando o final do bloco. Na linha 7 - primeira linha do corpo da funo main, temos a seguinte instruo: cout << "Funcionou!"; Esta instruo imprime na sada padro - a tela do monitor de vdeo - a mensagem "Funcionou!".

figura 1.23

[18] Revista Qt - Janeiro/Fevereiro-2011

Iniciar :: Minicurso de Programao C++ com Qt

figura 1.24 V para o diretrio onde voc salvou o arquivo aula1.cpp e execute o seguinte comando: g++ -o aula1 aula1.cpp Este comando executa o compilador gerando um arquivo executvel. O argumento "-o aula1" indica o nome do arquivo executvel que ser gerado. Neste caso, ser gerado um arquivo chamado aula1.exe. O segundo argumento o nome do arquivo a ser compilado aula1.cpp.

Revista Qt - Janeiro/Fevereiro-2011 [19]

Iniciar :: Minicurso de Programao C++ com Qt

O compilador emitiu algumas advertncias, mas por ora no precisamos nos preocupar com isso. Vejamos agora como compilar o programa na plataforma Linux. O procedimento bem semelhante: abra um terminal, v para o diretrio onde salvo o arquivo aula1.cpp e execute o seguinte comando: g++ -o aula1 aula1.cpp

O comando para compilao o mesmo que utilizamos na plataforma Windows, mas a tivemos diferenas na execuo. Para executar o programa digitamos "./aula1" ao invs de "aula1". Outra sutil diferena est no resultado da execuo. No Windows a mensagem foi impressa em uma linha vazia, enquanto no Linux a mensagem ficou junto com o prompt de comando. Em breve veremos como fazer para colocar uma quebra de linha aps uma mensagem impressa. O objetivo nesta primeira aula era: 1) preparar o ambiente para desenvolvimento em C++ (Ubuntu Linux ou Windows); 2) instalar o editor de textos que utilizaremos durante o curso para escrever nossos cdigos; 3) fazer um pequeno programa para confirmar que a plataforma de desenvolvimento est ok. A partir da prxima aula comearemos a estudar a linguagem C++ propriamente dita, e teremos exerccios para colocar nossos conhecimentos prova. Por enquanto, fiquem vontade para enviar seus emails para professorvasconcelos@googlegroups.com. At a prxima aula. Andr Luiz de Oliveira Vasconcelos

figura 1.25

[20] Revista Qt - Janeiro/Fevereiro-2011

maiores apresentaes: a finlandesa Nokia e a norte-americana Microsoft. A parceria define o Windows Phone como plataforma primria para os smartphones Nokia. Alm disso, as ferramentas da Microsoft devem ser usadas para desenvolvimento de aplicaes para os dispositivos Nokia com Windows Phone. Para a "comunidade" Qt, a notcia soou como "Nokia abandona o Qt". Uma nota publicada no blog oficial do Qt (http://blog.qt.nokia.com), pelo diretor de Ecosistema Qt, Daniel Kihlberg, relaciona alguns motivos que justificariam a manuteno do Qt pela Nokia. "Qt continuar a desempenhar um papel importante na Nokia", diz Kihlberg. Dentre os motivos, a manuteno de 200 milhes de usurios Symbian da Nokia e uma projeo da empresa para vender mais 150 milhes de dispositivos Symbian nos prximos anos. Alm disso, Kihlberg alega o crescimento do nmero de desenvolvedores em Qt em funo da tecnologia Qt Quick e do novo SDK da Nokia/Qt, a adoo do Qt por parte de outras importantes empresas, citando inclusive a Dreamworks. O objetivo da nota parece mais acalmar a "comunidade" Qt do que propriamente exclarecer o futuro do Qt dentro da Nokia. H quem especule que os planos sejam extinguir o Symbian, adotando o Windows Phone como plataforma nica. Enquanto isso na Sala de Justia... Um desenvolvedor romeno chamado Bogdan Vatra anuncia o lanamento da verso alfa de um "port" do Qt para o sistema Android (http://brlinux.org/2011/necessitas-qt-para-android-versao-alfa/). Esta implementao de Qt para Android, chamada de Necessitas Suite um projeto independente da Nokia e do Google. Revista Qt - Janeiro/Fevereiro-2011 [21]

Este ms foi anunciada uma parceria entra duas empresas gigantes que dispensam

Laboratrio :: Validar Entrada do Usurio

ratar erros de entrada do usurio costuma ser uma tarefa desgastante e que muitas vezes, ocupa Rafael grande parte do tempo de implementao de um software. Uma forma de reduzir o cdigo para Fassi tratamento de erros filtrar a entrada, no permitindo assim que o usurio consiga entrar com um Lobo valor invlido. Por exemplo: Para um campo de entrada QLineEdit que s pode receber um valor numrico inteiro, temos que impedir que o usurio possa digitar qualquer caractere que no seja um nmero O Rafael bacharel no intervalo de (0...9) ou um sinal de menos (-). em Engenharia Para isso, poderamos reimplementar o evento KeyPress para impedir a entrada de caracteres invlidos. Mas somente evitar que sejam digitados caracteres invlidos, muitas vezes no o suficiente para evitar entradas invlidas. Por exemplo: O usurio poderia digitar 92-1 o que no corresponde a um nmero inteiro vlido, pois o sinal de menos s poderia aparecer na primeira posio da string.

Mecatrnica e enviou este artigo sobre validao de entradas de dados como contribuio para a Revista Qt. Quem quiser segui-lo Para eliminar esse problema poderamos fazer uma rotina de validao que executada quando o no Twitter, o texto est sendo editado. Quando estamos implementando um software que contem muitos campos endereo : que devem ser filtrados, o trabalho de filtragem se torna muito cansativo e o cdigo muito grande. @Rafael_Fassi

Em muitos casos podemos usar mscaras de entrada, mas s vezes elas so limitadas ou no aplicveis.

Para resolver esse problema e simplificar nosso trabalho de validao da entrada, existe no Qt a classe abstrata QValidator que serve para validar entradas de texto. Desta se derivam trs subclasses, que so: QIntValidator Valida a entrada de nmeros inteiros. QDoubleValidator Valida a entrada de nmeros fracionrios. QRegExpValidator Valida a entrada com uma expresso regular personalizada.

[22] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: Validar Entrada do Usurio

Se quisermos que em um determinado QLineEdit o usurio s possa digitar um valor numrico inteiro poderamos usar o QIntValidator desta forma: QIntValidator *intValidator = new QIntValidator(this); QLineEdit *lineEdit = new QLineEdit(this); lineEdit->setValidator(intValidator); Vamos supor que estamos desenvolvendo um aplicativo de controle de vendas. Quando o vendedor selecionar um produto, uma varivel chamada QuantDisponivel ir indicar quantas unidades do produto esto disponveis no estoque. Queremos que o vendedor entre com a quantidade do produto a ser vendida em um QLineEdit. Mas precisamos evitar que ele digite algum valor que no seja um nmero inteiro. Tambm queremos evitar que o vendedor digite um valor acima da quantidade disponvel em estoque. Isso poderia ser implementado setando o range de QIntValidator desta forma: QIntValidator *intValidator = new QIntValidator(1, QuantDisponivel, this); Assim, estamos passando o range logo no construtor. Podemos tambm modificar o range utilizando as funes setRange, setButton ou setTop. Um recurso fantstico para a validao de entrada o QRegExpValidator. No vou entrar em detalhes sobre expresses regulares, mas um bom resumo pode ser encontrado em: http://guia-er.sourceforge.net/index.html Para demonstrar o QRegExpValidator, vamos supor que em um campo QLineEdit do nosso aplicativo, precisamos que o usurio digite um valor hexadecimal de 0 a FFFF. Para isso, podemos usar o QRegExpValidator assim:

Revista Qt - Janeiro/Fevereiro-2011 [23]

Laboratrio :: Validar Entrada do Usurio

QValidator *hexValidator = new QRegExpValidator(QRegExp("[0-9A-Fa-f]{1,4}"), this); Desta forma o usurio s poder digitar nmeros no intervalo de (0...9), letras minsculas (a...f) e maisculas (A...F). Para a expresso ser vlida ela dever ter no mnimo um dgito e s podero ser digitados no mximo 4 dgitos. Com a expresso regular, podem ser feitos os mais diversos tipos de validadores de entrada personalizados. Como outro exemplo de expresso regular, esta serve para entrada de horas no formato (hh:mm) "([01][0-9]|2[0-3]):[0-5][0-9]". Nossa entrada vai at 23h e 59m. Dessa forma se o primeiro dgito da hora for 0 ou 1, o segundo pode ir at nove, o que poderia ser (09h) ou (19h). Mas se o primeiro dgito for 2, o segundo s pode ir at 3 que seria o nosso mximo para hora (23h). Neste caso se utiliza o OU, que representado pelo smbolo (|). Ento, a hora pode ser: Com o primeiro digito (0 ou 1) e o segundo de (0...9) OU (|) Com o primeiro dgito igual a dois e o segundo de (0...3) Para os minutos, como vo at 59, ficaria assim: O primeiro pode ser de (0...5) e o segundo de (0...9) Alm de usarmos as subclasses QIntValidator, QDoubleValidator e QRegExpValidator, tambm podemos herdar a classe virtual QValidator e implementar nossa prpria classe de validao. Uma vantagem disso que podemos no somente validar a entrada como tambm fazer transformaes no texto de entrada. Por exemplo, podemos validar a entrada e transform-la em maiscula.

[24] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: Validar Entrada do Usurio

Para demonstrar, vamos criar um validador de entrada hexadecimal que pode permitir entrada negativa (-FF) e pode transformar a entrada para maiscula. Aqui est nosso arquivo de cabealho: #ifndef FVALIDATORS_H #define FVALIDATORS_H #include <QValidator> class FHexValidator : public QValidator { Q_OBJECT public: explicit FHexValidator(QObject *parent = 0, bool _Signal = false, bool _UpperCase = true); void setSignal(bool _Signal) { Signal = _Signal; } void setUpperCase(bool _UpperCase) { UpperCase = _UpperCase; } QValidator::State validate(QString &input, int &pos) const; private: QRegExpValidator *validator; bool Signal; bool UpperCase; }; #endif // FVALIDATORS_H Criamos uma classe FHexValidator que herdada de QValidator e reimplementamos a funo virtual pura validate. Estou usando QRegExpValidator para simplificar o trabalho de filtrar a entrada hexadecimal, mas uma rotina que faa isso poderia ser implementada facilmente. A varivel Signal indica se a entrada pode ser negativa e a varivel UpperCase indica que a entrada deve ser convertida em maiscula. Revista Qt - Janeiro/Fevereiro-2011 [25]

Laboratrio :: Validar Entrada do Usurio

Vamos ao cdigo: #include "fvalidators.h" FHexValidator::FHexValidator(QObject *parent, bool _Signal, bool _UpperCase): QValidator(parent) { validator = new QRegExpValidator(QRegExp("[-0-9A-Fa-f]{1,8}"), this); Signal = _Signal; UpperCase = _UpperCase; } QValidator::State FHexValidator::validate(QString &input, int &pos) const { if(input.contains('-')) { if(!Signal || input[0] != '-' || input.count('-') > 1) return Invalid; if(input.size() < 2) return Intermediate; } if(UpperCase) input = input.toUpper(); return validator->validate(input, pos); } No construtor iniciamos validator para validar uma entrada hexadecimal com at 8 dgitos que pode conter o sinal de (-).

[26] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: Validar Entrada do Usurio

A implementao de validate bem simples. Ele pode retornar 3 estados, que so: Invalid Quando a entrada invlida. Intermediate Quando ainda no determinado se a entrada vlida. Acceptable A entrada vlida. Primeiro a funo checa se a string de entrada contm o caractere (-). Caso contenha a entrada pode ser invlida se o modo de entrada negativa (Signal) no estiver habilitado ou se o caractere (-) no estiver na primeira posio da string. Somente com essas condies poderia acontecer um erro se o usurio digitar (-), voltar o cursor para a primeira posio e digitar novamente (). Para isso no acontecer a entrada tambm ser invalidada se a string contiver mais de um caractere (-). Se a string contm o sinal (-) e no foi invalidada, precisamos saber se existem mais dgitos, pois uma string que contm somente o sinal (-) no aceitvel, mas sim indeterminada. Pois necessita de algum dgito para ser vlida. Logo aps, se o modo UpperCase estiver ativo, o texto transformado em maisculo. Finalmente a string pode ser validada pelo objeto validator, que vai verificar se nela existem somente dgitos hexadecimais e o sinal (-). isso a pessoal, vou ficando por aqui e espero que tenham gostado do artigo. At a prxima!

Revista Qt - Janeiro/Fevereiro-2011 [27]

Geek & Poke


Oliver Widder o criador do site "Geek and Poke" e colaborador da Revista Qt.

[28] Revista Qt - Janeiro/Fevereiro-2011

Geek & Poke

www.geekandpoke.com
Revista Qt - Janeiro/Fevereiro-2011 [29]

Laboratrio :: InstallJammer

InstallJammer

a segunda edio da Revista Qt, saiu um artigo sobre a distribuio de aplicaes feitas em Qt. O presente artigo pode ser considerado como uma continuao daquele. Desta vez veremos como criar um instalador de verdade para nossas aplicaes, usando o InstallJammer. O instalador simplifica o processo de instalao de nossas aplicaes pois no exigem dos usurios comuns conhecimentos sobre programas de compactao e coisas do gnero. Normalmente o usurio precisa apenas responder a algumas poucas perguntas para proceder a instalao da maioria dos programas. Existem alguns programas gratuitos para gerar instaladores. A escolha pelo InstallJammer foi feita porque alm de grtis ele multiplataforma. Pra comear, faa o download do InstallJammer pelo endereo: www.installjammer.com/download A instao do InstallJammer muito simples, no sendo necessrio um tutorial para isso.
figura 1

Vou demonstrar a criao de um pacote de instalao para uma aplicao chamada Agenda (publicada nesta edio da Revista Qt). A figura 1 mostra a tela do InstallJammer. Para criar um novo projeto, selecione a opo File -> New Project Wizard no menu do InsallJammer.

[30] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: InstallJammer
No primeiro passo da montagem do instalador da nossa aplicao, devemos informar: - O Nome do projeto - Neste caso, Agenda. - O Diretrio raiz do projeto. O diretrio sugerido pelo InstallJammer InstallJammerProjects no diretrio home do usurio. No caso do Windows, o diretrio sugerido ser installJammerProjects na pasta "Meus Documentos" do usurio. Ser criado pelo InstallJammer um diretrio com o nome do projeto a partir do diretrio raiz do projeto. No caso deste exemplo, o diretrio da aplicao ficou como "/home/vasconcelos/InstallJammer/Agenda". Para continuar, clique no boto Next para especificar outras opes do instalador (figura 2). Na prxima tela (figura 3), informe - O nome da aplicao - O nome curto da aplicao - A verso da aplicao - O nome da empresa

figura 2

Em seguida clique no boto Next para continuar. Na prxima tela (figura 4) informamos a verso do instalador (na tela anterior informamos a verso da aplicao) e os nomes dos executveis para Windows e Unix (ou Linux).

Revista Qt - Janeiro/Fevereiro-2011 [31]

Laboratrio :: InstallJammer

figura 3

figura 4

[32] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: InstallJammer
O prximo passo informar o diretrio onde est a sua aplicao. Observe pela figura 5 que o diretrio no meu caso o "Agenda-build-desktop" Este o padro da verso 2.01 do Qt Creator que foi a que utilizei para compilar a aplicao Agenda - o nome da aplicao acrescido de "-build-desktop. Este diretrio corresponde quele em que se encontra o executvel e demais arquivos que iro compor o pacote de instalao. Se voc estiver em dvida sobre quais arquivos devem ser includos para a montagem do pacote de instalao da sua aplicao, consulte o artigo "Distribuindo suas aplicaes Qt para Linux" na segunda edio da Revista Qt. Para continuar, clique novamente no boto Next. Na prxima tela (figura 6) temos a seleo do tema de instalador, determinando que aparncia ele ter. No meu caso selecionei o Modern Wizard. Clique no boto Next para continuar. No sexto passo da criao do instalador (figura 7), selecione a plataforma para a qual est gerando o pacote de instalao. No caso do exemplo, estou gerando um pacote para instalao na plataforma Linux 32 bits. Mais uma vez, clique no Next para continuar.

figura 5

Revista Qt - Janeiro/Fevereiro-2011 [33]

Laboratrio :: InstallJammer

figura 6

figura 7

[34] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: InstallJammer
O oitavo passo da criao do instalador permite que voc selecione caractersticas adicionais ao seu instalador. Por default, todas as opes vm marcadas. As opes disponveis so: - Allow users to select custom components in your install - Esta opo permite que o usurio selecione uma instalao personalizada, selecionando quais componentes do pacote deseja instalar. - Include an uninstaller - Com esta opo marcada, o instalador de sua aplicao incluir um desinstalador. Detalhando o comportamento do desinstalador, temos as opes: - Add the uninstaller to the Windows Add/Remove Program Registry - se esta opo estiver marcada o usurio ser capaz de remover a aplicao pelo Painel de Controle do Windows. - Add a Windows Program shortcut component for the uninstaller - se esta opo estiver marcada ser criado pelo Windows um atalho para o desinstalador da aplicao.
figura 8

- Add a View Readme checkbutton - adiciona ao instalador um check box com a opo para abrir o arquivo readme (leia-me). - Add a Launch Application checkbutton - inclui um check box para executar a aplicao ao final da instalao. - Add a Create Desktop Shortcut checkbutton - inclui check box com a opo de criar um atalho para a aplicao no Desktop. Revista Qt - Janeiro/Fevereiro-2011 [35]

Laboratrio :: InstallJammer
- Add a Create Quick Launch checkbutton - inclui um check box com a opo para criar um atalho para a aplicao na barra de lanamento rpido do sistema operacional. Clique no boto Next para continuar. Chegamos ao passo final para criao do instalador. Nesta tela temos apenas o aviso de que o InstallJammer est pronto para montar instalador. Clique no boto Finish. Na tela mostrada na figura 10 temos um resumo com as opes do instalador que est sendo criado. Clique em Components and Files para expandir suas opes, e em seguida clique em Groups and Files. Sero mostrados os arquivos que esto no diretrio da aplicao. Por default, todos os arquivos encontram-se selecionados. Desmarque os arquivos que no deseja que faam parte de sua aplicao. No caso do nosso exemplo, desmarquei os arquivos com a extenses .o, .cpp e .h, alm do Makefile (figuras 11 e 12). Como a minha aplicao ser executada pelo script start (veja o artigo "Distribuindo suas aplicaes Qt para Linux" na segunda edio da Revista Qt), alterei a opo "Program Executable" que fica em "General Information -> Platform Information". Substitui <%InstallDir%>/Agenda por <%InstallDir%>/start (veja as figuras 13 e 14).
figura 9

[36] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: InstallJammer

figura 10

figura 11

Revista Qt - Janeiro/Fevereiro-2011 [37]

Laboratrio :: InstallJammer

figura 12

figura 13

[38] Revista Qt - Janeiro/Fevereiro-2011

Laboratrio :: InstallJammer

figura 14

figura 15

Revista Qt - Janeiro/Fevereiro-2011 [39]

Laboratrio :: InstallJammer
Neste ponto podemos montar o nosso instalador. Para isso, selecione a opo Build -> Build Install do menu do InstallJammer (figura 15). O Install Jammer vai criar um executvel para instalao da sua aplicao, que pode ser ento distribuido para seus usurios.

figura 16

Vimos neste artigo apenas as opes bsicas do InstallJammer necessrias para a criao de um instalador. Cada tela do instalador pode ser customizada, mas para apresentar todas as opes disponveis precisaramos de uma edio exclusiva da Revista. Sugiro que voc explore as opes do InstallJammer verificando como afetam o instalador de sua aplicao.
figura 17

[40] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML

Iniciando na Programao com QML


de costume, trago nesta edio da Revista Qt mais C omo uma traduo de um documento disponvel no site de documentao do Qt. Desta vez uma verso do tutorial "Getting Started Programming with QML", cuja verso original pode ser vista pelo endereo: http://doc.qt.nokia.com/4.7/gettingstartedqml.html

Iniciando na Programao com QML Bem vindo ao mundo do QML, a linguagem declarativa de Interfaces de Usurios (UI - User Interfaces). Neste guia de iniciao, vamos criar um aplicao simples de editor de textos usando QML. Depois de ler este guia, voc dever estar pronto para desenvolver suas prprias aplicaes usando QML e Qt com C++. QML para montar interfaces A aplicao que construiremos um simples editor de textos que ir carregar, salvar e desempenhar algumas manipulaes de textos. Este guia consistir de duas partes. A primeira envolver desenhar o layout da aplicao e seus Revista Qt - Janeiro/Fevereiro-2011 [41]

Verso Brasileira :: Iniciando na Programao com QML


comportamentos usando linguagem declarativa em QML. Para a segunta parte, a carga e salvamento do arquivo sero implementados usando Qt com C++. Usando o Sistema de Meta-Objetos do Qt, podemos expor funes C++ como propriedades que elementos QML pode usar. Utilizando QML e Qt C++, podemos eficientemente desacoplar a lgica da interface da lgica da aplicao. Para executar o cdigo QML do exemplo, simplesmente execute a ferramenta qmlviewer com o arquivo QML como argumento. A poro C++ deste tutorial assume que o leitor possua conhecimentos bsicos dos procedimentos de compilao do Qt. Captulos do tutorial: 1. Definindo um Boto e um Menu 2. Implementando uma Barra de Menu 3. Construindo um Editor de Textos 4. Decorando o Editor de Textos 5. Extendendo QML usando Qt C++ Definindo um Boto e um Menu Componentes Bsicos - um Boto Comeamos nosso editor de textos pela montagem de um boto. Funcionalmente, um boto tem uma rea sensvel ao mouse e um rtulo (label). Botes executam aes quando pressionados pelo usurio. Em QML, o item visual bsico um elemento Rectangle. O elemento Rectangle tem propriedades para controlar a aparncia e localizao do elemento.

[42] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Primeiro, a declarao "import QtQuick 1.0" permite ferramenta qmlviewer importar os elementos QML que usaremos mais tarde. Esta linha deve existir em todos os arquivos QML. Observe que a verso dos mdulos Qt incluida na declarao import. Este simples retngulo tem um identificador nico, "simplebutton", que vinculado propriedade id. As propriedades do elemento Rectangle so relacionadas a valores, listando-se a propriedade, seguida por dois pontos (:) e ento o valor. No cdigo de exemplo, a cor cinza relacionada propriedade color do Rectangle. Similarmente, relacionamos as propriedades largura e a altura do Rectangle. O elemento Text um campo texto no editvel. Nomeamos este elemento Text como buttonLabel. Para atribuir uma string como contedo ao campo Text, relacionamos um valor propriedade text. O rtulo contido dentro do Rectangle e para centraliza-lo no meio, atribuimos as ncoras do elemento Text ao seu pai, que chamado simplebutton. ncoras podem ser ligadas a ncoras de outros itens, permitindo atribuies de layouts mais simples. Devemos salvar este cdigo como SimpleButton.qml. Executando o qmlviewer com o arquivo como argumento, ser mostrado o retngulo cinza com o rtulo de texto.

Para implementar a funcionalidade de click do boto, podemos usar a manipulao de eventos do QML. Manipulao de eventos QML muito similar ao mecanismo de signal e slot do Qt. Signals so emitidos e o slot conectado chamado.

Revista Qt - Janeiro/Fevereiro-2011 [43]

Verso Brasileira :: Iniciando na Programao com QML

Rectangle{ id:simplebutton ... MouseArea{ id: buttonMouseArea anchors.fill: parent //ancora todos os lados da rea do mouse do retngulo //onClicked manipula cliques vlidos no boto do mouse onClicked: console.log(buttonLabel.text + " clicked" ) } } Incluimos um elemento MouseArea em nosso simplebutton. Elementos MouseArea descrevem a rea interativa onde os movimentos do mouse so detectados. Para nosso boto, ancoramos toda a MouseArea ao seu pai, que simplebutton. A sintaxe "anchors.fill" uma forma de acessar uma propriedade especifca chamada fill dentro de um grupo de propriedades chamado anchors. QML usa layouts baseados em ncoras onde itens podem ser ancorados a outro item, criando layouts robustos. A MouseArea tem muitos manipuladores de sinais que so chamados durante os movimentos do mouse dentro dos limites especificados da MouseArea. Um deles "onClicked" e chamado sempre que um boto aceitvel do mouse clicado, o clique esquerdo sendo o default. Ns podemos vincular aes para o manipulador onClicked. Em nosso exemplo, "console.log()" mostra texto sempre que se clica na rea do mouse. A funo "console.log()" uma ferramenta til para fins de depurao e para mostrar texto. O cdigo no "SimpleButton.qml" suficiente para mostrar um boto na tela e exibir o texto "clicked" quando o boto for clicado com o mouse.

[44] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML

Rectangle { id:Button ... property color buttonColor: "lightblue" property color onHoverColor: "gold" property color borderColor: "white" signal buttonClick() onButtonClick: { console.log(buttonLabel.text + " clicked" ) } MouseArea{ onClicked: buttonClick() hoverEnabled: true onEntered: parent.border.color = onHoverColor onExited: parent.border.color = borderColor } // determina a cor do boto pelo uso o operador condicional color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor } Um boto completamente funcional est no arquivo Button.qml. Os trechos de cdigo neste artigo tm algum cdigo omitido, denotados por reticncias ou porque eles foram introduzidos em sees anteriores ou irrelevantes para a discusso do cdigo atual. Propriedades personalizadas so declaradas usando a sintaxe de nome do tipo da propriedade. No cdigo, a propriedade buttonColor, do tipo color, declarada e vinculada ao valor "lightblue". Revista Qt - Janeiro/Fevereiro-2011 [45]

Verso Brasileira :: Iniciando na Programao com QML


A propriedade buttonColor mais tarde usada em uma operao condicional para determinar a cor de preenchimento do boto. Note que a atribuio de valor da propriedade possvel usando sinais de igualdade, alm do vnculo de valor usando o caractere dois pontos (:). Propriedades personalizadas permitem que itens internos sejam acessveis fora do escopo do Rectangle. Existem tipos QML bsicos como int, string, real, tambm como um tipo chamado variant. Vinculando os manipuladores de sinais "onEntered" e "onExited" a cores, a borda do boto se tornar amarela quando a seta do mouse passar por sobre o boto e reverter a cor quando a seta do mouse deixar esta rea. Um sinal "buttonClick" declarado em "Button.qml" colocando a palavra-chave signal na frete no nome do sinal. Todos os sinais tm manipuladores automaticamente criados, com seus nomes comeando com "on". Como resultado, o "onButtonClick" o manipulador de "buttonClick". O "onButtonClick" ento associado a uma ao a ser executada. Em nosso boto exemplo, o manipulador do mouse "onClicked" ir simplesmente chamar "onButtonClick", que mostra um texto. O "onButtonClick" habilita objetos externos a acessarem a rea do mouse do "Button" facilmente. Por exemplo, itens podem ter mais do que uma declarao de "MouseArea" e um sinal "buttonClick" pode fazer melhor a distino entre os vrios manipuladores de sinal "MouseArea". Agora temos o conhecimento bsico para implementar itens no QML que podem manipular movimentos bsicos do mouse. Criamos um rtulo "Text" dentro de um "Rectangle", com propriedades customizadas, e comportamentos implementados que respondem aos movimentos do mouse. Esta idia de criar elementos dentro de elementos repete-se ao longo da aplicao do editor de texto. Este boto no prtico at que seja usado como um componente para executar uma ao. Na prxima seo, criaremos um menu contendo muitos destes botes.

[46] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Criando uma pgina de Menu At esta etapa, cobrimos como criar elementos e atribuir comportamentos dentro de um nico arquivo QML. Nesta seo, cobriremos como importar elementos QML e como reutilizar alguns dos componentes criados para construir outros componentes. Menus exibem o contedo de uma lista, cada item tendo a capacidade de executar uma ao. Em QML, podemos criar um menu de formas diferentes. Primeiro, criamos um menu contendo botes que eventualmente executar diferentes aes. O cdigo do menu est em "FileMenu.qml".

import QtQuick 1.0 import "folderName" import "script.js" as Script

\\importa o mdulo principal Qt QML \\importa o contedo da pasta \\importa um arquivo Javascript e o nomeia como Script

A sintaxe mostrada acima mostra como usar a palavra-chave import. Isto requerido para usar arquivos Javascript, ou arquivos QML que no esto dentro do mesmo diretrio. Desde que "Button.qml" esteja no mesmo diretrio que "FileMenu.qml", no precisamos importar o arquivo "Button.qml" para utiliz-lo. Podemos criar um elemento "Button" declarando "Button{}", similiar declarao "Rectangle{}".

Revista Qt - Janeiro/Fevereiro-2011 [47]

Verso Brasileira :: Iniciando na Programao com QML


No arquivo "FileMenu.qml":

Row{ anchors.centerIn: parent spacing: parent.width/6 Button{ id: loadButton buttonColor: "lightgrey" label: "Load" } Button{ buttonColor: "grey" id: saveButton label: "Save" } Button{ id: exitButton label: "Exit" buttonColor: "darkgrey" onButtonClick: Qt.quit() } }

[48] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Em "FileMenu.qml", ns declaramos trs elementos "Button". Eles so declarados dentro de um elemento "Row", um posicionador que ir posicionar seus filhos ao longo de uma linha vertical. A declarao "Button" reside em "Button.qml", que o mesmo "Button.qml" que ns usamos na seo anterior. Novos vnculos de propriedades podem ser declaradas dentro de novos botes criados, sobrescrevendo efetivamente as propriedades "setadas" em "Button.qml". O boto chamado "exitButton" ir sair e fechar a janela quando clicado. Observe que o manipulador de sinal "onButtonClick" em "Button.qml" ser chamado alm do manipulador "onButtonClick" em "exitButton".

A declarao "Row" feita em um "Rectangle", criando um continer retngulo para uma linha de botes. Este retngulo adicional cria uma forma indireta de organizar a linha de botes dentro do um menu. A declarao do menu "edit" muito similar nesta fase. O menu tem botes que possuem rtulos: Copiar, Colar e Selecionar tudo.

Revista Qt - Janeiro/Fevereiro-2011 [49]

Verso Brasileira :: Iniciando na Programao com QML


Armado com nossos conhecimentos de importao e personalizao de componentes previamnte feitos, podemos combinar estas pginas de menu para criar uma barra de menu, consistindo de botes para selecionar o menu, e ver como podemos estruturar dados usando QML. Implementando uma Barra de Menu Nossa aplicao de editor de textos precisar ter uma forma de mostrar menus usando uma barra de menu. A barra de menu ir selecionar os diferentes menus e o usurio poder escolher qual menu exibir. Seleo de menu implica em que os menus precisem de mais estrutura do que meramente exibi-los em uma linha. QML usa models (modelos) e views (visualizaes) para estruturar dados e mostrar os dados estruturados. Usando Data Models e Views QML tem diferentes visualizadores de dados (data views) que mostram modelos de dados (data models). Nossa barra de menu mostar os menus em uma lista, com um cabealho que mostra uma linha de nomes de menus. A lista de menus declarada dentro de um VisualItemModel. O elemento VisualItemModel contem itens que j tem visualizaes como um elemento Rectangle e elementos de interface grfica importados. Outros tipos de modelos como o elemento ListModel precisam de uma view para mostrar seus dados. Declaramos dois itens visuais no "menuListModel", o "FileMenu" e o "EditMenu". Personalizamos os dois menus e os exibimos usando uma "ListView". O arquivo "MenuBar.qml" contem a declarao QML e um menus simples edit definidoo em "EditMenu.qml".

[50] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com 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 mostrar um modelo de acordo com um representante (data view). ListView{ id: menuListView //ncoras so definidas para reagir Anchors s ncoras da janela anchors.fill:parent anchors.bottom: parent.bottom width:parent.width height: parent.height //model contm os dados model: menuListModel //controla o movimento de mudana do menu Revista Qt - Janeiro/Fevereiro-2011 [51]

Verso Brasileira :: Iniciando na Programao com QML


snapMode: ListView.SnapOneItem orientation: ListView.Horizontal boundsBehavior: Flickable.StopAtBounds flickDeceleration: 5000 highlightFollowsCurrentItem: true highlightMoveDuration:240 highlightRangeMode: ListView.StrictlyEnforceRange }

Adicionalmente, "ListView" herda de "Flickable", fazendo a lista responder a objetos arrastados pelo mouse e outros movimentos. A ltima parte do cdigo acima "seta" as propriedades para criar o movimento de flick desejado nossa visualizao. Em particular, a propriedade "highlightMoveDuration" altera a durao da transio flick. Um valor de "highlightMoveDuration" mais alto resulta em uma mudana de menu mais lenta. O "ListView" mantm os itens do modelo atravs de um ndice e cada item visual no modelo acessvel atravs do index, na ordem da declarao. Mudar o "currentIndex" efetivamente muda o item destacado na "ListView". O cabealho de nossa barra de menu exemplifica este efeito. Existem dois botes em uma linha, ambos mudando o menu corrente quando clicados. O "fileButton" muda o menu corrente para o menu file quando clicado, o ndice sendo 0 (zero) porque FileMenu declarado primeiro em "menuListModel". Similarmente, o "editButton" mudar o menu corrente para o "EditMenu" quando clicado. O retngulo "labelList" tem um valor "z" de "1", denotando que ele mostrado na frente da barra de menu. Items com maior valor de z so mostrados na frente daqueles itens com valores z mais baixos. O valor default de z 0 (zero).

[52] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML

Rectangle{ id: labelList ... z: 1 Row{ anchors.centerIn: parent spacing:40 Button{ label: "File" id: fileButton ... onButtonClick: menuListView.currentIndex = 0 } Button{ id: editButton label: "Edit" ... onButtonClick: menuListView.currentIndex = 1 } } } A barra de menu que acabamos de criar pode ser movimentada para acessar os menus pelo clique nos nomes dos menus no topo. A troca de telas de menu parece intuitiva e responsiva.

Revista Qt - Janeiro/Fevereiro-2011 [53]

Verso Brasileira :: Iniciando na Programao com QML


Montando o editor de textos Declarando uma TextArea Nosso editor de textos no um editor de textos se no contiver uma rea de texto editvel. Elementos "TextEdit" QML permitem a declarao de um rea de texto editvel multilinha. "TextEdit" diferente de um elemento Text, que no permite ao usurio editar diretamente o texto. TextEdit{ id: textEditor anchors.fill:parent width:parent.width; height:parent.height color:"midnightblue" focus: true wrapMode: TextEdit.Wrap onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle) } O editor tem sua propriedade font color definida e est setado para "quebrar" o texto. O "TextEdit" est dentro de uma rea flickable que rolar o texto se o cursor do texto estiver fora da rea visvel. A funo "ensureVisible()" ir verificar se o retngulo do cursor est fora dos limites visveis e mover a rea de texto de acordo. QML usa sintaxe Javascript para seus scripts, e como previamente mencionado, arquivos Javascript podem ser importados e usados dentro de um arquivo QML.

[54] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML

function ensureVisible(r){ if (contentX >= r.x) contentX = r.x; else if (contentX+width <= r.x+r.width) contentX = r.x+r.width-width; if (contentY >= r.y) contentY = r.y; else if (contentY+height <= r.y+r.height) contentY = r.y+r.height-height; }

Combinando componentes para o Editor de Textos Agora estamos prontos para criar o layout do nosso editor de textos usando QML. O editor de textos tem dois componentes, a barra de menus que ns criamos e a rea de texto. QML permite-nos reutilizar componentes, simplificando o nosso cdigo portanto, pela importao de componentes e personalizao quando necessrio. Nosso editor de textos divide a janela em duas; um tero da tela dedicado barra de menu e dois teros da tela mostram a rea de texto. A barra de menu mostrada na frente de quaisquer outros elementos. Rectangle{ id: screen width: 1000; height: 1000 //a tela particionada entre MenuBar e TextArea. 1/3 da tela atribuido ao MenuBar Revista Qt - Janeiro/Fevereiro-2011 [55]

Verso Brasileira :: Iniciando na Programao com QML


property int partition: height/3 MenuBar{ id:menuBar height: partition width:parent.width z: 1 } TextArea{ id:textArea anchors.bottom:parent.bottom y: partition color: "white" height: partition*2 width:parent.width } } Pela importao de componentes reutilizveis, o cdigo do nosso "TextEditor" parece muito mais simples. Podemos ento personalizar a aplicao principal, sem nos preocuparmos com as propriedades que j tm comportamentos definidos. Usando esta abordagem, layouts de aplicaes e componentes de interface grfica de usurio podem ser criados facilmente.

[56] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Decorando o Editor de Textos Implementando uma Interface de Desenhador (ui...) Nosso editor de textos parece simples e ns precisamos decor-lo. Usando QML, podemos declarar transies e animar nosso editor de textos. Nossa barra de menu est ocupado um tero da tela e seria bom se ela aparecesse apenas quando ns quisssemos. Podemos adicionar uma interface de desenhador, que ir contrair ou expandir a barra de menu quando clicada. Em nosso implementao, temos um retngulo fino que responde aos cliques do mouse. O desenhador, assim como a aplicao, tem dois estados (states): o estado "desenhador aberto" e o estado "desenhador fechado". O item desenhador uma tira retangular com uma pequena altura. Existe um elemento Image aninhado declarando que um cone de seta ser centralizado dentro do desenhador. O desenhador atribui um estado a toda a aplicao, com o identificador "screen", sempre que o usurio clique na rea do mouse.

Revista Qt - Janeiro/Fevereiro-2011 [57]

Verso Brasileira :: Iniciando na Programao com QML


Rectangle{ id:drawer height:15 Image{ id: arrowIcon source: "images/arrow.png" anchors.horizontalCenter: parent.horizontalCenter } MouseArea{ id: drawerMouseArea anchors.fill:parent onClicked:{ if (screen.state == "DRAWER_CLOSED"){ screen.state = "DRAWER_OPEN" } else if (screen.state == "DRAWER_OPEN"){ screen.state = "DRAWER_CLOSED" } } ... } } Um estado simplesmente uma coleo de configuraes e declarado em um elemento "State". Uma lista de estados pode ser listada e vinculada s propriedades states. Em nossa aplicao, os dois estados so chamados DRAWER_CLOSED e DRAWER_OPEN. Configuraes de item so declaradas em elementos PropertyChanges. No estado DRAWER_OPEN, existem quatro itens que recebero mudanas de propriedades. O primeiro alvo, menuBar, mudar suas propriedades y para 0 (zero). Similarmente, o "textArea" ser abaixada pra uma nova posio quando o

[58] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


estado for DRAWER_OPEN. A "textArea", o "desenhadador", e o cone do desenhador sofrero alteraes de propriedades para atender ao estado atual. states:[ State { name: "DRAWER_OPEN" PropertyChanges { target: PropertyChanges { target: PropertyChanges { target: PropertyChanges { target: }, State { name: "DRAWER_CLOSED" PropertyChanges { target: PropertyChanges { target: - drawer.height } PropertyChanges { target: PropertyChanges { target: } ]

menuBar; y: 0} textArea; y: partition + drawer.height} drawer; y: partition} arrowIcon; rotation: 180}

menuBar; y:-height; } textArea; y: drawer.height; height: screen.height drawer; y: 0 } arrowIcon; rotation: 0 }

Mudanas de estado so abruptas e precisam de transies mais suaves. Transies entre estados so definidas usando o elemento Transition, que pode ser vinculado s propriedades "transitions" do item. Nosso editor de textos tem uma transio de estado sempre que o estado muda para DRAWER_OPEN ou DRAWER_CLOSED. Importante: a transio precisa de um estado from (de) e um estado to (para) mas para nossas transies, podemos usar o smbolo coringa * para denotar que a transio se aplica a todas as mudanas de estado. Durante transies, podemos atribuir animaes s mudanas de propriedades. Nosso menuBar troca de posio de y:0 para y:-partition e podemos animar esta transio usando o elemento "NumberAnimation". Declaramos que a Revista Qt - Janeiro/Fevereiro-2011 [59]

Verso Brasileira :: Iniciando na Programao com QML


propriedade target ser animada por uma certa durao de tempo e usando uma certa curva de atenuao. Uma curva de atenuao controle a taxa de animao e comportamento de interpolao durante transies de estado. A curva de atenuao que escolhemos Easing.OutQuint, que torna mais lento o movimento prximo ao fim da animao. transitions: [ Transition { to: "*" NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo } NumberAnimation { target: menuBar; properties: "y"; duration: 100; easing.type: Easing.OutExpo } NumberAnimation { target: drawer; properties: "y"; duration: 100; easing.type: Easing.OutExpo } } ] Outra forma de animar mudanas de propriedades declarar um elemento "Behavior". Uma transio apenas funciona durante mudanas de estado e "Behavior" pode definir uma animao para uma mudana geral de propriedade. No editor de textos, a seta tem um "NumberAnimation" animando sua propriedade "rotation" sempre que a propriedade mudar. Em TextEditor.qml: Behavior{ NumberAnimation{property: "rotation";easing.type: Easing.OutExpo } }

[60] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Voltando aos nossos componentes com conhecimento de estados e animaes, podemos melhorar a aparncia dos componentes. Em Button.qml, podemos adicionar mudanas das proprieadades "color" e "scale" quando o boto for clicado. Tipos "Color" so animados usando "ColorAnimation" e numbers so animados usando "NumberAnimation". A sintaxe "on nomeDaPropriedade" mostrada abaixo til quando fazemos referncia a uma simples propriedade. Em Button.qml: ... color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor Behavior on color { ColorAnimation{ duration: 55} } scale: buttonMouseArea.pressed ? 1.1 : 1.00 Behavior on scale { NumberAnimation{ duration: 55} } Alm disso, podemos melhorar a aparncia de nossos componentes QML adicionando efeitos de cores como gradientes e efeitos de opacidade. Declarando um elemento "Gradiente" sobrepor a propriedade "color" do elemento. Voc pode declarar uma cor no gradiente usando o elemento "GradientStop". O gradiente posicionado usando uma escala, entre 0.0 e 1.0. Em MenuBar.qml gradient: Gradient GradientStop { GradientStop { GradientStop { GradientStop { } { position: position: position: position: 0.0; color: "#8C8F8C" } 0.17; color: "#6A6D6A" } 0.98;color: "#3F3F3F" } 1.0; color: "#0e1B20" }

Revista Qt - Janeiro/Fevereiro-2011 [61]

Verso Brasileira :: Iniciando na Programao com QML


O gradiente usado pela barra de menu para mostrar um gradiente simulando profundidade. A primeira cor comea em 0.0 e a ltima cor est em 1.0. Aonde ir partindo daqui. Terminamos de construir a interface de usuro de uma editor de textos muito simples. Daqui pra frente, a interface de usurio est completa e podemos implementar a lgica da aplicao usando Qt e C++ comum. QML trabalha perfeitamente como uma ferramenta de prototipagem, separando a lgica da aplicao do desenho da Interface de Usurio. Extendendo QML usando Qt e C++ Agora que temos o layout de nosso editor de textos, podemos implementar as funcionalidades do editor em C++. Usando QML com C++ permite-nos criar nossa lgica da aplicao usando Qt. Podemos criar um contexto QML na aplicao C++ usando as classes Declarative de Qt e mostrar o elemento QML usando um Graphics Scene. Alternativamente, podemos exportar nosso cdigo C++ em um plugin que pode ser lido pela ferramenta qmlviewer. Para nossa aplicao, implementaremos as funes "load" e "save" em C++ e as exportaremos como um plugin. Desta forma, apenas precisamos carregar o arquivo QML diretamente ao invs de rodar um executvel.

[62] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Expondo classes C++ para QML Implementaremos a carga e o salvamento de arquivos usando Qt e C++. Classes C++ e funes podem ser usadas em QML registrando-as. A classe tambm precisa ser compilada como um plugin Qt e o arquivo QML precisa saber onde o plugin est localizado. Para nossa aplicao, precisamos criar os seguintes itens: 1. Clase Directory que manipular operaes relacionadas a diretrios 2. Classe File que um QObject, simulando a lista de arquivos em um diretrio 3. Classe plugin que registrar a classe para o contexto QML 4. Arquivo de projeto Qt que ir compilar o plugin 5. Um arquivo qmldir informando ferramenta qmlviewer onde encontrar o plugin Montando um plugin Qt Para montar um plugin, precisamos definir o seguinte em um projeto Qt. Primeiro, os fontes necessrios, cabealhos (headers), e mdulos Qt precisam ser adicionados ao nosso arquivo de projeto. Todo o cdigo C++ e arquivos de projeto esto no diretrio "filedialog". Em cppPlugins.pro: TEMPLATE = lib CONFIG += qt plugin QT += declarative DESTDIR += ../plugins OBJECTS_DIR = tmp MOC_DIR = tmp

Revista Qt - Janeiro/Fevereiro-2011 [63]

Verso Brasileira :: Iniciando na Programao com QML


TARGET = FileDialog HEADERS += directory.h \ file.h \ dialogPlugin.h SOURCES += directory.cpp \ file.cpp \ dialogPlugin.cpp Em particular, compilamos Qt com o mdulo declarativo e o configuramos como um plugin, necessitando de um template "lib". Colocaremos o plugin compilado dentro do diretrio de plugins pai. Registrando uma classe no QML Em dialogPlugin.h: #include <QtDeclarative/QDeclarativeExtensionPlugin> class DialogPlugin : public QDeclarativeExtensionPlugin { Q_OBJECT public: void registerTypes(const char *uri); }; Nossa classe plugin, DialogPlugin uma subclasse de QDeclarativeExtensionPlugin. Precisamos implementar a funo

[64] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


herdada registerTypes(). O arquivo dialogPlugin.cpp parece com isto: DialogPlugin.cpp: #include #include #include #include "dialogPlugin.h" "directory.h" "file.h" <QtDeclarative/qdeclarative.h>

void DialogPlugin::registerTypes(const char *uri){ qmlRegisterType<Directory>(uri, 1, 0, "Directory"); qmlRegisterType<File>(uri, 1, 0,"File"); } Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin); A funo "registerTypes()" registra nossas classes "File" e "Directory" no QML. Esta funo precisa do nome da classe para seu template, um nmero maior de verso, um nmero menor de verso, e um nome para nossa classe. Precisamos exportar o plugin usando a macro Q_EXPORT_PLUGIN2. Observe que em nosso arquivo dialogPlugin.h, temos a macro Q_OBJECT no topo de nossa classe. Tambm precisamos executar qmake no arquivo de projeto para gerar o cdigo meta-objeto necessrio . Criando propriedades em uma classe C++ Podemos criar elementos QML e propriedades usando C++ e o sistema de meta-objetos de Qt. Podemos implementar propriedades usando slots e signals, fazendo Qt tomar conhecimento destas propriedades. Estas propriedades podem ser usada em QML. Revista Qt - Janeiro/Fevereiro-2011 [65]

Verso Brasileira :: Iniciando na Programao com QML

Para o editor de textos, precisamos ser capazes de carregar e salvar arquivos. Tipicamente, estes recursos esto contidos em um dilogo de arquivo (file dialog). Felizmente, podemos usar "QDir", "QFile" e "QTextStream" para implementar leitura de diretrios e fluxos (streams) de entrada e sada. class Directory : public QObject{ Q_OBJECT Q_PROPERTY(int filesCount READ filesCount CONSTANT) Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged) Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged) Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT ) ... A classe "Directory" usa o Sistema de "Meta-Objeto" de Qt para registrar propriedades necessrias para realizar manipulao de arquivos. A classe "Directory" exportada como um plugin e utilizvel em QML como um elemento "Directory". Cada uma das propriedades listadas usando a macro Q_PROPERTY uma propriedade QML. A macro Q_PROPERTY declara uma propriedade e tambm suas funes de leitura (read) e escrita (write) no Sistema de Meta-Objetos do Qt. Por exemplo, a propriedade filename, do tipo "QString" pode ser lida usando a funo filename() e escrita usando a funo "setFileName()". Adicionalmente, existe um signal associado propriedade filename chamado "filenameChanged()", que emitido sempre que a propriedade muda. As funes de leitura e escrita so declaradas como pblicas no arquivo de cabealho. De modo semelhante, temos as outras propriedades declaradas de acordo com seus usos. A propriedade "filesCount" indica o nmero de arquivos em um diretrio. A propriedade "filename" definida para o nome do arquivo selecionado e

[66] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


o arquivo carregado/salvo armazenado na propriedade "fileContent". Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT ) A propriedade files list uma lista de todos os arquivos filtrados em um diretrio. A classe Directory implementada para filtrar arquivos invlidos de texto; apenas arquivos com uma extenso .txt so vlidos. Alm disse, QLists podem ser usados em arquivos QML declarando-os como uma QDeclarativeListProperty em C++. O obeto no template precisa herdar de um QObject, portanto, a classe File deve tambm herdar de QObject. Na clasee Directory, a lista de objetos File armazanada em uma QList chamada m_fileList. class File : public QObject{ Q_OBJECT Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged) ... }; As propriedades podem ser usadas em QML como parte das propriedades de elementos de Directory. Observe que no temos que criar um identificador com a propriedade id em nosso cdigo C++. Directory{ id: directory filesCount filename fileContent files

Revista Qt - Janeiro/Fevereiro-2011 [67]

Verso Brasileira :: Iniciando na Programao com QML


files[0].name } Como arquivos QML usam sintaxe e estrutura Javascript, podemos iterar atravs da lista de arquivos e recuperar suas propriedades. Para recuperar o primeira propriedade "name" do arquivo, ns podemos chamar files[0].name. Funes comuns C++ so tambm acessveis a partir do QML. As funes de carregar e salvar o arquivo so implementadas em C++ e declaradas usando a macro Q_INVOKABLE. Alternativamente, podemos declarar as funes como slots e as funes estaro acessveis a partir do QML. Em Directory.h: Q_INVOKABLE void saveFile(); Q_INVOKABLE void loadFile(); A classe Directory tambm tem que notificar outros objetos sempre que o contedo do diretrio mude. Esta caracterstica executada como um signal. Como foi dito antes, "signals" QML tem um manipulador correspondente com seus nomes prefixados com "on". O signal chamado directoryChanged e ele emitido sempre que h uma atualizao de um diretrio. A atualizao simplesmente recarrega o contedo do diretrio e atualiza a lista de arquivos vlidos no diretrio. Itens QML podem ento ser notificados anexando uma ao ao manipulador de sinais "onDirectoryChanged". As propriedades list precisam ser exploradas futuramente. Isto porque propriedades list usam "callbacks" para acessar o contedo da lista. A propriedade list do tipo "QDeclarativeListProperty<File>". Sempre que a lista acessada, a funo acessora precisa retornar um QDeclarativeListProperty<File>. O tipo template File, precisa ser um derivado de QObject. Alm disso, para criar um QDeclarativeListProperty, o acessor da lista e modificadores precisam ser passados para o contrutor como ponteiros para funes. A lista, um QList em nosso caso, tambm precisa ser uma lista de ponteiros para File.

[68] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


O construtor de QDeclarativeListProperty e a implementao de Directory: QDeclarativeListProperty ( QObject * object, void * data, AppendFunction append, CountFunction count = 0, AtFunction at = 0, ClearFunction clear = 0 ) QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt, &clearFilesPtr ); O construtor passa ponteiros para funes que sero acrescentadas lista, conta a lista, retorna o item usando um ndice e limpa a lista. Apenas a funo acrescentada obrigatria. Observe que o ponteiro para a funo deve combinar com a definio de AppendFunction, CountFunction, AtFunction ou ClearFunction. void appendFiles(QDeclarativeListProperty<File> * property, File * file) File* fileAt(QDeclarativeListProperty<File> * property, int index) int filesSize(QDeclarativeListProperty<File> * property) void clearFilesPtr(QDeclarativeListProperty<File> *property) Para simplificar nosso dilogo de arquivo, a classe Directory filtra arquivos texto invlidos, que so arquivos sem a extenso .txt. Se um nome de arquivo no tiver a extenso ".txt", ento ele no deve ser visto em nosso dilogo. Tambm, a implementao certifica que os arquivos salvos tenham a extenso .txt no nome. Directory usa "QTextStream" para ler o arquivo e enviar o contedo para um arquivo. Com nosso elemento Directory, podemos recuperar os arquivos como uma lista, descobrir quantos arquivos texto existem no diretrio da aplicao, pegar o nome do arquivo e contedo como uma string, e ser notificado sempre que ocorram mudanas no contedo do diretrio.

Revista Qt - Janeiro/Fevereiro-2011 [69]

Verso Brasileira :: Iniciando na Programao com QML


Importando um Plugin no QML A ferramenta qmlviewer importa arquivos que esto no mesmo diretrio da aplicao. Podemos tambm criar arquivo qmldir contendo as localizaes dos arquivos QML que queremos importar. O arquivo qmldir pode tambm armazenar localizaes de plugins e outros recursos. Em qmldir: Button ./Button.qml FileDialog ./FileDialog.qml TextArea ./TextArea.qml TextEditor ./TextEditor.qml EditMenu ./EditMenu.qml plugin FileDialog plugins O plugin que acabamos de criar chamado "FileDialog", como indicado pelo campo TARGET no arquivo de projeto. O plugin compilado est no diretrio de plugins. Integrando o File Dialog com o File Menu Nosso FileMenu precisa mostrar o elemento FileDialog, contendo uma lista de arquivos texto em um diretrio permitindo assim que o usurio selecione o arquivo clicando na lista. Precisamos ainda atribuir os botes save, load e new a suas respectivas aes. O FileMenu contm um campo text input editvel para permitir ao usurio digitar um nome de arquivo usando o teclado. O elemento Directory usado no arquivo FileMenu.qml e notificar o elemento FileDialog que o diretrio atualizou seu contedo. Esta notificao executada no manipulador de signal, onDirectoryChanged. Em FileMenu.qml:

[70] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Directory{ id:directory filename: textInput.text onDirectoryChanged: fileDialog.notifyRefresh() } Mantendo a simplicidade de nossa aplicao, o dilogo de arquivo estar sempre visvel e no mostrar arquivos texto invlidos, que no tem uma extenso ".txt" em seus nomes. Em FileDialog.qml: signal notifyRefresh() onNotifyRefresh: dirView.model = directory.files O elemento FileDialog mostrar o contedo de um diretrio lendo sua propriedade lista, chamada files. Os arquivos so usados como o modelo de um elemento GridView, que mostra itens de dados em um grid de acordo com um "delegate" (representante). O "delegate" manipula a aparncia e o modelo e nosso dilogo de arquivo simplesmente criar um grid com texto centralizado. Clicar no nome do arquivo resultar no aparecimento de um retngulo para realar o nome do arquivo. O FileDialog notificado sempre que o signal "notifyRefresh" for emitido, recarregando os arquivos no diretrio. Em FileMenu.qml: Button{ id: newButton label: "New" onButtonClick:{ textArea.textContent = "" } Revista Qt - Janeiro/Fevereiro-2011 [71]

Verso Brasileira :: Iniciando na Programao com QML


} Button{ id: loadButton label: "Load" onButtonClick:{ directory.filename = textInput.text directory.loadFile() textArea.textContent = directory.fileContent } } Button{ id: saveButton label: "Save" onButtonClick:{ directory.fileContent = textArea.textContent directory.filename = textInput.text directory.saveFile() } } Button{ id: exitButton label: "Exit" onButtonClick:{ Qt.quit() } }

[72] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Iniciando na Programao com QML


Nosso "FileMenu" pode agora conectar a suas respectivas aes. O boto saveButton ir transferir o texto do TextEdit para a propriedade fileContent do diretrio, copiando ento seu nome de arquivo do text input editvel. Finalmente, o boto chama a funo saveFile(), salvando o arquivo. O boto loadButton tem uma execuo similar. Tambm a ao New limpar o contedo do "TextEdit". Alm disso, os botes de EditMenu esto conectados s funes de copiar, colar e selecionar todo o texto no editor de textos de TextEdit.

Executando o editor de textos Precisamos compilar o plugin de dilogo de arquivos C++ antes que o editor de textos possa ser executado. Para compilar, entre no diretrio gsQml, ento execute qmake e compile usando make ou nmake, dependendo da sua plataforma. Para executar, rode o qmlviewer e abra o arquivo texteditor.qml. O cdigo fonte est no diretrio examples/tutorials/gettingStarted/gsQml da instalao do Qt.

Revista Qt - Janeiro/Fevereiro-2011 [73]

Verso Brasileira :: Como pensar como um cientista da Computao


Como pensar como um cientista da Computao Verso C++, Primeira Edio 1 - O caminho do programa 1.1 - O que uma linguagem de programao? 1.2 - O que um programa? 1.3 - O que "debugar"? 1.3.1 - Erros em tempo de compilao 1.3.2 - Erros em tempo de execuo 1.3.3 - Erros de lgica e semntica 1.3.4 - Depurao experimental 1.4 - Linguagens formais e naturais 1.5 - O primeiro programa Captulo 1 O caminho do programa O objetivo deste livro ensin-lo como pensar como um cientista da computao. Eu gosto do jeito como cientistas da computao pensam porque eles combinam alguns dos melhores recursos de Matemtica, Engenharia e Cincias Naturais. Como matemticos, cientistas da computao usam linguagens formais para denotar idias (especificamente computao). Como engenheiros, eles projetam coisas, montando componentes dentro de sistemas e avaliando compensaes entre as alternativas. Como cientistas, eles observam o comportamento de sistemas complexos, formulam hipteses e testam previses. A mais importante habilidade para um cientista da computao resolver problemas. Com isso, quero dizer a habilidade de exprimir problemas, pensar criativamente sobre solues e expressar uma soluo clara e apuradamente. Como se v, o processo de aprendizado de programao uma excelente oportunidade para praticar as habilidades de solucionar problemas. por isso que este captulo de chama "O caminho do programa".

Allen B. Downey professor de Cincia da Computao e gentilmente permitiu a publicao da traduo de seu livro "How to think like a computer science" na Revista Qt. O endereo do seu site o http://allendowney.com/.

[74] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Como pensar como um cientista da Computao


Claro que o outro objetivo deste livro prepar-lo para o exame de Cincia da Computao da AP (http://apcentral.collegeboard.com/apc/public/courses/teachers_corner/4483.html). Podemos no usar a abordagem mais direta para atingir este objetivo, no entanto. Por exemplo, no existem muitos exerccios neste livro que se assemelhem s questes do AP. Por outro lado, se voc entender os conceitos neste livro, junto com alguns detalhes de programao em C++, voc ter todas as ferramentas das quais precisa para se sair bem no exame. 1.1 - O que uma linguagem de programao? A linguagem de programao que voc aprender C++, porque esta a linguagem na qual baseia-se o exame da AP, desde 1998. Antes disso, o exame utilizava Pascal. Ambos, C++ e Pascal so linguagens de alto nvel; outras linguagems de alto nvel sobre as quais voc pode ouvir so Java, C e FORTRAN. Como voc pode deduzir pela expresso "linguagem de alto nvel", existem tambm linguagens de baixo nvel, algumas vezes referenciadas como linguagens de mquina ou linguagens de montagem (assembly). Falando claramente, computadores podem apenas executar programas escritos em linguagens de baixo nvel. Portanto, programas escritos em uma linguagem de alto nvel tm que ser traduzidos antes que possam ser executados. Esta traduo toma algum tempo, o que uma pequena desvantagem das linguagens de alto nvel. Mas as vantagens so enormes. Primeiro, muito mais fcil programar em uma linguagem de allto nvel; por "fcil", quero dizer que o programa toma menos tempo para ser escrito, menor e mais fcil de ler, e susceptvel correo. Em segundo lugar, linguagens de alto nvel so portveis, o que significa que elas podem executar em diferentes tipos de computadores com poucas ou sem modificaes. Programas de baixo nvel podem ser executados apenas em um tipo de computador, e tm que ser reescritos para rodar em outro. Devido a estas vantagens, quase todos os programas so escritos em linguagens de alto nvel. Linguagens de baixo nvel so usadas apenas para algumas aplicaes especiais.

Revista Qt - Janeiro/Fevereiro-2011 [75]

Verso Brasileira :: Como pensar como um cientista da Computao


Existem duas formas de traduzir um programa: interpretando ou compilando. Um interpretador um programa que l um programa de alto nvel, e faz o que ele diz. Com efeito, ele traduz o programa linha por linha, alternativamente lendo linhas e executando os comandos.

Um compilador um programa que l um programa em alto nvel e traduz tudo de uma vez, antes de executar qualquer comando. Frequentemente voc compila o programa em um passo separado, e ento executa o cdigo compilado depois. Neste caso, o programa de alto nvel chamado de cdigo fonte, e o programa traduzido chamado de cdigo objeto ou o executvel. Como um exemplo, suponha que voc escreva um programa em C++. Voc usa um editor de textos para escrever o programa (um editor de textos um simples processador de palavras). Quando o programa est pronto, voc deve salvalo em um arquivo chamado programa.cpp, onde "programa" um nome arbitrrio inventado por voc, e o sufixo .cpp uma conveno que indica que o arquivo contm cdigo fonte C++.

[76] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Como pensar como um cientista da Computao


Ento, dependendo de como seja o seu ambiente de desenvolvimento, voc sai do editor de textos e executa o compilador. O compilador deve ler o seu cdigo fonte, traduzi-lo, e criar um novo arquivo chamado programa.o para conter o cdigo objeto, ou programa.exe para conter o executvel.

O prximo passo executar o programa, o que requer algum tipo de executor. O papel do executor carregar o programa (copia-lo do disco para a memria) e fazer o computador iniciar a execuo do programa. Embora este processo possa parecer complicado, a boa notcia que na maioria dos ambientes de programao (algumas vezes chamados ambientes de desenvolvimento), estes passos so automatizados para voc. Comumente voc ter apenas que escrever um programa e digitar um simples comando para compil-lo e execut-lo. Por outro lado, til saber quais so os passos que esto acontecendo "por trs", de modo que se algo der errado, voc possa descobrir do que se trata.

Revista Qt - Janeiro/Fevereiro-2011 [77]

Verso Brasileira :: Como pensar como um cientista da Computao


O que um programa? Um programa uma sequncia de instrues que especificam como executar uma computao. A computao pode ser alguma coisa matemtica, como resolver um sistema de equaes ou encontrar as razes de um polinmio, mas tambm pode ser uma computao simblica, como procurar e substituir texto em um documento ou (estranhamente) compilar um programa. As instrues (ou comandos, ou declaraes) parecem diferentes em diferentes linguagens de programao, mas existem algumas funes bsicas que aparecem em quase toda linguagem de programao: entrada: Pega dados do teclado, ou de um arquivo, ou algum outro dispositivo. sada: Mostra dados na tela ou envia dados para um arquivo ou outro dispositivo. clculos matemticos: Executa operaes matemticas bsicas como adio e multiplicao. teste: Testa determinadas condies e executa a sequncia apropriada de declaraoes. repetio: Executa alguma ao repetidamente, normalmente com alguma variao. Acredite ou no, isto praticamente tudo que existe a fazer. Todo programa que voc j usou, no importa quo complicado, feito de funes que se parecem mais ou menos com isso. Assim, uma forma de descrever progamao o processo de quebrar uma grande, complexa tarefa em subtarefas cada vez menores at que finalmente a subtarefa seja simples o suficiente para executar uma destas simples funes. 1.3 O que "debugar"? Programar um processo complexo, e como realizado por seres humanos, ele frequentemente leva a erros. Por razes bizarras, erros de programao so chamados "bugs" e o processo de rastre-los e corrigi-los chamado "debugar". Existem alguns tipos diferentes de erros que podem ocorrer em um programa, e til distinguir entre eles para rastrelos mais rapidamente.

[78] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Como pensar como um cientista da Computao


1.3.1 Erros em tempo de compilao O compilador pode apenas traduzir um programa se o programa estiver sintaticamente correto; caso contrrio, a compilao falha e voc no estar apto a executar seu programa. A sintaxe refere-se estrutura do seu programa e as regras sobre esta estrutura. Por exemplo, em Ingls, uma sentena deve comear com uma letra maiscula e terminar com um ponto. "esta sentena contm um erro de sintaxe." "Assim como esta " Para a maioria dos leitores, uns poucos erros de sintaxe no so um problema significativo, e por isso que conseguimos ler a poesia de E. E. Cummings sem vomitar mensagens de erro. Compiladores no so to complacentes. Se existe um nico erro de sintaxe em qualquer lugar do seu programa, o compilador imprimir uma mensagem de erro e abortar, e voc no poder executar seu programa. Para piorar a situao, existe mais regras de sintaxe em C++ do que existem no Ingls, e as mensagens de erro que voc recebe o compilador frequentemente no ajudam muito. Durante as primeiras semanas de sua carreira como programador, voc provavelmente ir gastar muito tempo rastreando erros de sintaxe. Conforme voc ganha experincia, no entanto, cometer menos erros e os achar mais rapidamente. 1.3.2 Erros em tempo de execuo O segundo tipo de erro o erro em tempo de execuo, assim chamado porque o erro no aparece at a execuo do programa. Para os tipos simples de programas que escreveremos nas prximas semanas, erros em tempo de execuo so raros, ento levar algum tempo antes que voc encontre um. 1.3.3 Erros de lgica e semntica O terceiro tipo de erro o de lgica e semntica. Se existe um erro de lgica em seu programa, ele compilar e executar com sucesso, no sentido de que o computador no ir gerar mensagens de erro, mas ele no far a coisa certa. Ele far alguma outra coisa. Especificamente, ele far aquilo que voc o mandou fazer. O problema que o programa que voc escreveu no o programa que voc queria escrever. O significado do programa (sua semntica) est errada. Identificar erros de lgica pode ser complicado, uma vez que requer que voc trabalhe inversamente observando a sada do programa e tentando descobrir o que est fazendo. Revista Qt - Janeiro/Fevereiro-2011 [79]

Verso Brasileira :: Como pensar como um cientista da Computao


1.3.4 Debug experimental Uma das mais importantes habilidades que voc precisa desenvolver no trabalho com este livro a de debugar. Embora possa ser frustrante, debugar um das mais ricas intelectualmente, desafiantes e interessantes partes da tarefa de programar. De certa forma, debugar como trabalho de detetive. Voc est diante de pistas e tem que deduzir os processos e eventos que levaram ao resultado que est vendo. Debugar tambm como uma cincia experimental. Uma vez que voc tenha uma idia do que est errado, voc pode modificar o seu programa e tentar novamente. Se sua hiptese estava correta, ento voc pode prever o resultado da alterao, e voc est um passo mais perto de um programa funcionando. Se sua hiptese estava errada, voc tem tem que aparecer com uma nova. Como Sherlock Holmes pregava, "Quando voc tiver eliminado o impossvel, o que quer que sobre, por mais improvvel, deve ser a verdade." (de O Signo dos Quatro de A. Conan Doyle). Para algumas pessoas, programar e debugar so a mesma coisa. Ou seja, programar o processo de debugar gradualmente um programa at que ele faa o que voc quer. A idia que voc deve sempre comear com um programa funcional que faa alguma coisa, e faa pequenas modificaes, debugando-as enquanto avana, de modo que voc sempre tenha um programa funcional. Por exemplo, o Linux um sistema operacional que contm milhares de linhas de cdigo, mas comeou como um simples programa usado por Linus Torvalds para explorar o chip Intel 80386. De acordo com Larry Greenfield, "Um dos primeiros projetos de Linus era um programa que alternaria entre a impresso de AAAA e BBBB. Mais tarde, isto evoluiu para o Linux" (do livro "The Linux Users' Guide Beta Version 1). Em captulos futuros darei mais sugestes sobre debug e outras prticas de programao. 1.4 Linguagens formais e naturais Linguagens naturais so aquelas faladas pelas pessoas, como Ingls, Espanhol e Francs. Elas no foram projetadas por pessoas (embora pessoas tentem impor certa ordem nelas); elas evoluiram naturalmente.

[80] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Como pensar como um cientista da Computao


Linguagens formais so linguagens projetadas por pessoas para aplicaes especficas. Por exemplo, a notao que os matemticos usam uma linguagem formal que particularmente boa para denotar relacionamentos entre nmeros e smbolos. Qumicos usam uma linguagem formal para representar a estrutura qumica de molculas. E mais importante: Linguagens de programao so linguagens formais que foram definidas para expressar computaes. Como mencionei antes, linguagens formais tendem a ter regras estritas sobre sintaxe. Por exemplo, 3+3=6 uma declarao matemtica sintaticamente correta, mas 3 = +6$ no , Tambm H2O um nome qumico sintaticamente correto, mas 2Zz no . Regras de sintaxe vm em dois sabores, pertencentes a tokens e estrutura. Tokens so os elementos bsicos da linguagem, como palavras e nmeros e elementos qumicos. Um dos problemas com 3=+6$ que o $ no um token legal na matemtica (pelo menos at onde eu sei). Similarmente, 2Zz no legal porque no existe elemento com a abreviao Zz. O segundo tipo de erro de sintaxe pertence estrutura de uma declarao, ou seja, a forma como os tokens so organizados. A declarao 3=+6$ estruturalmente ilegal, porque voc no pode ter um sinal de adio imediatamente depois de um sinal de igualdade. De forma semelhante, frmulas moleculares tem que ter subscritos depois do nome do elemento, no antes. Quando l uma sentena em Ingls ou uma declarao em uma linguagem formal, voc tem que descobrir qual a estrutura da sentena (embora em uma linguagem natural voc o faa inconscientemente). Este processo chamado "parsing". Por exemplo, quando voc ouve a sentena, "O outro sapato caiu," voc fez o "parse" da sentena. Assumindo que voc saiba o que um sapat, e o que significa cair, voc entender a implicao geral da sentena. Embora linguagens formais e naturais tenha muitas caractersticas em comum - tokens, estrutura, sintaxe e semntica existem muitas diferenas.

Revista Qt - Janeiro/Fevereiro-2011 [81]

Verso Brasileira :: Como pensar como um cientista da Computao


ambiguidade: Linguagens naturais so cheias de ambiguidades, com as quais as pessoas lidam usando pistas contextuais e outras informaes. Linguagens formais so projetadas para ser aproximadamente ou completamente no ambguas, o que quer dizer que qualquer declarao tem exatamente um significado, independente do contexto. redundncia: Para compensar a ambiguidade e reduzir mal-entendidos, linguagens naturais empregam um monte de redundncias. Como resultado, elas so frequentemente verbosas. Linguagens formais so menos redundantes e mais concisas. literalidade: Linguagens naturais so cheias de expresses idiomticas e metforas. Se eu disser, "O outro sapato caiu," provavelmente no existe um sapato ou nada caindo. Liguagens formais significam exatamente o que dizem. Pessoas que crescem falando uma linguagem natural (todos) frequentemente tm dificuldade em ajustar-se a linguagens formais. De certa forma a diferena entre linguagem formal natural como a diferena entre posia e prosa, mas muito mais: Poesia: Palavras so usadas pelos seus sons assim como pelos seus significados, e o poema inteiro cria um efeito ou resposta emocional. Ambiguidade no apenas comum mas frequentemente deliberada. Prosa: O sentido literal das palavras mais importante e a estrutura contribui mais para para o significado. Prosa mais passvel de anlise do que poesia, mas ainda frequentemente ambigua. Programas: O significado de um programa de computador no ambguo e literal, e pode ser entendido inteiramente pela anlise dos tokens e estrutura. Aqui vo algumas sugestes para ler programas (e outras linguagens formais). Primeiro, lembre-se de que linguagens formais so muito mais densas que liguagens naturais, ento leva mais tempo para ler. Tambm, a estrutura muito importante, ento geralmente no uma boa idia ler de cima para baixo, da esquerda para a direita. A invs disso, aprenda a fazer o "parse" do programa em sua mente, identificando os tokens e interpretando a estrutura. Finalmente, lembre-se de que os detalhes importam. Pequenas coisas como erros de digitao e pontuao incorreta, das quais voc escapa em linguagens naturais, podem fazer uma grande diferena em uma linguagem formal.

[82] Revista Qt - Janeiro/Fevereiro-2011

Verso Brasileira :: Como pensar como um cientista da Computao


1.5. O primeiro programa Tradicionalmente, o primeiro programa que as pessoas escrevem em um nova linguagem chamado "Al, Mundo" porque tudo o que ele faz escrever as palavras "Al, Mundo". Em C++ este programa parece com isto: #include <iostream.h> // main: gera uma simples sada void main () { cout << "Al, Mundo." << endl; return 0 } Algumas pessoas julgam a qualidade da linguagem de programao pela simplicidade de seu programa "Al, Mundo". Por este critrio, C++ se sai razoavelmente bem. Mesmo assim, este simples programa contm algumas caractersticas que so difceis de explicar para programadores iniciantes. Por ora, vamos ignorar algumas destas caractersticas, como a primeira linha. A segunda linha comea com //, o que indica que um comentrio. Um comentrio um pedao de texto escrito em Portugus (ou em outra lngua natual) que voc coloca no meio de um programa, normalmente para explicar o que o programa faz. Quando o compilador v um //, ele ignora tudo daquele ponto at o final da linha. Na terceira linha, voc pode ignorar a palavra void por enquanto, mas observe a palavra main. main um nome especial que indica o local no programa onde a execuo comea. Quando o programa executado, ele comea executando a primeira declarao int main e continua, na ordem, at atingir a ltima declarao e ento sai. No existe limite para o nmero de declaraes que podem estar na funo main, mas o exemplo contm apenas um. uma declarao bsica de sada, significando que mostra uma mensagem na tela. O "cout" um objeto especial proporcionado pelo sistema que o permite enviar sada para a tela. O smbolo << um Revista Qt - Janeiro/Fevereiro-2011 [83]

Verso Brasileira :: Como pensar como um cientista da Computao


operador que voc aplica a cout e uma string, e que causa a exibio da string. O "endl" um smbolo especial que representa o final de uma linha. Quando voc envia um endl a cout, ele faz com que o cursor mova para a prxima linha da tela. A prxima vez em que voc mandar imprimir alguma coisa, o texto novo aparecer na prxima linha. Como todas as declaraes, a declarao de sada termina com um ponto-e-vrgula (;). Existem algumas outras coisas que voc deve observar sobre a sintaxe deste programa. Primeiro, C++ usa chaves ({ e }) para agrupar coisas. Neste caso, a declarao de sada est entre chaves, indicando que est dentro da definio de main. Note ainda que a declarao est indentada, o que ajuda a mostrar visualmente quais linhas esto dentro da definio. Neste ponto seria uma boa idia sentar na frente de um computador e compilar e executar este programa. Os detalhes sobre como fazer isto, dependem do seu ambiente de desenvolvimento, mas deste ponto em diante neste livro, assumirei que voc sabe como faz-lo. Como mencionei, o compilador C++ um muito rigoroso com a sintaxe. Se voc cometer quaisquer erros quando digitar o programa, as chances so de no compilar com sucesso. Por exemplo, se voc digitou incorretamente iostream, voc deve obter uma mensagem de erro como a seguinte: hello.cpp:1: oistream.h: No such file or directory Existe um monte de informao nesta linha, mas apresentada em um formato denso que no fcil de interpretar. Um compilador mais amigvel poderia dizer alguma coisa como: "Na linha 1 do cdigo fonte chamado hello.cpp, voc tentou incluir um arquivo header chamado oistream.h. Eu no encontrei nada com este nome, mas encontrei um arquivo chamado iostream.h. Por acaso seria isto o que voc quis dizer?" Infelizmente, poucos compiladores so to obsequiosos. O compilador no na verdade to esperto, e na maioria dos casos as mensagens de erro que voc receber sero apenas uma pista sobre o que est errado. Levar algum tempo para ganhar facilidade em interpretar mensagens do compilador.

[84] Revista Qt - Janeiro/Fevereiro-2011

No entanto, o compilador pode ser uma ferramenta til para aprender regras de sintaxe de uma linguagem Comeando com um programa funcional (como hello.cpp), modifique-o de vrias formas e veja o que acontece. Se voc obtiver uma mensagem de erro, tente lembrar-se do que diz a mensagem e o que causou, ento se voc a ver novamente no futuro, saber o que significa. Glossrio linguagem de baixo nvel: Uma linguagem de programao que projetada para ser fcil para o computador executar. Tambm chamada "linguagem de mquina" ou "linguagem assembly" portabilidade: Uma propriedade de um programa que pode ser executado em mais de um tipo de computador. linguagem formal: Qualquer uma das linguagens que as pessoas projetaram para propsitos especficos, como representao de idias matemtica ou programas de computador. Todas as linguagens de programao so linguagens formais. linguagem natural: Qualquer um das lnguas que as pessoas falam que evoluiram naturalmente. interpretar: A traduo de um linha de cada vez, usada para executar um programa escrito em uma linguagem de alto nvel. compilar: Traduzir um programa em uma linguagem de alto nvel para uma linguagem de baixo nvel, todo de uma vez, preparando-o para execuo futura. source code: A program in a high-level language, before being compiled. Cdigo objeto: A sada do compilador, depois da traduo do programa. executvel: Outro nome para o cdigo objeto que est pronto para ser executado.

Revista Qt - Janeiro/Fevereiro-2011 [85]

algortmo: Um processo geral de soluo para uma categoria de problemas. bug: Um erro em um programa. sintaxe: A estrutura de um programa. semntica: O significado de um programa. parse: Examinar um program e analizar a estruutra sinttica. erro de sintaxe: Um erro em um programa que torna impossvel realizar o parse (e consequentemente impossvel de compilar). erro em tempo de execuo: Um erro em um programa que o faz falhar na execuo. erro de lgica: Um erro em um programa que o faz executar uma coisa diferente daquela pretendida pelo programador. debugar: O processo de encontrar e remover qualquer um dos trs tipos de erros.

[86] Revista Qt - Janeiro/Fevereiro-2011

You might also like