Monday, May 9, 2011

BlackBerry Tablet OS SDK for Adobe AIR


Adobe® AIR® technology represents a huge opportunity for mobile app developers – the promise for easing the mobile development process and the ability to share code across multiple platforms have become reality. Such capabilities including compiling for the BlackBerry Tablet® OS SDK, Android, and iOS from one source file were demonstrated by Chris Black in his keynote at Geeky By Nature in NYC earlier this month.

Flash Professional CS5 for building BlackBerry Tablet application


The BlackBerry PlayBook runs the BlackBerry Tablet OS, and includes support for Adobe AIR and Adobe Flash Player. The BlackBerry Tablet OS SDK provides tools to package and deploy AIR applications (which use the .bar file extension) to the PlayBook simulator. Using this setup, you can create Flash content with either Adobe Flash Professional or Adobe Flash Builder.
In this article you'll learn how to build, package, and deploy a Battery Monitor application using Flash Professional CS5 and the BlackBerry Tablet OS SDK. This article is divided into the following sections:
  • Using the BlackBerry Tablet OS SDK and Flash Professional CS5 Extension for AIR 2.5
  • Creating a battery monitor application
  • Packaging and deploying your application for the PlayBook simulator

Blackberry flash applicatons development


For me, day two of Mobile World Congress started with a demo on how to build Flash based applications for BlackBerry devices. Since RIM is one of our Open Screen Partners you will soon see Flash Player 10.1 and AIR on BlackBerry devices. As a Flash developer I am obviously very excited about that. BlackBerry has traditionally been an enterprise platform, one that uses Java as its core developer platform. Bringing Flash Player 10.1 and AIR to these devices opens up a whole new world for Flash Developers but also for BlackBerry users.

Saturday, May 7, 2011

How to Read and Write XML files with Flex and AIR

Needed Resources:

Final Product:
An AIR application with a load xml and save xml button. The load button prompts the user to find an xml file titled "person.xml." Once the user has selected the file, the first name and last name of the person will be displayed in two text inputs. The user can then edit these entries and save them back to the file using the save button.
The Data:
<?xml version="1.0" encoding="UTF-8"?>
<person>
<firstName>John</firstName>
<lastName>Doe</lastName>
</person>

Execution:
  1. Mock up a simple interface with two input fields and two buttons in MXML:

    <mx:VBox>
    <mx:HBox>
    <mx:Label text="First Name:"/>
    <mx:TextInput id="fName_txti"/>
    </mx:HBox>
    <mx:HBox>
    <mx:Label text="Last Name:"/>
    <mx:TextInput id="lName_txti"/>
    </mx:HBox>
    <mx:HBox>
    <mx:Button id="load_btn" label="Load XML" click="loadXML()"/>
    <mx:Button id="save_btn" label="Save XML" click="saveXML()" enabled="false"/>
    </mx:HBox>
    </mx:VBox>
    NOTE: save_btn is disabled to prevent the user from trying to save something that does not yet exist.
  2. Create a script tag and import the Alert class that will be needed to let the user know if they have selected an invalid file:
    import mx.controls.Alert;
  3. Write the method that will be invoked when the"Load XML" button is clicked:

    private function loadXML():void{
    file = new File();
    file.addEventListener(Event.SELECT, dirSelected);
    file.browseForOpen("Select person.xml file");
    }
  4. Setup the event listener function that will read the xml file and create an XML object. If the user has not picked a file with the name "person.xml," the application will fire a prompt informing them of their mistake:

    private function dirSelected(e:Event):void {

    if(file.nativePath.indexOf("person.xml") != -1){
    var fs:FileStream = new FileStream();
    fs.open(file, FileMode.READ);
    personXML = XML(fs.readUTFBytes(fs.bytesAvailable));
    fs.close();
    setTextInputs();
    }else{
    Alert.show("You have not selected an xml file called 'person.xml'");
    }
    }
  5. The next function is a helper function that sets the text input's text:

    private function setTextInputs():void{
    fName_txti.text = personXML.firstName;
    lName_txti.text = personXML.lastName;
    save_btn.enabled = true;
    }
  6. Last is the function to save the xml back to the originally opened file:

    private function saveXML():void{
    personXML.firstName = fName_txti.text;
    personXML.lastName = lName_txti.text;
    var newXMLStr:String = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + personXML.toXMLString();
    var fs:FileStream = new FileStream();
    fs.open(file, FileMode.WRITE);
    fs.writeUTFBytes(newXMLStr);
    fs.close();
    }
    NOTE: If the application used "writeUTF" instead of "writeUTFBytes" the xml file ends up with some garbage characters that causes parse errors when the app tries to reopen and parse the xml.
  7. Check out this post to see how to save a class object to XML. Enjoy!

Webcam recording in Action script 3

I am using mr-webcams code for recording from a webcam. This is the source code of main functions.
//functions for recording
function doRecord() {
 if (Record_btn.getLabel() == "Record" && archiveName_tx.text != "") {
  archiveName_tx.type = "dynamic"
  // show live video feed.
  Live_video.attachVideo(client_cam);
  Live_video.attachAudio(client_mic);
  // Start publishing the camera output as a recorded stream
  record_ns.attachVideo(client_cam);
  record_ns.attachAudio(client_mic);
  record_ns.publish(archiveName_tx.text, "record");// record stream
  // Change the button label
  Record_btn.setLabel("Stop");
  nTimer = setInterval(stopRecording, 30000);//does it WORK???
 } else if (Record_btn.getLabel() == "Stop") {
  // Close output stream
  record_ns.close();
  //
  record_ns.attachVideo(null);
  record_ns.attachAudio(null) 
  //
  Live_video.attachVideo(null)
  Live_video.attachAudio(null) 
  //
  liveStreamInfo_so.data.broadcastStatus = null
  liveStreamInfo_so.data.currentBroadcast = ""
  // Change the button label
  Record_btn.setLabel("Record");
  editList(archiveName_tx.text, "newOne")
  archiveName_tx.text = ""
  archiveName_tx.type = "input"
 }
}
function playArchive(){
 if(Record_btn.getLabel() != "Record"){return;}
 Live_video.clear()
 Live_video.attachVideo(live_ns)
 live_ns.play(archiveView_tx.text)
}
// deletes archive flv and shared object reference
function deleteArchive(){
 editList(archiveView_tx.text, "removeOne")
 // calls the function on the ASC called delStream, send over the name of the flv
 client_nc.call("delStream", null, archiveView_tx.text)
 archiveView_tx.text = ""
}


function stopRecording():Void{ //may own code
   // Close output stream
  record_ns.close();
  //
  record_ns.attachVideo(null);
  record_ns.attachAudio(null) 
  //
  Live_video.attachVideo(null)
  Live_video.attachAudio(null) 
  //
  liveStreamInfo_so.data.broadcastStatus = null
  liveStreamInfo_so.data.currentBroadcast = ""
  // Change the button label
  Record_btn.setLabel("Record");
  editList(archiveName_tx.text, "newOne")
  archiveName_tx.text = ""
  archiveName_tx.type = "input"
  clearInterval(nTimer);
 
} 

How to build your own video recorder using Flex and AIR

Needed Resources:

