PlayBook development with IntelliJ IDEA

Here is a little step by step by step guide on how to set up a project for the BlackBerry PlayBook on IntelliJ IDEA:

The following programs must be installed on your computer.

 - latest PlayBook SDK and Simulator

 - Adobe AIR and Flex SDK

 - IntelliJ IDEA 10

Setting up the project:

In IntelliJ go to File -> New Project

Choose new Project

Enter a name and a Path for the project, choose ActionScript/Flex Project

Choose to create a src folder.

Select ‘Pure ActionScript sample application.

For the Module click on the ‘…’ button, to configure a new Module SDK. Click on the ‘+’ icon on the top left and select AIR SDK. 

Now choose the path, where your PlayBook SDK is located.

I created a link called blackberry-tablet-sdk which points to the blackberry-tablet-sdk-0.9.3 folder, this way i only have to adjust this link when i update the sdk.

Click OK.

Now click on the finish button to complete the setup.

now you should have the following folder structure:

In the source folder create a file named blackberry-tablet.xml with the following content.

  1. <qnx>
  2.   <initialWindow>
  3.     <systemChrome>none</systemChrome>
  4.     <transparent>false</transparent>
  5.   </initialWindow>
  6.   <publisher>Sample Inc.</publisher>
  7.   <category>core.internet</category>
  8.   <icon>
  9.         <image>files/icon.png</image>
  10.   </icon>
  11. </qnx>

