Desenvolvimento Código Aberto

SpinBox

É um controle de rotação, onde os usuários podem clicar em botões de seta para alterar gradualmente o valor dentro de sua caixa de texto numérico . A caixa de rotação refere-se à combinação de uma caixa de texto e seu controle de rotação associado. O SpinBox possui uma faixa de configuração de valore limite permitindo que o usuário escolha valores entre o mínimo e o máximo definido pelo desenvolvedor.

SpinBox – Programa

Qt Creator – Design

Crie um novo programa C++ utilizando Widgets e arraste para a tela três Labels, um LineEdit, um SpinBox e um PushButton. Crie o Slot para o evento de clique do botão e utilize o código abaixo para completar o código gerado automaticamente. Use a figura abaixo para auxiliar o design do formulário:

Qt -Design

Exemplo:

Neste exemplo usamos um SpinBox e o associamos a um LineEdit Control e inicializamos o SpinBox, parametrizando um valor mínimo e um valor máximo para o controle.

Para a versão deste programa C++ Windows MFC: clique aqui.

C#

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // Inicializa valores limite para o SpinBox
    ui->spinBox->setRange(1,10);

}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    // captura e exibe texto do SpinBox
     ui->lineEdit->setText(ui->spinBox->text());
}

ComboBox

Em computação, uma caixa de combinação é um elemento de interface gráfica. Um ComboBox permite ao usuário escolher uma das várias opções, pode ter duas formas muito diferentes. A forma padrão é a caixa de combinação não editável, que conta com um botão e uma lista suspensa de valores. A segunda forma, chamada de caixa de combinação editável, possui um campo de texto com um pequeno botão confinando-o. O usuário pode digitar um valor no campo de texto ou clique no botão para exibir uma lista drop-down.

Listwidget

Em computação, uma caixa de listagem é um elemento de interface gráfica. Uma ListBox apresenta ao usuário um grupo de itens, exibidos em uma ou mais colunas. As listas podem ter muitos itens, por isso eles são muitas vezes colocados em painéis de rolagem.

ComboBox – ListWidget – Programa

Qt Creator

Para criar um programa como este você precisa aprender alguns pequenos detalhes da interface gráfica e algumas das peculiaridades dos widgets do framework Qt, então siga os seguintes passos:

1 – Crie um novo projeto de Widgets. Arraste para o formulário um componente GroupBox e o redimensione para que caiba todos os outros componentes dentro dele. Você pode notar que o componente está sem as bordas, isto se deve ao fato de que os widgets do Qt são customizáveis e possuem a propriedade StyleSheet para que você possa declarar as modificações que deseja na aparência de cada componente. Abra a propriedade StyleSheet e na janela subsequente e coloque o código como na imagem abaixo:

Qt – StyleSheet

Sobre Qt StyleSheets: http://qt-project.org/doc/qt-4.8/stylesheet.html

2 – Arraste para a tela 3 widgets Label, um ListWidget e um combobox, mude suas propriedades de texto e os alinhe conforme a figura abaixo:

Qt Creator – Design

3 –  Após terminar o design crie os Slots de duplo clique para o ListWidget e o de mudança de item para o ComboBox, utilize o código abaixo para completar o seu código gerado automaticamente, visto que utilizamos o construtor da classe para inicializar uma Array com os dados que utilizaremos para os componentes. Clique em Run para rodar o programa.

Para a versão deste programa C++ Windows MFC: clique aqui.

Exemplo:

Neste exemplo usamos um ComboBox e um ListBox para criar um programa C++ e utilizamos os slots para os eventos de cada Widget para interligar suas ações.

C++

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // Inicializa formulario

    // Cria Array
    QString  itens[] = { "Satisfaction", "Paint it Black", "Wild Horses", "Brown Sugar",
                         "Sympathy for the Devil", "Start Me Up" };

    // Alimenta ListBox e Combobox
    for (int i=0; i < 6; i++)
    {
        ui->listWidget->addItem(itens[i]);
        ui->comboBox->addItem(itens[i]);
    }

}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_listWidget_doubleClicked(const QModelIndex &index)
{
    // Alimenta texto e Sincroniza combo
    ui->label->setText("Rolling Stones: " + ui->listWidget->currentItem()->text());
    ui->comboBox->setCurrentIndex(ui->listWidget->currentIndex().row());
}

void MainWindow::on_comboBox_currentIndexChanged(const QString &arg1)
{
     // Alimenta texto e Sincroniza lista
     ui->label->setText("Rolling Stones: " + ui->comboBox->currentText());
     ui->listWidget->setCurrentRow(ui->comboBox->currentIndex());
}

RadioButton

Em computação, um botão de opção ou botão de rádio (Radiobutton) é um elemento de interface gráfica (isto é um componente widget) com dois estados: selecionado (ativado) e não-selecionado (desativado), quando o usuário pressiona um botão do mouse ou uma tecla como espaço. Botões de opção são usados num grupo para apresentar um conjunto limitado de escolhas (duas ou mais) que são mutuamente exclusivas. Deste maneira, quando o usuário seleciona um outro botão no mesmo conjunto, o outro botão já selecionado torna-se automaticamente desativado.

isChecked

É uma função que retorna um valor equivalente ao Checked (marcado) em linguagens de alto nível.

Programa – C++

Qt Creator – Design

Escolha um novo projeto Qt Widget Application e adicione ao formulário um 3 Labels, 4 Radiobuttons, 2 LineEdits, 1 TextEdit e um botão. Mude as propriedades de cada componente de acordo com sua preferencia, crie um Slot para cada evento de clique de cada respectivo Widget. Use a imagem abaixo para referencia do design.

Qt Creator – Design

Exemplo:

Neste exemplo criamos um grupo de botões de radio que efetua as 4 operações básicas da matemática, usando o evento de item e a verificação do seu estado, neste primeiro exemplo você pode ver que utilizamos as conversões de valores básicas entre os tipos para efetuar os cálculos do programa.

Para a versão deste programa C++ Windows MFC: clique aqui.

C++

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

// Slots para os cliques dos botões de radio
void MainWindow::on_radioButton_clicked()
{
    // Verifica estado do botão de radio
    if (ui->radioButton->isChecked())
    {
        ui->textEdit->insertPlainText("Soma:\n");
    }
}

void MainWindow::on_radioButton_2_clicked()
{
    if (ui->radioButton_2->isChecked())
    {
        ui->textEdit->insertPlainText("Subtração:\n");
    }
}

void MainWindow::on_radioButton_3_clicked()
{
    if (ui->radioButton_3->isChecked())
    {
        ui->textEdit->insertPlainText("Multiplicação:\n");
    }
}

void MainWindow::on_radioButton_4_clicked()
{
    if (ui->radioButton_4->isChecked())
    {
        ui->textEdit->insertPlainText("Divisão:\n");
    }
}

// Slot de clique do botão
void MainWindow::on_pushButton_clicked()
{
    // O calculo poderia ser efetuado em uma unica linha de instruções
    // ṕorem para ficar mais facil de ler preferimos desmenbra-lo
    // você pode modificar o calculo deixando o programa menor
    
    
    // Variavel para o calculo
    double valor;

    if (ui->radioButton->isChecked())
    {
        // Efetua o calculo
        valor = ui->lineEdit->text().toDouble() + ui->lineEdit_2->text().toDouble();
        ui->textEdit->insertPlainText(ui->lineEdit->text() + " + " + ui->lineEdit_2->text() +
                                      " = " +QString::number(valor)+"\n"); // Converte valores
    }

    if (ui->radioButton_2->isChecked())
    {
        valor = ui->lineEdit->text().toDouble() - ui->lineEdit_2->text().toDouble();
        ui->textEdit->insertPlainText(ui->lineEdit->text() + " - " + ui->lineEdit_2->text() +
                                      " = " +QString::number(valor)+"\n");
    }

    if (ui->radioButton_3->isChecked())
    {
        valor = ui->lineEdit->text().toDouble() * ui->lineEdit_2->text().toDouble();
        ui->textEdit->insertPlainText(ui->lineEdit->text() + " * " + ui->lineEdit_2->text() +
                                      " = " +QString::number(valor)+"\n");
    }

    if (ui->radioButton_4->isChecked())
    {
        valor = ui->lineEdit->text().toDouble() / ui->lineEdit_2->text().toDouble();
        ui->textEdit->insertPlainText(ui->lineEdit->text() + " / " + ui->lineEdit_2->text() +
                                      " = " +QString::number(valor)+"\n");
    }
}

Signals e slots são usados ​​para comunicação entre objetos, este é um recurso exclusivo do Qt e é uma das principais diferenças entre o Qt e outros frameworks. Um Signal (sinal) é emitido quando ocorre um evento em particular e um Slot é uma função que é chamada em resposta a um sinal, outros toolkits utilizam um call-back e uma função para executar este procedimento.

Existe dois modos de criar Signals/Slots, o primeiro é utilizando os recursos do Qt Design conectando os Widgets simplesmente arrastando um componente dentro do outro e escolhendo suas respectivas ações para os sinais e o Slot, deste modo nenhum código C++ será gerado e a conexão estará declarada dentro do arquivo .ui do formulário a outra maneira é por código fonte, declarando os sinais e os slots em suas respectivas classes.

Signals e Slots: http://qt-project.org/doc/qt-4.8/signalsandslots.html

Criando Sinais e Slots em Design Time

Vamos criar primeiramente os sinais e slots em Design Time para que você aprenda mais sobre a IDE visual do Qt Creator, visto que sempre criaremos sinais e slots em todos os programas daqui para frente:

1 – Crie uma nova aplicação de Widgets no Qt Creator e arraste para a tela um componente Label, um componente Horizontal Slider e um componente Progress Bar, mude a propriedade de texto do rotulo como desejar e alinhe os componentes Slider e Pogress Bar através da barra de ferramentas na opção Lay Out Vertically. Quando você alinha os componentes você pode perceber que eles estão de um novo componente chamado VerticallyLayout, este novo componente é responsável pelo alinhamento e você pode aumenta-lo ou diminui-lo e todos os widgets dentro dele serão afetados.

Widgets – Alinhamento

2 – Na barra de ferramentas clique no segundo botão chamado Edit Signals/Slot e em seguida arraste o Slider para dentro do Progress Bar, uma nova janela aparecera para que você escolha as propriedades de cada widget. Para o Slider escolha o sinal ValueChanged(int) e para a barra de progresso escolha o slot chamado setValue(int), em seguida clique em OK.

Editando Signal/Slot

3 – Agora vamos analisar o resultado da nossa edição, você pode ver que no formulário os componentes estão conectados entre si por sinais e por slots. Isto significa que o Horizontal Slider declarou um sinal com o conteúdo de mudança de valor e o Progress Bar declarou um slot para sua propriedade valor, sendo assim tanto o sinal quanto o slot são valores inteiros e toda vez que o Slider sofrer uma mudança de valor o sinal enviará o valor para o slot que por sua vez mudara a propriedade de valor da barra de progresso, sincronizando os dois valores, veja a imagem abaixo para entender o Signal e Slot criados logo abaixo do formulário:

Signal e Slots

4 – Rode o programa e mova o Slider como desejar:

Programa – Eventos – Slider e Progress Bar

Exemplo:

Neste exemplo criamos um Signal e um Slot em Design Time para conectarmos dois componentes, visto que quando utilizamos o Design Time nenhum código C++ é necessário, o sinal e o slot criados residem dentro do código XML do formulário dentro da tag connections como você pode ver no código abaixo.

XML

Este código é gerado automaticamente e não precisa ser utilizado:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>438</width>
    <height>332</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Desenvolvimento Aberto</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>6</x>
      <y>20</y>
      <width>431</width>
      <height>20</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <weight>75</weight>
      <bold>true</bold>
     </font>
    </property>
    <property name="layoutDirection">
     <enum>Qt::RightToLeft</enum>
    </property>
    <property name="text">
     <string>Signals e Slots</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QWidget" name="layoutWidget">
    <property name="geometry">
     <rect>
      <x>30</x>
      <y>120</y>
      <width>381</width>
      <height>62</height>
     </rect>
    </property>
    <layout class="QVBoxLayout" name="verticalLayout">
     <item>
      <widget class="QSlider" name="horizontalSlider">
       <property name="orientation">
        <enum>Qt::Horizontal</enum>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QProgressBar" name="progressBar">
       <property name="value">
        <number>24</number>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>438</width>
     <height>25</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections>
  <connection>
   <sender>horizontalSlider</sender>
   <signal>valueChanged(int)</signal>
   <receiver>progressBar</receiver>
   <slot>setValue(int)</slot>
   <hints>
    <hint type="sourcelabel">
     <x>207</x>
     <y>173</y>
    </hint>
    <hint type="destinationlabel">
     <x>207</x>
     <y>203</y>
    </hint>
   </hints>
  </connection>
 </connections>
</ui>