Final Product:
A simple AIR application that records a video stream from a webcam and saves a temporary FLV file to the desktop. The UI will consist of a window displaying the current video feed and a button to start and stop recording.
Execution:
  1. Create a WebcamPanel class that extends off of the Panel class and will display the video feed:
    This class will basically consist of a method "insertWebcamVideo" that will build the UIComponent and attach a Video object to it.

    public function insertWebcamVideo():void{
    var videoHolder:UIComponent = new UIComponent();
    var camera:Camera = Camera.getCamera();
    video = new Video(camera.width*2, camera.height*2);
    video.attachCamera(camera);
    videoHolder.addChild(video);
    addChild(videoHolder);
    videoHolder.y =10;
    }
  2. Attach the WebcamPanel our main mxml file:
    <webcam:WebcamPanel id="webCam_pnl" width="360" height="320" />
  3. Create a button to toggle record off and on:
    <mx:Button id="record_btn" label="Record" click="recordPushed()" />
  4. Setup the recordPushed method to initialize our FLV file via the SimpleFLVWriter class if the label is "Record." In addtion to writing the header information for the file, this code sets up the interval that will take snapshots of the webcam feed:

    if(record_btn.label == "Record"){
    curVidFile = File.createTempFile();
    myWriter.createFile(curVidFile, 360,320, 10);
    recordInterval = setInterval(recordVid, 100);
    record_btn.label = "Stop";
    }
  5. For the else clause of our "if" statement we will close up the FLV file and copy it to the desktop:

    }else{

    clearInterval(recordInterval);
    myWriter.closeFile();
    var newFileNameStr:String = curVidFile.name.split(".tmp").join(".flv");
    var desFile:File = new File(File.desktopDirectory.nativePath +"\\" +newFileNameStr);
    curVidFile.copyTo(desFile);
    record_btn.label = "Record";
    }
  6. The code for the snap shot interval:

    private function recordVid():void{
    var snapshot:BitmapData = new BitmapData(320, 240, true);
    snapshot.draw(webCam_pnl.video);
    myWriter.saveFrame( snapshot );
    }
  7. Hook up a webcam and compile your project and viola!

Friday, May 6, 2011

Introduction to RIM PlayBook and Adobe AIR


Introduction to RIM PlayBook and Adobe AIR

The BlackBerry PlayBook is a tablet device created by Research In Motion (RIM). The PlayBook runs the BlackBerry Tablet OS, which is based on the QNX OS created by QNX, a RIM subsidiary.
Note: Currently the PlayBook and BlackBerry Tablet OS are still in beta and will be released in the first half of 2011. Information in this article is relative to the information available as of February 2011 and might not reflect actual release features and functionality.
Adobe AIR is a runtime that enables you to build standalone applications for the desktop, TVs, and devices. Along with Adobe Flash Player, it provides a unique platform for developers to build highly engaging applications across multiple screens. The first PlayBook difference is the level of integration between AIR and the device. The PlayBook uses AIR at the OS level. There is tight integration between AIR and the core QNX OS, and many native PlayBook applications are built to run in AIR. For example the camera native UI, native media player, and settings panel all are AIR apps. There are other ways to build applications on the PlayBook, described later in this article, but the fact that many of the core PlayBook applications built with AIR make it a differentiator.
The RIM team provides developers with the same components used to build native PlayBook apps. This ActionScript-based set of components is referred to as the QNX component library. The QNX components are found in the BlackBerry Tablet OS SDK for Adobe AIR. That means that, as a developer, you can use the same components that are used in the native PlayBook applications. The QNX components have been optimized for the PlayBook and touchscreen interaction. The BlackBerry Tablet OS SDK for Adobe AIR also includes the command-line tools to build, package, debug, and deploy PlayBook (.bar) applications to the PlayBook simulator or device.

Flex SDK Hero and Flash Builder "Burrito"

At a basic level, AIR and Flash Player run SWF files, typically referred to as Flash or AIR apps. To create a SWF file, ActionScript is compiled into bytecode, which is then interpreted by AIR or Flash Player at runtime. Flex is a framework of ActionScript classes that help developers build rich applications. The Flex SDK also allows you to build applications with MXML, a declarative markup language that makes layout and view-based development easy. In the end, Flex and MXML are translated into ActionScript that is compiled into a SWF.
Both the QNX component library and Flex provide a set of UI components. The Flex framework also provides features and supporting classes for a wide variety of application development needs, such as CSS styling, binding, modules, and FXG-based skinning. Flex has been around for several years and is used in mission-critical applications around the world. With the preview releases of Flex SDK "Hero" and Flash Builder "Burrito", developers are able to build applications optimized and targeted for devices (see Figure 1).
Creating a new Flex mobile AIR project in Flash Builder "Burrito".
Figure 1. Creating a new Flex mobile AIR project in Flash Builder "Burrito".
The QNX components and Flex SDK "Hero" both work very well on the PlayBook. Although there are many factors to consider when deciding which framework to use, keep in mind that both are optimized for devices and the PlayBook touchscreen. As part of the PlayBook development ecosystem, BlackBerry provides a BlackBerry Tablet OS plug-in for both Flash Builder 4 and Flash Builder "Burrito". Using this plug-in, you can package, debug, and deploy applications to the PlayBook simulator or device from within Flash Builder. From the Run Configurations dialog box, you can specify the target platform and whether you want to run your application on the desktop or on the actual device (see Figure 2).
Figure 2. Preparing to run the RIMMobileAIR application (targeting the BlackBerry Tablet OS platform) on the PlayBook device. (Click to enlarge.)
With Flash Builder "Burrito" you can create Flex mobile projects and ActionScript mobile projects. Both types of mobile projects allow you to target the BlackBerry Tablet OS platform and build applications using the QNX libraries. Although the QNX components do not work directly with the Flex framework, there are ways to mesh them together. For more information on this topic, check the BlackBerry forums for relevant threads since it is beyond the scope of this article.

The hardware difference

The specifications of the PlayBook show that RIM intends on leading the tablet space. The PlayBook offers many powerful and intriguing hardware features:
  • Dual-core 1GHz CPU
  • 1 GB RAM
  • Dual cameras: 3 MP front-facing, 5 MP rear-facing
  • Stereo sound
  • 7-inch screen, 1024 × 600 resolution
  • Multitouch interface, supporting four touch points
  • 1080p HD video
  • Video codec support for H.264, MPEG4, and WMV, as well as AIR video codec support
  • HDMI video output through Micro HDMI port
  • 5.1" × 7.6" × 0.4" (130mm × 194mm × 10mm)
  • 0.9 lbs. (400 g.)
  • Wi-Fi 802.11 a/b/g/n
  • PlayBook system gestures, swiping from bezel into screen.
Along with the hardware features, the QNX OS will come with the following features:
  • WebKit (HTML5 and Flash Player 10.1)
    • Acid3 score: 100/100
    • CSS3 Selectors test score: 578/578
    • HTML5 test score: 208/300
  • True multitasking
  • Application-specific swipe down gesture for developer integration
  • Custom app notifications
  • BlackBerry security and data efficiency, including locking the device by application and not necessarily the whole device
  • Pairing with BlackBerry smartphones over secure Bluetooth connection to push e-mail, calendar, BlackBerry Messenger, task, and document data

The BlackBerry difference

There are many avenues to take when building applications for the PlayBook. The approach you take will likely depend on your background. A Flex developer, for example, may take a different path than a BlackBerry developer. BlackBerry offers their existing developer base the option to use WebWorks and Java integration (the exact Java SDK and details have not yet been determined). The BlackBerry Tablet OS SDK for Adobe AIR is the first SDK for BlackBerry tablets and comes with tooling integration using Flash Builder. The details of each of the development SDKs are discussed later in this article.
These approaches have one thing in common: They all use a VMWare image for simulating the PlayBook device. BlackBerry provides this BlackBerry PlayBook Simulator alongside its BlackBerry Tablet OS SDK download. Using the simulator, you can run the apps you develop without an actual device. There are obviously some features that will not work on a VMWare image, but having a full OS image is quite different from other mobile devices that provide only an emulator or no simulation environment at all. Both the PlayBook Simulator and device use an IP address to deploy and debug applications over your network. No cables are required to sync or debug your applications.
Once you've finished developing your application, you'll want an efficient way to distribute it. PlayBook applications will be distributed through the App World application found on the PlayBook. The App World application and other BlackBerry services enable revenue opportunities such as marketplace sales, advertising, and in-app purchases.

App World

BlackBerry App World is the official marketplace for apps that run on Blackberry devices, including the PlayBook. Currently, App World is accepting PlayBook application submissions. The marketplace is available in 70 countries and in six different languages. End users can purchase applications using a BlackBerry ID, carrier billing, or a credit card. The developer's share of a sale is 70 percent. To participate in App World and other BlackBerry services, a developer must sign up as a vendor. As a vendor, you have access to other BlackBerry services outlined below.

Payment service (in-app payments)

