Recently a popular photo editing suite released an online version of their application. And it was written and deployed using Flex. Naturally of course the first thing we wanted to do was prove that we could write something similar using Appcelerator.

We enjoy using simple web standards (CSS/HTML) to build UIs, and with Appcelerator writing server/client code is trivial and just could not be any easier. So, we gave it our best shot to see what we could do in 2 days amount of work. The result? Snappshot.

It’s all written using HTML, CSS, Javascript, Appcelerator, and with Ruby on Rails on the backend.

Best of all, here’s the link to the entire code so you can see how we did it.

Popularity: 6% [?]

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: 11% [?]

Purpose

The Appcelerator framework allows for the extension of the build and deployment process so that you can add components and modify the behavior of your service implementations. It is quite powerful and not only restricted to services, plugins for example could span across to the modification of applications and the entire build and deployment process for that matter. For simplicity, this article will identify how to create a new component added to our java service for monitoring performance.

Install Appcelerator

I’ve assumed that you’ve successfully downloaded and installed Appcelerator from http://www.appcelerator.org/products. Once you’ve gone through the installer you can get the java service

1

  app install:service java

You may want to get an existing plugin (I needed the java:spring plugin to implement my plugin):

1

  app install:plugin java:spring

Plugin Creation

Lets assume that our plugin is going to be called java:perf, to create the plugin project:

1
2

  cd $HOME/workspace
  app create:plugin . java:perf

This will create a sub directory named java_perf, now you will want to create a proper license entry in your build.yml for example check out build.yml. You now have the opportunity to modify the entry points in your java_perf.rb. I personally wanted to setup my install script so that:

• it dynamically builds the jar when we add the plugin to a project
• modifies the spring.xml to include the bean entries for my component

All of this is in before_add_plugin(event) callback. If you want to see where this is called, check out add_plugin.rb. Once my coding is complete (added my source files to java_perf/src), I created the plugin distribution:

1

rake zip

Install the plugin

As you noticed, I haven’t covered debugging the plugin just yet, this is because I want to first set up the plugin for installation and then work with it in my install directory. Lets install it to the local machine:

1

app install:plugin java_perf.zip

Add the plugin to my project

I thought that I’d create a blank java project real quick

1
2

cd workspace
app create:project . myproject java

now we can add the spring plugin and our new java:perf plugin to our project

1
2
3

cd myproject
app add:plugin java:spring
app add:plugin java:perf

You can now directly modify the java_perf.rb file in your install directory

• windows: c:/Program Files/Appcelerator/releases/plugin/java_perf/1.0
• unix: /usr/local/Appcelerator/releases/plugin/java_perf/1.0
• mac os: /Library/Appcelerator/releases/plugin/java_perf/1.0

I suggest that you continue to modify the java_perf.rb this way to debug it and then finalize by copying back over to $HOME/workspace/java_perf

Next Steps

As a final parting you can release your new plugin so that others may be able to leverage it

1
2

cd $HOME/workspace/java_perf
app release java_perf.zip

-andrew

this article is cross posted at:
http://zuerchtech.com/2008/3/4/implementing-an-appcelerator-plugin

Popularity: 15% [?]