Первый эпизод нашего введения в разработку на основе данных с помощью Adobe Flash Builder позволил нам подключить к нашей базе данных приложение Flex, созданное Catalyst, и использовать функции генерации кода Flash Builder для создания службы PHP для серверной части нашего приложения. К тому времени, когда мы закончили, у нас было работающее приложение Flex, которое совершило полный обход нашей базы данных через службу PHP и заполнило список контактов элементами.
В заключительной части сегодняшнего выпуска мы узнаем о некоторых более продвинутых функциях генерации кода, которые нам предоставляет Flash Builder, и добавим некоторые возможности редактирования данных в наше приложение.
Если вы следили за этой серией с момента ее первого выпуска , вы должны быть в курсе и готовы к работе; для тех, кто присоединился к нам поздно, я предполагаю, что вы немного знакомы с Flex и MXML. На самом деле вам не нужно знать PHP, так как Flash Builder делает всю тяжелую работу за нас, хотя вам нужно будет установить PHP и MySQL.
Не забудьте проверить свои знания в викторине, спонсируемой Adobe, в конце статьи .
В первых двух статьях этой серии мы использовали Adobe Flash Catalyst для преобразования некоторых базовых иллюстраций в рабочий прототип приложения контактов, а затем импортировали проект Flash Catalyst в Flash Builder. Используя инструменты разработки, основанные на данных Flash Builder, мы автоматически создали службу PHP, которая содержала все вызовы, необходимые для управления контактными данными, и автоматически подключили их к нашему приложению.
На этот раз вы увидите, сколько работы было вложено в Flash Builder, чтобы позволить нам быстро создавать приложения. Но прежде чем мы доберемся до этого, нам нужно добавить еще пару функций, чтобы сделать наше приложение пригодным для использования.
Наша начальная позиция является конечным результатом инструкций предыдущей статьи. Чтобы упростить жизнь, в загружаемом архиве этой части есть проект Flash Builder с именем part_2_start.fxp .
Когда вы импортируете файл .fxp , вы увидите диалоговое окно с просьбой обновить переменные пути. Это потому, что мы используем установку PHP в проекте, и переменные должны быть установлены следующим образом:
- ПАПКИ ВЫВОДА
-
Это должен быть ваш webroot или каталог, из которого вы обслуживаете свой проект. Например,
C:Inetpubwwwrootcontacts. - PHP_FLEX_SERVER_ROOT
-
Это должен быть корень вашего веб-сервера. Например,
C:Inetpubwwwroot. - PHP_WEB_URI
-
Это должен быть корень URL, используемый для доступа к вашему проекту при компиляции. Например,
http://localhost/contacts.
Это предполагает, что у вас есть локальный веб-сервер и установка PHP, конечно.
У нас уже есть рабочий список контактов в левой части нашего приложения. Теперь нам нужно добавить одно представление контактов, чтобы пользователь мог видеть детали любого контакта в списке, когда он или она нажимает на имя контакта.
Когда мы работали во Flash Catalyst, мы определили состояние contactView . Код в Main.mxml работает, но он немного упрощает то, что мы хотим сделать, поэтому давайте немного его изменим.
Начнем с вырезания всех элементов <fx:DesignLayer> и <s:RichText> , которые используются для отображения имени контакта в правой части нашего экрана: мы собираемся создать новый компонент для этой цели.
Щелкните правой кнопкой мыши на /src/components в панели Package Explorer в Flash Builder и создайте новый компонент MXML. Назовите его ContactItem и заполните детали в диалоговом окне, как показано на рисунке 1, «Компонент ContactItem» .
Flash Builder создаст для нас структуру компонентов. Далее мы хотим вставить код, чтобы отобразить детали элемента контакта. Сначала вставьте следующий код в элемент Group , который добавляет открытую переменную, чтобы компоненту можно было передать объект значения Contact :
<fx: Script> <! [CDATA [import valueObjects.Contact; [Bindable] публичный var contactData: Контакт; ]]> </ FX: Script>
Не забывайте метаданные [Bindable] — без этого компонент не будет воспринимать изменения наших выборов во время выполнения. Как вы помните, во второй статье серии Flash Builder сгенерировал для нас класс valueObjects/Contact.as , и мы можем использовать его в качестве ожидаемого типа.
Теперь давайте добавим слегка очищенную версию сгенерированного кода Catalyst, из которой мы просто удалили элементы, относящиеся к Catalyst, и удалили атрибут includeIn . Код должен выглядеть так:
ollapse = "коллапс"> <s: пролет> Лондон </ с: SPAN> </ с: р> </ с: содержание> </ с: RichText>
Наконец, мы хотим убедиться, что компонент ContactItem собирает фактические данные, которые ему передаются, поэтому мы заменим жестко запрограммированные значения ссылками на наш объект value :
<s: RichText color = "0xFFFFFF" fontSize = "18" kerning = "on" lineHeight = "120%" whiteSpaceCollapse = "preserve"> <s: content> <s: p whiteSpaceCollapse = "collapse"> <s: span > {contactData.first_name} </ s: span> </ s: p> </ s: content> </ s: RichText> <s: RichText color = "0xFFFFFF" kerning = "on" lineHeight = "120%" whiteSpaceCollapse = "preserve"> <s: content> <s: p whiteSpaceCollapse = "collapse"> <s: span> {contactData.phone} </ s: span> </ s: p> </ s: content> < / s: RichText> <s: RichText color = "0xFFFFFF" kerning = "on" lineHeight = "120%" whiteSpaceCollapse = "preserve"> <s: content> <s: p whiteSpaceCollapse = "collapse"> <s: span > {contactData.email} </ s: span> </ s: p> </ s: content> </ s: RichText> <s: RichText color = "0xFFFFFF" kerning = "on" lineHeight = "120%" whiteSpaceCollapse = "preserve"> <s: content> <s: p whiteSpaceCollapse = "collapse"> <s: span> {contactData.address1} </ s: span> </ s: p> </ s: content> < / s: RichText> <s: RichText color = "0xFFFFFF" kerning = "on" lineHeight = "120%" whiteSpaceCollapse = "preserve"> <s: content> <s: p whiteSpaceCollapse = "collapse"> <s: span > {контакт Data.city} </ s: span> </ s: p> </ s: content> </ s: RichText>
Теперь вернитесь к Main.mxml . Сначала убедитесь, что для атрибута currentState тега currentState установлено значение listView :
<s: Приложение xmlns: fc = "http://ns.adobe.com/flashcatalyst/2009" xmlns: s = "library: //ns.adobe.com/flex/spark" xmlns: fx = "http: / /ns.adobe.com/mxml/2009 "xmlns: flm =" http://ns.adobe.com/flame/2008 "xmlns: lib =" assets.graphics.mockup. * "xmlns: d =" http: //ns.adobe.com/fxg/2008/dt "xmlns: ai =" http://ns.adobe.com/ai/2009 "xmlns: ATE =" http://ns.adobe.com/ate/ 2009 "xmlns: contactservice1 =" services.contactservice1. * "Height =" 600 "width =" 800 "backgroundColor =" # FFFFFF "preloaderChromeColor =" # FFFFFF "currentState =" listView ">
Затем перейдите в раздел кода, из которого мы удалили элементы, которые мы поместили в ContactItem.mxml , и добавьте вызов нашему новому компоненту, например, так:
<component: ContactItem id = "contactPane" contactData = "{contactList.selectedItem}" includeIn = "contactView" x = "450" y = "125" />
Если вы наберете это, используя понимание кода в Flash Builder (например, введите левую угловую скобку и дождитесь небольшого всплывающего окна, вы можете перейти к своим components:ContactItem и при его выборе IDE автоматически добавит атрибут xmlns в Тег <Application> . Если нет, вам необходимо убедиться, что в тег <Application> добавлено следующее:
XMLNS: компоненты = "компонента *."
Компоненту списка автоматически присваивался id когда мы использовали инструменты генерации кода Flash Builder, чтобы подключить его к нашему вызову службы PHP, но это очень неописательный list1 . Измените id на contactList чтобы сделать ваш код немного понятнее.
Разумеется, вы можете задать имена и свойства id для ваших компонентов в Flash Catalyst с помощью панели « Свойства» в среде Catalyst IDE перед переносом проекта в Flash Builder.
Теперь мы хотим, чтобы панель контактов отображалась справа, когда пользователь выбирает элемент из списка контактов. Добавьте эту функцию в Main.mxml скрипта Main.mxml :
защищенная функция list_changeHandler (): void {currentState = 'contactView';}
А затем добавьте обработчик изменений в список контактов, например:
<s: List id = "contactList" skinClass = "components.TobyTremayneDataList" x = "157" y = "163" change = "list_changeHandler ()" creationComplete = "list_creationCompleteHandler (event)" labelField = "address1" itemRenderer = "component .RepeatedItem1 "> <s: AsyncListView list =" {getAllContactResult.lastResult} "/> </ s: List>
Если вы следили за последней статьей и внесли свои коррективы, Flash Catalyst создавал переходы, используя параллели, чтобы одновременно исчезать каждый элемент (имя, фамилия и т. Д.). Мы заменили эти отдельные элементы одним компонентом, поэтому нам нужно изменить код перехода. Вместо этого измените его, чтобы иметь простое Fade для каждого перехода, ориентируясь на наш новый компонент ContactItem. Новый набор переходов должен выглядеть так:
Flash Catalyst создал transition которые использовали parallel s для одновременного исчезновения каждого элемента (имя, фамилия и т. Д.). Однако мы заменили эти отдельные элементы одним компонентом, поэтому нам нужно изменить код перехода. Вместо этого измените его, чтобы иметь простое Fade для каждого transition , который будет нацелен на наш новый компонент ContactItem :
<s: transitions> <s: Transition fromState = "contactView" toState = "listView" autoReverse = "true"> <s: Fade duration = "200" target = "{contactPane}" /> </ s: Transition> < s: Transition fromState = "listView" toState = "contactView" autoReverse = "true"> <s: длительность исчезновения = "200" target = "{contactPane}" /> </ s: Transition> </ s: transitions>
Теперь, если вы сохраните и скомпилируете свой проект Flash Builder, вы увидите, что при нажатии в списке контактов данные выбранного контакта отображаются в правой части экрана.