Adobe - flash - platform приклад створення базового додатки

У цьому прикладі розглянуті етапи створення та модернізації простого додатка ActionScript 3.0 з використанням інструменту Flash Professional або Flash Builder. Створюване додаток є простою моделлю використання зовнішніх файлів класів ActionScript 3.0 в інструментах Flash Professional і Flex.

Проектування додатка ActionScript

У цьому прикладі наводиться стандартний додаток ActionScript, яке називається «Hello World» і має просту структуру.

Додаток називається HelloWorld.

У ньому відображається одне текстове поле зі словами «Hello World!»

У додатку використовується один об'єктно-орієнтована клас Greeter. Така структура дозволяє використовувати клас у проекті Flash Professional або Flex.

У цьому прикладі спочатку створюється базова версія додатка. Потім додаються функції, щоб користувач міг ввести своє ім'я, а додаток перевірило наявність імені в списку відомих користувачів.

Після цього короткого визначення можна приступати до створення програми.

Створення проекту HelloWorld і класу Greeter

У проектному завданні для додатка Hello World йдеться, що його код повинен допускати просте повторне використання. Щоб досягти цієї мети, в додатку використовується один об'єктно-орієнтована клас Greeter. Цей клас використовується в додатку, створюваному в інструменті Flash Builder або Flash Professional.

Створення проекту HelloWorld і класу Greeter в Flex

В інструменті Flash Builder виберіть «Файл»> «Створити»> «Проект Flex».

Введіть HelloWorld в поле «Ім'я проекту». Переконайтеся, що Ви вибрали тип додатка вибрано значення «Web (виконується в Adobe Flash Player)», а потім натисніть «Готово».

Тепер, щоб створити користувальницький файл класу ActionScript в середовищі Flash Builder, виберіть «Файл»> «Створити»> «Клас ActionScript».

У діалоговому вікні «Новий клас ActionScript» в поле «Ім'я» введіть Greeter як ім'я класу і натисніть кнопку «Готово».

Тепер з'явиться вікно редагування нового файлу ActionScript.

Щоб створити клас Greeter в інструменті Flash Professional, виконайте такі дії:

В інструменті Flash Professional виберіть «Файл»> «Створити».

У діалоговому вікні «Створити документ» виберіть файл ActionScript і натисніть кнопку «ОК».

Тепер з'явиться вікно редагування нового файлу ActionScript.

Виберіть команди «Файл»> «Зберегти». Виберіть папку для розміщення додатка, надайте файлу ActionScript ім'я Greeter.as і натисніть кнопку «ОК».

Додавання коду до класу Greeter

Клас Greeter визначає об'єкт Greeter. який використовується в додатку HelloWorld.

Додавання коду до класу Greeter

Введіть наступний код в новому файлі (частина коду може бути вже додана):

Клас Greeter включає один метод sayHello (). який повертає рядок з фразою «Hello World!».

Для збереження цього файлу ActionScript виберіть команди «Файл»> «Зберегти».

Клас Greeter тепер готовий для використання в додатку.

Створення програми з використанням коду ActionScript

Клас Greeter, який був тільки що створений, визначає самодостатній набір програмних функцій, проте він не є закінченим додаток. Для використання класу необхідно створити документ Flash Professional або проект Flex.

При створенні коду необхідно використовувати екземпляр класу Greeter. Нижче описана процедура використання класу Greeter в додатку.

Щоб створити додаток ActionScript з використанням інструменту Flash Professional, виконайте такі дії.

Виберіть команди «Файл»> «Створити».

У діалоговому вікні «Новий документ» виберіть «Файл Flash (ActionScript 3.0)» і натисніть кнопку «ОК».

Відкривається вікно створення документа.

Виберіть команди «Файл»> «Зберегти». Виберіть папку, в якій знаходиться файл класу Greeter.as, надайте документу Flash ім'я HelloWorld.fla і натисніть кнопку «ОК».

У палітрі інструментів Flash Professional виберіть інструмент «Текст». Перетягніть його в робочій області, щоб визначити нове текстове поле шириною приблизно 300 пікселів і висотою 100 пікселів.

На панелі «Властивості» при все ще виділеному в робочій області текстовому полі задайте тип тексту як «Динамічний текст» і введіть mainText як ім'я екземпляра текстового поля.

Клацніть кнопкою миші перший кадр тимчасової шкали. Відкрийте панель «Дії», вибравши меню «Вікно»> «Дії».

На панелі «Дії» введіть наступний сценарій:

Щоб створити додаток ActionScript з використанням інструменту Flash Builder, виконайте наступні дії.

Відкрийте файл HelloWorld.mxml і додайте код у відповідності з наступною роздруківкою:

Цей проект Flex включає чотири тега MXML:

тег визначає контейнер додатки.

тег визначає стиль компонування (вертикальна компоновка) для тега Application.

тег включає деяку частину коду ActionScript.

тег визначає поле, в якому відображаються текстові повідомлення для користувача.

Код в тезі визначає метод initApp (). який викликається при завантаженні програми. Метод initApp () задає текстове значення текстової області mainTxt для рядка «Hello World!», Повернутої методом sayHello () щойно створеного класу Greeter.

Для збереження програми пункт команди «Файл»> «Зберегти».

Публікація і перевірка додатки ActionScript

Нижче наводяться основні етапи перевірки додатку HelloWorld в кожній із згаданих середовищ.

Опублікуйте додаток і перевірте його на наявність помилок компіляції. В інструменті Flash Professional виберіть «Управління»> «Тестувати ролик», щоб скомпілювати код ActionScript і виконати додаток HelloWorld.

Якщо при тестуванні програми у стартовому вікні «Вивід» відображаються помилки і попередження, виправте ці помилки у файлі HelloWorld.fla або HelloWorld.as. Потім повторно перевірте додаток.

При відсутності помилок компіляції додаток Hello World з'явиться у вікні Flash Player.

Після успішного створення простого, але закінченого об'єктно-орієнтованого додатки ActionScript 3.0, можна приступити до Модернізація додатки HelloWorld.

Виберіть «Виконати»> «Виконати HelloWorld».

Додаток HelloWorld буде запущено.

Якщо при тестуванні програми у стартовому вікні «Вивід» відображаються помилки і попередження, виправте ці помилки у файлі HelloWorld.mxml або Greeter.as. Потім повторно перевірте додаток.

При відсутності помилок компіляції додаток Hello World з'явиться у вікні оглядача. На екрані повинен відображатися текст «Hello World!»

Після успішного створення простого, але закінченого об'єктно-орієнтованого додатки ActionScript 3.0 можна приступити до Модернізація додатки HelloWorld.

Модернізація додатки HelloWorld

Щоб зробити додаток більш цікавим, можна ввести в нього підтвердження імені користувача після звірки з заданим списком імен.

Перш за все потрібно оновити клас Greeter, розширивши його функціональні можливості. Потім слід оновити додаток, щоб воно могло використовувати нові функції.

Оновлення файлу Greeter.as

Відкрийте файл Greeter.as.

Змініть вміст файлу наступним чином (нові та змінені рядки виділені жирним шрифтом):

Клас Greeter має тепер нові властивості:

У масиві validNames міститься список дозволених імен користувачів. При завантаженні класу Greeter в масиві встановлюється список з трьох імен.

Метод sayHello () приймає ім'я користувача і змінює вітання в залежності від певних умов. Якщо ім'я користувача userName задано символом нового рядка ( ""), властивість greeting встановлюється на запит імені користувача. Якщо ім'я користувача прийнято, вітання виглядає так: "Hello, userName." І, нарешті, при невиконанні попередніх двох умов змінна greeting встановлюється таким чином: "Sorry userName. You are not on the list." ( «Вибачте, [ім'я користувача], Вас немає в списку»).

Метод validName () повертає істинне значення true. якщо введене ім'я inputName знайдено в масиві validNames. і повертає помилкове значення false. якщо ім'я не знайдено. Інструкція validNames.indexOf (inputName) звіряє кожен рядок масиву validNames з рядком введеного імені inputName. Метод Array.indexOf () повертає положення покажчика першого примірника об'єкта в масиві. Він повертає значення -1, якщо об'єкт не знайдено в масиві.

Щоб змінити додаток з використанням інструменту Flash Professional, виконайте такі дії.

Відкрийте файл HelloWorld.fla.

Змініть сценарій в Кадрі 1 так, щоб порожній рядок ( "") перейшла в метод sayHello () класу Greeter:

Виберіть інструмент «Текст» в палітрі інструментів. Створіть два нових текстових поля в робочій області. Розташуйте їх поруч один з одним під існуючим текстовим полем mainText.

У першому новому текстовому полі, яке є міткою, введіть текст Ім'я користувача:.

Виберіть інше текстове поле і встановіть його тип в інспектора властивостей як «Введений текст». В якості типу рядка виберіть Single line (окремий рядок). Введіть textIn як ім'я екземпляра.

Клацніть кнопкою миші перший кадр тимчасової шкали.

На панелі «Дії» додайте наступні рядки в кінці наявного сценарію:

Новий код додає наступні функціональні можливості:

Перші два рядки просто задають кордону для двох текстових полів.

Вхідний текстове поле, таке як textIn. має набір подій, які воно може розподіляти. Метод addEventListener () дозволяє задати функцію, яка запускається при виникненні події певного типу. В даному випадку цією подією буде натискання клавіші на клавіатурі.

Настроюється функція keyPressed () перевіряє, чи буде натиснута саме клавіша Enter. Якщо необхідна клавіша натиснута, метод sayHello () об'єкта myGreeter передає текст з текстового поля textIn як параметр. Цей метод повертає рядок привітання на основі переданого в нього значення. Повернута рядок потім призначається властивості text текстового поля mainText.

Повний сценарій для Кадра 1 виглядає наступним чином:

Для запуску програми виберіть команди «Управління»> «Тестувати ролик».

При виконанні програми з'являється запрошення до вводу імені користувача. Якщо ім'я приймається програмою, з'явиться повідомлення про підтвердження «hello».

Щоб змінити додаток з використанням інструменту Flash Builder, виконайте наступні дії.

Відкрийте файл HelloWorld.mxml.

Потім змініть тег . щоб показати користувачеві, що текст використовується тільки для відображення. Змініть колір фону на світло-сірий і задайте для атрибута editable значення false:

Тепер додайте наступні рядки безпосередньо після закриває тега . Ці рядки створюють компонент TextInput, який дозволяє користувачеві вводити значення імені користувача:

Атрибут enter визначає дії, які виконуються при натисканні користувачем клавіші Enter в поле userNameTxt. У цьому прикладі код передає текст, введений в поле, в метод Greeter.sayHello (). Привітання в поле mainTxt змінюється відповідно.

Файл HelloWorld.mxml має наступний вигляд:

Збережіть відредагований файл HelloWorld.mxml. Виберіть «Виконати»> «Виконати HelloWorld» для виконання програми.

При виконанні програми з'являється запрошення до вводу імені користувача. Якщо ім'я (Sammy, Frank або Dean) приймається програмою, з'явиться повідомлення про підтвердження «Hello, userName».