Introducing the Composite Application Framework

Web and Mobile applications built using the Adobe Digital Enterprise Platform permit modular development of a user interface, such that you can compose an application out of multiple individual components (could be HTML or Flash based).

The “Composite Application Framework” lets you assemble your application by hosting its constituent parts as content managed in the CRX Repository. Then you can modify¬† layout properties and change your application administratively (by editing content in the Repository after your application) has¬† been developed and deployed. No need to rebuild and redeploy the whole application.

The individual components of your application are called, “Tiles“. In the example below one Tile is a JSP based HTML application built with Apache Sling. The other Tile is a classic Flex application that shows a data grid. Both Tiles may be developed and maintained separately but brought together by the framework to form a “Composite Web Application”.

The Composite Application Framework also provides communication of data and objects between each Tile via a “Shared Global Application Content”. In the example below a “watch” attribute (any string) may be configured in the Flex Tile, then a value for that attribute gets set by the HTML Tile.

(or click below to see a screen shot)

Now let’s look at the code behind each Tile (HTML and Flex)

html.jsp

Here is the JSP used to display the HTML tile able to communicate data with Flex.

Note the following aspects:

  1. A java script utility mosaicBridge.js is imported in order to obtain the mosaicApp.getContext() function which you can use to get/set attributes on the Global Contecxt. This java script needs to be part of your web application.
  2. The buttons in the HTML simply call function in the script block that wrap use of the mosaicBridge.js utility.

(Click to enlarge)

Flex Application Tile

Here is the MXML code used for the Flex Tile.

Note the following aspects:

  1. The data grid relies on a dataProvider which is a simple array collection
  2. There is a “mosaicApp” object of type IApplication which is injected by the Composite Application Framework allowing your flex application to access the Global Shared Context. This Tile adds itself as a “watcher” for an attribute with a given name.
  3. Now any time there is a change to a property in the shared global context, the Tile gets an onChange event for the property being watched and simply adds it to the dataProvider used for the grid.

(Click to enlarge)

 

http://www.thinkdigit.com/adobe/Internet/Adobe-launches-YouTube-channel-for-ADEP-Developers_7188.html