Light-electric.com

IT Журнал
4 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Ribbon интерфейс программирование описание

Главное меню. Ленточный интерфейс (Ribbon)

Панель инструментов Budget-Plan Express

Главное меню – в зависимости от версии MS Office

В процессе установки программы, инсталлятор предлагает выбрать версию MS Office, установленную на вашем компьютере: 2003 или 2007-2016 и выше и выше. В зависимости от этого будет установлена версия файла Excel: 2003 (с расширением «xls») или 2007-2016 и выше (с расширением «xlsm»). Стандартный язык интерфейса (русский) или дополнительный язык – английский выбирается так же в процессе установки программы.

Ленточный интерфейс для MS Office (2007-2016):

Стандартное (ниспадающее) меню для MS Office 2003:

Исполняемый модуль программы универсален и работает со всеми версиями MS Office (2003, 2007-2016). При переходе из стандарта 2003 на стандарт 2007-2016, новая установка и регистрация программы не требуется, однако необходимо установить «стартовый» файл Excel (с расширением «xlsm»), который можно скачать с сайта, или самостоятельно сконвертировать старые файлы проектов, если в них есть необходимость.

Особенности ленточного интерфейса

Стандартный интерфейс представляет собой обычное многоуровневое ниспадающее меню. При использовании Excel 2003 (Office 2003) используется стандартное меню, начиная с Excel 2007 (Office 2007-2016) используется ленточное меню. При использовании ленточного интерфейса (Ribbon) вместо заголовков в стандартном меню используются вкладки, и функции распределяются по вкладкам на панели инструментов («ленте»).

В «Budget-Plan Express» нет стандартного меню Excel, и на время работы программы оно заменяется собственным «ленточным» меню. Так же не доступны настройки и прочие вкладки, которые входят в состав меню Excel, кроме общей вкладки «Файл». Из средств модификаций меню остаются доступными «параметры отображения ленты» (где можно «скрывать», «показывать вкладки» и «показывать вкладки и команды») и «настройка панели быстрого доступа»:

В «настройках панели быстрого доступа» можно разместить стрелки навигации «над лентой» или «под лентой»:

☛ Обратите внимание, в некоторых ранних версиях Excel (например, в 2007) панель быстрого доступа может не отображать иконки навигации, в этом случае, для перехода к нужной таблице, используйте горячие клавиши или пункт меню «Содержание таблиц».

Qt Coding

Qt programming, Qt tools, source code, компоненты для Qt

суббота, 29 декабря 2012 г.

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

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

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

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

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

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

TEMPLATE = app
TARGET = ribbon
DESTDIR = bin

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

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

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

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

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

Чтобы запустить пример вам следует в свойствах проекта назначить рабочий каталог на папку 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);
>

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
»
«you can do with your
document» ));

if (Qtitan::RibbonSystemPopupBar* popupBar =
qobject_cast (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 );

Читать еще:  Имплементация в программировании

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

setCentralWidget( new QTextEdit( this ));

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

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

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

Qt Coding

Qt programming, Qt tools, source code, компоненты для Qt

суббота, 29 декабря 2012 г.

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

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

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

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

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

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

TEMPLATE = app
TARGET = ribbon
DESTDIR = bin

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

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

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

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

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

Чтобы запустить пример вам следует в свойствах проекта назначить рабочий каталог на папку 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);
>

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
»
«you can do with your
document» ));

if (Qtitan::RibbonSystemPopupBar* popupBar =
qobject_cast (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 );

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

setCentralWidget( new QTextEdit( this ));

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

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

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

Настройка пользовательского интерфейса приложений Microsoft Office

Уроки по модификации пользовательского ленточного интерфейса «Microsoft Fluent UI» для приложений Word, Excel, PowerPoint и Access.

суббота, 21 февраля 2015 г.

Урок 1. Эксперимент по редактированию Fluent UI.

Чтобы не перенапрягать читателя нудной теорией, мы в первом же уроке проведём практический эксперимент по модификации ленточного пользовательского интерфейса приложений Microsoft Office на примере Word, как наиболее распространённого приложения пакета. Замечу, что принципиальных отличий от Excel и PowerPoint в области модификации интерфейса у Word нет, поэтому всё, что справедливо для Word, можно применять и к другим приложениям.

Текста для чтения на этом уроке будет много, но фактических действий — всего ничего. Несколько раз щёлкнуть мышкой, так что не пугайтесь. Весь остальной текст — всего лишь дополнительная информация для тех, кто вообще не в курсе темы.

В отличие от 2007-й версии офиса, в более современных версиях (2010 и 2013) уже кое-что можно сделать и собственными настройками ленты. Впрочем, далеко не всё. Поэтому этот вариант настройки мы рассматривать не будем — в нём и так всё предельно понятно, потому что он специально сделан для широких пользовательских масс. Остановимся на другом, низкоуровневом варианте модификации, где нам потребуется построить некоторые описательные конструкции на языке разметки XML, но зато нас не будут ограничивать рамки конкретной реализации настроек офиса.

Читать еще:  Безопасный днс яндекс

Итак, как я уже сказал выше, для построения своего интерфейса нам нужно его куда-то внедрять — в шаблон или документ. Думаю, проще всего нам создать для опытов обычный документ Word. Откроем Word и сохраним созданный подопытный документ на диск под любым удобным для вас именем, как «Документ Word (*.docx)». Замечу, что для нашей цели нельзя создавать документ через контекстное меню проводника, потому что таким способом создастся просто пустой файл с названием и правильным расширением, но без внутренней структуры, и нам тогда некуда будет внедрять свой интерфейс.

Сейчас файл для опытов создан, и теперь настало время выбрать инструмент, который позволил бы нам построить и внедрить в созданный документ наш интерфейс. Сегодня в Интернете можно найти множество различных редакторов, делающих это, начиная с примитивной утилиты Custom UI Editor for Microsoft Office, и заканчивая пакетом Microsoft Visual Studio от того же разработчика. Существуют даже варианты в виде надстроек, реализующие тот же функционал. Но всё это либо неудобно, либо слишком сложно, либо не поддерживает русский язык, либо откровенно глючит, не говоря уже о том, что многое из этого платно.

Среди всего этого многообразия наиболее удобным, на мой взгляд, является специализированный XML-редактор Ribbon XML Editоr (известный ещё как RibbonXMLEditor или RXE) отечественного разработчика. Этот редактор появился ещё на заре зарождения ленточного интерфейса, в далёком 2007 году, и до сих пор поддерживается и развивается. Это не какая-нибудь там надстройка, а полноценная программа, рассчитанная на ускоренное написание нужных нам XML-конструкций. Плюс ко всему прочему — редактор этот абсолютно бесплатный. Ещё один плюс — он не требует установки, а просто распаковывается из архива, и сразу же можно пользоваться.

Итак, скачиваем редактор с официального сайта (чтобы гарантированно получить последнюю версию), распаковываем, например, в «C:Program Files» или «C:Program Files (x86)» (в 64-битных системах), и запускаем:

Снизу рыжая вкладка означает, что выбрано создание интерфейса версии 2007-го офиса. Рядом расположена другая вкладка — для интерфейса 2010 или 2013 офиса. На этом следует остановиться подробнее. Нам надо понять, какую версию интерфейса мы будем разрабатывать.

Если мы хотим сделать наш документ совместимым со всеми версиями, начиная с 2007-й, то оставляем первую вкладку. Если мы хотим использовать дополнительные возможности по конфигурированию (например, сконфигурировать закулисное пространство, находящееся под ярлыком «Файл»), то переключаемся на вторую вкладку. Если мы хотим использовать в версии 2007 один интерфейс, а в версии 2010 или 2013 — другой, то нам надо будет прописать эти интерфейсы на обеих вкладках.

Для нашего эксперимента мы воспользуемся первой вкладкой, то есть сделаем наши изменения интерфейса доступными для всех версий офисного пакета, начиная с 2007. Итак, начнём работу.

Для начала открываем в редакторе созданный в Word’е документ. Для этого просто нажимаем Ctrl+O и выбираем в открывшемся окне нужный файл. Если вы привыкли работать мышкой, можно нажать на кнопку с папочкой в верхнем левом углу программы. Замечу, что все кнопки в редакторе снабжены подробными всплывающими подсказками, что очень удобно, особенно для новичков. На кнопке с папочкой как раз и всплывёт подсказка «Открыть документ», и будет указана комбинация клавиш для этого же действия с клавиатуры.

После открытия документа его имя появится в шапке программы. Если документ новый, и до нас никто ничего в него не внедрял, то окно редактора останется пустым. В нём мы и будем писать наш XML-код, описывающий интерфейс.

Как вы, наверное, уже могли заметить в процессе пользования ленточным интерфейсом, элементы в нём располагаются иерархически. На ленте расположены вкладки, на вкладках — группы, в группах — кнопки и другие элементы. При этом нельзя кнопку или другой элемент поместить сразу на вкладку, вне группы. Чтобы представлять себе разрешённую иерархию элементов в целом, можно нажать F1, и в открывшейся справке выбрать ссылку «Лента (ribbon) — схема интерфейса». Теперь, последовательно нажимая одну и ту же клавишу F1, можно переходить от схемы к коду и обратно.

На схеме видно, что корнем иерархии ленты является элемент ribbon (собственно, лента). Внутри ленты помещается четыре вложенных элемента. Из них нас будет интересовать сегодня только элемент tabs (вкладки). Вкладки, как понятно из названия, содержат в себе, собственно, одиночные вкладки — tab. Каждая вкладка содержит в себе группу элементов (group), которая, в свою очередь, может содержать большое количество разных других элементов, которые я перечислять не буду — все они видны на схеме.

Итак, начинаем конструирование. Добавляем в область текста корневой элемент ribbon. Для этого нажимаем кнопку с выбором действия с надписью «rib» вверху левой панели, но действие для кнопки не выбираем, оставляем по умолчанию:

Для интересующихся другими возможными действиями этой кнопки советую почитать всплывающую подсказку, из которой становится понятно, что кроме элемента ленты кнопка позволяет вставлять элемент commands (команды), который мы пока не рассматриваем:

После нажатия кнопки «ribbon» в области текста тотчас же появится следующая конструкция:

Давайте кратко пробежимся по ней. Первая строчка нас мало интересует, она присутствует для соответствия XML-кода общему стандарту, и её мы рассмотрим как-нибудь потом. Далее мы видим тег customUI внутри которого вставлен тег ribbon выбранного нами элемента. Таким образом, получается, что элемент ленты на самом деле не является корневым, а находится внутри действительно корневого элемента — customUI (настраиваемый пользовательский интерфейс).

Корневой элемент customUI помимо ленты может включать в себя уже упомянутый элемент «команды», а в версиях, начиная с 2010, «контекстные меню» и «закулисье», находящееся под ярлыком «Файл». Но не будем отвлекаться, и ограничимся пока лентой.

Следующим этапом, согласно схеме (F1), в элемент ribbon нужно вставить элемент tabs, и соответствующую кнопку мы как раз видим чуть ниже. Но мы пойдём ещё более простым путём. Чтобы каждый раз не лазить в схему, и не смотреть, что во что вложено, мы просто нажимаем комбинацию клавиш Ctrl+Пробел, т.е. принудительно вызываем автодополнение. После нажатия этого сочетания откроется список элементов, доступных внутри текущего элемента. Среди предложенных вариантов видим tabs. Выбираем его, и внутрь элемента ribbon вставляется элемент tabs, сразу же внутрь него — элемент tab, потому что других вариантов всё равно нет, а внутрь tab — group.

Мы выполнили совсем мало телодвижений, а уже почти создали нужную нам конструкцию. Нам осталось лишь заполнить значения атрибутов (прописать их внутри кавычек). В атрибуты id элементов впишем прямо по-русски, к примеру, «мояВкладка» и «мояГруппа» соответственно, а в атрибуты label — «Моя вкладка» и «Моя группа».

Читать еще:  Basic среда программирования

Замечу, что все идентификаторы поддерживают строки Unicode, то есть их можно писать и на латинице, и на кириллице, и ещё много на чём. Очень полезную информацию о типах строк можно получить из прекрасной справки Ribbon XML Editor, перейдя с главной её страницы по ссылке «Атрибуты, их типы и списки значений» и прокрутив на последние две таблицы. Проследив иерархию нужного строкового типа можно установить, какая именно строка допустима в строковом значении того или иного атрибута.

На этом модификацию интерфейса пока закончим, и попробуем посмотреть вживую, что у нас получилось. Сначала нужно проверить правильность нашей разметки интерфейса. Для этого нажимаем клавишу F7, и читаем результат проверки во всплывшем окне. Вместо клавиши F7 можно также нажать кнопку с зелёной галочкой в верхнем ряду кнопок программы:

Если результат проверки положителен, можно попробовать запустить документ на выполнение, чтобы убедиться, что наша модификация сработала. Для этого нажимаем клавишу F9 (или кнопку с зелёной стрелкой, расположенной через две кнопки правее от кнопки с галочкой). Откроется Word, и мы увидим, что в конец набора вкладок добавилась новая вкладка с присвоенным нами именем «Моя вкладка». Если мы её откроем, то увидим и вставленную нами в неё группу:

Во время открытия документа могут проявится ошибки, которые не определились или были проигнорированы на этапе валидации (F7) в Ribbon XML Editor. Чтобы Word нам сообщал о них, следует включить в нём галочку напротив пункта настроек: «Файл → Параметры → Дополнительно → Общие → Показывать ошибки интерфейса пользователя надстроек».

На этом сегодняшний урок мы закончим. Закрываем Word, затем закрываем Ribbon XML Editor. Если после запуска вы что-то меняли в тексте, последует вопрос о сохранении изменений. Подтверждаем изменения и закроем редактор.

Сегодня мы получили общее представление о модификации ленточного интерфейса. На следующем уроке мы чуть глубже погрузимся в структуру документа, и узнаем, как в нём хранится настраиваемый пользовательский интерфейс для приложения.

Настройка Ribbon

Команды Ribbon

В основе элемента управления Ribbon лежат команды. Эти команды приводят в действие все части элемента управления Ribbon, в том числе его кнопки, меню приложения и панель быстрого запуска.

В отличие от стандартных меню и панелей инструментов в WPF, в Ribbon перехватывать события Click, поступающие от входящих в его состав элементов управления, не разрешено. Преимущество такого проектного решения в том, что он позволяет поставлять в элементе управления Ribbon более развитую модель команд. Недостаток решения в том, что оно не позволяет использовать специальные классы, унаследованные от RoutedCommand.

Ниже перечислены свойства, которые предлагаются в RibbonCommand в дополнение к свойствам RoutedCommand:

LabelTitle

Текст, который отображается на элементе ленты

LabelDescription

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

SmallImageSource

Изображение, используемое при визуализации элемента в небольшом размере (16×16 пикселей на стандартном мониторе 96 dpi). Во избежание появления артефактов масштабирования при разной плотности пикселей рекомендуется использовать объект DrawingImage вместо растрового изображения

LargeImageSource

Изображение, используемое при визуализации элемента в большом размере (32×32 пикселя на стандартном мониторе 96 dpi). Во избежание появления артефактов масштабирования при разной плотности пикселей рекомендуется использовать объект DrawingImage вместо растрового изображения

ToolTipTitle

Заголовок, который отображается в верхней части подсказки для данного элемента. В Ribbon поддерживается новая модель подсказок, которая позволяет отображать всплывающие подсказки с большим количеством деталей, включающие заголовок, описание и изображение (а также нижний колонтитул с теми же деталями). Все эти детали необязательны, и устанавливать нужно только желаемые из них

ToolTipDescription

Текст, который отображается в подсказке под заголовком

ToolTipImageSource

Изображение, которое появляется в подсказке под заголовком слева от текстового описания

ToolTipFooterTitle

Текст, который отображается в заголовке нижнего колонтитула внутри подсказки

ToolTipFooterDescription

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

ToolTipFooterImageSource

Изображение, которое появляется слева от текста нижнего колонтитула внутри подсказки

Следует отметить, что эти свойства применяются не во всех случаях. Например, RibbonCommand часто используется для установки рисунка, который должен отображаться на кнопке меню приложения. Для этой команды свойства LargeImageSource и SmallImageSource важны, а свойство LabelTitle игнорируется.

Для получения качественных изображений при создании большинства приложений будет привлекаться дизайнер графики. Однако на этапе тестирования приложения вполне могут использоваться метки-заполнители и стандартные изображения, поставляемые в Visual Studio. Поищите файл VS2010ImageLibrary.zip в папке вроде c:Program FilesMicrosoft Visual Studio 10.0Common7VS2010ImageLibrary1033.

Меню приложения

Самым простым способом приступить к работе с элементом управления Ribbon является заполнение его меню приложения.

В основе меню приложения лежат два простых класса: RibbonApplicationMenu (унаследованный от MenuBase) и RibbonMenuItem (унаследованный от MenuItem). Это определяет шаблон, который будет встречаться повсюду в настоящем разделе — класс Ribbon порождает специализированные версии базовых классов элементов управления WPF.

Строго говоря, этот шаблон не идеален. Элементы управления ToolBar и StatusBar имеют более чистую модель, поскольку способны работать со стандартными элементами управления WPF, для которых просто задают другой стиль. Но элементу управления Ribbon требуется дополнительный уровень производных классов для того, чтобы поддерживать многие из его усовершенствованных функциональных возможностей. Например, классы RibbonApplicationMenu и RibbonApplicationMenuItem совершенствуют обычные классы меню добавлением поддержки для RibbonComand.

Для получения меню приложения потребуется создать новый объект RibbonApplicationMenu и установить его для свойства Ribbon.ApplicationMenu. Как не трудно догадаться, Ribbon.ApplicationMenu включает в себя коллекцию объектов RibbonApplicationMenuItem, каждый из которых представляет собой отдельный активизируемый щелчком мыши элемент меню.

Для конфигурирования каждой команды необходимо просто предоставить объект RibbonCommand. Этот объект указывает текст, который должен отображаться для данной команды в меню (через свойство LabelTitle), и дополнительную подсказку, которая должна для нее появляться (с использованием свойств ToolTipTitle, ToolTipDescription и т.д), дополнительное изображение (LargeImageSource) и обработчик событий, который должен срабатывать при выполнении на элементе меню щелчка (Executed).

Ниже приведен пример, в котором меню заполняется тремя командами (без установки необязательных свойств, касающихся подсказки):

В этом примере команды объявляются прямо там, где используются. Более удобный подход предполагает создание команд в виде ресурсов с последующим добавлением ссылок на эти ресурсы (с использованием расширения StaticResource) или присоединением их с помощью привязок команд. Такой подход предоставляет возможность использовать команды более гибким образом — например, в ответ на другие действия, такие как сокращенные клавиатурные команды или щелчки на других элементах управления Ribbon.

Объект RibbonApplicationMenu наивысшего уровня тоже нуждается в объекте RibbonCommand, хотя и не используется для запуска команды! Причиной являются несколько других свойств, таких как свойства, связанные с подсказкой, и свойства изображения (которые устанавливают изображение, появляющееся внутри кнопки меню приложения). В случае применения используемого по умолчанию стиля Windows 7 потребуется установить свойство SmallImage, а для стилей Office 2007, которые предусматривают отображение большой кнопки приложения — свойство LargeImageSource.

Ссылка на основную публикацию
Adblock
detector