Использование контрола AppBar в приложениях WinJS

Всем привет! Сегодня мы рассмотрим один из базовых контролов для приложений Windows 8 – AppBar.

Немного об этой серии статей. Все примеры будут приводится на языке JavaScript, то есть мы будем рассматривать только Windows Store JavaScript приложения и библиотеку WinJS.

Итак, панель AppBar является очень важным элементом интерфейса для многих приложений, так как в Windows 8 она заменяет классическое меню File. Как и все контролы в библиотеке WinJS, AppBar ориентирован на работу c touch. Чтобы активировать данную панель необходимо нажать и потянуть в нижней части экрана планшета (либо щелкнуть правой кнопкой мыши).

Полное имя контрола AppBar – WinJS.UI.AppBar. Создадим пустое приложение и добавим следующий код в разметку страницы default.html:

   1:  <div 

   2:       data-win-control="WinJS.UI.AppBar" 

   3:       data-win-options="{position:bottom, sticky:false}">

   4:  </div>

Готово, самая базовая реализация панели меню готова. Для панели доступно две основные опции:

1. placement – место положение панели на странице. Устанавливает в каком месте экрана появится панель. Принимаются значения top или bottom. По умолчанию панель появляется внизу;
2. sticky - активирует залипание панели. По умолчанию панель исчезает при нажатии на любой области вне панели (либо повторного щелчка правой кнопкой мыши). Если установить опцию Sticky в значение true - панель залипнет и убрать ее можно будет только явно нажав на кнопку закрытия.

Безусловно панель сама по себе была бы почти бесполезна, если бы в нее нельзя было помещать команды. За команды панели в WinJS отвечает класс WinJS.UI.AppBarCommand. Добавим в нашу панель несколько команд и посмотрим на результат:

   1:  <div data-win-control="WinJS.UI.AppBar" 

   2:       data-win-options="{placement:bottom, sticky:false}">

   3:       <button data-win-control="WinJS.UI.AppBarCommand" 

   4:               data-win-options="{icon:'help', label:'help'}"></button>

   5:       <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator'}"></hr>

   6:       <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'toggle'}"></button>

   7:  </div>

Все добавленные команды появились в панели. Объекту WinJS.UI.AppBarCommand можно установить следующие опции(наиболее интересные):

1. type  – тип команды. Это может быть обыкновенная кнопка, переключатель, разделитель или всплывающая панель;
2. icon  – если вы выбрали тип кнопку - то из коробки вам предоставляют большой набор иконок в стиле Metro;
3. flyout – идентификатор элемента WinJS.UI.Flyout на странице, который должен появляться при нажатии на кнопку;
4. label  – подпись под кнопкой.

Пример кода и интерфейс AppBar c всплывающей панелью приведены ниже:

   1:  <div data-win-control="WinJS.UI.AppBar" 

   2:       data-win-options="{placement:bottom, sticky:false}">

   3:       <button data-win-control="WinJS.UI.AppBarCommand" 

   4:               data-win-options="{type:'flyout', flyout:'myFlyout', icon:'world'}">

   5:       </button>

   6:  </div>

Спецификация Microsoft приводит следующие Best Practices при работе с контролом AppBar:

1. Если есть такая возможность - разделяйте команды в AppBar по логическим группам при помощи разделителей;
2. Если в вашем приложении для AppBar есть команды доступные на всех страницах приложения, а также команды, которые появляются только на определенных страницах, то общие команды следует размещать на одинаковых позициях на всех страницах приложения;
3. Для удобства работы с touch устройствами – если пользователь выбрал элемент на странице с левой стороны экрана - то команды для этого элемента следует отобразить в правой части панели AppBar;
4. Используйте режим залипания AppBar, если логика вашего приложения предполагает интенсивное использование команд из панели в одном контексте (например, операции с картинкой - обрезка, масштабирование, поворот, надпись - нет смысла скрывать AppBar после каждого вызова команды);
5. При перенасыщении AppBar командами - группируйте их в сплывающие панели (режим flyout);
6. Предусмотрите логику размещения команд на панели в случае использования приложения в snap режиме (в этом режиме ширина окна приложения, а следовательно и панели AppBar в несколько раз меньше обычного);
7. Если в приложении есть горизонтальный скролл - убирайте область прокрутки из-под AppBar при активации панели;
8. Используйте панель AppBar внизу окна для команд, а AppBar вверху окна - для навигации;
9. Используйте стандартные стили для AppBar, команд панели, а также желательно только стандартные иконки для кнопок;
10. Не стоит помещать в панель AppBar ключевые команды приложения (их следует размещать открыто на странице), команды Sign In. Sing Out, Sign Up, а также команды настроек и команды которые возможно поместить в контекстное меню.

Вот собственно все, что я хотел вам рассказать о контроле AppBar. Полезные ссылки вы найдете ниже, спасибо за внимание, приятной разработки на Windows 8.

Полезные ресурсы:

1. Коллекция всех иконок для команд AppBar
2. Demo-приложение, демонстрирующее все возможности AppBar