My Developer Lab at Adobe MAX

This year at MAX I have prepared a developer hands on lab session with Seth Reilly called, “Creating Mashups with ADEP’s Composite Application Framework”.

During the session we build a composite application from scratch using all the cool new ADEP features in Flash Builder 4.5.1. Then we dive into a really interesting use case that mashes up existing Flash UI components, Services, HTML and JavaScript to build a fun application. We start with a simulated stock quote streamer (yes, I know .. but stay with me here!) and then we build it out to show a Google Map which automatically jumps to the city location of the company whose stock you select. Pretty nifty, eh.

Here is a screen shot (after some deliberately loud skinning!)

(Click to enlarge)

Here are the basic points we will hit in the session:

  1. Using Flash Builder to author, deploy and debug a Composite Application
  2. Adding a “Service” to your Composite Application. In this case an address look up.
  3. Adding an HTML Tile to your Composite Application In this case an HTML and Action Script Tile to drive a Google Map
  4. Communicating objects between Flex Tiles and HTML. In this case we share an Address Object and access it in JavaScript using JSON to reset the Google Map when you choose an address.
  5. Tips ‘n Tricks for Skinning. We apply a .CSS and a new MXML Skin to the application, for example allowing you to drag & drop the Tiles around within the application.

If you are lucky enough to be going to Max, come check out the Lab, grab a workstation and follow along. We start at 5:00pm sharp on Monday October 2nd in the ADEP Labs area and the session is called, “L2540 – Creating Mashups with ADEP’s Composite Application Framework”

If you would like to read the full tutorial, check it out here: http://ep.adobe.com/content/max/L2540_Gilchrist_CreatingMashupswithADEP_Final.pdf

Happy Hacking –

Gary.

 

Developing and Deploying an OSGI Bundle on to the ADEP Experience Server

The Open Services Gateway Initiative (OSGi), also known as the Dynamic Module System for Java, defines architecture for modular application development. ADEP Experience Server is developed on the OSGi container implementation Apache Felix, which allows you to break your application … Continue reading

How to create a dashed rectangle in Flash

If you were ever in the need of drawing a dashed rectangle in Flash, you find that it’s not so simple as using a DashedStroke. I think this is certainly a missing feature in Flash. After spending hours looking for existing code I decided to write it myself.

The first very simple approach is to create a BitmapData with the required dash-gap pattern and use it as lineBitmapStyle. This works quite well but you don’t get the nice corners.

Ugly Corners

Ugly Corners

So you really need to draw the lines yourself. The trick here is to constraint the lines to start with a dash in each corner. You need to calculate the number of gaps needed for the length of the lines and then distribute any excess pixels evenly. This is rather simple to do if you use floating point precision while drawing the lines. Of course this is easy because we’re only drawing horizontal and vertical lines and don’t support rounded corners.

Nice Corners

Nice Corners

Having created the dashed rectangle element, it’s easy to create a skin for the BorderContainer. Just create a new skin as a copy of the original BorderContainerSkin and replace its bgRect with the DashedRect. This little exercise is left for the reader :-)

Here’s the code for drawing the rectangle:

