Changing the positive & negetive softkeys

Qt menu bar has two menu items, as you would have seen by default left side of the key is “Options” and the right side is “Exit”.
Today we shall see how to change the text of it.
The left key is “Positive Soft key” & the right key is “Negative soft key”. We need to create an action with the positive and negative soft key role and insert to the window, so the keys will get changed.
Ex: For positive soft key:(Left side key)

QAction* Newkey = new QAction("New", this);
Newkey->setSoftKeyRole(QAction::PositiveSoftKey);
this->addAction(Newkey);

Negative soft key: (Right side key)

QAction* close = new QAction("close", this);
close->setSoftKeyRole(QAction::NegativeSoftKey);
this->addAction(close);

Here is the sample code, just put these files in a sample application and run for the results

.cpp file

#include "QT_Softkeys.h"
#include <qmessagebox.h>

QT_Softkeys::QT_Softkeys(QWidget *parent)
    : QMainWindow(parent)
{
        //ui.setupUi(this);
        
    
        QAction* Newkey = new QAction("New", this);
        Newkey->setSoftKeyRole(QAction::PositiveSoftKey);
        this->addAction(Newkey);
        
        QAction* close = new QAction("close", this);
        close->setSoftKeyRole(QAction::NegativeSoftKey);
        connect(close,SIGNAL(triggered()),this,SLOT(closeClickked()));
        this->addAction(close);
                       
        
}

QT_Softkeys::~QT_Softkeys()
{

}

void QT_Softkeys::closeClickked()
        {
        QMessageBox::information(this,"Hi","Hi we r closing");
        QApplication::quit();
        }

Header file

#ifndef QT_SOFTKEYS_H
#define QT_SOFTKEYS_H

#include <QtGui/QMainWindow>
#include "ui_QT_Softkeys.h"

class QT_Softkeys : public QMainWindow
{
    Q_OBJECT

public:
        QT_Softkeys(QWidget *parent = 0);
    ~QT_Softkeys();
    
    public slots:
    void closeClickked();

private:
    Ui::QT_Softkeys ui;
};

#endif // QT_SOFTKEYS_H

Localization in QT

Some instructions need to be followed in performing localization in Qt

Instructions:

1)Add tr macro for all the QString assignment.

2)Assigning the string to Non Qt objects pointer use QT_TRANSLATE_NOOP macro.

3)Assigning the string to Non Qt objects in some function use QT_NOOP macro.

Here are some samples,which shows how to add strings for Localization compatible.

Syntax to be used for global char*.

const char* TestStr = QT_TRANSLATE_NOOP("StringList","Welcome To Qt");

QPushButton *pushBtn = new QPushButton(qApp->translate("StringList",TestStr));

For Qstring Objects.

QString UIstr = QObject::tr("Qt is a Framework");

QPushButton *pushBtn = new QPushButton(tr(UIstr));

For local char*.

const char * text = QT_TR_NOOP("Qt framework rocks");

QPushButton *pushBtn = new QPushButton(tr(text));

Steps needs to be followed in generation and usage of localized file in application.

1)Add the TRANSLATION Macro in the .pro file and save.

example:

TRANSLATIONS += superapp_fr.ts\

TRANSLATIONS += superapp_jp.ts

like this, add all possible language translation file you need.

2)Use lupdate command in Qt Command prompt to generate the .ts file and .ts file will be in your project folder.

 

3)  Open the .ts file in Qt linguist tool and add the mapping strings.   
     Launch Qt Linguist From Start Menu

    

 Adding mapping strings to the English equivalent strings.

4)Similar to step2 use lrelease to generate the .qm file and .qm file will be in your project folder.

5)Copy .qm file and place it in desired location and load it on launching the application.

Here how the loading part of code looks.

QTranslator translator;

translator.load("c:\\Data\\MyStrings_fr");

a.installTranslator(&translator);

How to customize Listview in Qt using Delegates.

By default listview in Qt takes a text and an icon. What if you want a Listview with more then one icon, what if you want listview with more then one text or both? To come up from this problem, Qt has concept called Delegates.

Before knowing about Delegates, first we shall see the model and view concept in Qt.

What is model and view class?
Model class is responsible for storing the data, view class is responsible for showing data.
Model and view can be separated, they are independent.

Listview in Qt:
Listview in Qt takes model and view class, first data should be filled in the model class and you need to tell view to show data, but how the data present in model should be displayed in view?
The answer is Delegates, delegates tell where and how the data should be displayed in view.

Sample inbox example, shows how to use delegate in Qt
The Requirement is displaying a image, One bigger text and a sub-text of small size.

To make delegate class, you need to override couple of functions,
sizeHint(const QStyleOptionViewItem & option ,
const QModelIndex & index) const

