I Seminrio Doctum de Tecnologia da Informao

Introduo ao Qt Designer

de Tecnologia da Informao

I Seminrio Doctum

Introduo ao Qt Designer
Introduo A ferramenta Qt uma biblioteca de classes C++ para construo de programas GUI multiplataforma, ou seja, write once, compile anywhere (Escreva uma vez, compile em qualquer lugar). Assim, um programa construdo em Qt pode ser compilado em Windows, Linux, Mac e outros sistemas operacionais. Em sua biblioteca, a Qt traz uma infinidade de APIs, que podem ser usadas para diversos fins, desde tratamento de strings, manipulao de arquivos, construo de interfaces grficas (GUI) a criao de objetos OpenGL e muitas outras possibilidades e por ser feita em C++, a Qt utiliza todos os recursos avanados de Orientao a Objetos, alm de herdar toda a eficincia dessa linguagem largamente utilizada em sistemas de grande porte. Outro ponto interessante que a Qt a biblioteca base do projeto KDE, onde a maioria dos aplicativos utilizados no ambiente KDE so construdos utilizando a Qt. Essa unio Qt/KDE fez com que ambos crescessem de forma surpreendente. O Qt Designer um ambiente de programao visual que permite a construo de programas de forma mais rpida utilizando a Biblioteca Qt, possibilitando a criao de interfaces apenas arrastando os objetos e encaixando-os no projeto. Sinais e Slots Uma das caractersticas importantes da Qt so os sinais e slots. Sinais podem ser emitidos tanto por uma ao do usurio, quanto por um evento interno do computador. Os Slots so as funes que repondem a certos sinais. Um exemplo para este mecanismo o ato de pressionar um boto ok , o ato de pressionar (clicked()) o boto um evento que gera um sinal, a ao que ele deve tormar como fechar a janela invocando um mtodo close() interliga o sinal (clicked()) ao slot (close()). A utilizao de Sinais e Slots bem simples e rpida. A Interface O Qt Designer fornece um ambiente agradvel de se trabalhar, seguindo o mesmo padro utilizado por outras ferramentas visuais, com vrias ferramentas de fcil acesso e possibilitando a escrita do cdigo na mo. Outro item muito importante sobre o Manual do Qt, citado como um dos melhores manuais de uma ferramenta de programao. Ele d acesso a todas as funcionalidades e possibilidades que se pode fazer com a Qt, descrevendo minuciosamente cada classe e seus atributos e mtodos. O Manual pode ser usado largamente para consulta e aprendizado desta biblioteca.

Higor de Pdua Vieira Neto

DoctumTec

I Seminrio Doctum de Tecnologia da Informao

Introduo ao Qt Designer

Ambiente bsico do Qt Designer

Project Overview Permite uma viso geral do projeto, exibindo todos os arquivos do projeto.

Object Explorer Permite a manipulao dos objetos, slots, funes, variveis, sinais incluso de classes Property Editor/Signal Handlers Editor de Propriedades: permite mudar a caractersticas do objeto Manipulador de Sinais: Pemite a criao e a manipulao dos sinais.

rea de Construo: Form: Formulrio inicial, nele sero colocados os objetos.

ToolBox: Caixa de Ferramentas: exibe todas as ferramentas disponveis para uso imediato, sem a necessidade de criao.

Tela 1 Ambiente do Qt Designer

Criando um primeiro projeto Nesse primeiro projeto, vamos criar um Hello Word utilizando a biblioteca Qt. No entanto, este exemplo utiliza mnimos recursos do Qt Designer, visto que o cdigo todo feito a mo, justamente para assimilar os conceitos. 1 Vamos criar um arquivo de projeto, o arquivo que organiza todo nosso programa, de forma que no momento da compilao criado um MakeFile partir do arquivo de projeto .pro. Para isso crie um novo arquivo do tipo C++ Project e salve-o como hello.pro: 2 Agora ser preciso criar um arquivo de cdigo para escrever o programa. Novamente crie um novo arquivo do tipo C++ Source File e salve-o Ilustrao 1 - Configuraes do projeto como hello.cpp. 3 Escreva o cdigo:
#include <qapplication.h> #include <qlabel.h> int main(int argc, char *argv[]) { QApplication app(argc, argv); QLabel *label = new QLabel("Hello Word!", 0); app.setMainWidget(label); label->show();
Higor de Pdua Vieira Neto 2 DoctumTec

I Seminrio Doctum de Tecnologia da Informao

Introduo ao Qt Designer

return app.exec();

4 Para compilar e executar o codigo acima utilize os passos abaixo em um interpretador de comando (shell, prompt do DOS, bash)
>> qmake hello.pro >> make >> ./hello

Criando um aplicativo usando o Qt Designer Neste segundo exemplo iremos criar um aplicativo um pouco mais avanado, utilizando os recursos do Qt Designer, com isso podemos observar a eficincia desta ferramenta. 1 Como no exemplo anterior crie um novo projeto e d a ele um nome: exemplo.pro. 2 Agora ser preciso criar um formulrio em branco para construir a interface, para isso crie um arquivo novo do tipo Widget. Widget e uma janela vazia, onde nela iremos inserir os componentes da interface a ser criada. Selecione o formulrio e v ao editor de propriedades (Property Editor) e mude as opes necessrias, veja a Ilustrao 3, como: name: nome do objeto, caption: Texto de exibio no ttulo da janela. 3 Agora, iremos colocar os componentes no formulrio criado. Utilize o menu Tools (ferramentas), e v inserindo os objetos de acordo com a Ilustrao 4. Para cada objeto criado utilize o Editor de Propriedades para modificar algumas caractersticas.

Os objetos a serem inseridos, so: TextLabel (rotulo), TextField (caixa de texto), ComboBox (Caixa de Seleo) e um Button (botao), em seguida modifique as propriedades dos objetos: TextLabel: caption para Texto: ; TextField: name para meutexto; ComboBox: name para todostextos; Button: name para botaoInserir, caption para Inserir >>;
Ilustrao 3 - Interface com os componentes inseridos

Ilustrao 2 - Editor de Propriedades / Property Editor

Higor de Pdua Vieira Neto

DoctumTec

I Seminrio Doctum de Tecnologia da Informao

Introduo ao Qt Designer

4 Criando um slot, vamos criar o slot que ir responder ao evento clicked() do mouse sobre o objeto Button. Abra o Editor de Funes, clicando no menu Edit > Slots e crie duas novas Funes: init() que uma funo construtora, ou seja, a primeira a ser invocada e a funo inserir() que ir inserir o contedo da caixa de texto em uma posio livre na caixa de seleo. 5 Conecte o sinal do Button ao slot inserir(), para isso: abra o Editor de Conexes e crie uma nova conexo onde o Sender o objeto Button botaoInserir, o Signal clicked(), o Receiver o formulrio Exemplo e o slot a funo criada inserir(). 6 Clique com o boto direito sobre o formulrio e selecione a opo Source, onde ir criar o arquivo de cdigo deste formulrio. Neste arquivo, localize a funo inserir() criada automaticamente pelo Designer e insira o cdigo abaixo:
void Exemplo::inserir() { String texto = meutexto->text().upper(); //pega o texto do TextField todostextos->insertItem(texto); //insere o texto no ComboBox meutexto->setText(""); //esvazia o TextField }

7 Salve os arquivos criados e crie um novo arquivo do tipo C++ Main-file(main.cpp). Todo programa em Qt inicia-se pelo arquivo main.cpp, portanto sua existncia de extrema importncia, porem todos arquivos main.cpp so semelhante, ou seja, no h diferenas de um programa para outro, pois, sua funo principal e invocar o formulrio principal do programa. 8 Salve seu programa, e compile o em um interpretador de comandos utilizando:
>> qmake exemplo.pro >> make >> ./exemplo

Higor de Pdua Vieira Neto

DoctumTec