<!-- DashedRect.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<s:Rect xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
  <fx:Script>
    <![CDATA[
      import flash.display.Graphics;

      private var _dash:int = 6;

      private var _gap:int = 6;

      public function set gap(i:int):void {
        _gap = i;
      }

      public function set dash(i:int):void {
        _dash = i;
      }

      override protected function draw(g:Graphics):void {
        var xx:int = drawX + width;
        var yy:int = drawY + height;
        var x:int, y:int, gx:Number, gy:Number;

        var nGapsH:Number = Math.floor(width / (_gap + _dash));
        var nGapsV:Number = Math.floor(height / (_gap + _dash));
        var gw:Number = nGapsH == 0 ? 0 : (width-((nGapsH + 1) * _dash)) / nGapsH;
        var gh:Number = nGapsV == 0 ? 0 : (height-((nGapsV + 1) * _dash)) / nGapsV;

        // top line
        g.moveTo(drawX, drawY);
        x = gx = drawX;
        while (x < xx) {
          x = Math.min(x + _dash, xx);
          g.lineTo(x, drawY);
          gx+=_dash + gw;
          x = gx;
          g.moveTo(x, drawY);
        }
        // right line
        g.moveTo(xx, drawY);
        y = gy = drawY;
        while (y < yy) {
          y = Math.min(y + _dash, yy);
          g.lineTo(xx, y);
          gy+=_dash + gh;
          y = gy;
          g.moveTo(xx, y);
        }
        // bottom line
        g.moveTo(xx, yy);
        x = gx = xx;
        while (x > drawX) {
          x = Math.max(x - _dash, drawX);
          g.lineTo(x, yy);
          gx-=_dash + gw;
          x = gx;
          g.moveTo(x, yy);
        }
        // left line
        g.moveTo(drawX, yy);
        y = gy = yy;
        while (y > drawY) {
          y = Math.max(y - _dash, drawY);
          g.lineTo(drawX, y);
          gy-=_dash + gh;
          y = gy;
          g.moveTo(drawX, y);
        }
      }

    ]]>
  </fx:Script>
</s:Rect>

 

And here’s how to use it:

<local:DashedRect x="0" y="0" width="100%" height="100%" dash="6" gap="6">
  <local:stroke>
    <s:SolidColorStroke color="0x000000" weight="2"/>
  </local:stroke>
</local:DashedRect>

Introduction on Experience Services sample applications

For developers who are interested in Experience services and eager to build ADEP applications themselves, “Getting Started” is a surely a good place for you to get started, where you can find many samples that are built with different services and frameworks provided by ADEP Experience services. Most of the samples are out-of-the-box, which means they are up running with the server start  automatically without any further manual steps. Also for each sample, you can find document that explains what the sample tries to showcase and how to do that under ADEP.

As Gary mentioned in his blog, the samples are split into two groups. In this post, I’d like to give you a more in-depth introduction on the “Application use case samples”. Basically these are sample applications that gather together could cover all the main services or frameworks provided by Experience services. I will introduce them one by one and for each one of them, I will introduce what experience service and technical points the sample covers so that when you try to build your own application, you can easily find out which one best suit your needs as reference.

(Click on Images to enlarge..)

samples_list

Data integration – A sample to showcase user interface aggregation and data access capability on ADEP. And it demonstrate that capability by using Composite Application Framework and Data Services.

data integration

Interface aggregation capability is provided by Composite Application Framework. Composite Application Framework aggregates HTML and Flex-based user interface components into a single application view that provides an intuitive user interface in the context of the user’s current task.. Composite applications are dynamically instantiated during run time on the client and display content according to the current context. Composite Application Framework takes care of loading modules, provides the infrastructure for inter-tile communication and services, and managing assets and applications on the server.

Data Services provides various kinds of data sources access capabilities on ADEP and is a core framework within ADEP used by all ADEP solutions. Data Services provides Remoting (RPC), Messaging (publish/subscribe), Proxy(HTTPService/WebService) , and Data Management capabilities for the creation of rich Internet application (RIA’s) as well as multi-screen, mobile, or occasionally-connected applications.

In this sample, you can learn how to develop and deploy a Composite application, how to get data from different kinds of back end data sources include CRX content repository, how to work with HTML tiles and how to develop and deploy a simplest bundle, etc.

 Model Driver Development with CRX – A sample to showcase Data Services’ highly productive set of Model-Driven Development capabilities that enable developers to focus on application and business logic.

mdd

In the sample, we author a data model in Flash Builder and deploy it to the Experience Server. This creates new Data Services destinations, which expose CRUD (create, read, update delete) and filter operations for the entities in the data model. At runtime, these operations are implemented on the server by a new Data Services Assembler that built using JCR for persistence.

Stand Alone Task Management and Task Management with Document Services – They are put together because they both showcase the Task Management capabilities.

