Глубокое погружение в Flash Builder 4

Обновления Flex Framework

Выпуск Flash Builder 4 является частью значительного обновления для всей платформы разработки Flex.   Flex 4 SDK — это, по сути, переписывание архитектуры платформы и компонентов пользовательского интерфейса.   Обновленный SDK включает в себя как новые компоненты Flex 4, так и устаревшие компоненты Flex 3.   Приложения могут использовать компоненты из обоих компонентов: компоненты Flex 4 доступны через пространство имен s, а компоненты Flex 3 доступны через пространство имен mx.    В листинге 1 приведен пример тега приложения, использующего оба пространства имен.   Вы также можете услышать компоненты Flex 4, называемые   «Spark», так как это название новой архитектуры компонентов, где архитектура компонентов Flex 3 известна как «Halo».  Таким образом, использование пространства имен ‘s’ для использования новых компонентов.

<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/mx">

 Листинг 1 — Пример пространства имен

В большинстве случаев Flash Builder указывает, какие компоненты использовать, когда.   Позже, в примере с практическими рекомендациями, компоненты из обоих пространств имен будут использоваться без каких-либо усилий со стороны разработчика.

Adobe Flash Catalyst

Одним из основных побудительных мотивов для пересмотра инфраструктуры Flex было стремление поддерживать лучшую интеграцию с инструментами проектирования Adobe и улучшить рабочий процесс разработчика-дизайнера при разработке приложений Flex.   Основное внимание в интеграции инструментов уделяется новому инструменту Adobe для дизайнеров, который называется Flash Catalyst, который позволяет дизайнерам создавать пользовательские интерфейсы и ресурсы Flex без написания кода.

Ключом к потенциальному успеху Flash Catalyst и Flex 4 является то, что он признает, что разработчики приложений и дизайнеры работают по-разному.   Таким образом, это позволяет каждому сосредоточиться на том, что у него хорошо получается, и работать так, как он привык, поскольку они могут передавать визуальные ресурсы между Flash Catalyst и Flash Builder, сохраняя каждый в среде, в которой им удобно.

Flex Unit 4

В теме большей интеграции инструментов Flash Builder теперь имеет встроенную поддержку для модульного тестирования с включением Flex Unit 4.   Для тех, кто уже знаком с разработкой Flex, вы узнаете Flex Unit 4 в качестве следующей версии популярной среды тестирования Fluint. , разработанный Digital Primates для обеспечения лучшей поддержки общих потребностей Flex, таких как тестирование асинхронных операций. 

Благодаря новой поддержке Flex Unit 4 теперь вы можете создавать тестовые наборы и кейсы из меню «Файл», а затем запускать их из Flash Builder.   Таким образом, упрощая процесс добавления модульных тестов в проект и приближая Flash Builder к ожиданиям корпоративного разработчика. 

Отладчик / Профилировщик

В отладчике и профилировщике были сделаны некоторые незначительные, но полезные улучшения.   Отладчик теперь включает в себя условные контрольные точки, контрольные точки, run-to-line и оценщик выражений, в то время как Profiler может похвастаться улучшенными отчетами о «ссылках на объекты», чтобы сделать информацию более полезной при исследовании проблем производительности или памяти.

Сетевой монитор

Монитор сети — еще одна замечательная новая функция в среде IDE, как показано в листинге 2.   Он позволяет просматривать HTTP-трафик непосредственно в среде IDE.   Ранее разработчик должен был использовать внешний инструмент, такой как Firebug, для просмотра сетевого трафика между своим приложением Flex и сервисами, которые он использует. 

Производительность компилятора

Одно из улучшений, которое вы не увидите в меню, но быстро заметите, если вы уже являетесь разработчиком Flex, — это улучшения компилятора.   Adobe не опубликовала окончательную оценку того, насколько лучше переработанный компилятор, чем предыдущая версия, но они опубликовали заметки Питера Донована о ранних этапах работы компилятора.   Пожалуйста, ознакомьтесь с его заметками для более подробного ознакомления с изменениями и некоторыми ранними оценками работы.

Рефакторинг / Генерация кода

В дополнение к обновлениям заголовков было добавлено несколько новых функций, упрощающих работу с кодом ActionScript, включая генерацию кода для следующего:

• Добытчики и сеттеры
• 
  Обработчики событий
• Сервисные Звонки

А для рефакторинга была добавлена ​​поддержка перемещения, чтобы легко перемещать существующий код. 

Разработка, ориентированная на данные

Одним из основных направлений усилий по разработке Flex 4 было предоставление разработчикам более совершенных инструментов для работы с данными и сервисами, поскольку это является сердцем большинства приложений, создаваемых с помощью Adobe Flex.   Внимание к функциям, ориентированным на данные, привело к ряду новых улучшений:

• 
  Модели данных / сервисов : представление доступных данных и сервисов на стороне клиента.
• Привязка данных : упрощенные рабочие процессы для привязки данных к компонентам.   Например, теперь вы можете перетащить служебную операцию, такую ​​как getAllEmployees, непосредственно в DataGrid и позволить Flash Builder выполнять всю работу. 
• Управление данными на стороне клиента. Позволяет выполнять операции на стороне клиента, такие как выборка по требованию, эффективная разбиение на страницы и прокрутка больших наборов данных.
• 
  Генерация форм : генерирует базовые формы ввода для определенных сервисов.

Новые ориентированные на данные функции работают независимо от того, какие серверные технологии вы используете (Java / BlazeDS, ColdFusion, PHP, REST, SOAP и т. Д.).   Большая часть работы выполняется, позволяя Flash Builder анализировать существующие службы и создавать на клиенте модели и оболочки для доступа к ним.   Теперь, когда вы хорошо разбираетесь в функциях, ориентированных на данные, пришло время приступить к работе, чтобы вы могли увидеть некоторые из новых функций, ориентированных на данные, в действии.

How-To: Создание ориентированного на данные приложения Flex

Теперь вы должны почувствовать последние усовершенствования Flash Builder.   Итак, давайте запачкаем руки, чтобы лучше понять новые ориентированные на данные функции IDE.   В нашем примере мы собираемся использовать Flash Builder для создания приложения Flex, которое обращается к данным в MySQL с помощью PHP.   Мы, однако, собираемся позволить инструменту выполнять большую часть работы за нас, включая генерацию большей части нашего PHP-кода на основе схемы базы данных. 

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

На рисунке 2 показана схема базы данных, которую пользователи смогут просматривать с помощью нашего пользовательского интерфейса.

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

Предварительная настройка:  прежде чем вы сможете пройти все этапы учебника, вам необходимо загрузить Flash Builder 4 . Вам также понадобится PHP-сервер и база данных MySQL.   Для OSX я использую MAMP для локального сервера разработки MySQL и PHP ( http://www.mamp.info ).   Пожалуйста, используйте предпочитаемые настройки разработки для этих инструментов на стороне сервера.   С их настройкой вам просто нужно настроить базу данных для проекта, запустив скрипт базы данных на рисунке 3.

CREATE TABLE IF NOT EXISTS `teams` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

CREATE TABLE IF NOT EXISTS `players` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) NOT NULL,
  `last_name` varchar(255) NOT NULL,
  `jersey_number` int(11) NOT NULL,
  `team_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `team_id` (`team_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `teams` VALUES(1, 'Broncos');
INSERT INTO `teams` VALUES(2, 'Avs');
INSERT INTO `teams` VALUES(3, 'Nuggets');

INSERT INTO `players` VALUES(1, 'John', 'Elway', 7, 1);
INSERT INTO `players` VALUES(2, 'Shannon', 'Sharpe', 84, 1);
INSERT INTO `players` VALUES(3, 'Steve', 'Atwater', 27, 1);
INSERT INTO `players` VALUES(4, 'Patrick', 'Roy', 33, 2);
INSERT INTO `players` VALUES(5, 'Joe', 'Sakic', 19, 2);
INSERT INTO `players` VALUES(6, 'Peter', 'Forsberg', 21, 2);
INSERT INTO `players` VALUES(7, 'Alex', 'English', 2, 3);
INSERT INTO `players` VALUES(8, 'Michael', 'Adams',  14, 3);
INSERT INTO `players` VALUES(9, 'Carmelo', 'Anthony', 15, 3);

Рисунок 3 — Сценарий установки MySQL

Настройка проекта Flash Builder

Работая с локальными / разрабатываемыми серверами PHP и MySQL, вы готовы открыть Flash Builder и начать работу.

Сначала вы создадите новый проект Flex.   Это можно сделать, перейдя в «Файл> Создать> Проект Flex» в навигации Flash Builder.   Это вернет мастер нового проекта.   На первом экране вы дадите проекту имя «flashbuilder» и выберите «Тип сервера приложений» PHP, как показано на рисунке 4.   После того, как вы завершили детали, нажмите «Далее», чтобы продолжить.

После нажатия «Далее» Flash Builder вернет экран для настройки сервера PHP (см. Рис. 5).   Вам потребуется ввести корневой веб-адрес и корневой URL-адрес для конфигурации локального сервера.   Затем нажмите «Готово», чтобы создать проект. 

Компоненты интерфейса макета

Теперь вы готовы расположить компоненты для пользовательского интерфейса.    Пользовательский интерфейс будет состоять из трех компонентов Flex:

• Поле со списком: в раскрывающемся списке отображаются названия команд, что позволяет пользователю выбрать, какую команду они хотели бы просмотреть.
• 
  Панель: в ней будет содержаться компонент DataGrid, что позволит нам отображать заголовок «Игроки».
• 
  DataGrid: будет отображен список игроков, включая их имя, фамилию и номер майки.
  

Чтобы приступить к разметке пользовательского интерфейса, вам нужно убедиться, что вы находитесь в режиме конструктора для исходного файла приложения flashbuilder.mxml.   Это класс приложения по умолчанию, который Flash Builder создал для вас при создании проекта.   Вам просто нужно перетащить три выделенных компонента из представления компонентов, показанного на рисунке 6, на холст дизайна.   В компоновке по умолчанию представление компонентов будет в левом нижнем углу. 

На рисунке 7 показано приложение после размещения компонентов в режиме конструктора Flash Builder. Я отредактировал заголовок Panel как «Players» и добавил компонент DataGrid внутрь Panel. 

Подключение к данным

Теперь, когда у вас есть компоненты пользовательского интерфейса, выложенные во Flash Builder, настало время для забавной части!

Теперь мы можем интегрировать приложение с данными команд и игроков в базе данных MySQL.   Во-первых, вам нужно найти панель «Данные / Сервисы», как показано на рисунке 8.   Здесь мы настроим наши сервисы для приложения.   В макете Flash Builder по умолчанию панель будет расположена в нижней центральной панели. 

Чтобы добавить сервисы в наш проект, нажмите на ссылку «Подключиться к данным / сервису…» на панели.   Откроется мастер для настройки сервиса.   На рисунке 9 показан начальный экран мастера, выберите опцию PHP и нажмите «Далее».

После выбора параметра PHP Flash Builder отображает шаг для выбора «Класс PHP».   Вместо того, чтобы предоставлять существующий класс, мы будем использовать опцию генерации, скрывающуюся под именем класса.   Выберите ссылку «нажмите здесь, чтобы создать образец» в мастере, чтобы открыть эту опцию.

После того, как вы выбрали опцию генерации, откроется диалоговое окно для подключения к базе данных MySQL и генерации нового класса PHP.   Пожалуйста, введите свои учетные данные базы данных и отправьте кнопку «Подключиться к базе данных».   Как только вы успешно подключитесь, выпадающий список «Таблица» будет заполнен нашими таблицами («команды» и «игроки»).   Прямо сейчас мы хотим получить доступ к списку команд в нашем раскрывающемся списке, поэтому выберите таблицу «команды» и нажмите «ОК».

После завершения работы с мастером создания MySQL Flash Builder вернет вас к мастеру по умолчанию для подключения к классу PHP, где все настроено для вновь созданного класса PHP, как показано на рисунке 12.   Нажмите «Готово» для создания службы на стороне клиента. фантики и продолжим. 

Теперь, когда вы успешно завершили добавление службы Teams в свой проект, вы должны увидеть новый сервис и операции на панели Data / Service, как показано на рисунке 13.  

Now that the Teams service is setup in the Flex project, we can add real data to our application.  This part is pretty exciting, and is done the same way regardless of the type of service or how you created it.  To get the list of teams to be displayed in the Combo Box at runtime, you simply drag the “getAllTeams()” operation onto the Combo Box in the design view and the dialog in Figure 14 will be displayed.  All you need to do is configure the “Label Field” to use the “name” property and click “Ok.” Now, run the application and you will see the list of teams in the drop-down – Amazing!

Let’s take a minute to review what we have done.  We have used Flash Builder to create our application, which integrated Flex components with data in the MySQL database.  We have allowed Flash Builder to do all the work and have not had to write any code to this point. 

Next, we want to access player data.  So, you will need to repeat the steps we followed to create a Teams service, only this time use the players table to create the Players service.  On the generation dialog, seen in Figure 11, you will need to pay attention to the location of the PHP class, as we will be modifying it to allow us to lookup players by the selected team.

Once you have created the Players service (just like the Teams service), open the PlayersService.php source file with a text editor and add the function from Figure 15.  This function will lookup the players for a given team when provided the team id. 

public function getPlayersByTeam($teamID) {

                $stmt = mysqli_prepare($this->connection, "SELECT * FROM $this->tablename where team_id=?");
                $this->throwExceptionOnError();

                mysqli_stmt_bind_param($stmt, 'i', $teamID);
                $this->throwExceptionOnError();

                mysqli_stmt_execute($stmt);
                $this->throwExceptionOnError();

                $rows = array();

                mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);

            while (mysqli_stmt_fetch($stmt)) {
              $rows[] = $row;
              $row = new stdClass();
              mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);
            }

             mysqli_stmt_free_result($stmt);
            mysqli_close($this->connection);

            return $rows;
        }

Figure 15 PHP Function for looking up players by team

Now, back in Flash Builder, you should see the new operation for the PlayerService in the “Data/Services” panel.  If you do not, you probably just need to do a refresh by right-clicking in the panel and selecting the “Refresh” option.  Once you see the operation, you might notice that it has a return type of “Object,” while the other operations have concrete return types.  So, next we will tell Flash Builder the return type by right-clicking on the operation and selecting the “Configure Return Type” option.  Since Flash Builder already knows about Players from our table generation, we will use the “Use an existing data type” option and select “Players[]”, as seen in Figure 16. 

We now have the service configured and need to hook up our players lookup to happen when the user selects a new row in the teams ComboBox.  Let’s go back to the Flash Builder design view and click on the ComboBox, which should bring up the configuration in the Properties panel, which is along the right side in the default layout.  We are going to select the “Generate Service Call” option for the “On change” event in the panel, as seen in Figure 17.

As you can see in Figure 18, Flash Builder will return a simple dialog to select which service call should be used.  We want to use the “getPlayersByTeam” operation on our PlayersService, and click “Ok” to continue.

After finishing with the Generate Service Call dialog, Flash Builder will take you directly into the event handler code.   We need to update the service call to pass the team id for the selected item, see Figure 19 for the proper code.  This will give us the right list of players whenever the teams drop down is changed by the user. 

protected function comboBox_changeHandler( 
event:IndexChangeEvent ):void
{
	getPlayersByTeamResult.token = 
playersService.getPlayersByTeam(
(event.currentTarget.selectedItem as Teams).id);					
}

Figure 19 Players Service Call Event Handler

Now that we have our event handler setup, our application will load the players for a given team whenever the drop down changes.  If you run the application now, you won’t see any changes happen in the user interface, as we have not told the list of players to be displayed anywhere.  So, next we want to click on the DataGrid component, and then find the properties panel to do the data binding.  We will do this by selecting the “Bind to Data” drop down on the “Data provider” field. 

After selecting the “Bind to Data” option, the dialog in Figure 21 will be returned.  We want to use the “Existing call result” option, as we have already setup the service call to  happen whenever the team drop down changes.  We will select the “getPlayerByTeamResult,” which was created for us by Flash Builder to hold the results of our service call.

That’s it!  We are ready to run the application again.  When you do, your running application should look simliar to Figure 22, with the list of players changing anytime you select a different team. 

On the server side code generation front, it may not be realistic to generate service side code (with no security) for a production application, but the PHP generation can still serve a purpose.  It can offer a nice way to jump start your server-side coding process, or help user interface developers remove the dependency of those working on creating the production services, as they can use this option to begin work without waiting for the final services. 

Regardless of the services you are accessing, or how they are created, the new client side data-centric features are a powerful new development option for Flex developers, as it is now quick and easy to add services to a Flex project and bind them to user interface components.  While there is not time to do a hands on review of all of the new data-centric features here, hopefully what we covered gives you a sense of the power that has been added in the latest release of Flash Builder. 

Conclusion

In this article, we reviewed the latest and greatest features of Flash Builder, and walked through a hands on example of using the tool’s new data-centric features to create a Flex application.  From what we have covered, it is clear that Flash Builder 4 is a worthwhile tool for creating Flex applications, with quite a few interesting new features.

Author Bio

Jon Rose is an enterprise software consultant and Flex Practice Director at Gorilla Logic, Inc. (www.gorillalogic.com) located in Boulder, Colorado. He is an editor and contributor to InfoQ.com, an enterprise software community. He is the co-host of DrunkOnSoftware.com, a videocast for those who like booze and bits. He has worked with clients large and small in both the private sector and government. His love of solving problems drives him to build quality software. You can read his blog at: http://gorillajawn.com.