Создание мобильного RSS-ридера с помощью Flash Builder «Буррито» и упаковки для Android

1. После того, как Flash Builder проанализирует службу, выберите элемент в качестве узла. Вы должны увидеть, что это массив? проверяется, и имена служб и пакетов по умолчанию предоставляются, как показано на рисунке 2.
2. Нажмите Готово .
3. После того как Flash Builder создаст службу, откройте представление «Данные / службы» [Окно> Показать представление> Данные / службы] и найдите вновь созданную службу getData []. Щелкните его правой кнопкой мыши и выберите «Настроить тип возвращаемого значения» [см. Рис. 3].

1. В диалоговом окне «Настроить тип возвращаемых данных» убедитесь, что «Автоопределение» выбрано «Тип возвращаемых данных» и нажмите «Далее».
2. На следующем экране выберите «Введите полный URL-адрес, включая параметры, и получите его». Вставьте URL-адрес Slashdot в поле «URL-адрес для получения» [см. Рис. 4] и нажмите «Далее».

1. На следующем экране введите Item в качестве имени нового типа данных и выберите item в качестве корневого узла [см. Рисунок 5]. Примечание. Если вы используете другой канал RSS, вам необходимо выяснить, какое свойство является корневым узлом.

1. Нажмите Готово.
2. Вернувшись в представление Data / Services, снова щелкните правой кнопкой мыши getData [] и на этот раз нажмите Generate Service Call.
3. В режиме просмотра исходного кода добавьте компонент List со следующими свойствами: top = «0», left = «0», right = «0», bottom = «0».
4. Кроме того, вы можете добавить компонент Список в режиме конструктора. Затем выберите его и прокрутите до конца вкладки Свойства, пока не увидите элементы управления Ограничения. Установите их, как показано на рисунке 6.

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

1. Внутри элемента <list> установите значение labelField в «title». Затем добавьте

<s:AsynchListView list="{getDataResult.lastResult}" /> as shown below. 
 <s:List left="0" right="0" top="0" bottom="0" labelField="title">
    <s:AsyncListView list="{getDataResult.lastResult}" />
 </s:List>

Примечание. Свойство list экземпляра AsyncListView, в котором хранятся данные, отображаемые в списке, устанавливается равным данным, возвращаемым из вызова службы. Использование lastResult приведет к расширению списка до количества возвращаемых элементов.

1. Добавьте вызов getData [] для события viewActivate в корневом элементе.

1. В представлении «Дизайн» измените цвета Chrome [# 666666] и «Фон содержимого» [# 336666] в соответствии с домашней страницей Slashdot.
2. Проверьте свое приложение, запустив его! Щелкните правой кнопкой мыши проект в проводнике пакетов и выберите «Выполнить»> «Запуск от имени»> «Мобильное приложение». При первом запуске его спросят, хотите ли вы запустить его в эмуляторе или на удаленном устройстве. Используйте эмулятор сейчас.

На рисунке 7 обратите внимание на ссылку на сущность [& mdash;], которая появляется в третьем элементе списка. Чтобы избавиться от этого, вам нужно написать некоторый код для обработки ссылок на сущности, что объясняется в следующем разделе.

В этом разделе вы узнаете, как:

• Установите обработчик события для события CollectionChange и передайте событие в
• Используйте labelFunction для вызова специальной функции, которая принимает пользовательский тип данных [Item []] и возвращает строку.
• Установите переменную регулярного выражения
• Используйте метод String replace [] для замены ссылки на сущность другим символом

Этот раздел должен занять около 10 минут.

1. Если он еще не открыт, откройте файл RSSReaderHome.mxml.
2. В режиме просмотра исходного кода установите для идентификатора элемента управления List значение myList.
3. Поместите курсор в элемент <s: AsynchListView>. Добавьте обработчик событий для события collectionChange, который вызывает функцию с именем fixEntityReferences [] при изменении значений списка.

   <s:List id="myList" left="0" right="0" top="0" bottom="0"  
                  labelField="title">
      <s:AsyncListView list="{getDataResult.lastResult}"
         collectionChange="fixEntityReferences(event)" /> 
   </s:List>

1. Затем добавьте следующий код в тег <fx: Script> для реализации обработчика событий:

Функция обработчика событий принимает событие типа CollectionEvent. Добавляет функцию labelFunction в список. С именем replaceEntity [] эта функция принимает объект типа Item. [Item [] — это массив, возвращаемый службой getData [].]

Функция replaceEntity [] устанавливает переменную регулярного выражения [p1], которая обнаруживает ссылку на сущность & mdash ;. После создания строковой переменной thisString он вызывает метод replace [] для item.title, заменяя дефис [-] на ссылку на сущность & mdash ;. Наконец, он возвращает строку thisString, которая будет отражена как метка нового элемента.

1. Запустите программу, и вы увидите, что никаких ссылок на сущности & mdash; больше не существует [см. Рисунок 8].

Примечание . Техника, используемая в этом разделе для исправления проблемы со ссылкой на сущность, — это быстрый взлом, а не лучшая практика. Лучше всего обрабатывать это в объектах-значениях.

В этом разделе вы узнаете, как работать с представлениями и компонентом ViewNavigator, который управляет представлениями в вашем приложении, когда пользователь перемещается по нему. В частности, вы создадите новое представление, которое показывает детали для одного элемента RSS. Этот раздел должен занять около 20 минут.

1. Чтобы добавить новое представление, щелкните правой кнопкой мыши пакет Views в Package Explorer и выберите New> MXML Component. Введите DetailsView в качестве имени, оставьте другие настройки с их значениями по умолчанию и нажмите Finish.
2. Вернувшись в RSSReaderHome.mxml, поместите курсор в конец элемента <s: List> в представлении исходного кода и начните вводить изменения. Когда Content Assist выделит событие изменения, выберите его, а затем выберите «Создать обработчик изменений» [см. Рисунок 9]. Это настроит ваш обработчик событий.

Вновь созданная функция обработчика изменений будет выдвигать новое представление, которое показывает подробное представление определенного элемента, который пользователь щелкнул в списке. В мобильных проектах Flex представления могут быть переданы, а затем извлечены [см. Рисунок 10].

1. Обновите код обработчика событий изменения списка, как показано ниже.

Метод pushView [] принимает два параметра: представление, которое вы хотите передать, и объект данных для передачи в представление. В этом случае переменная RSSItem — это данные, которые будут переданы в представление DetailsView.

1. Запустите приложение. Если щелкнуть элемент RSS, отобразится новый [и в настоящее время пустой] подробный вид.

В этом разделе вы узнаете, как получить доступ к объекту данных, передаваемому, когда представление «Подробности» выдвигается в представлении «Домой», и отображать различные атрибуты элемента RSS.

Этот раздел должен занять около 20 минут.

1. Откройте файл DetailsView.mxml в представлении исходного кода.
2. Создайте блок <fx: Script> и добавьте переменные для заголовка, даты, создателя, ссылки и описания выбранного элемента RSS.

1. Переключитесь в режим конструктора и убедитесь, что цвета представления сведений совпадают с цветами исходного вида. Используйте # 336666 в качестве цвета фона содержимого и # 666666 в качестве цвета Chrome, чтобы соответствовать цветам Slashdot.org.
2. Вернувшись в представление исходного кода, настройте представление сведений, добавив следующий MXML в область содержимого представления [ниже тега </ fx: Declarations>].

В дополнение к нескольким элементам Label, отображающим сведения об элементе RSS, в этом представлении имеется кнопка, которая при нажатии загружает полный URL-адрес элемента RSS в браузере. Это делается с помощью click = «navigateToURL [new URLRequest [rlink]]».

1. Переключиться в режим конструктора. В портретном режиме компоненты хорошо вписываются в вид [см. Рисунок 11]. Перейдите в ландшафтный режим. Компоненты подстраиваются под новый макет.

Поскольку необработанные RSS-каналы часто имеют HTML-разметку и ссылки на сущности, приложению придется заменить некоторые символы в данных RSS-канала. Архитектурно, было бы лучше обрабатывать эти замены в пакете объектов значения. Однако для этого приложения это будет сделано в представлении, даже если это не лучшая практика.

1. Создайте новую функцию getDetails [] и добавьте следующий код.

Ключевое слово data — это переменная ссылка на данные, передаваемые в это представление.

Атрибуты title, dc_date, dc_creator, link и description объекта RSS Item используются для установки переменных. Вызовы для замены [] используют регулярные выражения для замены ссылок на сущности в заголовке и описании, а также для устранения разметки HTML в описании.

1. Добавьте viewActivate = «getDetails []» в корневой элемент <s: View>. Это вызовет getDetails [], когда представление активируется. Пока вы там, вставьте пробел между «Подробности» и «Вид» в атрибуте заголовка.
2. Запустите ваше приложение. Нажмите на элемент, чтобы увидеть подробное представление [см. Рисунок 12]. Нажмите кнопку, чтобы запустить историю Slashdot в браузере.

В этом разделе вы узнаете лучшие практики для мобильной разработки. Этот раздел должен занять около 10 минут.

Хотя вы, возможно, этого и не заметили, когда использовали приложение в эмуляторе, каждый раз, когда отображается домашний вид, в службу RSS поступает новый вызов. Это потребляет циклы ЦП [и заряд батареи], а также приводит к излишним расходам полосы пропускания данных для пользователя. Излишне говорить, что это не лучший способ поведения приложения.

Чтобы лучше понять эту архитектурную ошибку, полезно включить сетевой монитор.

1. В Flash Builder выберите «Окно»> «Показать представление»> «Другое», а затем выберите «Flash Builder»> «Сетевой монитор», чтобы открыть представление «Сетевой монитор».
2. Включите сетевой монитор, нажав кнопку «Включить монитор» [см. Рисунок 13]. [По умолчанию отключено.]

1. Запустите ваше приложение снова в эмуляторе и наблюдайте за сетевыми вызовами, когда вы переходите между домашним представлением и подробным представлением. [Чтобы вернуться к исходному виду из представления «Детали» в эмуляторе, выберите «Устройство»> «Назад» или нажмите Control + B.]

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

1. Откройте файл RSSReaderHome.mxml MXML.
2. В корневом элементе удалите вызов getData [] для события viewActivate [см. Рисунок 14]. Установите для атрибута destroyPolicy значение «none». Пока вы там, установите атрибут заголовка «Slashdot RSS».

Политика уничтожения определяет политику, которую будет использовать навигатор представления при удалении этого представления. Если установлено значение «auto», компонент ViewNavigator уничтожит представление, когда оно не активно. Если установлено значение «нет», представление будет кэшироваться в памяти. Для таких элементов, как лента RSS, которые обновляются не очень часто, лучше всего разрешить пользователю обновлять список вручную или периодически обновлять список.

Вам все еще нужно вызвать getData [] при запуске приложения. Это можно сделать из основного файла приложения.

1. Откройте RSSReader.mxml, файл для основной точки входа в приложение. Это находится в пакете проекта по умолчанию. В Package Explorer у него есть синяя точка и зеленый треугольник рядом с ним [см. Рисунок 15].

1. Добавьте applicationComplete = «getRSS []» в корневой элемент приложения [<s: MobileApplication>]. После инициализации приложения отправляется событие applicationComplete и вызывается getRSS [].

   <s:MobileApplication xmlns:fx=http://ns.adobe.com/mxml/2009                          xmlns:s="library://ns.adobe.com/flex/spark" 
             firstView="views.RSSReaderHome"
             applicationComplete="getRSS()">

2. Теперь создайте функцию, которая будет выполнять первоначальный вызов службы для получения элементов RSS. После удаления пустого элемента <fx: Declarations> добавьте следующий код:

Поскольку первым используемым представлением будет views.RSSReaderHome, код может напрямую ссылаться на него и вызывать любую из его открытых функций. Вызов Object [] преобразует активное представление в объект, а затем вызывается функция getData [].

1. Вернувшись в файл RSSReaderHome.mxml, измените модификатор доступа для функции getData [] с защищенного на общедоступный, как показано ниже.

Запустите ваше приложение. Убедитесь, что getData [] все еще работает, но не вызывается каждый раз, когда отображается домашний вид.

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

• Содержание действия
• Выполнение вызовов из приложения для функций, содержащихся в представлениях
• Как встраивать иконки в кнопки

В основном для мобильного приложения Flex, созданного для ОС Android, есть четыре основных области: навигационное содержимое, содержимое заголовка, содержимое действия и представление [см. Рисунок 16]. Содержимое действия обычно находится справа, и именно здесь вы разместите значок, который будет использоваться для обновления списка.

1. Чтобы создать значок обновления, вам понадобится значок размером примерно 48 x 48 пикселей с прозрачным фоном в формате PNG. Найдите файлы refresh48x48.png и info48x48.png в пакете значков начального проекта для этого руководства.
2. Щелкните правой кнопкой мыши папку src вашего приложения и выберите «Создать»> «Пакет». Введите значки в качестве имени пакета и нажмите Готово. Это создаст папку для ваших изображений значков.
3. Скопируйте файлы значков refresh48x48.png и info48x48.png в новый пакет.
4. Откройте RSSReaderHome.mxml и вставьте следующий код, который добавляет область содержимого действия в домашний вид с помощью кнопки, которая встраивает изображение значка обновления.

1. Запустите приложение, чтобы убедиться, что кнопка отображается [см. Рисунок 17].

1. Вернитесь к исходному виду и добавьте следующую функцию:

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

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

Теперь, когда архитектура надежна, пришло время добавить другое представление, чтобы пользователи могли видеть информацию о приложении. Представление Info будет относительно простым в добавлении, и оно даст пользователям информацию о получении исходного кода для приложения [заплатите вперед!].

Этот раздел займет около восьми минут.

1. Если вы еще этого не сделали, скопируйте файл info48x48.PNG из начального проекта в пакет значков вашего проекта.
2. Поскольку этот значок должен быть виден из всех представлений в приложении, его можно добавить к точке входа в приложение, в данном случае это файл RSSReader.mxml. Добавьте следующий код для настройки кнопки и обработчик события щелчка с именем showInfoView [] [еще не написано].

1. Чтобы создать новое представление, щелкните правой кнопкой мыши пакет представлений в Package Explorer и выберите New> MXML Component.
2. В диалоговом окне «Новый компонент MXML» введите представления в качестве пакета и инфо-представление в качестве имени. Убедитесь, что новый компонент основан на spark.components.view [см. Рисунок 18], и нажмите «Готово».

1. Откройте InfoView.mxml в представлении исходного кода и измените атрибут заголовка в элементе <s: View> на «About RSS Reader». Затем добавьте следующий код.

Примечание: текст и ссылка navigateToURL могут быть изменены для каждого проекта.

1. Откройте файл Home view [RSSReaderHome.mxml] и добавьте функцию с именем showInfo [] в блок <fx: Script>, которая будет выдвигать это представление.

1. Повторите предыдущий шаг для DetailsView.mxml. Обратите внимание, что InfoView.mxml не нуждается в экземпляре showInfo [], потому что пользователю не будет позволено нажимать кнопку Info в этом представлении.
2. Откройте файл RSSReader.mxml [точка входа в приложение] и добавьте функцию showInfoView [], которая вызывает функцию showInfo [] из активного представления.

Если вы запустите приложение сейчас, вы заметите две проблемы. Во-первых, на главном экране нет кнопки «Информация», где она нужна. Во-вторых, в окне «Информация» есть кнопка «Информация», где она не нужна.

Кнопка отсутствует в главном представлении, поскольку оно уже содержит элемент <s: actionContent> для кнопки «Обновить». Элемент <s: actionContent> представления переопределяет элемент в RSSReader.mxml.

1. Чтобы добавить кнопку «Информация» на домашний вид, откройте RSSReaderHome.mxml и добавьте <s: Button icon = «@ Embed [source = ‘icons / info48x48.png’]» click = «showInfo []» /> в <s : actionContent> element.

Это добавляет кнопку, которая вызывает экземпляр представления showInfo [] при нажатии.

1. Чтобы удалить кнопку «Информация» из представления «Информация», откройте InfoView.mxml и добавьте пустой элемент <s: actionContent>.

Примечание. Существуют и другие способы реализации кнопки «Информация». Например, вместо включения его в основной файл приложения, он может быть реализован в каждом представлении, в котором оно требуется. В общем, однако, если кнопка должна быть доступна для каждого представления [или почти для каждого представления], то имеет смысл реализовать это, как здесь сделано. Используемый подход может варьироваться от проекта к проекту.

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

В этом разделе вы узнаете:

• Что делает заставка и почему это хорошая идея
• Как добавить заставку

Мобильные приложения всегда должны стремиться к эффективному использованию процессора и батареи. Когда приложению требуется время для загрузки, у пользователя может сложиться впечатление, что все приложение вялое. Одним из способов показать пользователю, что приложение быстро реагирует на действия пользователя, является представление [в этом контексте представление относится к концепции представления MVC-шаблона]. К счастью, добавить заставку довольно просто. Заставка отображается, когда основные части приложения загружаются и исчезают, когда основное приложение завершило инициализацию.

Этот раздел займет не более пяти минут.

1. Создайте новый пакет в папке src вашего проекта и назовите его splash.
2. Скопируйте файл splashscreen.png из начального проекта в пакет-заставку [см. Рисунок 19].

Имейте в виду, что пользователь может открыть ваше приложение в ландшафтном режиме. Чтобы учесть это, вы можете либо ограничить приложение открытием только в портретном режиме, либо установить ширину и высоту изображения на заставке, чтобы это не имело значения; например, используйте 400 x 400 пикселей [см. рисунок 20].

1. Откройте RSSReader.mxml и добавьте splashScreenImage = «@ Embed [‘splash / splashscreen.png’]» в корневой элемент <s: MobileApplication> приложения, как показано ниже.

1. Запустите ваше приложение. Изображение заставки на мгновение появится во время загрузки приложения.

1. Не открывайте файл двойным щелчком, чтобы открыть его с помощью редактора XML. Вместо этого щелкните файл правой кнопкой мыши и выберите «Открыть с помощью»> «Текстовый редактор».
2. Укажите правильное имя и версию для вашего приложения. Имя можно изменить, отредактировав элемент <name> рядом со строкой 25.
3. Введите некоторый описательный текст, который идентифицирует ваше приложение. Например, вы можете набрать Slashdot RSS Monitor или что-то подобное [см. Рисунок 22]. Примечание. Точный номер строки и текст комментария могут отличаться от отображаемых.

Затем установите номер версии для вашего приложения. Если вы решите, что вы отличный программист и у вас нет шансов на какие-либо ошибки, вы можете выбрать версию 1.0. Установите это значение в элементе <versionNumber> рядом со строкой 30 [см. Рисунок 23].

1. Затем вы захотите определить, где основное приложение может найти соответствующие значки приложений PNG. Рядом со строкой 109 найдите элемент <image16x16>, который начинает набор из шести похожих элементов [см. Рисунок 24].

1. Вставьте имя соответствующего файла значка в каждый элемент [см. Рисунок 25].

1. Нажмите «Далее.
2. На следующем экране убедитесь, что вы экспортируете правильный проект, и оставьте для других опций значения по умолчанию [см. Рис. 27]. Нажмите «Далее.