Презентация на тему chrome

в среде Mozilla Firefox.
Программы на JavaScript, работающие внутри страниц,

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

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

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

создать каталоги специальной структуры и некоторые специальные файлы.
1. Создаем каталог

firstextension/chrome/content/.

2. Внутри каталога firstextension/ создаем два текстовых файла: install.rdf и chrome.manifest.

3. Создаем приложение внутри firstextension/chrome/content/.

5. Присваиваем архиву расширение xpi, запускаем firefox и открываем в нем наше расширение.

4. Упаковываем всю структуру firstextension/ в zip-архив.

Наш extension будет установлен как дополнение, и информацию о нем можно будет просмотреть в add-ons менеджере.

sample

(новые пункты меню, кнопки, диалоги) и определяет программы на Javascript,

работающие в ответ на действия с элементами.

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

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

Создаем диалог findfiles.xul в файле со следующим содержанием:



title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.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

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

flex="1"/>

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

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

(иконки) на кнопки.
#find-button {
list-style-image: url("chrome://findfiles/skin/find.png");
}
Найти

src="chrome://findfiles/skin/find.png"/> файл

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

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

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

содержанием. Дополнительно можно указать размеры в атрибутах (только в точках) или с помощью привязки файла стилей на языке 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’а pack и align.

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

Это текст.

контейнеров располагаются в ряд (по вертикали или по горизонтали). Можно

их наложить друг на друга. Для этого используются специальные контейнеры – Stack и Deck.

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

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

можно и не растягивать, если для каждого из них

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

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

все в одном и том же месте, причем виден

всегда только один из них.

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

вместе такой важный элемент управления, как «панель с ярлыками». Это:

tabbox, tabs, tab, tabpanels, tabpanel

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