Ribbon для .NET. Часть первая

Автор: Виктор Деревянко
Опубликовано: 09.09.2008
Источник: SoftKey.info

Новый пользовательский интерфейс, реализованный фирмой Microsoft в Microsoft Office 2007, вызвал большой интерес в среде разработчиков. Еще бы. Классические меню и панели инструментов уходят в прошлое, им на смену приходит новый ленточный (риббон, ribbon) интерфейс, известный под кодовым именем Fluent UI. Поскольку Microsoft является известным законодателем мод в программной индустрии, то появление нового интерфейса означает одно - вскоре он будет реализован в большинстве современных приложений и станет стандартом.

Радикальное изменение концепции пользовательского интерфейса, предложенное Microsoft, конечно же, не случайно. Прежде всего, оно нацелено на серьезное повышение удобства использования. Современные приложения реализуют все больше и больше функций. Меню и панели инструментов в них все более перегружены, так что пользователям приходится тратить море времени на поиск нужных команд. Различные полумеры типа "скрывать редко используемые пункты меню" проблемы не решают. Именно поэтому появился Fluent UI, в котором традиционные меню и панели инструментов заменены лентой (риббоном). Команды на ленте сгруппированы по вкладкам. На каждой вкладке размещена группа команд, относящихся к той или иной области деятельности в приложении. В результате, пользователю нет необходимости рыскать по меню в поисках той или иной команды - все команды находятся в нужный момент перед глазами.

Любому .NET разработчику, решившему реализовать в своем приложении новый интерфейс, приходится выбирать библиотеку программных компонентов, наиболее подходящую для реализации Fluent UI. Вариантов на рынке в настоящее время представлено множество, в частности, это решения, предлагаемые DevComponents, DevExpress - для Windows Forms, Actipro Software LLC - для WPF, Divelements, Syncfusion, Infragistic - для Windows Forms и для WPF. Довольно неплохие бесплатные реализации Fluent UI имеются на codeproject, как для WPF, так и для Windows Forms, причем с открытыми исходными кодами. Как известно, сама Microsoft выпустила бесплатный пакет Visual C++ 2008 Feature Pack 2008, позволяющий реализовывать Ribbon интерфейс. Однако он нацелен на разработку MFC приложений, так что .NET разработчику он него будет не слишком много толку.

При выборе библиотеки компонентов следует обратить внимание на следующий момент. Фирма Microsoft официально разрешает сторонним разработчикам использовать Fluent UI при разработке собственных приложений, однако для этого необходимо получить лицензию. Лицензию можно получить совершенно бесплатно, но с условием, что реализация Fluent UI в вашем приложении будет соответствовать рекомендациям Microsoft, изложенным в специальном документе - 2007 Microsoft® Office System User Interface Design Guidelines. В настоящее время Microsoft занимается оформлением патента на Fluent UI и, вероятно, получит его. Поэтому, чтобы избежать возможных проблем в будущем, имеет смысл реализовывать интерфейс в соответствии с требованиями изложенными в этом документе. Естественно, коммерческие программные компоненты позволяют сделать это проще и быстрее, чем бесплатные.

Следует заметить, что использование каких-либо коммерческих библиотек не может гарантировать, что ваше приложение будет удовлетворять всем рекомендациям Microsoft. В части требований к реализации Fluent UI - весьма вероятно. Однако рекомендации так же содержат и ряд ограничений касательно того, в каких именно приложениях допускается использовать Fluent UI, а в каких нет. Поэтому, каждому разработчику, решившему реализовать Fluent UI, желательно ознакомиться с рекомендациями самостоятельно.

Elegant Ribbon

Компоненты Elegant Ribbon

Elegant Ribbon - это небольшая, но мощная библиотека компонентов, разработанная фирмой FOSS Software, Inc., позволяющая реализовать Fluent UI в приложениях под Windows Forms. Библиотека реализует практически все возможности Fluent UI и содержит качественный дизайнер форм, дающий возможность быстро и удобно программировать ленточный интерфейс. Библиотека написана на 100% управляемом C# и весьма легковесна. Схема лицензирования Elegant Ribbon такова, что библиотеку можно рассматривать как одно из самых недорогих решений, представленных в настоящее время на рынке, в особенности, для небольших команд разработчиков.

Реализация элементов управления в Elegant Ribbon технически выполнена очень грамотно и на самом современном уровне. Во-первых, одни и те же элементы управления библиотеки могут использоваться в различных контекстах - на форме, на ленте Fluent UI и в меню. Во-вторых, один и тот же элемент управления может иметь несколько способов отображения, например, в виде большой иконки или в виде маленькой иконки с текстом, причем переключение между способами отображения происходит автоматически при изменении размеров окна. Кстати, внешний вид элементов управления задается скинами и описывается с помощью XML-файла. В третьих, там, где это возможно, элементы управления являются "windowless", т.е. для них не создается отдельных окон в системе. Это позволяет экономить системные ресурсы и увеличивает производительность системы. К слову сказать, Microsoft Net славится своей медленной прорисовкой сложных элементов управления, и с этой проблемой разработчикам приходится активно бороться. В Elegant Ribbon скорость прорисовки интерфейса очень неплохая - никаких "тормозов" не наблюдается.

