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

Содержание

• 
  Слайд 1

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

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

• 
  Слайд 2

  Добавление Javascript в XUL-страницы

  Добавление страниц с текстом на Javascriptпроисходит точно так же,как и в HTML-страницах – с помощью тега . <window title="Find Files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/x-javascript"> var myFileName = null; ... В качестве типа скрипта часто используется "text/x-javascript" – это «расширенный» Javascript. Не рекомендуется вставлять тексты скриптов непосредственно, лучше использовать отдельные файлы.

• 
  Слайд 3

  Механизм обработки реакции на события

  Определим реакцию на щелчок мышью внутри некоторого элемента: При возникновении события его обработка проходит следующие фазы: Capturing: событие распространяется от объектов window и documentвниз до того элемента, внутри которого возникло событие; Bubbling: после обработки в каждом из элементов событие начинает распространяться обратно вверх вплоть до объекта window. При обработке события в каждом из элементов сначала исполняетсяреакция, определенная программистом, а затем реакция «по умолчанию»,определяемая типом и природой элемента. Можно управлять тем, на какой из фаз распространения происходитобработка события, продолжать ли распространение и сохранить ли реакцию«по умолчанию».

• 
  Слайд 4

  Пример определения реакции

  Событие command – это событие нажатия на кнопку, выбор элемента меню,выбор радио-кнопки и т.п. Событие обрабатывается на фазе bubbling и покажет тег элемента, накотором произошло событие (сделали щелчок мышью или другим способом активизировали элемент). Добавим реакцию на кнопку «Отмена» в нашем диалоге поиска файлов: test findfiles

• 
  Слайд 5

  Определение реакции на событие в js-файле

  Определим файл, содержащий весь javascript-код:findfiles.js и привяжемего к нашему диалогу. ... window.addEventListener('load', FF_OnWindowLoad, false); function FF_OnWindowLoad() { var cancelButton = document.getElementById('cancel-button'); cancelButton.addEventListener( 'command', FF_CloseDialog, true); } function FF_CloseDialog() { window.close(); } findfiles-1

• 
  Слайд 6

  Свойства и методы события

  В функцию, определяющую реакцию на событие, всегда передаетсяобъект event. Он, в частности, имеет следующие атрибуты и методы: target – элемент, на котором возникло событие; currentTarget – элемент, на котором возникло событие; stopPropagation() – остановить процесс распространения события; preventDefault() – не выполнять реакцию «по умолчанию»; Если событие принадлежит определенному классу (событие от мыши, например), то дополнительно имеются атрибуты и методы, характеризующие этот конкретный класс событий. Mouse events: click – событиещелчка; dblclick – событиедвойного щелчка; mousedown, mouseup – событиенажатия и отжатия кнопки; mousemove – событиеизменения позиции курсора; mouseover, mouseout – событиеизменения позиции курсора относительновыбранного элемента;

• 
  Слайд 7

  Свойства события от мыши и клавиатуры

  Если произошедшее событие – это событие от мыши, то объект eventимеет следующие атрибуты: screenX, screenY – координаты курсора в точках от начала экрана; clientX, clientY – координаты курсора от текущего документа; В примере показано, как значения этих атрибутов используются для вычисления текущего положения курсора относительно окна и тогоэлемента, внутри которого обрабатывается событие. mouse Keyboard events: keypress – событиенажатия клавиши; keydown, keyup – событиенажатия и отжатия клавиши; События от клавиатуры возникают на элементе, имеющем фокус. Еслитакого элемента нет, а клавиша нажата внутри активного окна, то событиевозникает на всем документе. Соответствующую реакцию можноопределять для элемента . На самом деле для определения глобальных событий от клавиатурыобычно используется другой механизм.

• 
  Слайд 8

  Определение функциональных клавиш

  «Глобальную» клавишу можно определить с помощью специальногоэлемента , расположенного в составе набора . Ссылка на такую клавишу обычно делается из элемента меню или кнопкии это приводит к появлению текста клавиши в метке. findfiles-2

• 
  Слайд 9

  Исполнение кода команд

  Аналогично, вместо того, чтобы определять один и тот же код в разныхэлементах, можно определить его один раз в элементе . ... Преимущество такого выделения команд в отдельный элемент – можноприписывать им свойства (например, disabled), не делая этого поотдельности для всех элементов, исполняющих эту команду. Помимо приписывания свойств, элемент может исполнитьсвою команду при вызове метода doCommand(); Используя эту методику, получим новый диалог findfiles: findfiles-3

• 
  Слайд 10

  Отделение кода команд

  Так же, как и в случае HTML, практически весь код можно отделить отосновного файла и поместить его в отдельный js-файл. findfiles-4 window.addEventListener('load', init, false); function init(event) { document.getElementById('cmd-search').addEventListener( 'command', doSearch, false); } function doSearch(event) { document.getElementById('progmeter').style.display = 'inherit'; }