Docstoc

Programas com Interface Gráfica

Document Sample
Programas com Interface Gráfica Powered By Docstoc
					Programas com Interface Gráfica
Graphical User Interface (GUI)

Utilização do Qt Designer.

1. Abrir o Qt Designer no menu Development do KDE, ou digitar no promp de
   comando: “designer &”

2. Criar um novo projeto a partir do menu “File -> New”. A opção escolhida pode ser
   “Dialog” ou “Main Window”. A opção “Main Window” possui um wizard que já
   constrói os menus “File”, “Edit” e “Help” para a aplicação com algumas opções
   padrão e seus métodos correspondentes. Se não for necessário utilizar menus,
   escolher a opção “Dialog”. Isto irá criar um novo Form em branco, onde poderão
   ser colocados widgets (botões, caixas de texto, labels, tabelas, etc.).
3. Construção de um programa exemplo para concatenar duas strings:
   Colocar duas caixas de texto para receber as strings, um botão para executar a
   operação e uma caixa de texto para exibir o resultado.
4. Observando na janela “Property Editor”, é possível alterar as propriedades dos
   componentes, como dimensões, cores, nome, etc.. Nesta janela, alterar o texto do
   botão para “Concatenar”.


5. Agora é preciso associar a ação do botão ao trecho de código que executará a
   operação desejada. Para isso é utilizado o conceito de “slots / signals” do Qt. Para
   entender melhor esses conceitos, consultar a referência do Qt.

6.    Cada componente ou widget dispara um sinal (por exemplo clicar um botão
     dispara o sinal clicked() ) e este sinal deve ser associado a um slot. Para criar slots
     para o form atual, clicar com o botão direito sobre o form, ou no menu “Edit ->
     Slots”, que abrirá a seguinte janela:




7. Clicar no botão “new slot” e escolher um nome para o slot (“Concatenar()”).



8. Na barra de ferramentas clicar no botão “Connect Signals/slots”. O cursor tomará a
   forma de cruz. Clicar sobre o botão do form cuja ação queremos determinar e
   arrastar para uma área vazia do form:
Isto causará o aparecimento da janela “Edit Connections”. Nesta janela é possível
associar os sinais gerados pelo componente aos slots disponíveis no form. Seguindo o
exemplo proposto, selecionar o sinal “Clicked()” e logo após o slot “Concatenar()” e
clicar em “connect”.
Estes passos devem ser repetidos para todos os componentes aos quais deseja-se
associar alguma ação.

Neste ponto temos os slots criados e associados a sinais, porém o seu código deverá
ser escrito depois.

Agora podemos salvar o projeto em “File -> Save”.
Isto irá gerar um arquivo “Form1.ui”. Observar que este arquivo não é um cpp, mas
apenas uma descrição da interface gráfica em linguagem XML.

Este arquivo deverá ser compilado utilizando os seguintes comandos no prompt:

# uic –o form1.h form1.ui

# uic –i form1.h -o form1.cpp form1.ui

A primeira linha gera o arquivo de header .h para a classe do exemplo, e a segunda
linha gera o arquivo .cpp com a implementação das funções menbro da classe.

Os arquivos form1.h e form1.cpp para o exemplo proposto são mostrados abaixo:
/****************************************************************************
** Form1 interface generated from reading ui file 'form1.ui'
**
** Created: Mon Dec 8 19:11:20 2003
**    by: The User Interface Compiler (uic)
**
** WARNING! All changes made in this file will be lost!
****************************************************************************/
#ifndef FORM1_H
#define FORM1_H

#include <qvariant.h>
#include <qdialog.h>
class QVBoxLayout;
class QHBoxLayout;
class QGridLayout;
class QLineEdit;
class QPushButton;

class Form1 : public QDialog
{
   Q_OBJECT

public:
  Form1( QWidget* parent = 0, const char* name = 0, bool modal = FALSE, WFlags fl = 0 );
  ~Form1();

  QLineEdit* LineEdit7;
  QLineEdit* LineEdit8;
  QLineEdit* LineEdit9;
  QPushButton* PushButton16;

public slots:
   virtual void Concatenar();
};

#endif // FORM1_H
/****************************************************************************
** Form1 implementation generated from reading ui file 'form1.ui'
**
** Created: Mon Dec 8 19:11:38 2003
**    by: The User Interface Compiler (uic)
**
** WARNING! All changes made in this file will be lost!
****************************************************************************/
#include "form1.h"

#include   <qvariant.h>
#include   <qlineedit.h>
#include   <qpushbutton.h>
#include   <qlayout.h>
#include   <qtooltip.h>
#include   <qwhatsthis.h>

Form1::Form1( QWidget* parent, const char* name, bool modal, WFlags fl )
   : QDialog( parent, name, modal, fl )
{
   if ( !name )
          setName( "Form1" );
   resize( 342, 290 );
   setCaption( trUtf8( "Form1" ) );

    LineEdit7 = new QLineEdit( this, "LineEdit7" );
    LineEdit7->setGeometry( QRect( 160, 40, 71, 31 ) );

    LineEdit8 = new QLineEdit( this, "LineEdit8" );
    LineEdit8->setGeometry( QRect( 160, 90, 71, 31 ) );

    LineEdit9 = new QLineEdit( this, "LineEdit9" );
    LineEdit9->setGeometry( QRect( 150, 190, 81, 31 ) );

    PushButton16 = new QPushButton( this, "PushButton16" );
    PushButton16->setGeometry( QRect( 110, 140, 121, 31 ) );
    PushButton16->setText( trUtf8( "Concatenar" ) );

    // signals and slots connections
    connect( PushButton16, SIGNAL( clicked() ), this, SLOT( Concatenar() ) );
}

Form1::~Form1()
{
   // no need to delete child widgets, Qt does it all for us
}

void Form1::Concatenar()
{
   qWarning( "Form1::Concatenar(): Not implemented yet!" );
}


Neste ponto já temos o arquivo .cpp com o código em c++ para o projeto criado e
devemos inserir o restante do código no arquivo “form1.cpp”.

Observar que no arquivo form1.cpp já foi criado automaticamente a função
Concatenar(), porém sem código. Se esta função for chamada exibirá a mensagem
“Not implemented yet!”.

Criar o arquivo principal que chama a interface gráfica
“grafico.cpp” :
#include <qapplication.h>

#include "form1.h"

int main( int argc, char *argv[] )
{
         QApplication app( argc, argv );

        Form1 grafico;
        app.setMainWidget( &grafico );
        grafico.show();
        int ret = app.exec();

        return ret;
}




Editar o arquivo form1.cpp e escrever o codigo para a função “Concatenar()”:



void Form1::Concatenar()
{
        LineEdit1_3->setText(    LineEdit1->text() + LineEdit1_2->text()   );
}




Agora basta compilar e gerar o executável utilizando os comandos:

# moc –o moc_form1.cpp form1.h

# g++ -I$QTDIR/include form1.cpp grafico.cpp moc_form1.cpp –L$QTDIR/lib -lqt


Esta linha gera o arquivo executável “a.out”:

# ./a.out &


Para facilitar o processo de compilação pode-se utilizar um shell script que executa
todos os comandos de uma só vez.
Criar um arquivo em branco (“compila”), e digitar (substituindo “form1” pelo nome do
projeto):

#!
uic –o form1.h form1.ui

uic –i form1.h -o form1.cpp form1.ui

moc –o moc_form1.cpp form1.h

g++ -I$QTDIR/include form1.cpp grafico.cpp moc_form1.cpp –L$QTDIR/lib -lqt
Para efetuar todos os passos da compilação basta executar:

# ./compila

Lembrar que as linhas

uic –o form1.h form1.ui
uic –i form1.h -o form1.cpp form1.ui

geram novamente os arquivos form1.h        e form1.cpp, sobrescrevendo qualquer
alteração que tenha sido feita anteriormente. Por isso é ideal apenas durante o
desenvolvimento da interface gráfica. Quando a GUI não for sofrer mais alterações,
alterando-se apenas o código no arquivo .cpp, utilizar outro script de compilação
apenas com a última linha:

#!
g++ -I$QTDIR/include form1.cpp grafico.cpp moc_form1.cpp –L$QTDIR/lib –lqt

				
DOCUMENT INFO