Подключаем интерфейс в стиле Microsoft Ribbon

Впервые Microsoft анонсировала интерфейс Ribbon (что переводится как "лента") в 2007 году в новом выпуске MS Office. Новый интерфейс разительно отличался от привычных меню и тулбаров и не всем пришелся по вкусу.

У многих пользователей были трудности при переобучении, но с тех пор прошло уже много лет и пользователи как-то попривыкли к ленточному интерфейсу. Microsoft продолжает использовать риббоны в своих продуктах, в Windows 7, например, почти все стандартные приложения (MS Paint, WordPad) имеют интерфейс Ribbon.

Поэтому, чтобы быть в тренде, нужно использовать такой интерфейс в своих приложениях под Windows. Это сразу возвышает ваш программный продукт в глазах пользователей, т.к. сразу видно, что вы движетесь вперед, а не топчетесь на одном месте.

Для программистов на Qt/C++ существует готовое решение, которое называется Qtitan Ribbon devmachines.ru.

Сегодня мы будем подключать Qtitan Ribbon к нашему тестовому приложению на Qt.

Первым делом скачиваем SDK Qtitan Ribbon.

Доступны варианты для использования в MS Visual Studio 2008, 2010, QtCreator.

Устанавливаем скачанный пакет. Например, в каталог d:\Qtitan.

Прописываем переменные среды. Добавляем переменную QTITANDIR, и в переменную PATH добавляем путь до бинарников.

Пакет Qtitan Ribbon поставляется с демо-примерами. Помимо примеров с риббонами, в каталоге demos можно найти примеры:

1. Классический интерфейс с меню и тулбарами в стилизованном оформлении.
2. Стилизованное всплывающее окно, которое всплывает над треем. Подобное окошко можно увидеть у антивирусов.
3. Виджеты для боковых панелей, таких как окно свойств некого объекта. Всё это тоже имеет различное стилизованное оформление а-ля Office 2007.

В качестве примера, создадим текстовый редактор а-ля WordPad с интерфейсом Microsoft Ribbon.

Создадим простой файл проекта ribbon.pro.

Показать код

TEMPLATE = app
TARGET = ribbon
DESTDIR = bin

INCLUDEPATH += ./ gui
DEPENDPATH  += ./ gui

