Appcelerator Plus Flex

Appcelerator’s Unified Widget Platform enables developers to both create new widgets and to wrap existing widgets. The latter capability is very powerful because it gives developers one platform from which they can leverage any widget. Currently, our platform contains widgets from Yahoo, ExtJS and several small widget providers. In this blog post, I will show you how to create an Appcelerator widget that wraps a Flex component using Adobe’s Flex-Ajax Bridge.

What is the Flex-Ajax Bridge? In Adobe’s own words:

Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.

As a demonstration, I wrapped Doug Mccune’s Flex Cover Flow library as a Appcelerator Widget. James Ward from Adobe was kind enough to donate the MXML shell with the Flex Ajax Bridge baked-in.

Once we had that, all we needed to do was just build a widget. The details of building this widget are covered in the Create Widget Screencasts, Part 1 and Part 2. The first screencast shows the basics of wrapping the widget. The second adds some embellishments and demonstrates adding additional features into this widget.

The final result? Our widget turned:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script language="JavaScript" type="text/javascript">
    FABridge.addInitializationCallback("b_FlexFlow", FlexFlowInit);
 
    function FlexFlowInit()
    {
        b = FABridge["b_FlexFlow"].root();
        b.setReflectionEnable(true);
        b.setBgColor(0x000000);
        b.setHorizontalSpacing(100);
        b.setTweenDuration(0.65);
        b.setRotationAngle(70);
        b.setMaxImageWidth(200);
        b.setMaxImageHeight(200);
        b.setDataProvider(['P1230065.JPG','P1240078.JPG','P1260094.JPG','P1260095.JPG','P1260097.JPG']);
        b.getCfc().addEventListener("click", function() {;});
    }
</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="FlexFlowTest" width="100%" height="500"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
  <param name="movie" value="FlexFlow.swf" />
  <param name="flashvars" value="bridgeName=b_FlexFlow"/>
  <param name="quality" value="high" />
  <param name="allowScriptAccess" value="sameDomain" />
  <embed src="FlexFlow.swf" quality="high"
    width="100%" height="500" name="FlexFlowTest" 
    align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer" 
    flashvars="bridgeName=b_FlexFlow">
  </embed>
</object>

into:

1
2
3

        <app:as_flexflow id="flow" on="r:get.albums.response then execute" 
                property="covers" img_height="400" img_width="400">
        </app:as_flexflow>

With a few more enhancements, this widget became a big part of our Apptunes demo (it’s the big piece in the middle).

With the Flex-Ajax Bridge and Appcelerator, you can get the benefits of Flex-based components without having to abandon HTML, CSS and Javascript.

Popularity: 5% [?]