Но перед тем, как попробовать сделать что-нибудь с помощью Flex, разберемся, какие возможности появились в новой версии.
- Теперь с помощью Flex можно разрабатывать AIR-приложения, которые запускаются локально и без запуска веб-броузера
- Расширены возможности изменения скинов и стилей Flex, теперь они могут редактироваться с помощью встроенного в Flex Builder редактора
- Появились новые компоненты, в том числе для работы с данными.
- Средства для разработки теперь включают в себя профилировщики памяти и производительности
- Теперь не нужно создавать несколько версий приложения для нескольких языков, поскольку локализация производится на лету
- Улучшилась производительность, скорость работы приложений, понизились затраты памяти
Теперь наконец-то приступим к разработке чего-нибудь с помощью Flex. Для работы нам понадобится Flex SDK или Flex Builder. В принципе, можно настроить для работы с SDK любую другую среду разработки. Для Eclipse также существует плагин для разработки в Flex.
Наше приложение будет достаточно простой оболочкой для Twitter. Оно будет получать потоки сообщений от друзей с помощью RSS.
Наш пример будет основан на Flex Builder от Adobe, поэтому не все в тексте следует воспринимать буквально.
Создаем новый Flex-проект
Для начала, как обычно, создадим новый Flex Project (в меню File->New, разумеется). Укажите имя и расположение проекта, а другие настройки пока что не будем трогать. Жмем Finish.
Если вы посмотрите на структуру папок, то увидите вот такие:
- bin — здесь хранится скомпилированная версия вашего приложения.
- html-template — здесь лежит HTML-шаблон, в который будет помещено ваше приложение
- libs — здесь будут библиотеки, созданные в процессе
- src — здесь, как видим, находится исходный код приложения. В этой папке мы и будем работать.
Объявление приложения
В папке src вы найдете файл с именем вашего проекта и расширением MXML. Если переключиться в режим Source, то можно увидеть следующий код:
<? xml version=«1.0» encoding=«utf-8»?>
<mx: Application xmlns: mx=«www.adobe.com/2006/mxml»
layout=«absolute»>
</mx: Application>
Начнем создавать интерфейс нашего приложения. С панели компонентов перенесите в приложение Label и List.
Label будет служить обычным заголовком, выберите его и в панели Property Inspector впишите понравившиеся значения.
List будет заполняться постами из Twitter при загрузке приложения. Сделайте его побольше, и настройте его так, чтобы он стоял не на самом краю и растягивался вместе с приложением. Еще List`у надо назначить имя, пусть это будет, к примеру, «tweets». Это можно сделать, вписав id=«tweets» в тег компонента.
Назначение имени компоненту необходимо для того, чтобы в дальнейшем обращаться к нему из ActionScript-кода. Имя компонента должно быть уникальным.
Теперь ваш MXML-код должен выглядеть примерно так:
<? xml version=«1.0» encoding=«utf-8»?>
<mx: Application xmlns: mx=«www.adobe.com/2006/mxml»
layout=«absolute»>
<mx: Label x=«10» y=«10» text=«My Super Twitter Application!»
fontFamily=«Arial» fontWeight=«bold»
fontSize=«15»/>
<mx: List left=«10» right=«10» top=«41» bottom=«10» id=«tweets»>
</mx: List>
</mx: Application>
Подключение данных
Данные из Twitter удобно получать с помощью RSS-потока. Есть еще несколько способов общения с API Twitter, но сейчас пока выберем этот.
Чтобы добраться до данных из Flex, надо будет воспользоваться компонентом HTTPService. Он позволяет посылать HTTP-запросы и получать данные. Для его подключения добавим вот такой код:
<mx: HTTPService id=«twitterFeed»
url=«https://twitter.com/statuses/friends_timeline/25883.rss» />
Как видно из кода, этому компоненту мы также назначаем id. В параметре URL мы сообщаем ему, по какому адресу надо будет брать данные. Впрочем, перед тем, как вы сможете увидеть полученные данные в вашем приложении, необходимо будет сделать еще две вещи:
- Попросить HTTPService получить данные из RSS-потока
- Поместить полученные данные в List
Логично предположить, что данные вы хотите получить в момент загрузки приложения. Для этого надо сделать кое-какие изменения в объявлении приложения:
<mx: Application xmlns: mx=«www.adobe.com/2006/mxml»
layout=«absolute»
creationComplete=«twitterFeed.send()» >
Как видите, событию приложения creationComplete мы назначили выполнение функции send() компонента twitterFeed. Теперь нам надо обработать полученные данные и поместить их в List.
До появления ActionScript 3.0 обрабатывать XML было сущей мукой. Теперь эта задача решается с помощью мощного средства под названием E4X.
E4X позволяет обращаться к XML-документу более простым путем. Например, имея вот такой документ:
<? xml version=«1.0» encoding=«UTF-8»?>
<parent>
<child>
<property>value</property>
</child>
<child>
<property>value</property>
</child>
</parent>
… мы можем обратиться к свойству property вот так:
parent.child[0].property
Теперь, чтобы полученные данные были отображены в списке, нам понадобится сообщить списку об этом. Список как компонент может получать информацию из источника данных, который по сути является набором объектов. Чтобы указать источник данных для списка, нам понадобится вот такой код:
<mx: List left=«10» right=«10» top=«41» bottom=«10» id=«tweets»
dataProvider=«{twitterFeed.lastResult.rss.channel.item}» >
</mx: List>
Теперь при запуске приложения вы увидите, что список заполнился несколькими элементами, выглядящими как [object Object]. Это данные из нашего RSS-потока. Они представляют из себя сложные объекты, а компонент списка не знает, как их отобразить.
У каждого элемента в RSS-потоке есть несколько подэлементов — заголовок, описание, дата и ссылка. Это означает, что такой элемент не может быть отображен в списке без нашего вмешательства.
Одним из вариантов решения этой проблемы мог бы стать компонент DayaGrid, который отобразил бы эти элементы в отдельных колонках, но это не наш способ.
Мы подключим к списку обработчик отображения элементов. Он позволит указать, как отображать элементы в списке. Плюсом такого подхода является то, что, во-первых, обработчик будет сохранен как отдельный MXML-элемент, а во-вторых, что у нас будет намного больше возможностей управлять способом отображения элементов.
С помощью меню File->New создадим новый MXML-компонент. Назовем его Tweet, остальные настройки изменять не будем.
Перетащим в форму несколько текстовых полей и укажем, какие данные им предстоит отображать. Для этого в свойстве text первого поля укажем {data.pubDate} (фигурные скобки означают ссылку на данные), а в другом — {data.title}.
Теперь нам надо подключить обработчик к списку. Для этого поправим компонент List в главной форме:
<mx: List left=«10» right=«10» top=«41» bottom=«10» id=«tweets»
dataProvider=«{twitterFeed.lastResult.rss.channel.item}»
itemRenderer=«Tweet»>
</mx: List>
Теперь при запуске приложения вы увидите, что записи из RSS-ленты успешно загрузились и были отображены в вашем приложении. Элементарно, не правда ли?
Спасибо fzn7 за пример и исходники.
комментарии (27)