Replace the content of the HelloIntellij.as with the following:

  1. package
  2. {
  3.   import flash.display.Sprite;
  4.   import flash.events.MouseEvent;
  5.   import flash.text.TextField;
  6.   import flash.text.TextFormat;
  7.   import qnx.ui.buttons.Button;
  8.   import qnx.ui.buttons.LabelButton;
  9.  
  10.  // The following metadata specifies the size and properties of the canvas that
  11.  // this application should occupy on the BlackBerry PlayBook tablet screen.
  12.  [SWF(width=“1024”, height=“600”, backgroundColor=“#cccccc”, frameRate=“30”)]
  13.   public class HelloIntellij extends Sprite
  14.   {
  15.     public function HelloIntellij()
  16.     {
  17.       var helloButton:LabelButton = new LabelButton();
  18.       helloButton.label = “Hello IntelliJ!”;
  19.       helloButton.x = (stage.stageWidth - helloButton.width)/2;
  20.       helloButton.y = (stage.stageHeight - helloButton.height)/2;
  21.  
  22.       var myFormat:TextFormat = new TextFormat();
  23.       myFormat.color = 0xAA0000;
  24.       myFormat.size = 24;
  25.       myFormat.italic = true;
  26.       myFormat.align = “center”;
  27.  
  28.       var text:TextField = new TextField();
  29.       text.text = “Close”;
  30.       text.setTextFormat(myFormat);
  31.      
  32.       var closeButton:Button = new Button();
  33.       closeButton.addChild(text);
  34.       closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
  35.       closeButton.x = (stage.stageWidth - closeButton.width)/2;
  36.       closeButton.y = helloButton.y - helloButton.height;
  37.  
  38.       addChild(helloButton);
  39.       addChild(closeButton);
  40.  
  41.       stage.nativeWindow.visible = true;
  42.     }
  43.  
  44.     private function closeWindow(event:MouseEvent):void{
  45.       stage.nativeWindow.close();
  46.     }
  47.   }
  48. }

Rename air-app.xml to HelloIntellij-app.xml and adjust its content. It is possible that IntelliJ created it for an older version of adobe air(1.5 or 2.5) i believe this is because it does not recognize the version from the PlayBook SDK. The content should be looking like this:

  1. <?xml version=“1.0” encoding=“utf-8” standalone=“no”?>
  2. <application xmlns=“http://ns.adobe.com/air/application/2.5”>
  3.  
  4. <!— Adobe AIR Application Descriptor File Template. —>
  5.  
  6.         <id>HelloIntellij</id>
  7.  
  8.         <filename>HelloIntellij</filename>
  9.  
  10.         <name>HelloIntellij</name>
  11.  
  12.         <initialWindow>
  13.          <autoOrients>false</autoOrients>
  14.          <aspectRatio>landscape</aspectRatio>
  15.                
  16.                 <content>HelloIntellij.swf</content>
  17.                
  18.                 <title>HelloIntellij</title>
  19.  
  20.                 <systemChrome>none</systemChrome>
  21.  
  22.  
  23.                 <transparent>false</transparent>
  24.  
  25.         </initialWindow>
  26.  
  27. </application>

This is only a minimal configuration for the -app.xml file, for further configurations have a look at the documentation from RIM and Adobe.

Create a file build.xml with the following content:

  1. <project name=“SimpleTimer” default=“release-deploy” basedir=”.”>
  2.     <description>
  3.         Build file for Playbook Development
  4.     </description>
  5.  
  6.     <!— *****************************************************************
  7.  
  8.       define an ANT Property BB_TABLET_SDK_HOME with the path to the
  9.       playbook sdk and FLEX_HOME with the path to the flex sdk
  10.  
  11.       project structure:
  12.              /src (AS3 sources)
  13.           /lib (swc libraries)
  14.           /out (output folder)
  15.           /files (static files)
  16.  
  17.    *****************************************************************—>
  18.  
  19.     <!— *****************************************************************
  20.       change your project settings here
  21.    *****************************************************************—>
  22.  
  23.     <property file=“config.properties”/>
  24.  
  25.     <property name=“project.src” value=”${basedir}/src”/>
  26.     <property name=“project.out” value=”${basedir}/out”/>
  27.     <property name=“project.out.test” value=”${basedir}/out”/>
  28.     <property name=“project.out.prod” value=”${basedir}/out”/>
  29.     <property name=“project.lib” value=”${basedir}/lib”/>
  30.     <property name=“project.files” value=”${basedir}/files”/>
  31.     <property name=“project.mainclass” value=”${project.src}/${project.name}.as”/>
  32.  
  33.     <property name=“project.tabletxml” value=”${project.out}/blackberry-tablet.xml”/>
  34.     <property name=“project.xml” value=”${project.out}/${project.name}-app.xml”/>
  35.     <property name=“project.swf” value=”${project.out}/${project.name}.swf”/>
  36.     <property name=“project.bar” value=”${project.out}/${project.name}.bar”/>
  37.  
  38.  
  39.     <!— *****************************************************************
  40.         don’t make any changes
  41.      *****************************************************************—>
  42.  
  43.     <!— import project properties —>
  44.     <property environment=“env”/>
  45.  
  46.     <!— compiler, packager, and deployer settings —>
  47.     <property name=“sdk.home” value=”${BB_TABLET_SDK_HOME}”/>
  48.     <property name=“sdk.adl” value=”${sdk.home}/bin/adl”/>
  49.     <property name=“sdk.bbpack” value=”${sdk.home}/bin/blackberry-airpackager”/>
  50.     <property name=“sdk.bbdeploy” value=”${sdk.home}/bin/blackberry-deploy”/>
  51.  
  52.     <!— flex tasks —>
  53.     <taskdef resource=“flexTasks.tasks” classpath=”${sdk.home}/ant/lib/flexTasks.jar”/>
  54.  
  55.  
  56.     <!— =================================
  57.               debug targets              
  58.          ================================= —>
  59.  
  60.     <!— compile-debug —>
  61.     <target name=“debug-compile” depends=“clean,prepare” if=“sdk.home” description=“compile the app with debugging”>
  62.         <macro_mxmlc mainclass=”${project.mainclass}” output=”${project.swf}” debug=“true”/>
  63.     </target>
  64.  
  65.     <!— debug deploy —>
  66.     <target name=“debug-deploy” depends=“debug-compile” if=“sdk.home”
  67.            description=“create the app .bar debug package and deploy the app”>
  68.  
  69.         <!— include all dirs in out —>
  70.         <dirset dir=”${project.out}” id=“bin.dirs”>
  71.             <include name=”*”/>
  72.         </dirset>
  73.         <pathconvert property=“bin.dirs.string” refid=“bin.dirs” pathsep=” “>
  74.             <map from=”${project.out}/” to=” “/>
  75.         </pathconvert>
  76.  
  77.         <echo message=“host.ip: ${host.ip}”/>
  78.  
  79.         <!— package and deploy —>
  80.         <exec executable=”${sdk.bbpack}” dir=”${project.out}”>
  81.             <arg value=“-target”/>
  82.             <arg value=“bar-debug”/>
  83.             <arg value=“-connect”/>
  84.             <arg value=”${host.ip}”/>
  85.             <arg value=“-package”/>
  86.             <arg value=”${project.bar}”/>
  87.             <arg value=“-installApp”/>
  88.             <arg value=“-launchApp”/>
  89.             <arg value=”${project.xml}”/>
  90.             <arg value=”${project.swf}”/>
  91.             <arg value=”${project.tabletxml}”/>
  92.             <arg value=“-device”/>
  93.             <arg value=”${device.ip}”/>
  94.             <arg value=“-password”/>
  95.             <arg value=”${device.password}”/>
  96.             <arg line=“-C ${project.out} ${bin.dirs.string}”/>
  97.         </exec>
  98.  
  99.     </target>
  100.  
  101.  
  102.     <!— =================================
  103.        release targets              
  104.   ================================= —>
  105.  
  106.     <target name=“prepare” id=“sdk.home” description=“copies the static files”>
  107.         <!— create directories if they don’t exist —>
  108.         <mkdir dir=”${project.out}”/>
  109.         <mkdir dir=”${project.lib}”/>
  110.         <mkdir dir=”${project.files}”/>
  111.         <copy todir=”${project.out}”>
  112.             <fileset dir=”${project.src}”>
  113.                 <include name=”**/*.xml”/>
  114.             </fileset>
  115.         </copy>
  116.         <copy todir=”${project.out}/files”>
  117.             <fileset dir=”${project.files}”/>
  118.         </copy>
  119.     </target>
  120.  
  121.     <!— compile —>
  122.     <target name=“release-compile” depends=“clean,prepare” if=“sdk.home” description=“compile the app”>
  123.         <macro_mxmlc mainclass=”${project.mainclass}” output=”${project.swf}” debug=“false”/>
  124.     </target>
  125.  
  126.     <!— create-package —>
  127.     <target name=“release-create-package” depends=“release-compile” if=“sdk.home”
  128.            description=“create the app .bar package”>
  129.  
  130.         <!— include all dirs in bin —>
  131.         <dirset dir=”${project.out}” id=“bin.dirs”>
  132.             <include name=”*”/>
  133.         </dirset>
  134.         <pathconvert property=“bin.dirs.string” refid=“bin.dirs” pathsep=” “>
  135.             <map from=”${project.out}/” to=” “/>
  136.         </pathconvert>
  137.  
  138.         <exec executable=”${sdk.bbpack}” dir=”${project.out}”>
  139.             <arg value=“-package”/>
  140.             <arg value=”${project.bar}”/>
  141.             <arg value=”${project.xml}”/>
  142.             <arg value=”${project.swf}”/>
  143.             <arg value=”${project.tabletxml}”/>
  144.             <arg line=“-C ${project.out} ${bin.dirs.string}”/>
  145.         </exec>
  146.     </target>
  147.  
  148.  
  149.     <!— deploy —>
  150.     <target name=“release-deploy” depends=“release-create-package” if=“sdk.home”
  151.            description=“deploy the app in the standard configuration”>
  152.         <exec executable=”${sdk.bbdeploy}” dir=”${project.out}”>
  153.             <arg value=“-installApp”/>
  154.             <arg value=“-launchApp”/>
  155.             <arg value=“-device”/>
  156.             <arg value=”${device.ip}”/>
  157.             <arg value=“-password”/>
  158.             <arg value=”${device.password}”/>
  159.             <arg value=“-package”/>
  160.             <arg value=”${project.bar}”/>
  161.         </exec>
  162.     </target>
  163.  
  164.  
  165.     <!— =================================
  166.        other targets              
  167.   ================================= —>
  168.  
  169.     <!— clean —>
  170.     <target name=“clean” description=“remove all the compiled files”>
  171.         <delete includeemptydirs=“true”>
  172.             <fileset dir=”${project.out}”>
  173.                 <include name=”**/*”/>
  174.             </fileset>
  175.         </delete>
  176.     </target>
  177.  
  178.     <!— ###########################  MACRO-DEFINITIONS ######################### —>
  179.  
  180.     <macrodef name=“macro_mxmlc”>
  181.  
  182.         <attribute name=“mainclass”/>
  183.         <attribute name=“output”/>
  184.         <attribute name=“debug”/>
  185.  
  186.         <element name=“settings” optional=“true”/>
  187.  
  188.         <sequential>
  189.             <echo>=== compile class @{mainclass} to @{output} ===</echo>
  190.  
  191.             <mxmlc fork=“true” maxmemory=“512m” file=”@{mainclass}” output=”@{output}” debug=”@{debug}”
  192.                   verbose-stacktraces=”@{debug}” optimize=“true” strict=“true” benchmark=“false”
  193.                   actionscript-file-encoding=“UTF-8” keep-generated-actionscript=“false”>
  194.                 <!— load SDK config —>
  195.                 <load-config filename=”${sdk.home}/frameworks/air-config.xml”/>
  196.  
  197.                 <!— include lib swcs —>
  198.                 <library-path dir=”${project.lib}” append=“true”>
  199.                     <include name=”*.swc”/>
  200.                 </library-path>
  201.  
  202.                 <!— additional settings —>
  203.                 <settings/>
  204.  
  205.                 <source-path path-element=”${project.src}”/>
  206.             </mxmlc>
  207.         </sequential>
  208.     </macrodef>
  209.  
  210. </project>

And a conf.properties file, in which you have to set the correct ip adresses and password.

  1. project.name=HelloIntellij
  2. host.ip=*.*.*.*
  3. device.ip=*.*.*.*
  4. device.password=***

This Ant script was written by formatlos, who put it on github for his sampe PlayBook project for FDT. I just made some small changes to it.

Click on the ant tab on the right (if it’s not there go to Window-> Tool Windows -> Ant), click on the ‘+’ icon and choose the previously created ant script.

In the ant panel, click on the properties icon and add FLEX_HOME and BB_TABLET_SDK_HOME.

Run the application

go to Run -> Edit Configurations

Click on the ‘+’ and choose Flex

select already running Flash Player

choose the blackberry-tablet-sdk as debugger

and finally under ‘before launching’ check the ant checkbox and select the debug-deploy target.

Click ‘Ok’ and run the debugger (Shift + F9)

If everything went right and your simulator is running, this should install and run your application and the simulator should connect to the debugger. It is possible that you have to enter the host IP adress of the host when the application launches on the PlayBook. I didn’t find any solution for this up to now.

The ant script creates the following folders if they don’t already exist:

  • files: here you can put statuc files (like images) that you use in your app
  • lib: if you use any third party library, put it in here.

To add an icon to your app, put it in the files folder and adjust the blackberry-tablet.xml. There is a nice flash application to create good looking icons.

You can find this project on github.