Friday, February 25, 2011

Creating simple in application Help in Qt

Recently I was working on Qt application and I required to create simple in application Help option.

For professional application or complex application you can use Qt Assistant as custom help viewer. Here is example how you can do that.

But for my application, I just wanted to show simple html file and some local resource in html help file.

So I just used QWebView to display html file from Qt's resource file. But I had hard time figuring out how to include image in html file which are in Qt's resource file.

So following code show how you can show html file which show image from Qt's resource file.

You can find my sample project here.

Following code is to display web view and populating it with html data.
MyWidget::MyWidget(QWidget *parent)
    : QWidget(parent)
   QVBoxLayout* mainLayout = new QVBoxLayout(this);

   QWebView *helpView = new QWebView;
   QFile file(":/help.html");
    if (

    QPushButton* backBtn = new QPushButton("Exit");

    mainLayout->addWidget( helpView);
    mainLayout->addWidget( backBtn);

And following is content of html file which display local image from resource file. We can use "qrc:/" to locate file from resource file.
<h2> Simple in application help</h2>
    Sample application that show how simple in application 
    help system can be created using <b>Qt Webkit's QWebView.</b>
    Following image is to demostrate how file or image can 
    be used from Qt's resource file.

    <img src="qrc:/cloud.png" />
    Hope this will help some one.

so this was all, following is snap from my sample application.


  1. can you show the source code, please. It doesnt work and I dont know why

  2. Sure, I will share my sample project.Just a note, for this sample app, I have added html and image to my resource file. Thanks for writing.

  3. Hi, Sample project is uploaded as requested. Please find same here ->