Навигация

8.3. Альтернатива: таблицы стилей

Элементы управления навигацией могут использовать несколько расширений стилей Mozilla.

Расширение стиля -moz-appearance поддерживает темы графической среды для элементов управления. Некоторые его значения относятся к XUL-тегам, рассмотренным в этой лекции:

toolbox toolbar statusbar statusbarpanel progressbar
progressbarvertical progresschunk progresschunk-vertical
tab tab-left-edge tab-right-edge tabpanels tabpanel
scrollbartrack-horizontal scrollbartrack-vertical

Mozilla предоставляет свойство стиля overflow CSS 2 с некоторыми удобными альтернативами, как показано в таблице 8.1.

Mozilla также поддерживает scrollbar: auto.

8.4. Практика: панели инструментов и вкладки NoteTaker

В этом разделе "Практика" мы добавим в наше приложение NoteTaker навигацию. Если бы у NoteTaker было собственное полноценное окно приложения, как у классического браузера, например, тогда строка основного меню и набор пиктограмм для панелей инструментов были бы очевидной точкой старта. Однако это расширение, и его навигация смешивается с навигацией по основному приложению. Мы можем только спроектировать его как набор элементов.

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

Вот те части, которые составляют систему навигации NoteTaker:

1. Диалог, над которым мы работали до текущего момента.
2. Панель инструментов для управления заметками в окне основного приложения.
3. Пункт меню "Инструменты" основного приложения.
4. Маленькое встроенное окно, которое будет отображать заметку о содержимом данной web-страницы.

Когда-нибудь в меню "Инструменты" может появиться и "Менеджер заметок", но уже не в этой книге. Маленькое встроенное окно требует особого подхода. Оно описывается в "Окна и панели" , "Окна и панели". Здесь мы обратимся к оставшимся задачам.

Окно диалога требует всего лишь нескольких улучшений. Мы заменим неуклюжие <toolbarbutton>, <deck> и часть функции action() простым тегом <tabbox>. В листинге 8.6 показан этот новый код, очень легко читающийся.

<tabbox id="dialog.tabs"> 
  <tabs> 
    <tab id="dialog.tab.edit" label="Edit" 
      accesskey="E" selected="true"/> 
    <tab id="dialog.tab.keywords" label="Keywords" accesskey="K"/> 
  </tabs> 
  <tabpanels> 
    <tabpanel> 
      ... Здесь идет содержимое панели ... 
    </tabpanel> 
    <tabpanel> 
      <description>Содержимое будет добавлено позже.</description> 
    </tabpanel> 
  </tabpanels> 
</tabbox>

Результат этого изменения показан на рисунке 8.8.

Рис. 8.8. Диалог NoteTaker, реализованный с <tabbox>.

Мы также должны обновить функцию action(), так как отдельные вкладки по-прежнему можно выбирать одним нажатием клавиши. Нам нужно управлять <tabbox> из JavaScript. Заглянув в файл xul.css архива toolkit.jar в chrome, мы увидим, что для всех тегов имеются связки: <tabbox>, <tabs>, <tab> и <tabpanel>. Изучив файл tabbox.xml (в chrome), содержащий эти XBL-связки, мы обратим внимание, что у <tabbox> есть свойство selectedIndex, а у <tab> есть свойство selected. Опять же, эти имена соответствуют XML-атрибутам и стандарту DOM 2 HTML. Мы используем свойство <tabbox> selectedIndex. Необходимые изменения функции action() приведены в листинге 8.7.

// старый код 
var card = document.getElementById("dialog." + task); 
var deck = card.parentNode; 
if ( task == "edit" ) deck.selectedIndex = 0; 
if ( task == "keywords") 
deck.selectedIndex = 1; 
// новый код 
var tabs = document.getElementById("dialog.tabs"); 
if ( task == "edit" ) tabs.selectedIndex = 0; 
if ( task == "keywords") 
tabs.selectedIndex = 1;

Очевидно, что <tabbox> и <deck> действуют похожим образом, но у <tabbox> более удачный графический интерфейс. На этом изменения в диалоге завершаются.

Панель инструментов NoteTaker - XUL-тег <toolbar>, который появится в основном окне классического браузера. На ней будет кнопка "Edit", с помощью которой пользователи смогут попадать в основной диалог NoteTaker. На ней также будут элементы формы, с помощью которых можно быстро создавать и удалять заметки в NoteTaker. С панели управления можно будет создавать точно такую же заметку, как и через окно правки, только значения по умолчанию будут предоставлены практически для всех полей. Это удобная альтернатива вроде панели инструментов "Google bar", которая иногда используется, чтобы добавить поисковую машину в окно классического браузера. При отображении независимо от основного окна браузера панель инструментов NoteTaker выглядит так, как показано на рисунке 8.9.

Рис. 8.9. Создание заметки NoteTaker и панель навигации

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

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" 
 type="text/css"?> <!DOCTYPE window> 
<window xmlns="http://www.mozilla.org/keymaster/
 gatekeeper/ there.is.only.xul"> 
  <toolbox> 
    <toolbar id="notetaker-toolbar"> 
      <description value="Note:"/> 
  <textbox/> 
      <description value="Keyword:"/> 
  <menulist editable="true"> 
    <menupopup> 
      <menuitem label="draft"/> 
      <menuitem label="reviewed"/> 
      <menuitem label="final"/> 
      <menuitem label="published"/> 
      <menuitem label="cool"/> 
    </menupopup> 
  </menulist> 
  <toolbarbutton label="Edit"/> 
  <toolbarbutton label="Delete"/> 
  <toolbarbutton label="Save"/> 
  </toolbar> 
  </toolbox> 
</window>

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

Последнее изменение, которое нужно внести в код в этой лекции - добавить пункт в меню "Инструменты" окна классического браузера, так что пользователи смогут открывать диалог правки, если панель инструментов не установлена. Для этого нужен только тег <menuitem>, который будет соответствовать изменениям панели инструментов позднее.