Rodion Bykov -- Adobe ColdFusion | Lucee

Blog

Используем Flash Builder "Burrito" для разработки под планшет BlackBerry Playbook

Posted in March 23, 2011 - Folder: 2011 - Tags:

Канадская фирма RIM, которая так успешно выпускает практически неизвестные у нас телефоны BlackBerry, собирается выпустить планшет BlackBerry Playbook. Чтобы заранее поднять интерес разработчиков к "еще одному планшету", RIM предлагает встроенную поддержку Adobe AIR на устройстве. В свою очередь, следующий релиз Flash Builder и Flex SDK будет иметь поддержку мобильных платформ. Эта замечательная комбинация дает нам возможность попробовать на вкус разработку под Blackberry уже сейчас.

Это не будет устройство на базе Android; Playbook будет работать под управлением ОС QNX Neutrino, но при этом поддержка Adobe AIR будет встроена в ОС. Для разработки будет доступен также "нативный" SDK на C++ (QNX Momentix SDK) и SDK OpenGL. Для отображения вебсайтов будет использоваться браузер на базе Webkit. Для приложений BlackBerry существует и свой "market" - BlackBerry App World.

"Родные" приложения для BlackBerry работают очень быстро, но при этом не могут похвастаться особым изяществом и красотой интерфейсов. Приложения на Flex могут использовать особенное скинование, контролы, контейнеры и эффекты, однако важно помнить, что для QNX и Flex SDK - это первая итерация на мобильных устройствах.

Чтобы поиграться с AIR для BlackBerry нужно установить пару игрушек:
- Flash Builder "Burrito" на Adobe Labs
- SDK и эмулятор устройства BlackBerry PlayBook с сайта BlackBerry
- Для запуска эмулятора понадобится VMWare Player, VirtualBox не подойдет.
Установите Flash Builder "Burrito" в отдельную папку, и при установке BlackBerry SDK укажите папку с Flex SDK 4.5 - он добавит немного магии, чтобы разработка под BlackBerry стала возможна.

Мобильный проект - новый тип проекта в Flash Builder, разве это не круто ?! Выберите BlackBerry Tablet OS в качестве целевой платформы приложения.

Как видим, в MXML появляется новый тип - MobileApplication.

Запустите приложение, используя встроенный во Flex Builder эмулятор.

Вот что должно получиться:

Если установлен и запущен эмулятор устройства, можно запустить приложение на нем. Однако для этого нужно будет инсталлировать приложение по сети. Для этого включите Development Mode на устройстве - нажмите шестеренку для входа в настройки, затем Security, затем Development Mode On.

Устройство скажет вам свой IP-адрес, запишите на бумажку.

В командной строке дайте команду компилятору установить приложение на устройство:
```
C:\blackberry-tablet-sdk-0.9.1\bin>blackberry-airpackager -package bobpop.bar -installApp -launchApp "C:\bobpop\bin-debug\bobpop-app.xml" "C:\bobpop\bin-debug\bobpop.swf" -device 192.168.241.128 

Using default icon: C:\blackberry-tablet-sdk-0.9.1\bin\..\samples\icons\blackberry-tablet-default-icon.png
Package created: bobpop.bar
Sending Install request...
Action: Install
File size: 1056286
Installing ...
actual_dname::bobpop.debug.Ym9icG9wLmRlYnVnICAgICAgICA
actual_id::Ym9icG9wLmRlYnVnICAgICAgICA
actual_version::0.0.0.0
result::success
Sending Launch request...
Action: Launch
Launching bobpop.debug.Ym9icG9wLmRlYnVnICAgICAgICA...
done
```
После этого приложение должно появиться в виртуальном устройстве, и его можно будет запустить.

Flex Builder может сделать запуск консольного компилятора за вас, надо только настроить:

Запускаться приложение уже будет на устройстве:

Немного поиграемся:
```
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.testHome">
<fx:Declarations>

</fx:Declarations>
</s:MobileApplication>
```
View - это обычный контейнер, поддерживает states и layouts.
```
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:views="views.*"         creationComplete="view1_creationCompleteHandler(event)" 
         title="Home">

	<fx:Declarations>
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			
			import mx.events.FlexEvent;
			
			protected function view1_creationCompleteHandler(event:FlexEvent):void
			{
				this.addEventListener("FaceClicked", onFaceClick);
			}
			
			protected function onFaceClick(event:Event):void {
				this.currentState = "details";
			}
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				this.currentState = "tile";
			}
			
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="tile" />
		<s:State name="details" />
	</s:states>
	
	<s:TileGroup includeIn="tile" left="0" right="0" top="0" bottom="0">
		<views:ButtonFace id="faceBender" img="bender.jpg" txt="Bender" />
		<views:ButtonFace id="faceFry" img="fry.jpg" txt="Fry" />
		<views:ButtonFace id="faceFrog" img="frog.jpg" txt="Frog" />
	</s:TileGroup>
	
	<s:HGroup includeIn="details">
		<s:Label text="Details" />
		<s:Button label="Close" click="button1_clickHandler(event)" />
	</s:HGroup>
	
</s:View>
```
Как обычно, можно написать свой компонент и использовать его:
```
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
	  xmlns:s="library://ns.adobe.com/flex/spark"           width="200" height="200"                       horizontalAlign="center">
	
	<fx:Script>
		<![CDATA[
			
			[Bindable]
			public var img: String = "";
			
			[Bindable]
			public var txt: String = "";
			

			protected function button1_clickHandler(event:MouseEvent):void
			{
				var e:Event = new Event("FaceClicked", true);
				dispatchEvent(e);
			}

		]]>
	</fx:Script>
	
	<s:BitmapImage source="assets/{img}" />
	<s:Button label="{txt}" click="button1_clickHandler(event)" />
</s:VGroup>
```
Вот что получилось за пару минут - приложение с master-detail списком:

Blog

Используем Flash Builder "Burrito" для разработки под планшет BlackBerry Playbook