Набор элементов управления Elegant Ribbon весьма богат, хотя и не является полным. Из стандартных элементов управления отсутствуют, по большому счету, лишь RichEdit, ListView, TreeView и TabControl. С каждой новой версией, которые выходят достаточно часто, набор элементов управления пополняется и, в частности, в следующей версии разработчики обещают реализовать TabControl.

Впрочем, для реализации возможностей Fluent UI в Elegant Ribbon все необходимое есть уже сейчас. Остановимся на этом более подробно

Лента (Ribbon)

Интерфейс Ribbon организован просто и логично. Лента вверху окна содержит вкладки, каждая вкладка содержит одну или несколько групп, каждая группа служит контейнером для обычных элементов управления - кнопок, checkbox'ов, combobox'ов и т.п. Реализация ленточного интерфейса с помощью Elegant Ribbon начинается с добавления на форму компонента Ribbon. При этом на форму добавляется Application Button, Application Menu, компонент FormFrameSkinner для управления темами и лента с одной вкладкой и одной размещенной на ней пустой группой. Далее, с помощью контекстного меню, на ленту можно добавить сколько угодно вкладок и разместить на каждой из них сколько угодно групп.

Элементы управления в группы помещаются стандартным образом - путем их перетаскивания на форму из панели инструментов. Библиотека Elegant Ribbon предоставляет достаточно широкий набор элементов управления, которые могут быть размещены в группах, включая разнообразные варианты кнопок, ComboBox, RadioButton, CheckBox, TextBox, DataTimePicker и календарь. По сравнению с аналогичными стандартными элементами управления, они содержат ряд дополнительных свойств, обеспечивающих возможность реализацию полноценного ленточного интерфейса.

Одним из ключевых преимуществ нового интерфейса является то, что размер и расположение элементов управления на ленте автоматически изменяются при изменении ширины окна таким образом, чтобы они оставались наиболее информативными при данных размерах окна. В Elegant Ribbon такое автомасштабирование реализовано на очень высоком уровне. Каждому элементу управления, включая ComboBox, DataTimePicker и TextBox, можно сопоставить текст и два набора иконок - больших (32 x 32 пикселя) и маленьких (16 x 16 пикселей). По мере уменьшении ширины окна, размещенные в группах элементы управления уменьшаются и становятся все менее информативными - большие иконки сменяются малыми, текстовые метки пропадают.

Elegant Ribbon позволяет явно управлять порядком понижения информативности каждого конкретного элемента управления при уменьшении свободного места. Для этого предназначен набор свойств Informativeness, позволяющий определить максимальный и минимальный уровень информативности. Например, для ComboBox в качестве максимального размера по умолчанию указан ComboBoxWithImageAndLabel, в качестве минимального ComboBox. Если задать оба размера равными ComboBoxWithLabel, то этот элемент управления будет отображаться в виде "текстовая метка + ComboBox" при любом масштабировании. В том случае, когда для отображения группы места недостаточно даже при минимальном уровне информативности, вместо нее отображается кнопка, при нажатии на которую появляется всплывающая панель с группой.

Поведение ribbon при уменьшении размеров окна

Таким образом, при размещении элементов управления в группах, пользователь не управляет их размерами самостоятельно - за него это делает Elegant Ribbon. Если же требуется разместить в группе элементы управления заданным образом, можно воспользоваться панелью. Наличие полноценной панели - это приятная и чрезвычайно полезная особенность данной библиотеки. Панели можно добавлять в группы и произвольным образом размещать на них элементы управления - правда только те, что предоставляются Elegant Ribbon.

Кнопка и меню приложения (Application Button, Application Menu)

Application Button - это большая круглая кнопка в левом верхнем углу. При ее нажатии должно появляться меню приложения (Application Menu), отображающее список команд, относящихся к документу в целом, такие как Save, Open, New, Print и т.п. Справа в меню может отображаться список недавно использованных документов или список подпунктов выбранного пункта меню. Внизу располагаются две кнопки: кнопка "Exit" для закрытия приложения и кнопка "Options" для вызова редактора настроек приложения.

Редактирование Application Menu

Elegant Ribbon содержит удобный редактор для создания меню приложения и предоставляет богатые возможности по настройке внешнего вида и функциональности этого меню. Дизайнер позволяет добавлять в меню различного вида кнопки, разделители и галереи. Список недавно использованных документов через дизайнер задать нельзя - только программно. Поскольку и Application Button и Application Menu являются обязательными составляющими ленточного интерфейса, Elegant Ribbon не позволяет их отключать.

Другие возможности Elegant Ribbon

Интерфейс Fluent UI состоит не только из ленты и меню приложения. Согласно рекомендациям Microsoft в него входят так же новый механизм клавиатурной навигации, всплывающие подсказки определенного вида, панель инструментов для быстрого доступа к часто используемым командам, новый элемент управления "галереи" и многое другое. Возможности Elegant Ribbon по реализации этого функционала будут рассмотрены во второй части данной статьи.

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