Uncategorized

QScintilla Editor Development

Hello, Today we will develop our own editor using QScintilla. I hope you must have downloaded and installed it, if not, refer my last post.
Before start developing, you must be familiar with the QScintilla Documentation. Also the QScintilla folder you have downloaded has complete documentation. Being in QScintilla main folder, type

$firefox doc/html-Qt4Qt5/index.html 

and complete documentation will be opened into your firefox browser. You can also use other browser of your desire, just replace firefox with your favourite browser name.:)
Looking at QScintilla’s nice documentation, first you have main page in front of you showing the features of QScintilla, licencing stuff and installation procedure on different platforms.
Now if you move to the next tab Classes, you will see QScintilla’s large list of classes, all prefixed by ‘Qsci’. While looking into these classes, you will notice that QScintilla has a large set of inbuilt lexers for different languages such as bash, C++, java, HTML, CSS, javascript, lua and many more. So if you want to implement features like syntax highlighting for different languages, these lexer gives you motherly feeling making everything easy for you.:D
For our basic features of editor, we will mostly concentrate on QsciScintilla class
First you will see the include file required to add in your editor app.

#include <qsciscintilla.h$gt;

Then we have hierarchy information. This class is inherited from QsciScintillaBase.
Below that you will see the public type, which we’ll come later. Then you have large list of public Slots, Signals and Public Member Functions. At the end of the list, a detailed description of each function is given.

Now lets have an example of editor using QScintilla
Mainwindow.h

 #ifndef MAINWINDOW_H      //these macros helps in preventing 
#define MAINWINDOW_H            //multiple inclusion of header files

#include <QMainWindow>
#include <Qsci/qsciscintilla.h>

class MainWindow : public QMainWindow
{
    Q_OBJECT
   
public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void initUI();       //declarations of all functions used in 
    void initEditor();   //mainwindow.cpp file
    void initLexer();
    void initMargin();
    void initCaretLine();
    void initFont();
public slots:
    void onTextChanged();
    void onOpen();
private:
    QsciScintilla *editor;
};

#endif // MAINWINDOW_H

Mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)

    : QMainWindow(parent)
{
    initUI();
    initEditor();
}

MainWindow::~MainWindow()
{    
}

void MainWindow::initUI()
{
    setWindowTitle("My Editor");
    setMenuBar(new QMenuBar(this));
    QMenu *fileMenu = menuBar()->addMenu("&File");
    fileMenu->addAction("&Open", this, SLOT(onOpen()), QKeySequence::Open);
    editor = new QsciScintilla(this);
    setCentralWidget(editor);
}

void MainWindow::onOpen()

{
    QString filename =  QFileDialog::getOpenFileName(this, tr("Open .cpp file"),

                                                     QDir::currentPath(),

                                                    "CPP (*.cpp *.h *.cxx)");

    if (filename.isEmpty())
       return;

    QFile file(filename);

    if (!file.open(QIODevice::ReadOnly))
        return;

    editor->setText(file.readAll());
    file.close();
}

void MainWindow::initEditor()
{

    // codes based from http://eli.thegreenplace.net/2011/04/01/sample-using-qscintilla-with-pyqt/

    initFont();
    initMargin();
    initCaretLine();
    initLexer();
}

void MainWindow::initFont()
{
    QFont font("inconsolata", 12);
    font.setFixedPitch(true);
    editor->setFont(font);
}

void MainWindow::initMargin()
{
    QFontMetrics fontmetrics = QFontMetrics(editor->font());
    editor->setMarginsFont(editor->font());
    editor->setMarginWidth(0, fontmetrics.width(QString::number(editor->lines())) + 6);
    editor->setMarginLineNumbers(0, true);
    editor->setMarginsBackgroundColor(QColor("#cccccc"));
    connect(editor, SIGNAL(textChanged()), this, SLOT(onTextChanged()));
}

void MainWindow::onTextChanged()
{
    QFontMetrics fontmetrics = editor->fontMetrics();
    editor->setMarginWidth(0, fontmetrics.width(QString::number(editor->lines())) + 6);
}

void MainWindow::initLexer()
{
    QsciLexerCPP *lexer = new QsciLexerCPP();
    lexer->setDefaultFont(editor->font());
    lexer->setFoldComments(true);
    editor->setLexer(lexer);
}

void MainWindow::initCaretLine()
{
    // Current line visible with special background color 
    editor->setCaretLineVisible(true);
    editor->setCaretLineBackgroundColor(QColor("#ffe4e4"));
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s