Dicas Para um Primeiro Programa Usando o Designer do Qt

Nas versões 3.x da Qt, você podia inserir o código diretamente pelo Designer nos arquivos *.ui.h. Hoje em dia, não fazemos mais isso. O que fazemos é criar a interface do programa (normalmente, a primeira janela é uma MainWindow), salvá-la com um nome sugestivo (que tal, mainwindow.ui, ham?), e colocamos no mesmo diretório outros arquivos.

Tela inicial do Designer do Qt4

Além do arquivo mainwindow.ui, os outros três arquivos são:

1. um arquivo chamado main.cpp, que irá ser o responsável pela inicialização do seu programa;

2. um arquivo chamado mainwindow.h, que será usado para você declarar os métodos do seu programa; e

3. um arquivo chamado mainwindow.cpp, que conterá a implementação dos métodos que você declarou no arquivo mainwindow.h.

Então, vamos fazer nosso primeiro programa usando o Designer do Qt4.

Antes que você continue a leitura deste pequeno artigo, cabe salientar que isto não é uma regra, e sim, apenas um conselho. Cada programador tem seu método de organização de arquivos. Este artigo é apenas um conselho para quem está iniciando no mundo da programação Qt. Vale lembrar que estamos usando um sistema Mandriva 2008, já com o Qt4 e suas bibliotecas instaladas.

Primeiramente, crie uma pasta. Esta pasta é onde ficarão os arquivos do seu programa. Depois de criada a pasta, crie três arquivos com o seguinte conteúdo:

Arquivo main.cpp

#include <QApplication>

#include “mainwindow.h”

int main(int argc, char *argv[])

{

QApplication app(argc, argv);

MainWindow window;

window.show(); //exibimos a janela

return app.exec();

}

Arquivo mainwindow.h

#include “ui_mainwindow.h”

class MainWindow : public QMainWindow, private Ui::MainWindow

{

Q_OBJECT

public:

MainWindow(QWidget *parent = 0);

private slots:

///A declaração dos métodos vem abaixo.

//void exemploDeMetodo();

};

Arquivo mainwindow.cpp

#include “mainwindow.h”

MainWindow::MainWindow(QWidget *parent)

: QMainWindow(parent)

{

setupUi(this);

///As conecções vêm agora

//connect(actionAdicionar_usu_rio,

// SIGNAL(triggered()),

// this,

// SLOT(fazerAlgo()));

}

///Aqui, vem a implementação dos métodos declarados no arquivo mainwindow.h

//void MainWindow::exemploDeMetodo()

//{

// aqui o código do método exemploDeMetodo()

//}

Observe que várias linhas estão comentadas. Fizemos isto para efeito didático. Agora, abra o Designer e escolha, na lista, a opção “Main Window”. Esse é o tipo de janela que normalmente os programas usam como janela principal. Ela dá suporte à menus e barras de ferramentas. Clique no botão “Create” para criar uma nova janela.

Criar nova Main Window

Pois é. Observe que o meu Designer está em formato diferente do padrão, ou seja, agrupado (SDI). Configurei desta maneira porque acho melhor de trabalhar assim; o desktop fica parecendo mais “limpo”, sem muitas janelas. Entretanto, isso não importa. O que importa é a gente começar a modelar nossa janela. Inicialmente, temos isso: uma janela em branco.

Designer com uma janela em branco

Agora coloque um botão no canto de uma janela. Um botão, entendeu? Está aí, nessa lista do lado… não, não é esse… sobe mais um pouco… desce… não… aquele alí, ó, o Push Button! Isso! Isso mesmo! Agora arrasta ele para a janela! Muito bem! Faça o mesmo com Label… o Label está lá em baixo da lista. Aí! Esse aí mesmo. Arraste para abaixo do botão. Ótimo. Agora, como sobrou muito espaço, diminua a janela. Ela deverá ficar mais ou menos como mostra a figura abaixo.

Um programa sendo feito

Agora, clique duas vezes no botão que você arrastou para sua janela, e mude o texto dele para algo mais amigável, como por exemplo, “mudar texto”. Faça o mesmo com o TextLabel, mudando o texto para “vou mudar”. O nosso objetivo é muito simples: quando o botão for clicado, o texto do Label vai mudar!

Finalmente, salve esta janela. É muito importante o nome do arquivo ser mainwindow.ui, pois os três arquivos que você criou ainda agora pressupõem que este é o nome desta janela. Assim, salve com esse nome (mainwindow.ui) na mesma pasta em que se encontram os três arquivos.

Salvando com o nome certo, isto é, mainwindow.ui

Tudo muito bem, tudo muito bom. É preciso abrir agora, com um terminal, a pasta em que todos esses arquivos (agora 4) se encontram. Como uso KDE, vou usar o Konqueror para ir até a pasta, e, dentro da pasta, basta teclar F4 para abrir um emulador de terminal (o Konsole). Conforme figura abaixo.

Tudo quase pronto para a compilação

Devemos executar três comandos, sendo os dois primeiros obrigatórios apenas na primeira vez que se está compilando o programa. Lembranco que estamos usando Mandriva, os comandos são esses:

/usr/lib/qt4/bin/qmake -project

/usr/lib/qt4/bin/qmake

make

Primeira compilação

O comando qmake -project vai criar um arquivo com o mesmo nome da pasta atual, mais a extensão *.pro. O segundo comando vai gerar, a partir do arquivo *.pro, um arquivo Makefile, que será usado para compilar o programa. O terceiro comando var gerar o programa propriamente dito. O único comando que você precisará usar daqui para frente é o make, visto que o arquivo *.pro e o Makeflie já estão criados.

