Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
1
Программирование в Mozilla По материалам сайта
2
XUL и Chrome Цель: научиться программировать расширения (add-ons, extensions), работающие в среде Mozilla Firefox. Программы на JavaScript, работающие внутри страниц, имеют много ограничений на доступ к системе. С другой стороны, универсальные программы не имеют прямого доступа к содержимому страниц и управлению браузером. Промежуточный подход: Chrome-пространство, имеющее доступ к содержимому браузера и загруженным страницам, и имеющее богатый набор функций для работы с различными компонентами системы. XUL – XML-oriented User interface Language – язык для определения элементов диалога с пользователем. XUL -диалоги в Chrome-пространстве имеют XML-структуру, что позволяет управлять ими с помощью обычных JavaScript-программ. Весь браузер Firefox построен в виде большого XUL -диалога (Chrome-документа). Overlay – это средство, с помощью которого можно «расширить» стандартный браузер Firefox, добавив в него новые элементы управления.
3
Построение первого extensionа Чтобы установить свое расширение (extension), необходимо создать каталоги специальной структуры и некоторые специальные файлы. 1. Создаем каталог firstextension/chrome/content/. 2. Внутри каталога firstextension/ создаем два текстовых файла: install.rdf и chrome.manifest. 3. Создаем приложение внутри firstextension/chrome/content/. 5. Присваиваем архиву расширение xpi, запускаем firefox и открываем в нем наше расширение. 4. Упаковываем всю структуру firstextension/ в zip -архив. Наш extension будет установлен как дополнение, и информацию о нем можно будет просмотреть в add-ons менеджере. sample
4
Создание XUL-диалогов Расширение, как правило, определяет элементы интерфейса с пользователем (новые пункты меню, кнопки, диалоги) и определяет программы на Javascript, работающие в ответ на действия с элементами. Элементы интерфейса принято описывать не на HTML, а на специальном XML-языке, называемом XUL. В качестве примера определим диалог для поиска файлов на языке XUL и добавим новый пункт меню для его вызова. Создаем диалог findfiles.xul в файле со следующим содержанием: 
5
Добавление элементов интерфейса в окно Добавим пару кнопок в наше пустое окно. Кнопки описываются практически так же, как в языке HTML: Наш диалог будет выглядеть примерно так: Надписи можно добавить в наш диалог, используя элементы и. Фактически эти элементы ничем друг от друга не отличаются, но принято немного по-разному их использовать. Еще в XUL (в отличие от HTML) можно задавать простое текстовое поле ввода с помощью элемента. Добавим поле для ввода имени файла для поиска:
6
Задание других элементов интерфейса Этот текст будет переноситься по словам, если не помещается в отведенное для него место. или лучше: а в CSS-файле #my-image { list-style-image: url("chrome://findfiles/skin/myimage.jpg"); }
7
Списки.
8
Выпадающие меню и указатели прогресса. Для создания выпадающего меню используются три элемента: menulist, menupopup и menuitem. Счетчики прогресса: Расширим наш диалог дополнительными элементами управления и разместим их, пользуясь элементами и. findfiles\chrome\content
9
Гибкие размеры элементов. Это некоторый текст, помещенный внутрь диалога. Часто бывает необходимо разместить свободное пространство в определенных местах диалога. Специально предназначенный для этого элемент называется. Регулировать размеры элементов можно явным указанием ширины и высоты с помощью атрибутов width= и height= или с помощью языка CSS, а можно указанием атрибута «гибкости» flex, например:
10
Дополнительные возможности кнопок. Можно добавлять картинки (иконки) на кнопки. #find-button { list-style-image: url("chrome://findfiles/skin/find.png"); } Найти файл Или можно полностью сформировать содержимое кнопки: Кнопка может содержать выпадающее меню:
11
Box-модель. Основой всех элементов является элемент. Все прочие элементы являются лишь частными случаями этого. Размер элемента обычно определяется внутренним содержанием. Дополнительно можно указать размеры в атрибутах (только в точках) или с помощью привязки файла стилей на языке CSS. width="300" – задание в виде атрибута элемента (в CSS – width:300px; ) эквивалентно эквивалентно. height="100" – задание в виде атрибута элемента (в CSS – height:100px; ) maxheight="80" – задание в виде атрибута элемента (в CSS – max- height:80px; ) minwidth="10" – задание в виде атрибута элемента (в CSS – min- width:10px; )
12
Размещение элементов внутри boxа. Кроме размера можно управлять размещением элементов внутри boxа, если он сам гибкий, а его внутренние элементы – нет. Это делается с помощью атрибутов boxа pack и align. Возможные значения атрибута pack : start, center, end Возможные значения атрибута align : start, center, end, baseline, stretch Это текст.
13
Stack и Deck – специальные контейнеры. Обычно элементы внутри контейнеров располагаются в ряд (по вертикали или по горизонтали). Можно их наложить друг на друга. Для этого используются специальные контейнеры – Stack и Deck. Элементы стека располагаются один поверх другого, причем все они растягиваются так, чтобы иметь размер максимального из них. Это текст с тенью
14
Stack и Deck – специальные контейнеры. Элементы внутри стека можно и не растягивать, если для каждого из них задать позицию внутри контейнера. Например, текст с тенью и шкалу прогресса из предыдущего слайда можно оформить и по-другому. Это текст с тенью
15
Stack и Deck – специальные контейнеры. Элементы дека располагаются все в одном и том же месте, причем виден всегда только один из них. Значение атрибута selectedIndex можно менять динамически из программ на JavaScript, чтобы в разное время показывать разное содержание. Например, менять содержимое панели с ярлыками.
16
Панели с ярлыками. Имеется несколько взаимосвязанных элементов, образующих все вместе такой важный элемент управления, как «панель с ярлыками». Это: tabbox, tabs, tab, tabpanels, tabpanel...
17
Панели с ярлыками. Введем панели в наш диалог поиска файлов: Вторая панель диалога выглядит так:
Еще похожие презентации в нашем архиве:
