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

We are very excited about the 2.1 release of Appcelerator. It provides a solid foundation upon which we can start to realize our full vision for RIA + SOA. In addition to providing detail about our 2.1 release, I want to provide a general overview of the Appcelerator Platform and highlight its unique capabilities.

What is Appcelerator?

Appcelerator is a fully integrated open source platform that enables the creation of RIA + SOA applications, where RIA represents a rich client and SOA represents the services that it consumes. The platform provides developers with everything they need to build both the RIA and SOA pieces of a rich web application.

The foundation of Appcelerator is its message-oriented architecture. In Appcelerator, standard HTML elements can both produce and consume messages. These messages can be sent locally within the browser or to remote services. The diagram below demonstrates the flow for local messaging within the browser. In this example, one DIV element generates a local message when a click event is received, and the other two DIV elements are subscribed to that local message. The Appcelerator Message Broker takes care of the message routing between elements.

The next diagram demonstrates the flow for remote messages. Remote messages can be sent to both HTML elements in the browser and to remote services. The Message Broker in the browser handles communication with the server-side Service Broker. The Service Broker is responsible for routing service requests and data marshalling. Our integrated services platform provides Service Brokers (or SOA Integration Points) for Java, Ruby, PHP, .NET, Python and Perl.

Three Key Technologies

In addition to our message-oriented architecture, Appcelerator is powered by three key technologies:

• Web Expression Language
• Unified Widget Platform
• Integrated Services Platform

The architecture diagram below demonstrates how these technologies fit together with our message-oriented architecture.

[Read more →]

Popularity: 12% [?]

Today, at MySQL World 2008 in Santa Clara we’re excited about an announcement between XAware, Inc. and Appcelerator and the XAware Ecosystem.

XAware has been an exciting company to work with and they are really pushing leading in the SOA integration space and are creating a compelling SOA ecosystem of best of breed technology partners and platforms.

According to Marten Mickos, previous CEO of MYSQL and new Senior VP at Sun, said:

“It’s encouraging to see innovative organizations working together to expand the open source SOA ecosystem,” said Marten Mickos, senior vice president, Database Group, Sun Microsystems. “Companies such as XAware, Appcelerator and Active Endpoints provide open source solutions that address a range of business issues, and we urge conference attendees to check out their offerings.”

So what does this all mean?

This means that you can now use the Appcelerator rich Internet Application (RIA) platform together with XAware’s open source SOA solution to give your SOA infrastructure a face. You can now leverage all the existing enterprise data to build rich, powerful and dynamic web applications and seamlessly make them work together using standards, tools and skill sets you’ve already invested in in the enterprise.

(NOTE: this is a cross-post from my personal blog)

Popularity: 7% [?]