Adobe Flash Platform * Приклад зовнішнього API: зв'язок між ActionScript і JavaScript в браузері

  1. Підготовка зв'язку між ActionScript і оглядачем
  2. Надання методів ActionScript JavaScript
  3. Зв'язок між ActionScript і оглядачем

Цей зразок додатка демонструє застосування відповідних методів обміну даними між ActionScript і JavaScript в браузері в контексті програми для миттєвого обміну повідомленнями, що дозволяє людині брати участь в чаті з самим собою (звідси і назва програми: Introvert IM)

Цей зразок додатка демонструє застосування відповідних методів обміну даними між 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, повідомляючи оглядача про новий сообщеніÐ