sizeHint return you the item width. Which can be either predefined or you can calculate it using the data elements.

paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &index) const

In paint you need to tell, how and were data should be displayed in view. i.e, where image should be displayed, where the text should come and the size of the text.

here how the delegate cpp and header file looks.

/*
 * ListviewDelegate.cpp
 *
 *  Created on: Jul 17, 2010
 *      Author: http://qt-articles.blogspot.com
 */

#include "ListviewDelegate.h"

ListviewDelegate::ListviewDelegate()
    {
    // TODO Auto-generated constructor stub

    }

ListviewDelegate::~ListviewDelegate()
    {
    // TODO Auto-generated destructor stub
    }

//alocate each item size in listview.
QSize ListviewDelegate::sizeHint(const QStyleOptionViewItem &  option ,
                              const QModelIndex & index) const
{
    QIcon icon = qvariant_cast<QIcon>(index.data(IconRole));
    QSize iconsize = icon.actualSize(option.decorationSize);
    QFont font = QApplication::font();
    QFontMetrics fm(font);
    
    return(QSize(iconsize.width(),iconsize.height()+fm.height() +8 ));

}
void ListviewDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
                           const QModelIndex &index) const
 {
    QStyledItemDelegate::paint(painter,option,index);
    
    painter->save();
    
    QFont font = QApplication::font();
    QFont SubFont = QApplication::font();
    //font.setPixelSize(font.weight()+);
    font.setBold(true);
    SubFont.setWeight(SubFont.weight()-2);
    QFontMetrics fm(font);
    
    QIcon icon = qvariant_cast<QIcon>(index.data(IconRole));
    QString headerText = qvariant_cast<QString>(index.data(headerTextRole));
    QString subText = qvariant_cast<QString>(index.data(subHeaderTextrole));
    
    QSize iconsize = icon.actualSize(option.decorationSize);
    
    QRect headerRect = option.rect;
    QRect subheaderRect = option.rect;
    QRect iconRect = subheaderRect;
    
    iconRect.setRight(iconsize.width()+30);
    iconRect.setTop(iconRect.top()+5);
    headerRect.setLeft(iconRect.right());
    subheaderRect.setLeft(iconRect.right());
    headerRect.setTop(headerRect.top()+5);
    headerRect.setBottom(headerRect.top()+fm.height());
    
    subheaderRect.setTop(headerRect.bottom()+2);
    
    
    //painter->drawPixmap(QPoint(iconRect.right()/2,iconRect.top()/2),icon.pixmap(iconsize.width(),iconsize.height()));
    painter->drawPixmap(QPoint(iconRect.left()+iconsize.width()/2+2,iconRect.top()+iconsize.height()/2+3),icon.pixmap(iconsize.width(),iconsize.height()));
    
    painter->setFont(font);
    painter->drawText(headerRect,headerText);
    
    
    painter->setFont(SubFont);
    painter->drawText(subheaderRect.left(),subheaderRect.top()+17,subText);
    
    painter->restore();
    
 }

/*
 * ListviewDelegate.h
 *
 *  Created on: Jul 17, 2010
 *      Author: http://qt-articles.blogspot.com
 */

#ifndef ListviewDelegate_H_
#define ListviewDelegate_H_
#include <QtGui>

class ListviewDelegate : public QStyledItemDelegate
    {
public:
    ListviewDelegate();
    virtual ~ListviewDelegate();
    
    enum datarole {headerTextRole = Qt::UserRole + 100,subHeaderTextrole = Qt::UserRole+101,IconRole = Qt::UserRole+102};
    
    void paint(QPainter *painter, const QStyleOptionViewItem &option,
               const QModelIndex &index) const;

    QSize sizeHint(const QStyleOptionViewItem &option,
                   const QModelIndex &index ) const;

    };

#endif /* ListviewDelegate_H_ */

How to connect Model,view and Delegates in Listview.

 QListView *view;
 QStandardItemModel *model;
 ListviewDelegate *listdelegate;
       
 view = new QListView();
 model = new QStandardItemModel();
 listdelegate = new ListviewDelegate();
           
  view->setItemDelegate(listdelegate); //connect the delegate to view
  view->setModel(model);//connect the model to view.

How to insert an item to model,

QStandardItem *item = new QStandardItem();
           QIcon icon(":/new/prefix1/about.png");
           
           item->setData("Inbox",ListviewDelegate::headerTextRole);
           item->setData("10 Messages",ListviewDelegate::subHeaderTextrole);
           item->setData(icon,ListviewDelegate::IconRole);
           model->appendRow(item);

This is how the entire code of inserting item to view looks

 

//http://qt-articles.blogspot.com
#include "ListDeligates.h"  
 #include <QtGui>  
 #include <QApplication>  
 #include "ListviewDelegate.h"  
 int main(int argc, char *argv[])  
 {  
   QApplication a(argc, argv);  
   QListView *view;  
   QStandardItemModel *model;  
   ListviewDelegate *listdelegate;  
   view = new QListView();  
   model = new QStandardItemModel();  
   listdelegate = new ListviewDelegate();  
   view->setItemDelegate(listdelegate);  
   view->setModel(model);  
          QStandardItem *item = new QStandardItem();  
          QIcon icon(":/new/prefix1/about.png");  
          item->setData("Inbox",ListviewDelegate::headerTextRole);  
          item->setData("10 Messages",ListviewDelegate::subHeaderTextrole);  
          item->setData(icon,ListviewDelegate::IconRole);  
          model->appendRow(item);  
          QStandardItem *item1 = new QStandardItem();  
          item1->setData("Draft",ListviewDelegate::headerTextRole);  
          item1->setData("5 Messages",ListviewDelegate::subHeaderTextrole);  
          item1->setData(icon,ListviewDelegate::IconRole);  
          item1->setEditable(false);  
          model->appendRow(item1);  
          QStandardItem *item2 = new QStandardItem();  
      item2->setData("Sent Items",ListviewDelegate::headerTextRole);  
      item2->setData("5 Messages",ListviewDelegate::subHeaderTextrole);  
      item2->setData(icon,ListviewDelegate::IconRole);  
      item2->setEditable(false);  
      model->appendRow(item2);  
      QStandardItem *item3 = new QStandardItem();  
      item3->setData("Message Settings",ListviewDelegate::headerTextRole);  
      item3->setData("",ListviewDelegate::subHeaderTextrole);  
      item3->setData(icon,ListviewDelegate::IconRole);  
      item3->setEditable(false);  
      model->appendRow(item3);  
      QStandardItem *item4 = new QStandardItem();  
      item4->setData("Delivery Reports",ListviewDelegate::headerTextRole);  
      item4->setData("",ListviewDelegate::subHeaderTextrole);  
      item4->setData(icon,ListviewDelegate::IconRole);  
      item4->setEditable(false);  
           model->appendRow(item4);  
     view->showMaximized();  
     return a.exec();  
 }  

Here is the output

How to add stylesheet for button in Qt

Here i am showing, how to set the button background color from stylesheet.

CustomButton *pushButton = new CustomButton();
pushButton->setStyleSheet(QString::fromUtf8("background-color: rgb(255, 255, 0);"));

How to set background image for button using stylesheet.

CustomButton *pushButton = new CustomButton();
 pushButton_2->setStyleSheet(QString::fromUtf8("background-image: url(:/new/prefix1/icon/Smiley.bmp);"));

if you are using Qt GUI for designing, follow up these steps.

How to customize the Button in Qt

In this article,we will see how to customize button.

Qt has provided the option to place any number of Texts and images at desired location over a button, but now i am showing how to place 3 Text and 1 image over a button.

First we need to subclass the Qpushbutton, then override the paintEvent() method. In the paint event method perform the drawing Text, images etc..

sample code is provided here..

//Custom button class
//Qt-articles.blogspot.com

class CustomButton : public QPushButton
    {
    Q_OBJECT
 
public:
    CustomButton(QWidget *parent = 0);
    ~CustomButton();
 
public:
    QString FirstName,MiddleName,Lastname;
    QImage SimileIcon;
    bool IsBkColorEnabled;
    QColor Bkclor;
 
protected:
    void paintEvent(QPaintEvent *);
 
};

//Custom button implimentation file
//Qt-articles.blogspot.com
CustomButton::CustomButton(QWidget *parent)
    : QPushButton(parent)
{
   
}

CustomButton::~CustomButton()
{

}
//Paint event of button
void CustomButton::paintEvent(QPaintEvent *paint)
{
    QPushButton::paintEvent(paint);
    QPainter p(this);
    p.save();
   
    p.drawText(QPoint(100,100),FirstName); //Simple Text.
    p.setPen(Qt::blue);                       //changing the color of pen.
    p.setFont(QFont("Arial", 30));     //Changing the font.
    p.drawText(QPoint(100,200),MiddleName);
    p.drawText(QPoint(100,300),Lastname);
    p.drawImage(QPoint(300,300),SimileIcon);
    p.restore();
}

How to Add Resources to Project in Qt

Its very simple, follow up these steps.

Create new Qrc file.



New Qrc file looks like this


Add the file to Qrc.



using the Resource file in project.

 ":/new/prefix1/icon/Smiley.bmp"

for example,

QIcon icon;
icon.load(":/new/prefix1/icon/Smiley.bmp");

Note:- Prefix of icon can be changed to your wish.