Developing Android Applications with Flex 4.5

Camera Roll

The Camera Roll provides access to the camera’s gallery of images.

If your application requires the use of the device’s camera roll, you will need to select the WRITE_EXTERNAL_STORAGE permission when you are creating your project. See Chapter 3 for help with permissions.

Let’s review the code below. First, you will notice that there is a private variable named cameraRoll declared, of type flash.media.CameraRoll. Within applicationComplete of the application, an event handler function is called, which 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 BROWSEGALLERY button, the browseGallery method is called, which 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 4-6 shows the application and Figure 4-7 shows the application after a picture was selected from the gallery and the user has returned 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;

               privatevar cameraRoll:CameraRoll;

               protectedfunction 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 supported";
                     }
               }

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

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

               privatefunction 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>

Figure 4-6. The Browse Gallery application

Figure 4-7. The Browse Gallery application with a picture selected