Программные продукты и системы

Образцы проектирования, также называемые паттернами, применяемые при создании программных систем, описывают готовые решения стандартных задач, представляющие собой объектно-ориентированные микроархитектуры [1]. Использование образцов существенно влияет на итоговые характеристики продукта, такие как расширяемость, возможность последующей модификации, надежность, быстродействие.

Применение образцов проектирования может в некоторых случаях оказывать влияние на решения, принимаемые при создании графического пользовательского интерфейса (graphical user interface – GUI) программной системы. С момента изобретения GUI выработано множество удачных эффективных решений стандартных задач, возникающих перед проектировщиками GUI [2]. Эти решения могут использоваться как образцы проектирования GUI, обеспечивая не только качество конечного продукта, но и его узнаваемость конечным пользователем, что делает интерфейс проще для изучения и применения.

Использование образцов проектирования GUI позволяет также решить одну из основных проблем пользовательских интерфейсов – различные реакции интерфейсов разных производителей на одни и те же команды пользователей. Так, горячие клавиши в одном приложении могут отвечать за совершенно иные функции, чем в другом. Это затрудняет привыкание пользователя к новой программе и снижает общую скорость и эффективность работы.

В сложных компьютерных интерактивных системах, к которым относятся и компьютерные обучающие системы, значение правильно спроектированного, узнаваемого и эффективного интерфейса особенно велико [3]. Операции, выполня- емые пользователем при работе с подобными системами, как правило, требуют большого внимания, а массивы передаваемой пользователю информации велики. В подобных условиях важно обеспечить такой уровень качества интерфейса, который позволил бы общаться с компьютерной системой максимально свободно, практически не замечая промежуточных механизмов GUI. Поэтому для компьютерных обучающих систем наиболее важными являются образцы проектирования GUI, позволяющие упростить навигацию по учебному материалу, а также образцы, структурирующие интерфейс пользователя в сторону повышения его интуитивности без потери необходимого функционала.

Рис. 1. Базовые граничные классы образца проекирования «Двухпанельный селектор», сгруппированные в отдельный пакет (в нотации UML)

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

Применение навигационных образцов в проектах GUI

Как правило, учебный материал, представленный в компьютерной обучающей системе, имеет многоуровневую структуру. Это может быть разделение на курсы, предметы, специализации. Правильное и понятное отображение места текущего учебного материала в общем объеме материалов компьютерной обучающей системы обеспечивает простоту навигации пользователей системы по учебному материалу.

В наиболее общем виде эти потребности позволяет удовлетворить образец проектирования «Двухпанельный селектор» [2]. Основные части образца − две интерфейсные панели, семантически связанные между собой. Наиболее распознаваемой связью в данном случае является общая граница в сочетании с сопоставимыми размерами обоих элементов.

Содержимое первой панели – список элементов, например, названий лекций. При выборе пользователем одного из элементов он остается подсвеченным, и ассоциируемый с ним документ открывается на второй панели. Элементы могут быть структурированы по любому количеству иерархических уровней с помощью древовидных (или иных) структур либо представлять собой одноуровневый последовательный список. Основное достоинство двухпанельного селектора − интуитивность восприятия пользователем.

Используя стандартный язык моделирования Unified Modeling Language (UML), можно выделить два граничных класса, составляющих общую схему данного образца (рис. 1). Класс LinkWindow отвечает за реализацию панели списка элементов. Его конкретизация и добавление дополнительных наследующих классов определяют вид и функциональность панели списка. Класс WorkArea реализует вторую панель образца проектирования, служащую контейнером для содержания доку- ментов.

Особым вариантом организации иерархии элементов в первой панели двухпанельного селектора является применение образца проектирования «Закрываемые панели» [2]. С его помощью каждый уровень иерархии может быть превращен в раскрываемую группу подобно тому, как это реализовано в древовидных списках стандартного интерфейса Windows.

Граничный класс LinkWindow дополняется граничными классами LinkGroup, реализующим раскрываемые группы элементов, и Link, реализующим сами элементы, организуемые в группы (рис. 2).

Достоинство «Закрываемых панелей» состоит в большем по сравнению с древовидными списками удобстве чтения: горизонтальные панели разделов визуально ограничивают взгляд пользователя, сосредотачивая его на рассматриваемой группе и отделяя ее от соседних групп.

При помощи двухпанельного селектора навигация может быть эффективно дополнена образцом проектирования «Глобальная навигация». Данный образец представляет собой отдельную панель, содержащую наиболее общие и важные разделы, которые могут понадобиться пользователю [2].

Базовые граничные классы дополняются классом GlobalButton, реализующим кнопки глобальной навигации.

Так, для компьютерной обучающей системы панель списка двухпанельного селектора может быть дополнена панелями глобальной навигации «Лекции», «Тесты», «Тренажеры» одним щелчком мыши, переключающим панель списка на отображение выбранной глобальной категории.

Пример реализации рассмотренных навигационных образцов проектирования «Закрываемые панели» на языке JavaScript:

class LinkWindow {

      //Объявление атрибутов и операций

}

class LinkGroup {

      public void LinkGroupClick() {

            $(this).parent().children().not(".LinkGroup ").toggle();

      }

}

class Link {

      public void LinkClick() {

             //Реализация загрузки выбранного документа

      }

}

class GlobalButton {

      public void GlobalButtonClick() {

             //Реализация загрузки выбранного раздела в панель навигации

      }

}

Рис. 2. Базовые граничные классы образца проектирования «Двухпанельный селектор», дополненного образцом «Закрываемые панели»

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

Список литературы

1.  Гамма Э., Хелм Р., Джонсон Д., Влиссидес Дж. Приемы объектно-ориентированного проектирования. Паттерны проектирования. / Пер. с англ. – СПб: Питер, 2006. – 366 с.

2.  Тидвелл Дж. Разработка пользовательских интерфейсов. / Пер. с англ. – СПб: Питер, 2008. – 416 с.

3.  Софиев А.Э., Черткова Е.А. Компьютерные обучающие системы. – М.: Изд-во ДеЛи, 2006. – 296 с.