<?xml version="1.0" encoding="UTF-8"?><!-- generator="wordpress.com" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>programa-qt &amp;laquo; WordPress.com Tag Feed</title>
	<link>http://wordpress.com/tag/programa-qt/</link>
	<description>Feed of posts on WordPress.com tagged "programa-qt"</description>
	<pubDate>Fri, 25 Jul 2008 18:20:01 +0000</pubDate>

	<generator>http://wordpress.com/tags/</generator>
	<language>en</language>

<item>
<title><![CDATA[Dicas Para um Primeiro Programa Usando o Designer do Qt]]></title>
<link>http://gustavolinux.wordpress.com/?p=89</link>
<pubDate>Sat, 29 Mar 2008 05:02:06 +0000</pubDate>
<dc:creator>Gustavo Lopes de Oliveira Santos</dc:creator>
<guid>http://gustavolinux.wordpress.com/?p=89</guid>
<description><![CDATA[Nas versões 3.x da Qt, você podia inserir o código diretamente pelo Designer nos arquivos *.ui.h.]]></description>
<content:encoded><![CDATA[<p ALIGN="justify">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, <b>mainwindow.ui</b>, ham?), e colocamos no mesmo diretório outros  arquivos.</p>
<p ALIGN="center"><img ALT="Tela inicial do Designer do Qt4" SRC="http://gustavolinux.wordpress.com/files/2008/03/tela_inicial_designer_qt4.png" /></p>
<p><!--more--> Além do arquivo <b>mainwindow.ui</b>, os outros três arquivos são:</p>
<p>1. um arquivo chamado <b>main.cpp</b>, que irá ser o responsável pela inicialização do seu programa;</p>
<p>2. um arquivo chamado <b>mainwindow.h</b>, que será usado para você declarar os métodos do seu programa; e</p>
<p>3. um arquivo chamado <b>mainwindow.cpp</b>, que conterá a implementação dos métodos que você declarou no arquivo mainwindow.h.</p>
<p>Então, vamos fazer nosso primeiro programa usando o Designer do Qt4.</p>
<p>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.</p>
<p>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:</p>
<p><b>Arquivo main.cpp</b></p>
<p><font COLOR="#ff0000">#include &#60;QApplication&#62;</font></p>
<p><font COLOR="#ff0000">#include "mainwindow.h"  </font></p>
<p><font COLOR="#ff0000">int main(int argc, char *argv[])</font></p>
<p><font COLOR="#ff0000">{</font></p>
<p><font COLOR="#ff0000">QApplication app(argc, argv);</font></p>
<p><font COLOR="#ff0000">MainWindow window;</font></p>
<p><font COLOR="#ff0000">window.show(); //exibimos a janela</font></p>
<p><font COLOR="#ff0000">return app.exec();</font></p>
<p><font COLOR="#ff0000">}</font></p>
<p><b>Arquivo mainwindow.h</b></p>
<p><font COLOR="#ff0000">#include "ui_mainwindow.h"</font></p>
<p><font COLOR="#ff0000">class MainWindow : public QMainWindow, private Ui::MainWindow</font></p>
<p><font COLOR="#ff0000">{</font></p>
<p><font COLOR="#ff0000">Q_OBJECT</font></p>
<p><font COLOR="#ff0000">public:</font></p>
<p><font COLOR="#ff0000">MainWindow(QWidget *parent = 0);</font></p>
<p><font COLOR="#ff0000">private slots:</font></p>
<p><font COLOR="#ff0000">///A declaração dos métodos vem abaixo.</font></p>
<p><font COLOR="#ff0000">//void exemploDeMetodo();</font></p>
<p><font COLOR="#ff0000">};</font></p>
<p><b>Arquivo mainwindow.cpp</b></p>
<p><font COLOR="#ff0000">#include "mainwindow.h"</font></p>
<p><font COLOR="#ff0000">MainWindow::MainWindow(QWidget *parent)</font></p>
<p><font COLOR="#ff0000">: QMainWindow(parent)</font></p>
<p><font COLOR="#ff0000">{</font></p>
<p><font COLOR="#ff0000">setupUi(this);</font></p>
<p><font COLOR="#ff0000">///As conecções vêm agora</font></p>
<p><font COLOR="#ff0000">//connect(actionAdicionar_usu_rio,</font></p>
<p><font COLOR="#ff0000">//        SIGNAL(triggered()),</font></p>
<p><font COLOR="#ff0000">//       this,</font></p>
<p><font COLOR="#ff0000">//        SLOT(fazerAlgo()));</font></p>
<p><font COLOR="#ff0000">}</font></p>
<p><font COLOR="#ff0000">///Aqui, vem a implementação dos métodos declarados no arquivo mainwindow.h</font></p>
<p><font COLOR="#ff0000">//void MainWindow::exemploDeMetodo()</font></p>
<p><font COLOR="#ff0000">//{</font></p>
<p><font COLOR="#ff0000">//    aqui o código do método exemploDeMetodo()</font></p>
<p><font COLOR="#ff0000">//}</font></p>
<p ALIGN="justify">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.</p>
<p ALIGN="center"><a TITLE="Criar nova Main Window" HREF="http://gustavolinux.wordpress.com/files/2008/03/create_main_window.png"><img ALT="Criar nova Main Window" SRC="http://gustavolinux.wordpress.com/files/2008/03/create_main_window.thumbnail.png" /></a></p>
<p ALIGN="center">&#160;</p>
<p ALIGN="justify">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.</p>
<p ALIGN="center"><a TITLE="Designer com uma janela em branco" HREF="http://gustavolinux.wordpress.com/files/2008/03/ambiente.png"><img ALT="Designer com uma janela em branco" SRC="http://gustavolinux.wordpress.com/files/2008/03/ambiente.thumbnail.png" /></a></p>
<p ALIGN="justify">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.</p>
<p ALIGN="center"><img ALT="Um programa sendo feito" SRC="http://gustavolinux.wordpress.com/files/2008/03/programa_sendo_feito.png" /></p>
<p ALIGN="justify">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!</p>
<p ALIGN="justify">Finalmente, salve esta janela. É muito importante o nome do arquivo ser  <b>mainwindow.ui</b>, 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.</p>
<p ALIGN="center"><a TITLE="Salvando com o nome certo, isto é, mainwindow.ui" HREF="http://gustavolinux.wordpress.com/files/2008/03/salvando_com_o_nome_certo.png"><img ALT="Salvando com o nome certo, isto é, mainwindow.ui" SRC="http://gustavolinux.wordpress.com/files/2008/03/salvando_com_o_nome_certo.thumbnail.png" /></a></p>
<p ALIGN="justify">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.</p>
<p ALIGN="center"><a TITLE="Tudo quase pronto para a compilação" HREF="http://gustavolinux.wordpress.com/files/2008/03/tudo_quase_pronto.png"><img ALT="Tudo quase pronto para a compilação" SRC="http://gustavolinux.wordpress.com/files/2008/03/tudo_quase_pronto.thumbnail.png" /></a></p>
<p ALIGN="left">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:</p>
<p ALIGN="left"><b>/usr/lib/qt4/bin/qmake -project</b></p>
<p ALIGN="left"><b>/usr/lib/qt4/bin/qmake</b></p>
<p ALIGN="left"><b>make</b></p>
<p ALIGN="center"><a TITLE="Primeira compilação" HREF="http://gustavolinux.wordpress.com/files/2008/03/primeira_compilacao.png"><img ALT="Primeira compilação" SRC="http://gustavolinux.wordpress.com/files/2008/03/primeira_compilacao.thumbnail.png" /></a></p>
<p ALIGN="justify">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.</p>
<p ALIGN="justify">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 <b>./nomeDoArquivo</b>  . O programa não faz nada, é só uma interface gráfica inútil; precisamos, ainda, programar os arquivos <i>mainwindow.h</i> e <i>mainwindow.cpp</i> .</p>
<p ALIGN="center"><a TITLE="foto_qualquer.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/foto_qualquer.png"><img ALT="foto_qualquer.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/foto_qualquer.thumbnail.png" /></a></p>
<p ALIGN="left"><b>Programando o arquivo mainwindow.h</b></p>
<p ALIGN="left">Vamos abrir o arquivo mainwindow.h com um bom editor de textos. O Kate, por exemplo.</p>
<p ALIGN="center"><a TITLE="Arquivo mainwindow.h no Kate" HREF="http://gustavolinux.wordpress.com/files/2008/03/arquivo_mainwindow_h.png"><img ALT="Arquivo mainwindow.h no Kate" SRC="http://gustavolinux.wordpress.com/files/2008/03/arquivo_mainwindow_h.thumbnail.png" /> </a><a TITLE="arquivo_mainwindow_h1.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/arquivo_mainwindow_h1.png"><img ALT="arquivo_mainwindow_h1.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/arquivo_mainwindow_h1.thumbnail.png" /></a></p>
<p ALIGN="justify">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:</p>
<p ALIGN="justify"><font COLOR="#ff0000">void mudarTexto();</font></p>
<p ALIGN="justify">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.</p>
<p ALIGN="justify">&#160;</p>
<p ALIGN="justify"><b>Programando o arquivo mainwindow.cpp</b></p>
<p ALIGN="justify">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.</p>
<p ALIGN="center"><a TITLE="011.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/011.png"><img ALT="011.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/011.thumbnail.png" /></a>  <a TITLE="021.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/021.png"><img ALT="021.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/021.thumbnail.png" /> </a><a TITLE="031.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/031.png"><img ALT="031.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/031.thumbnail.png" /></a></p>
<p ALIGN="left"> E, dentro das chaves do método mudarTexto(), você deverá digitar:</p>
<p ALIGN="left"><font COLOR="#ff0000">label-&#62;setText("Um novo texto!");</font></p>
<p ALIGN="justify">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:</p>
<p ALIGN="left"><font COLOR="#ff0000">connect(pushButton,<br />
SIGNAL(clicked()),<br />
this,<br />
SLOT(mudarTexto()));</font></p>
<div ALIGN="center"><a TITLE="101.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/101.png"><img ALT="101.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/101.thumbnail.png" /> </a><a TITLE="111.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/111.png"><img ALT="111.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/111.thumbnail.png" /> </a><a TITLE="121.png" HREF="http://gustavolinux.wordpress.com/files/2008/03/121.png"><img ALT="121.png" SRC="http://gustavolinux.wordpress.com/files/2008/03/121.thumbnail.png" /></a></div>
<p ALIGN="left">E, por fim, salve o arquivo animado e pimpolho e compile o programa digitando <b>make</b> no terminal. Ao executar o programa, o previsto acontecerá: quando se clicar no botão, o texto do Label vai ser outro.</p>
<p ALIGN="left">Por hoje, é só. Até a próxima!</p>
]]></content:encoded>
</item>

</channel>
</rss>