HEADERS += $$files(gui/*.h)

SOURCES += main.cpp \
      $$files(gui/*.cpp)

# Подключение Qtitan Ribbon
QTITANDIR = $$quote($$(QTITANDIR))
include($$QTITANDIR/src/shared/qtitanribbon.pri)

Далее создадим главное окно, класс MainWindow. Чтобы главное окно приобрело ленточный интерфейс оно должно быть унаследовано от класса Qtitan::RibbonMainWindow.

#include <QtitanRibbon.h>

class MainWindow : public Qtitan::RibbonMainWindow
{
 Q_OBJECT
public:
  MainWindow(QWidget* parent = 0);
  virtual ~MainWindow();
};

Чтобы запустить пример вам следует в свойствах проекта назначить рабочий каталог на папку bin и положить в bin файлы:
qtnribbon2.dll
QtCore4.dll
QtGui4.dll
QtScript4.dll
QtSql4.dll
QtXml4.dll

Впрочем, если у вас установлена Qt той же версии, что и библиотеки из дистрибутива Qtitan (у меня это 4.8.1), то вам не понадобятся библиотеки с префиксом Qt*.dll.
Если же вы будете использовать коммерческую лицензию на Qtitan Ribbon, то вы сможете собрать библиотеку qtnribbon2 из исходников с той версией Qt, которая вам необходима.

Чтобы подключить к приложению стиль Ribbon нужно установить объекту QApplication стиль "ribbonstyle".

  QApplication a(argc, argv);
  a.setStyle("ribbonstyle");

После этого можно создавать элементы интерфейса.
Для начала создадим ленту с кнопками. Добавим страницу, на странице создадим несколько групп с кнопками и элементами управления.

Ниже, в спойлере, приведен код, создающий этот интерфейс.

Показать код

MainWindow::MainWindow(QWidget * parent)
: Qtitan::RibbonMainWindow(parent)
{
  setWindowTitle(tr("Qtitan Ribbon"));
  setCentralWidget(new QWidget(this));
  createRibbon();
  setWindowState(Qt::WindowMaximized);
}

void MainWindow::createRibbon()
{
  // Main Page
  if (Qtitan::RibbonPage* pageButtons =
         ribbonBar()->addPage(tr("&Main")))
  {
     // Clipboard Group
     Qtitan::RibbonGroup* groupClipboard =
         pageButtons->addGroup(tr("&Clipboard"));
     if (groupClipboard)
     {
         groupClipboard->setOptionButtonVisible();

         QAction* action = groupClipboard->addAction(
            QIcon(":/images/copy.png"),
            tr("&Copy"), Qt::ToolButtonTextUnderIcon);
         connect(action, SIGNAL(triggered()), this, SLOT(pressButton()));

         action = groupClipboard->addAction(QIcon(":/images/paste.png"),
            tr("&Paste"), Qt::ToolButtonTextUnderIcon);
         connect(action, SIGNAL(triggered()), this, SLOT(pressButton()));

         action = groupClipboard->addAction(QIcon(":/images/cut.png"),
            tr("C&ut"), Qt::ToolButtonTextUnderIcon);
         connect(action, SIGNAL(triggered()), this, SLOT(pressButton()));
     }
     // Font Group
     Qtitan::RibbonGroup* groupFont =
         pageButtons->addGroup(tr("&Font"));
     if (groupFont)
     {
         groupFont->setOptionButtonVisible();

         QFontComboBox* comboFont = new QFontComboBox(groupFont);
         comboFont->setToolTip(tr("Font"));
         comboFont->setFontFilters(QFontComboBox::MonospacedFonts);
         comboFont->setEditText(tr(""));
         comboFont->setMinimumWidth(150);
         comboFont->setMaximumWidth(150);
         groupFont->addWidget(QIcon(), tr("Font:"), comboFont);

         QSpinBox * spinSize = new QSpinBox(groupFont);
         spinSize->setToolTip(tr("Font Size"));
         spinSize->setMinimum(8);
         spinSize->setMaximum(48);
         spinSize->setMinimumWidth(150);
         groupFont->addWidget(QIcon(), tr("Font Size:"), true, spinSize);
        
     }
  }
}

Теперь добавим главную иконку приложения, по нажатию на которую будет открываться меню.

Код в спойлере.

Показать код

void MainWindow::createMenuFile()
{
  QIcon iconLogo;
  iconLogo.addPixmap(QPixmap(":/shared/res/qtitan.png"));
  iconLogo.addPixmap(QPixmap(":/shared/res/qtitanlogo32x32.png"));
  if (QAction* actionFile = ribbonBar()->addSystemButton(
     iconLogo, tr("&File")))
  {
     actionFile->setToolTip(tr("Click here to see everything<br />"
         "you can do with your<br />document"));

     if (Qtitan::RibbonSystemPopupBar* popupBar =
         qobject_cast<Qtitan::RibbonSystemPopupBar*>(actionFile->menu()))
     {
         QAction* newFile = popupBar->addAction(
            QIcon(":/images/new.png"), tr("&New"));
         newFile->setShortcut(tr("Ctrl+N"));
         newFile->setStatusTip(tr("Create a new document"));
         newFile->setToolTip(tr("New"));
         newFile->setEnabled(false);

         QAction* openFile = popupBar->addAction(
            QIcon(":/images/open.png"), tr("&Open..."));
         openFile->setShortcut(tr("Ctrl+O"));
         openFile->setToolTip(tr("Open"));
         openFile->setStatusTip(tr("Open an existing document"));
         connect(openFile, SIGNAL(triggered()), this, SLOT(open()));

         QAction* saveFile = popupBar->addAction(
         QIcon(":/images/save.png"), tr("&Save"));
         saveFile->setShortcut(tr("Ctrl+S"));
         saveFile->setToolTip(tr("Save"));
         saveFile->setStatusTip(tr("Save the active document"));
         connect(saveFile, SIGNAL(triggered()), this, SLOT(save()));

         QAction* saveAsFile = popupBar->addAction(tr("Save &As..."));
         saveAsFile->setToolTip(tr("Save As"));
         saveAsFile->setStatusTip(tr("Save the active document "
            "with a new name"));
         connect(saveAsFile, SIGNAL(triggered()), this, SLOT(save()));

         popupBar->addSeparator();
         QIcon iconClose;
         iconClose.addPixmap(QPixmap(":/images/close.png"));
         QAction* actClose = popupBar->addAction(iconClose, tr("&Close"));
         actClose->setShortcut(tr("Ctrl+C"));
         actClose->setStatusTip(tr("Exit"));
         connect(actClose, SIGNAL(triggered()), this, SLOT(close()));
         popupBar->addPopupBarAction(actClose, Qt::ToolButtonTextBesideIcon);

         QAction* option = new QAction(QPixmap(":/images/smalloption.png"),
            tr("Opt&ion"), this);
         popupBar->addPopupBarAction(option, Qt::ToolButtonTextBesideIcon);
         option->setEnabled(false);

         if (RibbonPageSystemRecentFileList* pageRecentFile =
            popupBar->addPageRecentFile(tr("Recent Documents")))
         {
            pageRecentFile->setSize(9);
            connect(pageRecentFile,
              SIGNAL(openRecentFile(const QString&)),
              this, SLOT(openRecentFile(const QString&)));
            connect(this,
              SIGNAL(updateRecentFileActions(const QStringList&)),
              pageRecentFile,
              SLOT(updateRecentFileActions(const QStringList&)));
         }
     }
  }
}

Напоследок создадим панель быстрого доступа к функциям основного меню.

Показать код

void MainWindow::createQuickAccessBar()
{
  if (Qtitan::RibbonQuickAccessBar* quickAccessBar =
      ribbonBar()->getQuickAccessBar())
  {
     QAction* action = quickAccessBar->actionCustomizeButton();
     action->setToolTip(tr("Customize Quick Access Bar"));

     QAction* smallButton = quickAccessBar->addAction(
         QIcon(":/images/smallNew.png"), tr("New"));
     smallButton->setToolTip(tr("Create a new document"));
     connect(smallButton, SIGNAL(triggered()), this, SLOT(pressButton()));
     quickAccessBar->setActionVisible(smallButton, false);

     smallButton = quickAccessBar->addAction(
         QIcon(":/images/smallOpen.png"), tr("Open"));
     smallButton->setToolTip(tr("Open an existing document"));
     connect(smallButton, SIGNAL(triggered()), this, SLOT(pressButton()));
     quickAccessBar->setActionVisible(smallButton, false);

     smallButton = quickAccessBar->addAction(
         QIcon(":/images/smallSave.png"), tr("Save"));
     smallButton->setToolTip(tr("Save the active document"));
     connect(smallButton, SIGNAL(triggered()), this, SLOT(pressButton()));

     smallButton = quickAccessBar->addAction(
         QIcon(":/images/smallUndo.png"), tr("&Undo"));
     smallButton->setShortcut(QKeySequence::Undo);
     smallButton->setEnabled(false);

     smallButton = quickAccessBar->addAction(
         QIcon(":/images/smallRedo.png"), tr("&Redo"));
     smallButton->setShortcut(QKeySequence::Redo);
     smallButton->setEnabled(false);

     ribbonBar()->showQuickAccess(true);
  }
}

В качестве редактора можно использовать компонент QTextEdit, который мы устанавливаем в качестве центрального виджета.

setCentralWidget(new QTextEdit(this));

При желании, также можно добавить панель состояния в стиле Ribbon, и дополнительную панель справа.

А чтобы заменить стандартный заголовок окна на заголовок в стиле Ribbon достаточно активировать параметр
 ribbonBar()->setFrameThemeEnabled();

При этом заголовок окна будет выровнен по центру и расположен на одном уровне с панелью быстрого доступа.