Советы по мобильным приложениям Flex

То же видео на YouTube для моих китайских друзей: http://www.youtube.com/watch?v=7LDyYl6ksOU

СОВЕТ № 1: убить вашу заявку

Это недоразумение номер один с приложениями Android для разработчиков Flash. Когда вы выходите из приложения (например, нажимаете кнопку «Домой»), приложение все еще работает в фоновом режиме. Вы должны знать об этом поведении по умолчанию и контролировать его. Это очень мощное поведение, унаследованное от Android, но иногда оно может убить пользовательский опыт на смартфоне. Позвольте привести пример. API геолокации, представленный в AIR 2.5, возвращает ваши координаты в режиме реального времени. На Android он напрямую использует GPS API операционной системы, и мы все знаем, что он потребляет много ресурсов. В этом примере я просто запрашиваю свое местоположение с помощью API геолокации и отображаю широту в текстовом поле. Не забудьте добавить разрешение Android «ACCESS_FINE_LOCATION» в манифест XML.

На первом экране вы можете видеть, что мое приложение ищет мое местоположение, так как в строке состояния отображается значок GPS Android. Затем я нажимаю на кнопку домой (экран 2). GPS все еще работает в фоновом режиме !!! Если я смотрю на запущенные сервисы, приложение tip1quitHandler действительно все еще прекрасно работает. Это потребляет мои ресурсы даром.

Чтобы контролировать поведение вашего приложения, вы должны прослушивать событие DEACTIVATE в собственном приложении. Просто добавьте эти строки кода в ваш основной файл MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					 xmlns:s="library://ns.adobe.com/flex/spark"
					 firstView="views.tip1quitHandlerHome"
					 creationComplete="mobileapplication1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function mobileapplication1_creationCompleteHandler(event:FlexEvent):void
			{
 
				NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivateApp);
			}
 
			protected function onDeactivateApp(event:Event):void
			{
				NativeApplication.nativeApplication.exit();
			}
 
		]]>
	</fx:Script>
</s:MobileApplication>

В этом случае я просто убиваю приложение, когда пользователь возвращается на домашний экран. Вы также можете удалить прослушиватель событий в Geolocation и активировать его снова при запуске Event.ACTIVATE. Это дает вам больше свободы и контроля, чем когда-либо на Android.

СОВЕТ №2: Загрузите ваши данные перед просмотром

Это еще одна классическая ошибка из-за новой архитектуры MobileApplication. Если вам необходимо загрузить некоторые данные из Интернета, не вызывайте службу в представлении. Если вы это сделаете, вы будете запускать бесполезный запрос каждый раз, когда возвращаетесь к нему. Обновите основной файл приложения, чтобы вызвать вашу службу и нажать на представление о результате события. Удалите параметр firstView из тега MobileApplication и вызовите службу в событии creationComplete. Когда вы получите resultEvent, нажмите первый вид и передайте объект event.result как ArrayCollection.

protected function operation1():void
			{
				Operation1Result.token = speakersDevoxx.Operation1();
			}
 
			protected function mobileapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				operation1();
			}
 
			protected function Operation1Result_resultHandler(event:ResultEvent):void
			{
				// TODO Auto-generated method stub
				navigator.pushView(views.tip2devoxxHome,event.result as ArrayCollection);
			}

Посмотрите видео, чтобы узнать, как я использую мастер данных Flash Builder 4 для создания приложения, подключенного к службе DEVOXX REST, за 5 минут. Как только ваши данные загружены, они сохраняются между представлениями. В моем примере я получаю список ораторов и сохраняю его в коллекции Array. Когда я хочу отобразить сведения о динамике, я просто выдвигаю новый вид, передавая объект list.selectedItem. Благодаря AIR 2.5 вы также можете хранить данные локально в базе данных SQLite.

СОВЕТ № 3: Отображение пользовательской метки

Используйте рендеринг мобильных элементов, чтобы добиться максимальной производительности при прокрутке списков данных. Не забывайте, что вы также можете использовать параметр labelFunction в List вместо классического labelField. Типичный вариант использования — это когда вы хотите отобразить полное имя пользователя в списке. Например, если вы получаете только имя и фамилию от службы, используйте этот простой прием.

<fx:Script>
		<![CDATA[
			public function myFullName(obj:Object):String
			{
				return(obj.lastName + " " + obj.firstName);
			}
 
			protected function list1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				navigator.pushView(views.mySpeaker, list.selectedItem);
			}
 
		]]>
	</fx:Script>
	<s:List id="list" width="100%" height="100%" dataProvider="{data}" labelFunction="myFullName" click="list1_clickHandler(event)">
 
	</s:List>

СОВЕТ № 4: Всегда объявляйте заставку

Ваше приложение AIR всегда будет запускаться за секунду. Платформа Flex Hero добавила в текущий класс Preloader твик для отображения изображения перед классической загрузкой. Всегда объявляйте заставку (просто статичное изображение) в своем основном теге MobileApplication, чтобы улучшить взаимодействие с пользователем. Всегда лучше приветствовать своих пользователей изображением, а не черным фоном. Для управления отображением заставки доступны несколько параметров «соотношения». Вы должны рассмотреть почтовый ящик и режимы масштабирования. Используйте параметры splashScreenImage и splashScreenScaleMode вашего приложения MobileApplication.

<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					 xmlns:s="library://ns.adobe.com/flex/spark"
					 xmlns:speakersdevoxx="services.speakersdevoxx.*"
					  creationComplete="mobileapplication1_creationCompleteHandler(event)" title="Loading..."
					  splashScreenImage="@Embed('devoxxSplash.png')" splashScreenScaleMode="zoom">

СОВЕТ № 5: Проверьте ориентацию экрана

Я большой поклонник пользовательских макетов Flex 4. Вы можете прочитать мою статью о пользовательских макетах здесь: http://www.riagora.com/2010/05/flex-4-and-custom-layouts/ По умолчанию компонент List для мобильных устройств будет использовать класс VerticalLayout. В зависимости от того, что вы отображаете, VerticalLayout не всегда лучший выбор. В зависимости от ориентации вашего устройства (книжная или альбомная), вы также можете изменить макет, связанный с вашим списком. Когда я отображаю картинки, я предпочитаю TileLayout с ориентацией «строк», но когда я переключаюсь в ландшафтный режим, я предпочитаю TileLayout с ориентацией «столбцов». Вот два скриншота одного и того же приложения с использованием двух разных макетов в зависимости от ориентации экрана.

Слева вы можете любоваться портретным режимом, а справа — ландшафтным. Чтобы выяснить, когда пользователь поворачивает экран, я слушаю ResizeEvent в представлении … Я не уверен, что это лучший способ продолжить … но это работает

protected function checkOrientation():void{
				if(navigator.landscapeOrientation == true){
					currentState = "landScapeView";
				}else{
					currentState = "portrait";
				}
			}
 
			protected function onResizeView(event:ResizeEvent):void
			{
				checkOrientation();
			}

<s:states>
		<s:State name="portrait"/>
		<s:State name="landScapeView"/>
	</s:states>
	<s:List width="100%"  height="100%" dataProvider="{myData}" itemRenderer="views.mySecondIR">
		<s:layout.portrait>
			<s:TileLayout orientation="rows"/>
		</s:layout.portrait>
		<s:layout.landScapeView>
			<s:TileLayout orientation="columns"/>
		</s:layout.landScapeView>
	</s:List>

Я просто попытался использовать свой собственный макет Coverflow, и я был удивлен удивительной производительностью на моих устройствах Android. Посмотрите видео, чтобы увидеть, как это работает.

СОВЕТ № 7: Ваши советы

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