Командный пользовательский интерфейс

Панель приложения

После размещения самых важных команд на полотне приложения, большинство команд будет размещено в панели приложения. Повторюсь, панель приложения можно вызвать разными способами – жестом скольжения от верхнего или нижнего края экрана, комбинацией клавиш Win+Z, щелчком правой кнопки мыши. Когда вы выполните одно из этих действий, Windows ищет элемент управления панели приложения на текущей странице и запускает его – вам не нужно самостоятельно обрабатывать события ввода.

Совет. Для того чтобы предотвратить появление панели приложения, вы можете использовать один из двух подходов. Первый заключается в том, чтобы полностью отключить появление панели приложения в ответ на любой из жестов, для этого нужно установить свойство winControl.disabled элемента панели в значение true. Второй применим тогда, когда вы, например, не хотите, чтобы панель приложения появлялась при щелчке правой кнопкой мыши по конкретному элементу (например, по полотну). Для этого можно прослушивать событие contextmenu (то есть – щелчок правой кнопки мыши) для этого элемента и вызвать eventArgs.preventDefault() в обработчике события.

В приложениях, написанных на HTML и JavaScript, элемент управления панели приложения реализован как элемент управления WinJS: WinJS.UI.AppBar (http://msdn.microsoft.com/library/windows/apps/br229670.aspx). Для первой демонстрации нам достаточно тех возможностей, которые представлены в шаблоне проекта Приложение таблицы в Visual Studio/Blend, где стандартная панель приложения включена в default.html (изначально закомментирована):

<div id="appbar" data-win-control="WinJS.UI.AppBar">	
<button data-win-control="WinJS.UI.AppBarCommand"	
data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}">
</button>	
</div>

Восхитительный результат этой разметки, с использованием таблицы стилей ui-dark.css, показан ниже:

Так как панель приложения объявлена в default.html, которая является контейнером для всех других элементов управления страниц, та же панель приложения будет использована для всех остальных страниц приложения. Используя такой подход, вы можете объявить все команды на одной панели приложения и присваивать командам различные классы, что позволит вам легко показывать и скрывать наборы команд для соответствующих страниц. Это так же позволяет централизованно управлять теми командами, которые актуальны для нескольких страниц, и вы можете подключить к ним обработчики событий в основном коде активации приложения (например, в default.js).

Кроме того, вы можете объявить панель приложения в разметке отдельных элементов управления страниц. До тех пор, пока панель приложения находится в DOM, жесты Windows активируют ее на каждой странице. В проекте Приложение таблицы, например, вы можете переместить вышеприведенную разметку из default.html в groupedItems.html, groupDetail.html и itemDetail.html с любыми модификациями для каждой страницы. Это может быть особенно полезным, если у страниц приложения немного общих команд.

В подобных случаях, метод ready каждой страницы должен позаботиться о том, чтобы привязать команды на панелях приложения этих страниц к обработчикам. Обратите внимание на то, что вы можете добавлять обрабочтики внутри метода страницы ready даже для общей панели приложения. Это – вопрос вызова addEventListener для нужного дочернего элемента в панели приложения.

Посмотрим теперь как все это работает с помощью примера "HTML-элемен управления AppBar" (http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9). (Дополнительные материалы к этой лекции так же содержат модифицированную версию этого примера). Начнем с основ панели приложения и со стандартной конфигурации, ориентированной на команды. Посмотрим, как показывать меню для некоторых из этих команд, и затем посомтрим, как можно создать собственный макет, как это делается для верхней панели приложения.

Подсказка. Чисто технически, вы можете объявить столько панелей приложения, сколько вам нужно, на любой странице, и все они будут представлены в DOM. Однако, последней из них, которая будет обрабатываться, будет та, что расположена на самом верху по оси Z по умолчанию, и, таким образом, она одна будет получать события. Windows не делает попыток комбинирования панелей приложения, в итоге, потому что элементы управления страниц вставляются в середину главной страницы наподобие default.html, панель приложения в default.html, которая объявляется после элемента управления страницы, появится над панелью приложения, объявленной на странице. В то же время, если панель приложения элемента управления страницы больше, чем в default.html, ее часть может быть видимой. В итоге: объявляйте панели приложения или на главной странице, или на элементах управления страниц, но не и там и там одновременно.

Основы панели приложения и стандартные команды

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

Сценарий 1 в примере (html/create-appbar.html) объявляет панель приложения с четырьмя командами и разделителем:

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', 
label:'Add', icon:'add', section:'global', tooltip:'Add item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove', 
label:'Remove', icon:'remove', section:'global', tooltip:'Remove item'}">
</button>
<hr data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{type:'separator', section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete', 
label:'Delete', icon:'delete', section:'global', tooltip:'Delete item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',
 label:'Camera', icon:'camera', section:'selection', tooltip:'Take a picture'}">
</button>
</div>

 

В приложении это выглядит так, как показано ниже, с использованием таблицы стилей ui-light.css. Здесь мы так же можем видеть всплывающую подсказку, прямоугольник фокуса ввода и эффект, применяемый при зависании указателя мыши над командой Add (Добавить) (для того, чтобы все это увидеть, я разместил указатель мыши над этой командой):

В разметке, элемент управления панель приложения объявлен так же, как другие элементы управления WinJS (это становится привычкой!), с использованием элемента-контейнера (это div) с data-win-control="WinJS.UI.AppBar". Каждая страница в этом примере загружается с помощью WinJS.UI.Pages.render, которая удобна тем, что вызывает WinJS.UI.processAll для создания экземпляра панели приложения. (Можно, как и для других элементов управления, программно создавать панель приложения, используя оператор new).

Этот пример не предусматривает каких-либо специальных параметров для панели приложения в data-win-options, но имеется ряд возможностей:

• disabled, если установлено в значение true, создается изначально отключенная панель приложения. Значение по умолчанию – false.
• layout может принимать значение "commands" (по умолчанию) или "custom", как мы увидим в разделе "Пользовательские панели приложений и панели навигации" ниже.
• placement может быть либо "top", либо "bottom" (по умолчанию). Далее мы используем значение "top" для навигационной панели
• sticky изменяет поведение панели приложения, когда она исчезает с экрана, если в ней нет необходимости. Со значением по умолчанию, установленным в false, панель приложения исчезает, когда вы щелкнете мышью или коснетесь экрана за ее пределами. Если параметр установлен в true, панель приложения будет оставаться видимой до тех пор, пока вы не измените параметр на false, и пользователь не коснется экрана за ее пределами, или вы программно не скроете ее с помощью метода hide.

Если вам нужна постоянно видимая панель приложения с пользовательским макетом, отображаемая в верхней части экрана, вы можете воспользоваться размеркой, подобной этой:

<div id="navBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{layout:'custom', placement:'top', sticky: true}">
 

Обратите внимание на то, что две панели приложения на странице, с различными значениями параметра placement не мешают друг другу. Кроме того, свойство sticky для каждого из расположений панелей действует независимо. Таким образом, если вам нужно реализовать верхнюю навигационную панель в масштабах всего приложения, вы можете объявить ее в default.htm (или в другой подобной странице) и объявить нижние панели приложения на каждом элементе управления страницы. Опять же, это всего лишь элементы в DOM!

Как вы можете видеть, элемент управления панели приложения может содержать любое количество дочерних элементов для своих команд, каждый из которых должен быть элементом управления WinJS.UI.AppBarCommand (http://msdn.microsoft.com/library/windows/apps/hh700497.aspx) внутри элемента button или hr, или экземпляр панели приложения не будет создан.

Свойства и параметры команд панели приложения перечислены ниже:

• id Идентификатор элемента, который вы можете использовать с командой document.getElementById или с методом панели приложения getCommandById для подключения обработчиков события click.
• type Может принимать несколько значений: "button" (по умолчанию), "separator"(с его помощью создаются вертикальные разделители), "flyout" (используется для создания всплывающих меню, которые описывает свойство flyout; смотрите дальше раздел "Командные меню"), и "toggle" (создающий кнопку, которая может быть во включенном либо выключенном состоянии). В последнем случае, свойство selected команды может быть использовано для установки начального значения и получения состояния кнопки во время выполнения программы.
• label Задает текст, который отображается ниже командной кнопки. Его используют всегда вместо того, чтобы задавать текстовое содержимое самой кнопки, так как подобный текст не выравнивается соответствующим образом в элементе управления. (Попробуйте это сделать и увидите сами!). Кроме того, обратите внимание на то, что это свойство, наряду со свойством tooltip , которое описано ниже, часто локализуют, используя атрибут data-win-res . Мы рассмотрим это в лекции 6 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", но уже сейчас вы можете посмотреть файл html/localize-appbar.html в примере Сценарий 8 для того, чтобы увидеть, как это работает.
• tooltip Содержит текст всплывающей подсказки для команды (обычно локализованный), в качестве значения по умолчанию используется текст, заданный в label. Обратите внимание на то, что это – обычный текст. Использование полнофункционального HTML- элемента управления WinJS.UI.Tooltip не поддерживается.
• icon Задает графический элемент, который отображается в команде. Обычно это одна из строк из перечисления WinJS.UI.AppBarIcon (http://msdn.microsoft.com/library/windows/apps/hh770557.aspx), которое содержит 150 различных символов из шрифта Segoe UI Symbol. Если вы посмотрите в файл ресурсов WinJS ui.strings.js, вы увидите, как заданы эти символы, с использованием кодов наподобие \uE109 . Перечисление, фактически, просто предоставляет понятные имена для кодов символов – от \uE100 до \uE1E9 . Но вы не ограничены этими символами. Вы можете использовать любые escape-коды в формате ‘\uXXXX’ из шрифта Segoe UI Symbol (Обратите внимание на одиночные кавычки). Так же вы можете воспользоваться другими шрифтами или использовать собственные изображения, как показано в разделе "Пользовательские значки" далее^{1Хочу сделать три примечания. Во-первых, внутри data-win-options escape-последовательности Unicode могут быть заданы в HTML-формате, вида &#xNNNN; я предпочитаю формат JSON, так как он имеет более простую запись и менее подвержен ошибкам. Во-вторых, вы можете воспользоваться настольным приложением Таблица символов (Char Map, charmap.exe) для того, чтобы просмотреть все символы в каком-либо конкретном шрифте. В-третьих, если вам нужно локализовать значок, вы можете задать свойство значка в строке data-win-res, так как свойство icon, в конечном счете, разрешается в строку.} .
• section Управляет расположением команд. Для языков, где тексты расположены слева направо (таких, как английский), значение по умолчанию "selection" располагает команды (контекстно-зависимые) в левой части панели приложения. Свойство "global" располагает команды (глобальные для приложения) с правой стороны. В языках, где пишут справа налево (таких, как еврейский, арабский), стороны меняются местами. Эти простые варианты выбора приводят к единообразному расположению этих двух категорий команд (значение по умолчанию – "selection" ). Это притягивает взгляд пользователей к одной стороне панели, если они ищут постоянные команды, и к другой, если ищут команды, зависящие от контекста. Обратите внимание на то, что команды в каждом из разделов располагаются слева направо (или справа налево) в том порядке, в котором они появляются в разметке.
• onClick Может быть использовано для декларативного задания обработчика события click . Помните, что любая функция, упомянутая в разметке, должна быть помечена как безопасная для обработки (смотрите Главу 4 курса "Введение в разработку приложений для Windows 8 с использованием HTML, CSS и JavaScript"). Обработчик события click может быть так же задан программно, с помощью addEventListener , в таком случае маркировка не нужна.
• disabled Отключает команду, если установлено в true . Значение по умолчанию – false .
• extraClass Задает один или большее количество классов CSS, которые прикреплены к команде. Они могут использоваться для индивидуальной стилизации командных элементов управления и для создания наборов команд, которые можно легко отображать и скрывать, как показано в разделе "Отображение, скрытие, включение и обновление команд" ниже.
• section Управляет расположением команд. Для языков, где тексты расположены слева направо (таких, как английский), значение по умолчанию "selection" располагает команды (контекстно-зависимые) в левой части панели приложения. Свойство "global" располагает команды (глобальные для приложения) с правой стороны. В языках, где пишут справа налево (таких, как еврейский, арабский), стороны меняются местами. Эти простые варианты выбора приводят к единообразному расположению этих двух категорий команд (значение по умолчанию – "selection" ). Это притягивает взгляд пользователей к одной стороне панели, если они ищут постоянные команды, и к другой, если ищут команды, зависящие от контекста. Обратите внимание на то, что команды в каждом из разделов располагаются слева направо (или справа налево) в том порядке, в котором они появляются в разметке.
• onClick Может быть использовано для декларативного задания обработчика события click . Помните, что любая функция, упомянутая в разметке, должна быть помечена как безопасная для обработки (смотрите Главу 4 курса "Введение в разработку приложений для Windows 8 с использованием HTML, CSS и JavaScript"). Обработчик события click может быть так же задан программно, с помощью addEventListener , в таком случае маркировка не нужна.
• disabled Отключает команду, если установлено в true . Значение по умолчанию – false .
• extraClass Задает один или большее количество классов CSS, которые прикреплены к команде. Они могут использоваться для индивидуальной стилизации командных элементов управления и для создания наборов команд, которые можно легко отображать и скрывать, как показано в разделе "Отображение, скрытие, включение и обновление команд" ниже.

Если вы хотите создавать команды во время выполнения приложения, вы можете сделать это, присвоив свойству панели приложения commands JSON-массив дескрипторов (descriptors) AppBarCommand в любое время, когда панель приложения не видна (то есть, когда ее свойство hidden имеет значение true). Массив подобных дескрипторов из Сценария 1 нашего примера может выглядеть так (вы можете найти этот код в модифицированном примере к этой лекции; смотрите файл js/create_appbar.js):

var appbar = document.getElementById("createAppBar").winControl;

//Set the app bar commands property to populate it 
var commands = [
{ id: 'cmdAdd', label: 'Add', icon: 'add', section: 'global', tooltip: 'Add item' },
{ id: 'cmdRemove', label: 'Remove', icon: 'remove', section: 'global', tooltip: 'Remove item' },
{ type: 'separator', section: 'global' },
{ id: 'cmdDelete', label: 'Delete', icon: 'delete', section: 'global', tooltip: 'Delete item' },
{ id: 'cmdCamera', label: 'Camera', icon: 'camera', section: 'selection',tooltip: 'Take a picture' }
];

appbar.commands = commands;
 

Когда создается панель приложения, происходит перебор массива commands и создание элементов управления WinJS.UI.AppBarCommand для каждого элемента. Если параметр type не задан или если он установлен в "button", "flyout" или "toggle", тогда создается командный элемент button. При параметре type, установленном в значение "separator" создается элемент hr. Обратите внимание на то, что вам следует локализовать поля label, tooltip, и, возможно, icon в каждом описании команды, вместо того, чтобы использовать встроенный текст, как показано здесь, в примерах кода.

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

data-win-bind="{ winControl.commands: myData.commands }" 

Однако подобный подход не работает для атрибута data-win-res (как мы увидим в лекции 6 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", и как, кроме того, показано в Сценарии 8 текущего примера), так как строка ресурса не может быть конвертирована в JSON как часть поиска ресурса. Попытка выполнить подобный трюк, в любом случае, принесет больше сложностей, чем преимуществ, поэтому лучше использовать либо декларативную форму описания в HTML, либо программное подключение локализованных массивов команд во время выполнения приложения.

Так же следует помнить о том, что commands – это редкий пример свойства только для записи (write-only property). Вы можете записать в него данные, но не можете получить массив из панели приложения. Панель приложения использует этот массив только для задания собственной конфигурирации и массив отбрасывается сразу после того, как все элементы созданы в DOM. Во время выполнения приложения, однако, вы можете использовать метод панели приложения getCommandById для получения конкретного командного элемента.

События команд

Говоря о командных элементах, об элементах управления AppbarCommand панели приложения (о тех, которые не являются разделителями), все это – лишь элементы button , и, таким образом, они реагируют на обычные события. Так как каждому командному элементу присвоен заданный вами id, вы можете использовать getElementById , как обычно, перед добавлением addEventListener . В Сценарии 1 примера, посвященного элементу управления HTML AppBar, например, подобный код можно увидеть в методе страницы ready :

document.getElementById("cmdAdd").addEventListener("click", doClickAdd, false);	
document.getElementById("cmdRemove").addEventListener("click", doClickRemove, false);
document.getElementById("cmdDelete").addEventListener("click", doClickDelete, false);
document.getElementById("cmdCamera").addEventListener("click", doClickCamera, false);
 

Хотя такой подход работает, он относительно неэффективен, так как каждый вызов document.getElementById обходит всю DOM. Я рекомендую, вместо этого, использовать метод панели приложения getCommandById. Вот изменения, которые я внес в модифицированный пример, который можно найти в дополнительных материалах к этой лекции:

 //Использование метода getCommandById панели приложения избавляет от необходимости обходить всю DOM для каждой кнопки
var appbar = document.getElementById("createAppBar").winControl;	
appbar.getCommandById("cmdAdd").addEventListener("click", doClickAdd, false);	
appbar.getCommandById("cmdRemove").addEventListener("click", doClickRemove, false);	
appbar.getCommandById("cmdDelete").addEventListener("click", doClickDelete, false);	
appbar.getCommandById("cmdCamera").addEventListener("click", doClickCamera, false);

Конечно, если вы зададите обработчик для свойства onclick каждой команды в разметке (эти обработчики должны иметь свойство supportedForProcessing, установленное в значение true), вы полностью устраните необходимость в подобных действиях!

Так же должно быть очевидно то, что можно подключать обработчики событий, подобные этим, в любом месте приложения, и вы можете, конечно, прослушивать любые другие события, особенно, когда задаете собственный макет панели приложения с иным пользовательским интфрейсом. Кроме того, знайте, что событие click удобно объединяет обработку касаний, нажатий мыши, событий ввода данных с клавиатуры, таким образом, в данной области вам не нужно выполнять дополнительные действия. В случае с клавиатурой, кстати, панель приложения позволяет вам перемещаться между командами с помощью клавиши Tab. Нажатие на Enter или на клавишу пробела активирует обработчик click.

События и методы панели приложения

В дополнение к методу панели приложения getCommandById , который мы только что рассмотрели, панель приложения имеет несколько других методов и событий. Во-первых, вот методы:

• show отображает панель приложения, если ее свойство disabled установлено в значение false . В противном случае вызов игнорируется.
• hide скрывает панель приложения.
• showCommands, hideCommands и showOnlyCommands используются для управления наборами команд, как описано в следующем разделе "Показ, скрытие и обновление команд".

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

• beforeshow происходит перед тем, как всплывающий элемент станет видимым. Для панели приложения, это время, когда вы можете задать свойство commands в зависимости от состояния приложения в данный момент, активировать или деактивировать отдельные команды.
• aftershow происходит сразу после того, как всплывающий элемент станет видимым. Для панели приложения, если ее свойство sticky установлено в значение true , вы можете использовать это приложение для подстройки макета приложения, если у вас есть элементы для прокрутки содержимого, которые могут быть, в противном случае, частично перекрыты (смотрите ниже).
• beforehide происходит перед тем, как всплывающий элемент будет скрыт. Для панели приложения, вы можете использовать это событие для скрытия вспомогательныхз элементов пользовательского интерфейса, созданных вместе с панелью приложения и для перенастройки макета вокруг панели приложения с включенным режимом sticky .
• afterhide происходит сразу после того, как всплывающий элемент будет скрыт. Для панели приложения, это может быть временем перенастройки макета приложения, если в этом есть необходимость.

Вы можете найти пример использования метода show вместе с событиями aftershow и beforeshow в Сценарии 4 примера, посвященного элементу управления HTML AppBar.

Проблемы с макетом приложения, названные выше (и то, что я держал в секрете во введении к этой лекции) возникают потому, что панель приложения накладывается на нижную часть страницы и перекрывает ее. Если эта страница содержит элемент управления для прокрутки содержимого, панель приложения со свойством sticky , установленным в true , для тех пользователей, которые применяют мышь, частично перекрывает вертикальную полосу прокрутки, а горизонтальную полосу прокрутки делает полностью недоступной. Если вы используете залипающую (sticky) панель приложения на подобных страницах, тогда, тогда – так как политика Магазина Windows не поддерживают ущемление прав пользователей мышей, вам следует использовать aftershow для уменьшения высоты элементов прокрутки с помощью значения панели приложения offsetHeight или clientHeight , таким образом, оставляя полосы прокрутки доступными. Когда панель приложения скрывается и происходит событие afterhide , вы можете снова перенастроить макет. Всегда используйте то значение, которое имеется во время выполнения приложения, такое, как clientHeight в данных вычислениях, так как оно учитывает масштабирование разрешения и потому, что высота панели приложения может меняться в зависимости от содержащихся на ней команд и режима просмотра.

Для того чтобы показать это, в Сценарии 6 имеется горизонтально прокручиваемый элемент управления ListView, который, в обычном состоянии, занимает почти всю страницу. Полоса прокрутки отображается вдоль самой нижней части элемента при использовании мыши. Если вы выделяете элемент, панель приложения переводится в режим залипания и отображается (смотрите функцию doSelectItem в файле js/appbar-listview.js):

appBar.sticky = true;
appBar.show();

Вызов метода show приводит к вызову событий beforeshow и aftershow . Для подстройки макета подходит событие aftershow , которое позволяет работать с реальным значением высоты панели приложения. В примере это событие обрабатывается в функции doAppBarShow (так же в файле js/appbar-listview.js):

function doAppBarShow() {
var listView = document.getElementById("scenarioListView");
var appBar = document.getElementById("scenarioAppBar");
var appBarHeight = appBar.offsetHeight;
// Сделать полосу прокрутки видиой, если панель приложения в режиме залипания
if (appBar.winControl.sticky) {
var listViewTargetHeight = "calc(100% - " + appBarHeight + "px)";
var transition = { property: 'height', duration: 367,
timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
to: listViewTargetHeight
};
WinJS.UI.executeTransition(listView, transition);
}
}
 

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

Здесь вы можете видеть, что значение appBar.offsetHeight просто вычитается из значения height элемента управления ListView с применением анимированного перехода. (Смотрите "Состояния, параметры, файлы и документы" ). Операция выполняется в обратном порядке в doAppBarHide , где высота ListView просто сбрасывается до 100% с использованием похожей анимации. В этом случае обработчик события совсем не зависит от высоты панели приложения, поэтому мы можем использовать либо событие beforehide, либо – afterhide . Если, с другой стороны, вам нужно знать размер панели приложения для настройки вашего макета, используйте событие beforehide .

В качестве эксперимента, запустите Сценарий 7 из SDK-примера. Обратите внимание на то, как нижняя часть полосы прокрутки текстовой области перекрывается залипающей панелью приложения. Попытайтесь взять код из Сценария 6 для того, чтобы используя события aftershow и beforehide настроить высоту текстовой области и сохранить видимость полосы прокрутки. И не считайте это оценочным испытанием ваших возможностей: в дополнительных материалах к этой лекции есть решение этой задачи.