The BlackBerry Payment Service provides APIs for selling in-application goods. These can include art, e-books, game levels, character customization, video streaming, or other dynamic content. To sell a digital good to an application user, the vendor first must register each digital good through the vendor portal. The developer uses the API inside the application to create a connection to the payment service and send a purchase call. The user is then prompted to purchase the digital good with a PlayBook-specific dialog box. The current BlackBerry Tablet OS SDK for Adobe AIR provides the Payment Service APIs to test various purchase/non-purchase use cases around in-application selling. For an example of the current Tablet OS SDK for Adobe AIR API, see my blog post on the topic, Using BlackBerry Payment Service with Adobe AIR for the PlayBook.

Advertising service

BlackBerry offers vendors the ability to add advertising to their applications with a few lines of code. The API for this service has not been released but RIM has stated it will be coming in the future. BlackBerry provides a vendor management portal to easily select and change different ad networks without changing any code in the application. This allows for multinetwork advertising inside the application with a simple set of API calls. The revenue split for this service is 60 percent for the vendor.

Analytics service powered by Webtrends

Analytics are important for maximizing revenues and refining application experiences. BlackBerry has partnered with Webtrends to provide vendors with insight into how users are using their applications. Vendors can track application use, frequency of use, user loyalty, and even individual screen and feature access. The release of the API for this service is also still pending.

The BlackBerry Tablet OS SDK for Adobe AIR difference

One thing that stands out with the BlackBerry Tablet OS SDK for Adobe AIR is the extended AIR APIs that provide PlayBook-specific features. For example, as the developer you have access to device-specific information via the qnx.system.Device class, including the board serial number (bsn), hardware ID, vendor ID, battery level, battery state, device PIN, and SCM bundle. You can use the qnx.system.QNXApplication class to listen for the bevel swipe down gesture to display secondary navigation or context menus inside the application. The qnx.media package contains classes for media playback, including hardware accelerated playback, as well as playback of all PlayBook supported codecs. The ability to view HTML content inside of AIR is extended by the qnx.media.QNXStageWebView class, which provides hooks to control the web view directly.
The payment services mentioned above are also extended SDK APIs. APIs to call out to the PlayBook notification system and make calls to C/C++ applications are also planned. These are just some of the API highlights; it is not an exhaustive list. For more details, see the BlackBerry Tablet OS SDK for Adobe AIR API Reference.

What other tablet OS SDKs mean for AIR apps

In addition to the main BlackBerry Tablet OS SDK for Adobe AIR, the PlayBook will support applications built with other SDKs. Currently slated for the PlayBook, these SDKs will support developing applications using the browser (both HTML5 and Flash Player 10.1), BlackBerry WebWorks, and native C/C++.

Browser development

The WebKit used in the PlayBook has roots in the BlackBerry 6 WebKit browser, with enhanced support for HTML5 and CSS3. Along with this HTML engine, the PlayBook browser supports Flash Player 10.1, making it easy for developers to reuse their existing web games or content in the PlayBook browser. The PlayBook browser performs very well in web standard tests—see the section, "The hardware difference," for details. It also features improved JavaScript performance, touch event handling, and data handling.

BlackBerry WebWorks

BlackBerry WebWorks enables developers to use modern web technologies to build BlackBerry applications that can take full advantage of the BlackBerry platform (see Figure 3). Using BlackBerry WebWorks tools, developers can be more productive as they create BlackBerry applications that interact with BlackBerry devices.
The WebKit engine and the WebWorks platform in a high-level architecture diagram.
Figure 3. The WebKit engine and the WebWorks platform in a high-level architecture diagram.
Applications built with WebWorks for BlackBerry 6 devices will work on the PlayBook with limited modifications. Developers can currently download the WebWorks SDK for Tablet OS for PlayBook and test applications on the simulator.

BlackBerry Native SDK

The Native SDK uses the C/C++ development environment and provides low-level access to features such as OpenGL 2.0, networking, and data storage. BlackBerry provides tooling integration with the existing QNX Momentics SDK and tool suite. The target audience for this SDK is game developers, but it also opens opportunities for developers to build apps using the Native SDK and pair them with other PlayBook applications. For example, an AIR app might use a Native SDK built application as an extension to handle performance intensive routines.
Note: Exact details for how applications built with the Native SDK can be used to extend AIR applications will not be available until the Native SDK is available.