Adobe Flash Platform * Приклад зовнішнього API: зв'язок між ActionScript і JavaScript в браузері
- Підготовка зв'язку між ActionScript і оглядачем
- Надання методів ActionScript JavaScript
- Зв'язок між ActionScript і оглядачем
Цей зразок додатка демонструє застосування відповідних методів обміну даними між ActionScript і JavaScript в браузері в контексті програми для миттєвого обміну повідомленнями, що дозволяє людині брати участь в чаті з самим собою (звідси і назва програми: Introvert IM). Пересилання повідомлень між формою HTML на веб-сторінці і інтерфейсом SWF виконується за допомогою зовнішнього API. У цьому прикладі показані, наприклад, такі методи:
Правильна ініціація обміну даними шляхом перевірки готовності оглядача до зв'язку перед установкою підключення
Перевірка наявності у контейнера підтримки зовнішнього API
Виклик функцій JavaScript з ActionScript, передача параметрів і отримання у відповідь значень
Надання можливості виклику за допомогою JavaScript методів ActionScript і виконання цих викликів
Отримати файли програми для цього прикладу можна на сторінці www.adobe.com/go/learn_programmingAS3samples_flash_ru . Файли додатки Introvert IM знаходяться в папці Samples / IntrovertIM_HTML. Додаток складається з наступних файлів.
File
опис
IntrovertIMApp.fla
або
IntrovertIMApp.mxml
Основний файл програми в форматі Flash (FLA) або Flex (MXML).
com / example / programmingas3 / introvertIM / IMManager.as
Клас, який встановлює зв'язок між ActionScript і контейнером і керує нею.
com / example / programmingas3 / introvertIM / IMMessageEvent.as
Рекомендований тип події, що відправляється класом IMManager при отриманні повідомлення з контейнера.
com / example / programmingas3 / introvertIM / IMStatus.as
Перечіслімий тип, значення якого відображають різні значення стану «доступності», які можна вибрати в додатку.
html-flash / IntrovertIMApp.html
або
html-template / index.template.html
HTML-сторінка додатка для Flash (html-flash / IntrovertIMApp.html) або шаблон, який використовувався для створення HTML-сторінки додатка для Adobe Flex (html-template / index.template.html). Цей файл містить всі функції JavaScript, які роблять контейнер частиною програми.
Підготовка зв'язку між ActionScript і оглядачем
Одне з найбільш частих застосувань зовнішнього API полягає в тому, щоб дозволяти додаткам ActionScript зв'язуватися з оглядачем. За допомогою зовнішнього API методи ActionScript можуть викликати код, написаний на мові JavaScript, і навпаки. Через складність оглядачів і їх методу внутрішньої візуалізації сторінок не існує методу, що гарантує, що документ SWF зареєструє зворотні виклики перед тим, як буде запущений перший код JavaScript на HTML-сторінці. З цієї причини перед викликом функцій в SWF-документі з JavaScript ваш SWF-документ повинен завжди викликати HTML-сторінку, щоб повідомити її про те, що SWF-документ готовий до прийому підключень.
Наприклад, виконавши ряд дій із застосуванням класу IMManager, Introvert IM визначає, чи готовий оглядач для зв'язку, і підготувати SWF-файл для зв'язку. Перший крок полягає у визначенні часу, коли оглядач готовий для зв'язку. Він виконується в конструкторі IMManager наступним чином:
public function IMManager (initialStatus: IMStatus) {_status = initialStatus; // Check if the container is able to use the external API. if (ExternalInterface.available) {try {// This calls the isContainerReady () method, which in turn calls // the container to see if Flash Player has loaded and the container // is ready to receive calls from the SWF. var containerReady: Boolean = isContainerReady (); if (containerReady) {// If the container is ready, register the SWF's functions. setupCallbacks (); } Else {// If the container is not ready, set up a Timer to call the // container at 100ms intervals. Once the container responds that // it's ready, the timer will be stopped. var readyTimer: Timer = new Timer (100); readyTimer.addEventListener (TimerEvent.TIMER, timerHandler); readyTimer.start (); }} ...} else {trace ( "External interface is not available for this container."); }}
Насамперед код перевіряє, чи доступний зовнішній API в поточному контейнері за допомогою властивості ExternalInterface.available. При цьому він приступає до установки підключення. Оскільки виключення, пов'язані з безпекою, і інші помилки можуть відбуватися при спробі зв'язку із зовнішнім додатком, код упакований в блок try (відповідні блоки catch були пропущені при перерахуванні для стислості).
Потім код викликає метод isContainerReady ():
private function isContainerReady (): Boolean {var result: Boolean = ExternalInterface.call ( "isReady"); return result; }
Метод isContainerReady () в свою чергу звертається до методу ExternalInterface.call (), щоб викликати функцію JavaScript isReady () наступним чином:
<Script language = "JavaScript"> <! - // ------- Private vars ------- var jsReady = false; ... // ------- functions called by ActionScript ------- // called to check if the page has initialized and JavaScript is available function isReady () {return jsReady; } ... // called by the onload event of the <body> tag function pageInit () {// Record that JavaScript is ready to go. jsReady = true; } ... // -> </ script>
Функція isReady () просто повертає значення змінної jsReady. Цієї змінної початково присвоєно значення false; після запуску події onload на веб-сторінці змінна приймає значення true. Іншим словами, якщо ActionScript викликає функцію isReady () перед завантаженням сторінки, JavaScript повертає false для ExternalInterface.call ( "isReady"), а метод ActionScript isContainerReady () повертає відповідно значення false. Після завершення завантаження сторінки функція JavaScript isReady () повертає значення true. Тому метод isContainerReady () в ActionScript також повертає true.
У конструкторі IMManager відбувається одне з двох подій в залежності від готовності контейнера. Якщо isContainerReady () повертає true, код просто викликає метод setupCallbacks (), який завершує процес установки зв'язку з JavaScript. З іншого боку, якщо isContainerReady () повертає false, процес по суті відкладається. Створюється об'єкт Timer, якому дається інструкція викликати метод timerHandler () раз в 100 мілісекунд:
private function timerHandler (event: TimerEvent): void {// Check if the container is now ready. var isReady: Boolean = isContainerReady (); if (isReady) {// If the container has become ready, we do not need to check anymore, // so stop the timer. Timer (event.target) .stop (); // Set up the ActionScript methods that will be available to be // called by the container. setupCallbacks (); }}
Кожен раз, коли викликається метод timerHandler (), він знову перевіряє результат методу isContainerReady (). Після ініціалізації контейнера цей метод повертає значення true. Потім код зупиняє Timer і викликає метод setupCallbacks (), завершуючи процес установки підключення до оглядача.
Надання методів ActionScript JavaScript
Як показано в попередньому прикладі, після того, як код визначає, що оглядач готовий, викликається метод setupCallbacks (). Цей метод готує ActionScript для прийняття викликів з боку JavaScript, як зазначено нижче:
private function setupCallbacks (): void {// Register the SWF client functions with the container ExternalInterface.addCallback ( "newMessage", newMessage); ExternalInterface.addCallback ( "getStatus", getStatus); // Notify the container that the SWF is ready to be called. ExternalInterface.call ( "setSWFIsReady"); }
Метод setCallBacks () завершує завдання підготовки зв'язку з контейнером шляхом виклику методу ExternalInterface.addCallback () для реєстрації двох методів, які можна буде викликати з JavaScript. У цьому коді перший параметр (ім'я, під яким цей метод відомий JavaScript ( "newMessage" і "getStatus") ідентичний імені методу в ActionScript. В даному випадку використання інших імен не давало переваги, тому для простоти повторно застосовувалося одне і те ж ім'я. У підсумку метод ExternalInterface.call () використовувався для виклику функції JavaScriptsetSWFIsReady (), яка повідомляє контейнер про те, що функції ActionScript були зареєстровані.
Зв'язок між ActionScript і оглядачем
Додаток Introvert IM демонструє цілий ряд прикладів виклику функцій JavaScript на сторінці контейнера. У найпростішому випадку (приклад з методу setupCallbacks ()) функція setSWFIsReady () в JavaScript викликається без передачі будь-яких параметрів або отримання у відповідь значення:
ExternalInterface.call ( "setSWFIsReady");
В іншому прикладі з методу isContainerReady () ActionScript викликає функцію isReady () і отримує у відповідь логічне значення:
var result: Boolean = ExternalInterface.call ( "isReady");
Передати параметри функцій JavaScript можна також за допомогою зовнішнього API. Розглянемо, наприклад, метод sendMessage () класу IMManager, який викликається, коли користувач відправляє нове повідомлення своєму «співрозмовнику»:
public function sendMessage (message: String): void {ExternalInterface.call ( "newMessage", message); }
І знову тут застосовується метод ExternalInterface.call () для виклику призначеної функції JavaScript, повідомляючи оглядача про новий сообщеніÐ