http://blogs.adobe.com/eptech/wp-content/plugins/wp-o-matic/cache/3104e_tms.jpg

http://blogs.adobe.com/eptech/wp-content/plugins/wp-o-matic/cache/3104e_tmd.jpg

The Experience Server provides the following capabilities for Task Management, utilized by developers as part of the Experience Services SDK:

  • A framework to manage the lifecycle of User Tasks. The framework provides two default provider implementations for User Tasks as follows. Regardless of the implementation chosen, the APIs and UX components used by the web application do not need to change:

    • Stand-alone User Task:  These User Tasks do not need to originate from a BPM process. Instead, they can be created and assigned in an ad-hoc fashion by applications that manage appointments or To-Do items for their end users. Stand Alone User Tasks are managed in the CRX Repository as data in a JCR node tree.
    • Document Server User Task: User Tasks are generated by a business process management process running on the Document Server, using Process Management.
  • A set of UX components available in Flash Builder to help build applications that manage User Tasks and display the work payload of a User Task.
  • A set of services (exposed via Data Services Remoting) that can be used in Flex applications to interact with Stand-alone and Document Server User Tasks.

You can learn from these two samples about how to implement task management with Experience server by utilize all these capabilities. The difference lies in the provider implementations.

Authentication and Single Sign On – A sample designed to showcase how to address typical security related requirements during development of rich Internet applications.

authentication

As you can see, this sample itself provides a login page. After login, user is provided with the links to Experience Server contents and other Experience Services samples. By learning the source code and document for the sample, you should find the sample covers:

  • Username/password authentication using either the Content Repository or a Document Server as the provider of user identity. There is also a plug-in model based on the Java Authentication and Authorization Service (JAAS) for delegating authentication to some other LDAP system.
  • Single Sign-On and identity propagation for an already logged-on end user across all Experience Services. For example, when a client application is invoking Data Services, accessing Composite Application Services or making HTTP Requests using Apache Sling, re-authentication is not required.
  • Client access to the user details for the current logged in user with the notion of an ActionScript User object.
  • Log out handling.

In summary, these use case application samples cover all the main frameworks and technologies of Experience services, therefore they are very good stuff to developers who are new to ADEP. Moreover, each sample has good document to further explain the details and you can even build your own sample application by following the steps in each document.

Flash Builder Tooling with CAF Tiles using Flex SDK 3.6

1 Introduction

Even though the ADEP tooling doesn’t officially support building CAF tiles that use Flex SDKs earlier than 4.5.0, it is nevertheless possible to do so while taking advantage of many of the features it provides, if you do a little of the work yourself. The following features of the tooling can still be used with 3.6 Tiles, once they have been properly set up:

  • Some automatic catalog entry generation
  • Catalog and Application deployment

The things you give up include:

  • Automatic gxml generation for library projects
  • Code assist in library projects
  • Tile creation wizard

2 General ideas

The main thing you need to do to get started is to undo some of the work that the File->New->ADEP project wizard does for you. You give up all the features of tooling if you don’t ADEP-enable a project, so it’s better to go through the wizard as though creating a 4.5-based project, and then change the settings to make it a 3.6-based project instead. We’ll cover the two main types of tile projects, Module tiles and UIComponent tiles. There are other ways to get the tooling to help, such as telling a 3.6-based non-ADEP project to generate its output into a 4.5-based, ADEP-enabled project, but I won’t cover them here.

3 Creating a 3.6 Module tile project

Let’s start with Module tiles, since they’re the simplest, and are the recommended approach. Throughout this tutorial, we’ll use the default catalog, but all the steps work equally well with any catalog.

