menu

Blog

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

    Канадская фирма 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>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </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>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </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 списком: