Developing iOS Applications with Flex 4.5

Camera Roll

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

Let’s review the code below. 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, 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 application user to allow the user to browse the image gallery. When the user clicks the BROWSE GALLERY 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, the user 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. Since iOS does not return the file populated on the MediaPromise, we are not able to simply read the file property for display the image within our application like we can with Android or BlackBerry. Instead, the solution is to load the flash.Media.MediaPromise object into a flash.display.Loader. Within the onComplete method, you will see a new Loader being created and an event listener added to the loader’s contentLoaderInfo property to listen for the Event.COMPLETE of the loader. Finally, the loader’s loadPromiseFile method is called with the mediaPromise passed in. Once the mediaPromise is loaded, the onMediaPromiseLoaded method is called. The target of the event is cast as a flash.display.LoaderInfo object and its loader property is set as the source of the Image component.

Figure 4-8 shows the application and Figure 4-9 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;

               private var cameraRoll:CameraRoll;
               private var loader:Loader;

               protected function application1_applicationCompleteHandler(event:FlexEvent):void {
                     if(CameraRoll.supportsBrowseForImage){
                          cameraRoll = new CameraRoll();                     } else{
                          status.text="CameraRoll NOT supported";
                     }
               }

               private function browseGallery(event:MouseEvent):void {
                     cameraRoll.addEventListener(MediaEvent.SELECT, mediaSelected);
                     cameraRoll.addEventListener(ErrorEvent.ERROR, onError);
                     cameraRoll.browseForImage();
               }

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

               private function mediaSelected(e:MediaEvent):void {
                     cameraRoll.removeEventListener(MediaEvent.SELECT, mediaSelected);
                     cameraRoll.removeEventListener(ErrorEvent.ERROR, onError);
                     var mediaPromise:MediaPromise = e.data;
                     this.loader = new Loader();
                     this.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, 
                         onMediaPromiseLoaded);
                     this.loader.loadFilePromise(mediaPromise);
               }

               private function onMediaPromiseLoaded(e:Event):void {
                     var loaderInfo:LoaderInfo = e.target as LoaderInfo;
                     image.source = loaderInfo.loader;
               }

          ]]>
    </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="500" 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-8. Browse Gallery application

Figure 4-9. Browse Gallery application with a picture selected