Begin by launching FlashBuilder, and ensure that you have all the normal ADEP-related parts set up (AEP_SDKS pointed at the right place, for instance). Then create a new ADEP-project, by choosing File->New Flex Project for ADEP Experience Services. Configure it as you would normally configure a 4.5 tile, but on the first panel of the wizard, choose the 3.6 Flex SDK instead. Accept all the default swc libraries that are added to the build path, even though they’re for 4.5, you’ll remove them after the project is set up. Once your project is ready, open the project build path pane, and remove all the library entries that mention “ux”, “riacore” and “dataservices”. Unfortunately, one of the swc directories just removed has a couple of swcs you still need in addition to many you don’t, so choose “Add SWC…” and enter “${AEP_SDKS}/riaservices/riacore/10.0.0.0/flex/security_api.swc”, and again for security_domain_library.swc.  Then, edit the remaining entries that mention 4.5 and point them at 3.6 instead.  Your build path should now look like this:

Finally, in the Flex Compiler pane, remove the additional compiler argument “-includes=mx.managers.systemClasses.MarshallingSupport”. Your project is now mostly “3.6-ready”, and if you’re in a hurry, you can skip the next step, though in a production environment you’ll need to come back and do it.

The wizard creates a sequence of RSL failover entries that ensure that your application, when it loads Flex SDK swz and swf files, gets them first from the server that served up the application. However, the URLs the wizard uses are for the 4.5 SDK, not the 3.6 one. The wizard will have set the default framework linkage for your project to “Use SDK default”, which is most likely RSL, so the RSL failover paths do need to be edited. Go to the Flex Build Path pane for the project, and open the list of the Flex 3.6 SDK components. The list should include playerglobal.swc, framework.swc, etc. The ones that are available on the CRX server need to have their entries modified. These are:

  • framework.swc
  • datavisualization.swc
  • rpc.swc

Each one needs to have the following failover pattern (replacing “framework” with “datavisualization” and “rpc”):

/content/mosaic/viewer/flex_sdks/flex_sdk_3.6.0.16995/framework_3.6.0_16995.swz
/content/mosaic/viewer/flex_sdks/flex_sdk_3.6.0.16995/framework_3.6.0_16995.swf
framework_3.6.0_16995.swz
framework_3.6.0_16995.swf

http://fpdownload.adobe.com/pub/swz/flex/3.6.0.16995/framework_3.6.0.16995.swz

Next, create a new MXML module in that project. The File->New->Composite Application Tile wizard expects to with with a 4.5 project, and will refuse to create a tile in a 3.6 project, so you’ll have to create the module with the File->New MXML Module dialog instead. Then add the Tile metadata to your module, so it looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="absolute" width="400" height="300">
  <mx:Metadata>
    [Tile]
  </mx:Metadata>
  <mx:Button label="Tile1 button"/>
</mx:Module>

Since the project is ADEP-enabled, you should also now have a new entry in your catalog that looks like this:

<tile:TileClass fitContent="true" height="300" label="Tile1" name="Tile1" width="600">
  <ct:Metadata>
    <ct:Description/>
  </ct:Metadata>
  <tile:Content contentType="application/x-shockwave-flash" flexSDKVersion="3.6.0"
                loadAs="module" uri="${catalogURL}/tiles/Tile1/Tile1.swf"/>
</tile:TileClass>

The tooling does know that your project uses Flex SDK 3.6, and it successfully puts that information in the catalog entry, there should be no need to edit it by hand.

Now create a new CAF application, either in this project or a separate one, using the File->New->Composite Application, and add a reference to this tile:

<tile:TileReference catalog="${catalog}" name="Tile1" label="Tile1"
                    optional="true" width="100%" height="100%" />

Your 3.6-based module tile is now ready for use. You can right-click on the application file and choose Composite Application Framework->Deploy Composite Application, and then navigate to its URL in your browser.

4 Creating a 3.6 UIComponent tile

Follow these steps to create a new Composite Application tile or tiles from a Flex Library project, or to augment an existing Flex Library project so parts of it work as tiles and can be included in a Composite Application.

4.1 Creating the UIComponent project and tile

If you already have a Flex Library project that has a component or components in it that you want to expose as Tiles, skip this step and proceed to the next one, where you’ll modify the existing project to make an existing component into a Tile.

Otherwise, begin by creating a new Flex Library project, File->New->Flex Library project, making sure to choose Flex SDK 3.6. Then create a new component in that project, with File->New->MXML Component. For this example, base your component on mx:Button, and add a label to it so we will recognize it when we see it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" label="3.6 Button Component">
</mx:Button>

So far, there is nothing special about this component. In the next steps, we’ll make it into a Composite Application tile.

4.2 Modifying an existing Library project to make it into a Tile

There are three primary steps to take in order to convert an existing Flex component into a tile. The first is to mark the component as a tile, and then provide it with the necessary libraries to allow it to communicate with the rest of the Composite Application Framework. Second, since a Library project normally only produces a SWC file and CAF needs a SWF to load, we have to create a wrapper project that includes the SWC. Normally, this step is handled by the ADEP tooling, but it’s not supported for 3.6-based projects, so we have to do this step manually. Finally, we have to create a gxml file so that CCF can load the tile.

4.2.1 Prepare the Library Project

Begin by adding the needed library directories to the project. They are:

  • ${AEP_SDKS}/riaservices/mosaic/10.0.0.0/flex3.6.0/frameworks/libs
  • ${AEP_SDKS}/riaservices/gravity/10.0.0.0/flex/3.6.0/libs
  • ${AEP_SDKS}/riaservices/gravity/10.0.0.0/flex/core/libs

Then switch the framework linkage to RSL, which will reduce the size of the tile, and add the following to the Flex Compiler options: -locale en_US -keep-as3-metadata+=Tile,Application,ContextBind,SecurityManager

Finally, update the RSL failovers as described in the earlier section.

You are now ready to add CAF-specific constructs to the project, specifically the [Tile] annotation. If you are using the extended button from the previous step, your new source code would look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Metadata>
  [Tile]
</mx:Metadata>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" label="3.6 Button Component">
</mx:Button>

4.2.2 Create the wrapper project

Create a new ADEP-enabled project, with File->New->Flex Project for ADEP-Experience services, make sure it’s set to use Flex SDK 3.6, and complete the dialog as you did for the section “Creating a 3.6 Module tile project”. Also as in the earlier section, remove the unused libraries, and update the necessary ones from 4.5 to 3.6. Then make this wrapper project depend on the Library project.

Adjust the RSL failovers, switch the project to RSL linkage, and add the compiler options you added earlier to the Library project. Then create a new MXML Module called, for example, “ComponentWrapper.mxml”. This file will be very simple, it serves only to wrap the component in a particular way to enable it to be loaded by CAF:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
           width="400" height="300">
	<mx:Script>
          MyButton;
	</mx:Script>
</mx:Module>

MyButton would be the name of the component you created earlier, or the name of the existing component. If the component is not in the default package, you’d do something slightly different:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
           width="400" height="300">
	<mx:Script>
          include com.acme.MyButton;MyButton;
	</mx:Script>
</mx:Module>

Finally, we have to create the GXML file. This will go in the “mosaic” folder, which is created automatically when you create an ADEP-enabled project. The file should be named “MyButton-com-acme.gxml”, if MyButton is in the com.acme package, or just “MyButton.gxml” if it’s in the default package. The content should be as below:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://ns.adobe.com/gravity/manifest/1.0">
  <bundle location="ComponentWrapper.swf" parentDomain="flex3.6.0">
    <beans xmlns="http://ns.adobe.com/gravity/di/1.0">
      <bean id="MyButtonAdaptedBeanFactory" lazyInit="true" scope="prototype">
        <constructorArg ref="gravityContainer.getBean"/>
        <constructorArg>
          <array>
            <bean lazyInit="true">
              <constructorArg value="MyButtonUIService"/>
            </bean>
          </array>
        </constructorArg>
      </bean>      

      <service interface="com.adobe.gravity.ui.IUIServiceFactory"
               ref="MyButtonModuleUIServiceFactory">
        <serviceProperties>
          <entry key="purpose" valueRef="MyButtonPurpose"/>
          <entry key="description" valueRef="MyButtonDescription"/>
        </serviceProperties>
      </service>

      <bean id="MyButtonModuleUIServiceFactory" scope="prototype">
        <constructorArg ref="MyButtonAdaptedBeanFactory"/>
      </bean>

      <bean id="MyButtonCreator" factoryMethod="createWrapper" scope="prototype">
        <constructorArg ref="gravityBundleContext" index="0"/>
        <constructorArg value="com.adobe.threesix.components.MyButton" index="1"/>
      </bean>

      <bean id="MyButtonPurpose" lazyInit="true">
        <constructorArg value="${catalog}/com.adobe.threesix.components.MyButton"/>
      </bean>

      <bean id="MyButtonDescription" lazyInit="true">
        <constructorArg value="MyButton's UI Service"/>
      </bean>
      <bean id="MyButtonUIService" parent="MyButtonCreator"
            lazyInit="true" scope="prototype">
      </bean>
    </beans>
    <flexModule sdk="3.6.0"/>
  </bundle>

</manifest>

It may be instructive to compare this gxml file with one that the Tooling generates automatically for a Library component tile built with SDK 4.5. You may see several differences, but only some of them are significant. Many of the “id” attributes serve only as identifiers within the gxml, and need only match each other where they appear, but their actual names are not significant. However, there are a couple of instances where the values of strings are important:

  • The bundle element’s location attribute must name the swf built by the project.
  • The constructorArg value attribute in the “Creator” bean and the “Purpose” bean must have the fully qualified class name of the wrapped component that you marked as a Tile.

Even though this tile is ADEP-enabled, an entry in the catalog will not be generated, because nothing directly inside the project was marked with the [Tile] annotation. Therefore, we need to add an entry manually to the catalog. In this case, it will refer to the gxml file we created, rather than the swf. The entry should look like this:

<tile:TileClass fitContent="true" height="300" width="600"
                label="com.acme.MyButton" name="com.acme.MyButton">
  <ct:Metadata>
    <ct:Description/>
  </ct:Metadata>
  <tile:Content contentType="application/xml" flexSDKVersion="3.6.0" loadAs="module"
                uri="${catalogURL}/tiles/com.acme.MyButton/com.acme.MyButton.gxml"/>
</tile:TileClass>

You can now add a reference to this tile in your application:

<tile:TileReference catalog="MixedSDKS"
   name="com.acme.MyButton" label="My Button" optional="true" width="100%" height="100%" />

You’re finished!

 

What is ADEP?

Our recent release of the Adobe Digital Enterprise Platform contains not only software but a library of documentation that has been authored by the Adobe Learning team with direct input from all our engineers around the world.

One of our most important documents is a very short introduction that you read first, called “Adobe Digital Enterprise Platform Overview“. This was a very tricky document to write because there is a lot to say about ADEP, from its architecture & guiding principles to a precise description of each of the components and frameworks offered to developers. But how do you do that with accuracy while at the same time being extremely brief ..?

Well I think we managed it. The Overview gives enough information for anyone to quickly understand (in plain simple English) what ADEP is all about, starting with a simple graphic and then describing all the basic features and capabilities:

You can read it online at Adobe Digital Enterprise Platform Overview, or if you would like to skim a PDF, I have attached a copy here:

Also we have been editing and validating all our ADEP Technical Documentation. You can browse the whole library here:

In particular, I suggest you make a bee line for the document called “Developing for ADEP Experience Services“. This is intended to give you as a developer a total gloves-off crash course on the new Experience Server, with links to more detailed information too. You can check that one out here:

We hope you find the documentation useful and we are always improving it. You can also log on and add comments & feedback if you see an error or just have a suggestion.

Happy hacking-

Gary.

 

Solution Spotlight: A look inside Integrated Content Review

I’d like to continue my Solutions focus this week with a look at the architecture of another solution built on top of ADEP – “Integrated Content and Review”.

This solution was originally designed by our Solutions Engineering team to help manage document approval work flows. This worked by authoring a “template” that defined stages in a review with participants in each stage. One of the great things about that solution (compared to a typical BPM process) is that it was dynamic. You could actually tweak the review participants while the approval workflow was “in flight”, or even force it into another stage from a management console.

The team took this concept a step further, by building “Integrated Content Review” on ADEP with a focus on Creative Campaigns (for example advertising). In addition they provided integration with Creative Suite for creative professionals to interact with the solution right within Photoshop.

If you would like a look at the live Integrated Content Review solution, check out the YouTube recording made this week on ADEPDevelopers

Here is a high level architecture diagram of how the Solution Engineering team designed their solution, pointing out some important aspects of ADEP it relies upon:

(Click to enlarge)

As in my last example, the solution is presented through a web portal application that takes advantage of ADEP UX Components (a design technology for end user applications, see: Craig Randall’s post at what is a UX component)

The solution is constructed again using “Building Blocks”. These Building Blocks (you see two of them) contribute both UX Components to the web application and additional Services that run on both the Experience Server and Document Server. Building Blocks are individual Packages that Adobe and our partners use to deliver consistent repeatable solutions. For example, Integrated Content & Review could share these Building Blocks with other solutions that need similar functionality (such as creating a project schedule)

Looking into the Building Blocks used by Customer Communications we see:

Project Management”. This Building Block provides the UI and Services needed to manage multiple “projects” that might run simultaneously during a campaign. These projects can be related to each other (such as one project dependent child projects). Projects can also have “assets” which are work items that need to be produced during the project according to “schedule’ of participants who need to review and approve the assets.

Here are some interesting points to note about the design:

  1. Projects are defined as “templates” which get stored as content in the CRX Repository via Data Services (with our built an “Assembler” for JCR). There is a Project Manager Core service that provides all the operations necessary to create and update project templates or even create a new template that extends from a common base template. These project templates are based on the Apache Velocity project.
  2. There is a Work Item Handler which is responsible for scheduling activities needed for assets in a project. For example, creating a Task for a creative professional to provide an image. The Work Item Handler invokes a service in the RCA Building Block that in turn manages the events needed to trigger notifications and work flow processes.

Review & Comment”. This Building Block (also called “RCA”) provides the UI and Services need to manage a review cycle for content. That is the initiation, revision, revocation and update of a review for “assets” that are being created as part of a project.

Here are some interesting points to note about the design:

  1. A Template Engine (Apache Velocity) executes the Template in order to to trigger “schedules” that involve assigning review tasks for project assets at different stages of the project.
  2. The Building Block contains a service used to dispatch events used by the solution to trigger notifications or to advance a review stage to the next reviewer. This eventing system is internally based on Spring Events.
  3. The Scheduler Service is used to actually trigger Process Management Tasks on the Document Server by invoking Orchestrations that are provided as part of the Building Block. All such invocation from the Experience Server is performed using the Document Services SDK. When stages of an Orchestration complete there is a call back mechanism that helps the Scheduler manage the review, for example when a review Task on the Document Server has been completed. This is performed using a DSC that calls back to the Experience Server.
  4. Sometimes a Task might not be to review existing content but to create new content. In this case the Scheduler can create a Task that will be visible in Photoshop as part of a “Task List” UI (part of Project “Salsa”). A user in Photoshop then creates the requisite asset which then gets used as the payload of the Task he/she completes.
  5. The Building Block takes advantage of PDF as the standard format for all assets being reviewed and will convert assets to PDF automatically when needed. This relies on the PDF Generation and PDF Assembler Document Services running on the Document Server.

These Building Blocks are deployed on ADEP (both Experience Server and Document Server). Document Server integration is of particular importance to this solution because of the reliance on Process Management (used by RCA to generate Tasks and route them to end users). In addition the solution depends upon the Document Server for Identity Management (Users and Groups) typically integrated with an organization’s LDAP.

There is some more information about this solution on adobe.com at: Integrated Content Review

Solution Spotlight: A look inside Customer Communications

I thought I would take a slight detour from the core ADEP Platform frameworks this week and share with you some insight on one of our Solutions built on top of ADEP, “Customer Communications”.

This solution was designed by our Solutions Engineering team to address a pattern seen over the years with our Document Server customers, particularly financial  institutions. As part of a typical document based workflow (like replying to a dispute initiated by a customer on a web site) it is necessary to quickly draft a letter based not only on common paragraph segments but dynamic data; say the personal information of the customer and the legal requirements of the State / Province in which the dispute was made. Such letters might need to be crafted on screen by a business user or they might be generated automatically.

Here is a high level architecture diagram of how the Solution Engineering team designed their solution, pointing out some important aspects of ADEP it relies upon:

The solution is presented through a web portal application that takes advantage of ADEP UX Components (a design technology for end user applications, see: Craig Randall’s post at http://craigrandall.net/archives/2011/06/what-is-a-ux-component)

The solution is constructed using “Building Blocks”. The Building Blocks (you see three of them) contribute both UX Components to the web application and additional Services that run on the Experience Server. Building Blocks are individual Packages that Adobe and our partners use to deliver consistent repeatable solutions. For example, Customer Communications shares some of these same Building Blocks with other solutions.

Looking into the Building Blocks used by Customer Communications we see that:

  1. A “Data Dictionary”. It is used to manage all the templates and letter assets that are used to generate letters. This data is stored in the CRX Content repository (JCR compliant). The Data Dictionary also integrates with external sources of data (like SAP Web Services or custom databases) to get data used in letters such as customer address details etc. Both the storage of letter assets in the CRX repository and integration with third party data sources is provided via Data Services as a standard framework in the Experience Server.
  2. An “Asset Composer”. This provides the UI and Services needed to author new letter templates and letter assets (paragraphs). The Asset Composer integrates with the Document Server to render letters (needed during authoring) by invoking customizable Orchestrations which in turn rely on our standard Document Services. It also persists those assets and letter templates in the CRX repository, again using Data Services.
  3. An “Expression Manager”.  This is a technology for auto completing additional data (for example calculating an age based on DOB) as well as data validation (required fields, formatted strings etc.). It offers a server side service that is used by the Data Dictionary to augment known data (e.g. a customer name and address) with additional derived data as one record ready for inclusion within a letter (e.g. a ZIP code). It also provides UI libraries for defining and calculating these expressions.

These three Building Blocks are deployed on the ADEP Experience Server. In addition to Data Services and CRX, the other technology point of particular need to this solution is Document Server integration because the solution includes a set of customizable orchestrations around generation of letters using PDF Forms and Assembler. This aspect of the Experience Server provides seamless integration with process orchestrations and User Security which is needed at both design time (using Forms to render letters for preview) and run time for generation of letters.

There is some more information about this solution on adobe.com at: Customer Communications

Happy Hacking

-Gary.

Mobile Application Development

This video demonstrates how to create a mobile/tablet application in under 15 minutes without writing a single line of code.

The result is fully functional mobile application. Once completed, you will understand how to initiate and submit a time-off request. The request can then be viewed and approved from a mobile device.

Specifically, we will cover the creation of an Adobe Data Model, a Guide, a PDF and an ADEP process.

Mobile Application Development on ADEP (Part 1)

Mobile Application Development on ADEP (Part 2)

Creating a Basic Two Tiles Composite Application

This tutorial shows how to create a basic two tiles Composite Application (formerly known as Mosaic) and deploy/tests it on the Experience Server.

If you would like to watch some videos on building a Composite Application be sure to check out the Playlist on YouTube:

Composite Applications Development on ADEP

Prerequisites

  • Experience Server started (for this tutorial the server is running locally)
  • Flash Builder 4.5.1 installed
  • ADEP Flash Builder Tooling plug ins installed and configured, RDS enabled on server. (*Note: See how to set up a clean system)

Cheat Sheet

Please read the document here for a step by step cheat sheet on creating your application from scratch in Flash Builder:

Two Tiles Composite Application Cheat Sheet