Olhando para o Konqueror, e teclando F5 para atualizar a pasta, vemos que um arquivo executável foi criado, com o mesmo nome da pasta. É o seu programa propriamente dito. Dê um duplo clique nele, ou então, pelo terminal digite ./nomeDoArquivo . O programa não faz nada, é só uma interface gráfica inútil; precisamos, ainda, programar os arquivos mainwindow.h e mainwindow.cpp .

foto_qualquer.png

Programando o arquivo mainwindow.h

Vamos abrir o arquivo mainwindow.h com um bom editor de textos. O Kate, por exemplo.

Arquivo mainwindow.h no Kate arquivo_mainwindow_h1.png

Observe as duas figuras acima. É isso mesmo que você deverá fazer. Ou seja, onde está escrito o comentário “//void exemploDeMetodo();”, você substituirá por uma linha sem comentários:

void mudarTexto();

Ou seja, você está criando um novo método chamado mudarTexto(). O que este método fará, você vai implementar agora, no arquivo mainwindow.cpp. Mas antes, salve o arquivo atual.

Programando o arquivo mainwindow.cpp

Você deverá, no arquivo mainwindow.cpp, descomentar as linhas do método fazerAlgo, e substituir o nome do método por mudarTexto. Como uma imagem vale mais que mil palavras, abaixo, temos três imagens que vão fazer você compreender o que é para fazer.

011.png 021.png 031.png

E, dentro das chaves do método mudarTexto(), você deverá digitar:

label->setText(“Um novo texto!”);

O programa ainda não está pronto. Isso porque dissemos o que o método mudarTexto() fará. Falta, ainda, conectar o botão ao método, para que quando o botão (pushButton é o nome do botão) for clicado (clicked), o método mudarText() seja acionado. Para isso, descomente as linhas mostradas na figura abaixo, e substituindo as palavras para que fiquem dessa forma:

connect(pushButton,
SIGNAL(clicked()),
this,
SLOT(mudarTexto()));

E, por fim, salve o arquivo animado e pimpolho e compile o programa digitando make no terminal. Ao executar o programa, o previsto acontecerá: quando se clicar no botão, o texto do Label vai ser outro.

Por hoje, é só. Até a próxima!

NOTÍCIA MUITO IMPORTANTE: Que tal se preparar para o primeiro exame para obtenção do CCNA, o ICND1, lendo um manual divertido, direto e fácil de entender? E tudo isso de forma gratuita? Acompanhe então o desenvolvimento do livro “Guia Não-Oficial Para o Exame ICND1“, de minha autoria, no blog Plano em Foco. Você pode ver o andamento do livro, fazer comentários e sugestões! Já estão prontos 8 capítulos, sendo que você pode baixar o capítulo 5 para ver como está ficando o livro. Clique aqui e faça o download imediatamente!! 😉

Anúncios

9 Responses to “Dicas Para um Primeiro Programa Usando o Designer do Qt”


  1. 1 asdasd maio 28, 2008 às 8:48 pm

    Obrigado
    Vc me salvou… para usuarios ubuntu nao precisa localização em:

    /usr/lib/qt4/bin/qmake -project

    /usr/lib/qt4/bin/qmake

    make

    Basta isto

    1 – qmake -project
    2 – qmake
    3 – make
    4 – ./nomedapasta

  2. 2 Hugo Barros agosto 18, 2008 às 7:20 pm

    Poxa cara!!! Muito BOm. E quando ao comentário do amigo ai em cima, já ia perguntar pois sou usuário do Kubuntu. !!!

    Vlw.

  3. 3 fabio setembro 3, 2008 às 2:11 pm

    Eu sou iniciante tanto no linux quanto no QT,estou usando o QT4, e agredeço por disponibilizar esse artigo, que me ajudou.
    Se vc tiver mais material disponivel eu agredeço muito.

  4. 4 Gustavo Lopes de Oliveira Santos setembro 9, 2008 às 1:52 pm

    Obrigado pelos reconhecimentos, amigos. É muito gratificante para mim saber que tenho ajudado. Isso me anima e me dá vontade de continuar este projeto de documentação.

    Mais uma vez, obrigado.

  5. 5 Hugo Barros setembro 18, 2008 às 5:35 am

    Cara me diz como é que eu faço pra onfigurar o meu Qt designer pra ficar agrupado (SDI)-> com a janelinhas todas juntas numa só.

    Vlw!!!

  6. 6 Andre Castro novembro 18, 2008 às 8:15 pm

    Ola, Hugo Barros,

    No designer-qt4, procure a janela Qt Designer, menu Edit, ultima opção Preferences. No primeiro quadrinho onde diz “User Interface Mode” troque para Docked Window e botão OK.

  7. 7 Zhu Sha Zang novembro 19, 2008 às 12:24 am

    Vai em Edit, Preference, Docked Windows

    t+

    P.S.: versão 4.4.2

  8. 8 Arilson Santos dezembro 4, 2008 às 6:24 pm

    Olá gustavo,

    Sou programador C# e a pouco tempo venho aprendendo Java e meio insatisfeito com o NetBeans e Swing, resolvi entrar na net e pesquisar sobre melhoras, e encontrei muita gente reclamando da mesma coisa: lentidão e resultado de design inferior a quase todos no mercado. Daí encontrei um cara falando sobre o Qt.. Até agora tô muito perdido, consigo trabalhar com ele e Java? Tem algum site bom para iniciantes?

    Grato,

  9. 9 Pedro Ivan março 12, 2009 às 10:38 pm

    Olá! Estou tentando aprender a usar o QT no windows e de fato este foi o melhor tutorial “primeiro passo” que achei, sou iniciante em tudo na verdade, rs.

    O caminho para gerar os *.pro, makefile… Como são usados no windows? Baixei o mingw também, que o próprio site do QT aconselha baixar.

    Obrigado 🙂


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s





%d blogueiros gostam disto: