Россия, Звенигород |
Навигация
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:
- Диалог, над которым мы работали до текущего момента.
- Панель инструментов для управления заметками в окне основного приложения.
- Пункт меню "Инструменты" основного приложения.
- Маленькое встроенное окно, которое будет отображать заметку о содержимом данной 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.6. Элемент управления <tabbox> для диалога NoteTaker
Результат этого изменения показан на рисунке 8.8.
Мы также должны обновить функцию 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;Листинг 8.7. Новая смена вкладок с помощью <tab>.
Очевидно, что <tabbox> и <deck> действуют похожим образом, но у <tabbox> более удачный графический интерфейс. На этом изменения в диалоге завершаются.
Панель инструментов NoteTaker - XUL-тег <toolbar>, который появится в основном окне классического браузера. На ней будет кнопка "Edit", с помощью которой пользователи смогут попадать в основной диалог NoteTaker. На ней также будут элементы формы, с помощью которых можно быстро создавать и удалять заметки в NoteTaker. С панели управления можно будет создавать точно такую же заметку, как и через окно правки, только значения по умолчанию будут предоставлены практически для всех полей. Это удобная альтернатива вроде панели инструментов "Google bar", которая иногда используется, чтобы добавить поисковую машину в окно классического браузера. При отображении независимо от основного окна браузера панель инструментов NoteTaker выглядит так, как показано на рисунке 8.9.
В конце концов эта панель должна будет обосноваться в 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>Листинг 8.8. Разметка панели инструментов NoteTaker
В итоговой версии NoteTaker ключевые слова из выпадающего списка будут создаваться автоматически. Пока мы будем пользоваться фиксированным набором. Есть множество вопросов, которые нужно решить, чтобы эта панель инструментов была завершена, и к ним мы обратимся в следующих лекциях.
Последнее изменение, которое нужно внести в код в этой лекции - добавить пункт в меню "Инструменты" окна классического браузера, так что пользователи смогут открывать диалог правки, если панель инструментов не установлена. Для этого нужен только тег <menuitem>, который будет соответствовать изменениям панели инструментов позднее.