Flex cookbook entry: Handling JavaScript events from a Flash/Flex application.

Для начала вам нужно скачать библиотеку JSInterface(находится в скачиваемом архиве) с официальной страницы проекта.

После установки библиотеки, перед её использованием, библиотеку необходимо инициализировать вызвав метод JSInterface.initialize(). Этот метод принимает любое значение, в качестве первого аргумента, которое может сообщить URL текущего приложения.

Значением первого аргумента JSInterface.initialize() может быть:

• Любой DisplayObject добавленный на сцену
  JSInterface.initialize(this.stage);
• Объект LoaderInfo данного приложения
  JSInterface.initialize(this.loaderInfo);
• Или строка URL с которой было загружено данное приложение
  var url:String = "http://someserver.com/main.swf";
JSInterface.initialize(url);

Этот аргумент необходим только в случаях, когда в HTML странице не был указан атрибут ID для данного SWF приложения. В стандартном HTML шаблоне к Flex Builder 3 атрибут ID встраивается автоматически.

Последнее, что нужно сделать, это реализовать необходимую функции обратного вызова и присвоить её нужному атрибуту. Для получения доступа к JavaScript объектам, нужно использовать класс JSInterface и любой из представленных глобальных объектов:

• JSInterface.window - JavaScript window объект, используется как глобальный объект для всех объявленых JavaScript функций и свойств.
• JSInterface.document - JavaScript document объект
• JSInterface.navigator - JavaScript navigator объект
• JSInterface.main - JavaScript HTMLElement объект, который содержит текущий экземпляр данного приложения

Пример подписки на событие onclick(щелчок мыши) на HTML странице:

package {
	import aw.external.JSInterface;
 
	import flash.display.Sprite;
 
	[SWF(width="20", height="20")]
	public class Test extends Sprite{
		public function Test():void{
			super();
			JSInterface.initialize(this);
			JSInterface.document.body.onclick = this.onclickHandler;
		}
		protected function onclickHandler():void{
			trace(' TEST ');
		}
	}
}

Этот пример может некорректно работать локально, в этом случае, запускайте его под HTTP протоколом. Некоторые браузеры в вызываемую функцию передают ссылку на объект event, описывающий данному событию:

		protected function onclickHandler(event:JSDynamic=null):void{
			trace(' TEST ');
		}

Этот же пример можно слегка изменить и отлавливать событие щелчка на кнопке или любом другом элементе страницы.

Добавляем кнопку к HTML шаблону:

 
<input type="button" id="clickButton" value="Click me!"/>

Подменяем JSInterface объект, используя ID кнопки:

	JSInterface.document.getElementById('clickButton').onclick = this.onclickHandler;

С помощью JSInterface можно использовать более развитый интерфейс для событийной модели JavaScript среды.

В новом проекте добавим в HTML шаблон простую таблицу:

 
<table id="table" width="500" height="500" bgcolor="#ffff88">
<tr>
<td align="center" valign="middle">
			<font size="+2">Click me!</font>
		</td>
</tr>
</table>
 

А теперь изменим код приложения:

package {
	import aw.external.JSInterface;
	import aw.external.jsinterface.JSDynamic;
 
	import flash.display.Sprite;
	[SWF(width="10",height="10")]
	public class AddEventListenerExample extends Sprite{
		public function AddEventListenerExample():void{
			super();
			JSInterface.initialize(this);
			JSInterface.document.addEventListener(
				'click',
				this.documentClickHandler,
				true
			);
			JSInterface.document.getElementById('table').addEventListener(
				'click',
				this.tableClickHandler,
				true
			);
		}
		protected function documentClickHandler(event:JSDynamic=null):void{
			// Stop JavaScript click event.
			trace('Document clicked:', event);
			if(event){
				event.stopPropagation();
				JSInterface.window.alert('Event stopped!');
			}
		}
		protected function tableClickHandler(event:JSDynamic=null):void{
			trace('TABLE clicked:', event);
		}
	}
}

Этот код вы можете опробовать скачав архив с примерами.

Метки: event, ExternalInterface, Flash, Flex, handle, JavaScript, JSInterface

Запись опубликована 21.05.2009 в 2:45 пп и размещена в рубрике ActionScript 3, Flash, JSInterface. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.