Презентация "Программирование в Mozilla" по информатике – проект, доклад

Программирование в Mozilla

По материалам сайта http://www.xulplanet.com/tutorials/xultu/

XUL и Chrome

Цель: научиться программировать расширения (add-ons, extensions), работающие в среде Mozilla Firefox.

Программы на JavaScript, работающие внутри страниц, имеют много ограничений на доступ к системе. С другой стороны, универсальные программы не имеют прямого доступа к содержимому страниц и управлению браузером. Промежуточный подход: Chrome-пространство, имеющее доступ к содержимому браузера и загруженным страницам, и имеющее богатый набор функций для работы с различными компонентами системы.

XUL – XML-oriented User interface Language – язык для определения элементов диалога с пользователем. XUL-диалоги в Chrome-пространстве имеют XML-структуру, что позволяет управлять ими с помощью обычных JavaScript-программ. Весь браузер Firefox построен в виде большого XUL-диалога (Chrome-документа).

Overlay – это средство, с помощью которого можно «расширить» стандартный браузер Firefox, добавив в него новые элементы управления.

Построение первого 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

Создание XUL-диалогов

Расширение, как правило, определяет элементы интерфейса с пользователем (новые пункты меню, кнопки, диалоги) и определяет программы на Javascript, работающие в ответ на действия с элементами.

Элементы интерфейса принято описывать не на HTML, а на специальном XML-языке, называемом XUL.

В качестве примера определим диалог для поиска файлов на языке XUL и добавим новый пункт меню для его вызова.

Создаем диалог findfiles.xul в файле со следующим содержанием: Это пока просто пустое окно, которое будет доступно по адресу chrome://findfiles/content/

findfiles

Добавление элементов интерфейса в окно

Добавим пару кнопок в наше пустое окно. Кнопки описываются практически так же, как в языке HTML:

Наш диалог будет выглядеть примерно так:

Надписи можно добавить в наш диалог, используя элементы и . Фактически эти элементы ничем друг от друга не отличаются, но принято немного по-разному их использовать. Еще в XUL (в отличие от HTML) можно задавать простое текстовое поле ввода с помощью элемента .

Добавим поле для ввода имени файла для поиска:

Задание других элементов интерфейса

Этот текст будет переноситься по словам, если не помещается в отведенное для него место.

или лучше: а в CSS-файле #my-image { list-style-image: url("chrome://findfiles/skin/myimage.jpg"); }

Списки.

Выпадающие меню и указатели прогресса.

Для создания выпадающего меню используются три элемента: menulist, menupopup и menuitem.

Счетчики прогресса:

Расширим наш диалог дополнительными элементами управления и разместим их, пользуясь элементами и .

findfiles\chrome\content

Гибкие размеры элементов.

Это некоторый текст, помещенный внутрь диалога.

Часто бывает необходимо разместить свободное пространство в определенных местах диалога. Специально предназначенный для этого элемент называется .

Регулировать размеры элементов можно явным указанием ширины и высоты с помощью атрибутов width= и height= или с помощью языка CSS, а можно указанием атрибута «гибкости» flex, например:

Дополнительные возможности кнопок.

Можно добавлять картинки (иконки) на кнопки.

#find-button { list-style-image: url("chrome://findfiles/skin/find.png"); }

Найти файл

Или можно полностью сформировать содержимое кнопки:

Кнопка может содержать выпадающее меню:

Box-модель.

Основой всех элементов является элемент . Все прочие элементы являются лишь частными случаями этого.

Размер элемента обычно определяется внутренним содержанием. Дополнительно можно указать размеры в атрибутах (только в точках) или с помощью привязки файла стилей на языке CSS.

width="300" – задание в виде атрибута элемента (в CSS – width:300px;)

эквивалентно эквивалентно .

height="100" – задание в виде атрибута элемента (в CSS – height:100px;)

maxheight="80" – задание в виде атрибута элемента (в CSS – max-height:80px;)

minwidth="10" – задание в виде атрибута элемента (в CSS – min-width:10px;)

Размещение элементов внутри box’а.

Кроме размера можно управлять размещением элементов внутри box’а, если он сам гибкий, а его внутренние элементы – нет. Это делается с помощью атрибутов box’а pack и align.

Возможные значения атрибута pack: start, center, end Возможные значения атрибута align: start, center, end, baseline, stretch

Это текст.

Stack и Deck – специальные контейнеры.

Обычно элементы внутри контейнеров располагаются в ряд (по вертикали или по горизонтали). Можно их наложить друг на друга. Для этого используются специальные контейнеры – Stack и Deck.

Элементы стека располагаются один поверх другого, причем все они растягиваются так, чтобы иметь размер максимального из них.

Это текст с тенью Это текст с тенью

Элементы внутри стека можно и не растягивать, если для каждого из них задать позицию внутри контейнера. Например, текст с тенью и шкалу прогресса из предыдущего слайда можно оформить и по-другому.

Это текст с тенью Это текст с тенью

Элементы дека располагаются все в одном и том же месте, причем виден всегда только один из них.

Значение атрибута selectedIndex можно менять динамически из программ на JavaScript, чтобы в разное время показывать разное содержание. Например, менять содержимое панели с ярлыками.

Панели с ярлыками.

Имеется несколько взаимосвязанных элементов, образующих все вместе такой важный элемент управления, как «панель с ярлыками». Это: tabbox, tabs, tab, tabpanels, tabpanel

... ... ... ...

Введем панели в наш диалог поиска файлов:

Вторая панель диалога выглядит так: