Flex 4 представляет множество новых функций, и сегодня мы рассмотрим некоторые из последних архитектурных изменений, которые значительно упрощают разработку и создание компонентов. Для начала вам необходимо загрузить пробную версию Flash Builder . Это также даст вам Flex 4 SDK. Flash Builder, пока еще в бета-версии, обладает рядом мощных функций для разработчиков и уже является шагом вперед по сравнению с Flex Builder.
Вам также понадобится Flash Player 10 , и для целей разработки это должна быть версия для отладки. Чтобы использовать Flickr API, вам понадобится ключ API , который можно затем импортировать в Flash Builder.
Эта статья предполагает некоторое знакомство с Flex и ActionScript в целом, но не нужно быть особенно продвинутым, чтобы извлечь из этого пользу. К концу вы сможете заставить Flex общаться с API Flickr, загружать и отображать изображения, а также выполнять некоторые базовые скины в Flex 4. Вы можете загрузить весь готовый код для этого проекта в виде архива проекта Flash Builder , который вы затем можно импортировать в Flash Builder.
И не забудьте пройти тест в конце, чтобы проверить свои учетные данные разработчика.
Дедушка всех сервисов обмена изображениями в Интернете — Flickr, и создание коллажей с использованием его открытого API стало настоящим обрядом. В этой статье мы рассмотрим всю глубину огромной библиотеки изображений Flickr, которая лицензируется по лицензии Creative Commons 2.0, что позволяет вам свободно использовать их при условии, что вы их указали. Это делает Flickr невероятным ресурсом для веб-разработчиков и дизайнеров, в частности, поэтому наш проект станет инструментом, который поможет найти и просмотреть эти изображения.
Мы начнем с библиотеки API ActionScript 3 Flickr , написанной инженерами Adobe. Он находится в свободном доступе, как и базовая библиотека AS3, от которой он зависит. Мы будем использовать оба в этом проекте, поэтому загрузите их, как только вы установите Flash Builder.
Откройте архив, содержащий базовую библиотеку AS3, и внутри каталога lib вы найдете as3corelib.swc . Скопируйте этот файл в каталог libs вашего проекта Flash Builder, а Flash Builder сделает все остальное.
Далее откройте архив для библиотеки Flickr. Внутри есть файл swc , но на момент нашей последней проверки он был скомпилирован для Flex 2, поэтому вместо этого мы добавим исходный код в наш проект. Откройте каталог src из архива и скопируйте каталог com который находится внутри. Перетащите его в каталог src вашего проекта Flash Builder, затем щелкните меню « в Flash Builder и выберите « . Это гарантирует, что новый код и библиотеки будут подобраны компилятором.
Наша первая задача — загрузить библиотеки API Flickr и подключиться к самому API. В своем основном файле MXML измените <s:Application> чтобы он выглядел следующим образом:
<s: Приложение 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 "xmlns: flickr =" com.adobe.webapis.flickr. * ">
Ниже добавьте блок script и введите следующие операторы:
импорт com.adobe.webapis.flickr.events.FlickrResultEvent; импорт com.adobe.webapis.flickr.FlickrService; импорт com.adobe.webapis.flickr.PagedPhotoList; частная статическая константа FLICKR_API_KEY: String = "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn // Ваш Flickr API keyprivate static const COMMONS_LICENSE_ID: Number = 2; приватное статическое const MAX_RETURNED_RECORDS: Number = 50; public var flickrService: FlickrService = new FlickrService (FLICKR_API_KEY);
Приведенный выше код содержит операторы импорта для классов API Flickr, которые нам понадобятся, несколько константных определений и создание нового объекта FlickrService который мы будем использовать для создания всех наших соединений API Flickr. Теперь мы готовы начать. Создайте следующую функцию и установите ее для вызова в событии creationComplete приложения:
приватная функция onComplete (): void {flickrService.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onSearchResult);}
<s: Приложение 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 "xmlns: flickr =" com.adobe.webapis.flickr. * " creationComplete =" onComplete () " >
Когда мы инициализировали переменную flickrService и flickrService экземпляр объекта FlickrService , мы сделали удаленный вызов самого Flickr, передав наш ключ API для создания аутентифицированной ссылки. Теперь мы можем использовать этот сервис для отправки запросов, но перед тем, как мы это сделаем, мы onComplete слушателя в функции onComplete для обработки результатов поиска.
Теперь, когда у нас это есть, нам нужен сам поиск. Чтобы позволить пользователю ввести поисковый запрос, мы добавим TextInput и кнопку поиска под нашим блоком сценария, например:
<s: HGroup width = "260" height = "27" textAlign = "center" x = "68" y = "89"> <s: Label text = "Search" color = "0xFFFFFF" /> <s: TextInput id = "tags" /> <s: Button name = "searchBtn" label = "Search" click = "searchBtnClick (event)" /> </ s: HGroup>
Обратите внимание на <s:HGroup> . В Flex 3 и предыдущих версиях мы использовали бы <mx:HBox> , но теперь мы можем вместо этого использовать групповые теги, которые имеют меньше накладных расходов, чем контейнеры HBox и VBox . Кнопка поиска также содержит вызов новой функции searchBtnClick , в которую мы поместим код поиска. Добавьте эту функцию в ваш блок скриптов:
приватная функция searchBtnClick (event: MouseEvent): void {flickrService.photos.search ("", this.tags.text, "any", "", null, null, null, null, COMMONS_LICENSE_ID, "owner_name", MAX_RETURNED_RECORDS); }
Для тех, кому интересно, странный макет этого фрагмента кода, в котором каждый параметр помещается в отдельной строке, просто для удобства чтения и редактирования. Макет фактически не влияет на работу кода.
Хорошо, здесь мы делаем первый реальный запрос к API Flickr. Используя метод photos.search , мы отправляем несколько значений, которые по сути говорят: «ищите изображения по лицензии Creative Commons 2.0, теги которых соответствуют нашему поисковому запросу». Параметр MAX_RETURNED_RECORDS используется для ограничения количества элементов, возвращаемых в одном обращении. Для получения более подробной информации об API и всех его методах, пожалуйста, ознакомьтесь с документацией по API .
Для этого нам понадобится функция получения. Ранее мы настраивали прослушиватель событий для вызова этой функции всякий раз, когда у нас есть результаты поискового запроса. Добавьте следующее в ваш код:
приватная функция onSearchResult (событие: FlickrResultEvent): void {if (event.success) {var resultsList: PagedPhotoList = event.data.photos; photos = new ArrayCollection (resultsList.photos); } else {Alert.show ("Ошибка поиска Flickr:" + event.data.error); }}
В FlickrResultEvent аккуратно встроено все, что нам нужно, включая удобное свойство success, указывающее на успешность, как вы можете видеть в первой строке функции. В нашем случае мы проверяем это свойство и просто показываем сообщение об ошибке, включая информацию об ошибке, отправленную с Flickr. Если транзакция прошла успешно, мы создаем объект PagedPhotoList из данных XML, которые мы получаем от Flickr, и используем его для создания ArrayCollection которой мы можем привязаться.
На этом этапе ваше приложение должно скомпилироваться и работать без ошибок. Если бы вы представили содержимое event.data.photos , вы бы увидели пакет XML, который выглядел примерно так (взят из документации по Flickr API на flickr.photos.search ):
<photos page = "2" pages = "89" perpage = "10" total = "881"> <photo id = "2636" owner = "47058503995 @ N01" secret = "a123456" server = "2" title = " test_04 "ispublic =" 1 "isfriend =" 0 "isfamily =" 0 "/> <photo id =" 2635 "owner =" 47058503995 @ N01 "secret =" b123456 "server =" 2 "title =" test_03 "ispublic = "0" isfriend = "1" isfamily = "1" /> <photo id = "2633" owner = "47058503995 @ N01" secret = "c123456" server = "2" title = "test_01" ispublic = "1" isfriend = "0" isfamily = "0" /> <photo id = "2610" owner = "12037949754 @ N01" secret = "d123456" server = "2" title = "00_tall" ispublic = "1" isfriend = "0" isfamily = "0" /> </ photos>
Мы также добавили дополнительный параметр в наш поиск; отправка "owner_name" сообщает API, чтобы отправить полное имя владельца фотографии, чтобы мы могли использовать его для указания авторства.
Теперь, когда у нас есть данные, возвращаемые из Flickr API, нам нужен способ их отображения. Что нас интересует, так это сами фотографии, что может быть лучше, чем вывод списка миниатюр? Во Flex 3 мы могли бы использовать TileList для этого, но этот класс был заменен очень удобным классом с именем List ; мы можем использовать List для воссоздания функциональности TileList , но с большим количеством опций и лучшей производительностью. Добавьте List к своему коду сейчас под кнопкой поиска:
<s: List id = "imageDisplay" dataProvider = "{photos}" width = "530" height = "400" x = "58" y = "124"> <s: layout> <s: TileLayout requiredColumnCount = "5 "requiredRowCount =" 8 "horizontalGap =" 2 "verticalGap =" 2 "/> </ s: layout> <s: itemRenderer> <fx: Component> <mx: Image source =" {'http://static.flickr .com / '+ data.server +' / '+ data.id +' _ '+ data.secret +' _t.jpg '} "height =" 100 "width =" 100 "/> </ fx: Component> </ s: itemRenderer> </ s: Список>
Мы достигаем старой функциональности TileList , определяя специальный класс макета TileLayout , и именно этому классу мы даем параметры макета, такие как горизонтальный промежуток, который будет сохраняться между каждым элементом в списке.
Мы используем встроенное средство визуализации элементов, которое просто вытягивает эскиз изображения и отображает его. Строка, которую вы видите собранной в атрибуте source элемента Image , является правильным URL для данного изображения в списке. Добавление _t.jpg означает, что мы _t.jpg на миниатюру из Flickr, а не на полное изображение.
Если вы скомпилируете и запустите свое приложение, введите поисковый запрос, например, « monkey , и нажмите кнопку поиска, вы увидите изображения, появляющиеся внутри вашего List . Транзакция может занять несколько секунд, но как только она будет завершена, мы увидим список изображений, полученных с Flickr, которые соответствуют нашим критериям: они используют тег monkey и имеют лицензию Creative Commons 2.0.