BlackBerry Tablet Applications : Exploring the APIs - Camera Roll

The Camera Roll is the camera’s gallery of images.

If your application requires the use of the device’s camera roll, you will need to select the access_shared permission when you’re creating your project. 

Let’s review the code that follows. First, you will notice there is a private variable named cameraRoll declared of type flash.media.CameraRoll. Within applicationComplete of the application, an event handler function is called; it first checks to see if the device supports access to the image gallery by reading the static property of the CameraRoll class. If this property returns as true, a new instance of CameraRoll is created, and event listeners of type MediaEvent.COMPLETE and ErrorEvent.COMPLETE are added to handle a successfully captured image, as well as any errors that may occur.

A button with an event listener on the click event is used to allow the user to browse the image gallery. When the user clicks the BROWSE GALLERY button, the browseGallery method is called and then opens the device’s image gallery. At this point, the user is redirected from your application to the native gallery application. Once the user selects an image from the gallery, she is directed back to your application, the MediaEvent.COMPLETE event is triggered, and the mediaSelected method is called. Within the mediaSelected method, the event.data property is cast to a flash.Media.MediaPromise object. The mediaPromise.file.url property is then used to populate Label and Image components that display the path to the image and the actual image to the user. Figure 1 shows the application and Figure 2 shows the application after a picture is selected from the gallery and the user returns to the application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               applicationComplete="application1_applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var cameraRoll:CameraRoll;

            protected function application1_applicationCompleteHandler
            (event:FlexEvent):void {
                if(CameraRoll.supportsBrowseForImage){
                    cameraRoll = new CameraRoll();
                    cameraRoll.addEventListener(MediaEvent.SELECT, mediaSelected);
                    cameraRoll.addEventListener(ErrorEvent.ERROR, onError);
                } else{
                    status.text="CameraRoll NOT suported";
                }
            }

            private function browseGallery(event:MouseEvent):void {
                cameraRoll.browseForImage();
            }

            private function onError(event:ErrorEvent):void {
                trace("error has occurred");
            }

            private function mediaSelected(event:MediaEvent):void{
                var mediaPromise:MediaPromise = event.data;
                status.text = mediaPromise.file.url;
                image.source = mediaPromise.file.url;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Label id="status" text="Click Browse Gallery to select image" top="10" 
width="100%" textAlign="center"/>

    <s:Button width="300" height="60" label="BROWSE GALLERY" 
click="browseGallery(event)"
              enabled="{CameraRoll.supportsBrowseForImage}"
              top="80" horizontalCenter="0"/>

    <s:Image id="image" width="230" height="350" top="170" horizontalCenter="0"/>
</s:Application>