Question

I recently learned how to work with API’s in Flash Builder. So I made this (note: it has no errors and it works in a normal Flex 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"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="957" minWidth="800" minHeight="600"
               creationComplete="initApp(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:HTTPService id="myRequest"
                       resultFormat="e4x"
                       url="{api_request}"
                       result="getMyPhotos(event)">

        </s:HTTPService>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            public var api_request:String;

            protected function initApp(event:FlexEvent):void
            {
                btnClear.addEventListener(MouseEvent.CLICK, leegAlleVelden);
                btnSearch.addEventListener(MouseEvent.CLICK, zoekOpFlickr);
                flickrFotoCollection.addEventListener(MouseEvent.CLICK, haalFoto);
            }

            protected function zoekOpFlickr(event:MouseEvent):void
            {
                var api_URL:String = 'http://api.flickr.com/services/rest/';
                var api_method:String = 'flickr.photos.search';
                var api_key:String = '290845e3c32e4e10a9e4b09fd993ddb9';
                var api_tags:String = txtSearchString.text;
                api_request = api_URL + '?method=' + api_method +
                    '&api_key=' + api_key + '&tags=' + api_tags;
                myRequest.send(); // hier maak je connectie met flickr
            }

            //http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=290845e3c32e4e10a9e4b09fd993ddb9&tags=cat&format=rest&api_sig=93e43cc21b7209d2e59af67736d27eb3

            protected function leegAlleVelden(event:MouseEvent):void
            {
                txtSearchString.text="";

            }

            protected function getMyPhotos(event:ResultEvent):void
            {
                //photos allemaal ingelezen
                flickrFotoCollection.dataProvider = new XMLListCollection(myRequest.lastResult.photos.photo);
            }

            public function haalFoto(selectedFoto:Object):String {
                // http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
                var farm_id:String = selectedFoto.@farm;
                var server_id:String = selectedFoto.@server;
                var id:String = selectedFoto.@id;
                var secret:String = selectedFoto.@secret;
                var size:String = 't';
                var api_selectedPhotoURL:String = "http://farm"+farm_id+".static.flickr.com/"+server_id+
                    "/"+id+"_"+secret+"_"+size+".jpg";
                return api_selectedPhotoURL;
            }

            public function toonFoto(event:MouseEvent):void
            {

            }

        ]]>
    </fx:Script>

    <s:BorderContainer x="0" y="21" width="800" height="100%" backgroundColor="#000000">
        <s:HGroup x="30" y="14">
            <s:TextInput x="0" y="23" width="267" id="txtSearchString"/>
            <s:Button x="289" y="24" label="Search" id="btnSearch" click="zoekOpFlickr(event);"/>
            <s:Button x="394" y="24" label="Clear" id="btnClear" click="leegAlleVelden(event);"/>
        </s:HGroup>

        <s:HGroup x="30" y="54" width="742" height="500">
            <mx:Tile width="399" height="500">
                <mx:Repeater id="flickrFotoCollection" dataProvider="{myRequest.lastResult.photos.photo}">
                    <s:Image id="fotoKlein"
                             source="{haalFoto(flickrFotoCollection.currentItem)}"
                             click="toonFoto(event);"
                             width="80" height="80"
                             scaleMode="stretch"/>
                </mx:Repeater>
            </mx:Tile>
            <s:Image id="fotoGroot" width="336" height="500"/>
        </s:HGroup>

    </s:BorderContainer>
</s:Application>

Next, I wanted to see if I could get it to work in a 4.5.1 mobile application. I didn’t get any errors except for a “could not resolve <mx:Repeater>…” At line 87. So for some reason it doesn’t recognize the <mx:Repeater> tag?

I tried to find the cause of this problem, but didn’t find it.

Is there a reason why it works in a normal application, but not in a mobile application?

Answer 1

The MX Components are not supported in a Mobile Project. For that code to compile in a Flash Builder mobile project you will have to manually add the SWC with MX components to the library path. Be prepared for poor performance, though.