Пример: создание базового приложения

Создание проекта HelloWorld и класса Greeter в Flex

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

2. Введите HelloWorld в поле «Имя проекта». Убедитесь, что в качестве типа приложения выбрано значение «Web (выполняется в Adobe Flash Player)», а затем нажмите «Готово».

   Flash Builder создает проект и показывает его в окне проводника пакетов. По умолчанию проект содержит файл с именем HelloWorld.mxml, который открывается в редакторе.

3. Теперь, чтобы создать пользовательский файл класса ActionScript в среде Flash Builder, выберите «Файл» > «Создать» > «Класс ActionScript».

4. В диалоговом окне «Новый класс ActionScript» в поле «Имя» введите Greeter в качестве имени класса и нажмите кнопку «Готово».

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

   В продолжение добавьте код к классу Greeter.

Чтобы создать класс Greeter в инструменте Flash Professional, выполните следующие действия:

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

2. В диалоговом окне «Создать документ» выберите файл ActionScript и нажмите кнопку «ОК».

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

3. Выберите команды «Файл» > «Сохранить». Выберите папку для размещения приложения, присвойте файлу ActionScript имя Greeter.as и нажмите кнопку «ОК».

   После этого можно перейти к добавлению кода к классу Greeter.

Добавление кода к классу Greeter

1. Введите следующий код в новом файле (часть кода может быть уже добавлена):

   package 
   { 
       public class Greeter 
       { 
           public function sayHello():String 
           { 
               var greeting:String; 
               greeting = "Hello World!"; 
               return greeting; 
           } 
       } 
   }

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

2. Для сохранения этого файла ActionScript выберите команды «Файл» > «Сохранить».

Класс Greeter теперь готов для использования в приложении.

Чтобы создать приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

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

2. В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».

   Открывается окно создания документа.

3. Выберите команды «Файл» > «Сохранить». Выберите папку, в которой находится файл класса Greeter.as, присвойте документу Flash имя HelloWorld.fla и нажмите кнопку «ОК».

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

5. На панели «Свойства» при все еще выделенном в рабочей области текстовом поле задайте тип текста как «Динамический текст» и введите mainText в качестве имени экземпляра текстового поля.

6. Щелкните кнопкой мыши первый кадр временной шкалы. Откройте панель «Действия», выбрав меню «Окно» > «Действия».

7. На панели «Действия» введите следующий сценарий:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello();

8. Сохраните файл.

После этого можно перейти к публикации и проверке приложения ActionScript.

Чтобы создать приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

1. Откройте файл HelloWorld.mxml и добавьте код в соответствии со следующей распечаткой:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400"/>         
        
   </s:Application>

   Этот проект Flex включает четыре тега MXML:

   • Тег <s:Application> определяет контейнер приложения.

   • Тег <s:layout> определяет стиль компоновки (вертикальная компоновка) для тега Application.

   • Тег <fx:Script> включает некоторую часть кода ActionScript.

   • Тег <s:TextArea> определяет поле, в котором отображаются текстовые сообщения для пользователя.

   Код в теге <fx:Script> определяет метод initApp() , который вызывается при загрузке приложения. Метод initApp() задает текстовое значение текстовой области mainTxt для строки «Hello World!», возвращенной методом sayHello() только что созданного класса Greeter.

2. Для сохранения приложения выберите команды «Файл» > «Сохранить».

После этого можно перейти к публикации и проверке приложения ActionScript.

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

1. Опубликуйте приложение и проверьте его на наличие ошибок компиляции. В инструменте Flash Professional выберите «Управление» > «Тестировать ролик», чтобы скомпилировать код ActionScript и выполнить приложение HelloWorld.

2. Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.fla или HelloWorld.as. Затем повторно проверьте приложение.

3. При отсутствии ошибок компиляции приложение Hello World появится в окне Flash Player.

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

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

1. Выберите «Выполнить» > «Выполнить HelloWorld».

2. Приложение HelloWorld будет запущено.

   • Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.mxml или Greeter.as. Затем повторно проверьте приложение.

   • При отсутствии ошибок компиляции приложение Hello World появится в открывшемся окне обозревателя. На экране должен отображаться текст «Hello World!»

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

Обновление файла Greeter.as

1. Откройте файл Greeter.as.

2. Измените содержимое файла следующим образом (новые и измененные строки выделены жирным шрифтом):

   package 
   { 
       public class Greeter 
       { 
           /** 
            * Defines the names that receive a proper greeting. 
            */ 
           public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
    
           /** 
            * Builds a greeting string using the given name. 
            */ 
           public function sayHello(userName:String = ""):String 
           { 
               var greeting:String; 
               if (userName == "")  
               { 
                   greeting = "Hello. Please type your user name, and then press " 
                               + "the Enter key."; 
               }  
               else if (validName(userName))  
               { 
                   greeting = "Hello, " + userName + "."; 
               }  
               else  
               { 
                   greeting = "Sorry " + userName + ", you are not on the list."; 
               } 
               return greeting; 
           } 
            
           /** 
            * Checks whether a name is in the validNames list. 
            */ 
           public static function validName(inputName:String = ""):Boolean  
           { 
               if (validNames.indexOf(inputName) > -1)  
               { 
                   return true; 
               }  
               else  
               { 
                   return false; 
               } 
           } 
       } 
   }

Класс 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, если объект не найден в массиве.

Затем необходимо изменить файл приложения, в котором существует ссылка на этот класс ActionScript.

Чтобы изменить приложение с использованием инструмента Flash Professional, выполните следующие действия.

1. Откройте файл HelloWorld.fla.

2. Измените сценарий в Кадре 1 так, чтобы пустая строка ( "" ) перешла в метод sayHello() класса Greeter:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello("");

3. Выберите инструмент «Текст» в палитре инструментов. Создайте два новых текстовых поля в рабочей области. Расположите их рядом друг с другом под существующим текстовым полем mainText .

4. В первом новом текстовом поле, которое является меткой, введите текст Имя пользователя: .

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

6. Щелкните кнопкой мыши первый кадр временной шкалы.

7. На панели «Действия» добавьте следующие строки в конце имеющегося сценария:

   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

   Новый код добавляет следующие функциональные возможности:

   • Первые две строки просто задают границы для двух текстовых полей.

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

   • Настраиваемая функция keyPressed() проверяет, будет ли нажата именно клавиша Enter. Если требуемая клавиша нажата, метод sayHello() объекта myGreeter передает текст из текстового поля textIn в качестве параметра. Этот метод возвращает строку приветствия на основе переданного в него значения. Возвращенная строка затем назначается свойству text текстового поля mainText .

   Полный сценарий для Кадра 1 выглядит следующим образом:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello(""); 
    
   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

8. Сохраните файл.

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

   При выполнении приложения появляется приглашение к вводу имени пользователя. Если имя принимается программой, появится подтверждающее сообщение «hello».

Чтобы изменить приложение с использованием инструмента Flash Builder, выполните следующие действия.

1. Откройте файл HelloWorld.mxml.

2. Затем измените тег <mx:TextArea> , чтобы показать пользователю, что текст используется только для отображения. Измените цвет фона на светло-серый и задайте для атрибута editable значение false :

       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

3. Теперь добавьте следующие строки непосредственно после закрывающего тега <s:TextArea> . Эти строки создают компонент TextInput, который позволяет пользователю вводить значение имени пользователя:

       <s:HGroup width="400"> 
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup>

   Атрибут enter определяет действия, которые выполняются при нажатии пользователем клавиши Enter в поле userNameTxt . В этом примере код передает текст, введенный в поле, в метод Greeter.sayHello() . Приветствие в поле mainTxt изменяется соответственно.

   Файл HelloWorld.mxml имеет следующий вид:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
    
       <s:HGroup width="400">     
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup> 
        
   </s:Application>

4. Сохраните отредактированный файл HelloWorld.mxml. Выберите «Выполнить» > «Выполнить HelloWorld» для выполнения приложения.

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