Презентация на тему "Программирование в Mozilla"

Содержание

• 
  Слайд 1

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

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

• 
  Слайд 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в файле со следующим содержанием: Это пока просто пустое окно, которое будет доступно по адресуchrome://findfiles/content/ findfiles

• 
  Слайд 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
  

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

• 
  Слайд 15
  

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

• 
  Слайд 16

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

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

• 
  Слайд 17
  

  Введем панели в наш диалог поиска файлов: Вторая панель диалога выглядит так: