Posts in Category "Flex"

Real time notification using Data Services in ADEP

With the release of ADEP and the introduction of the Experience Server (RIA services running on the CRX stack), developers now have access to data services within the ADEP Core (previously known as CRX) runtime. This means that data services components are now deployed as OSGi bundles in ADEP Core. This opens now interesting doors for developers building content-oriented applications (like the app we will build during my BYOD lab at MAX), In this post, I will talk about how you can leverage the data services MessageBroker to push notifications to Flex clients that a node in the ADEP content repository has been added or changed. There are many use cases for this functionality, but the one I find most exciting is in the context of mobile application development.

Imagine you have a mobile application that displays information stored on a server – of course we would use the ADEP content repository for this! The challenge for these types of applications is how to keep that information in sync. Make the user request a refresh? Build some sort of polling mechanism? Why? ADEP data services already has this problem solved with real time messaging. The trick is how to send a message when a node is updated or added (or even removed) in the repository. Before we tackle this challenge, lets look at how data services has been adapted to run within the ADEP Experience Server.

If we are going to use data services messaging, we have to add a destination to the messaging-config.xml file right? You bet, but where can we find this file? Not on the file system that’s for sure. We have a content repository now. The best way to access the content repository as a developer is either to use CRXDE (an Eclipse-based IDE for ADEP Core) or CRXDE Lite (a web-based IDE for ADEP Core). For the purposes of this post, I am going to use CRXDE Lite.

Step 1: Creating a destination

To access CRXDE Lite on your machine (running ADEP Experience Server or the ADEP Solution Quickstart) navigate to http://localhost:4502/crx/de/ in your favorite browser. In this image, you see that the JCR repository path is /etc/aep/config/dataservices/messaging-config.xml.  You can open the file by double-clicking it. You will notice something different about the include statement in the file. Instead of pointing to a specific file to include, we are pointing to a repository folder location.

<destination-include directory-path=”destinations/messaging”/>

What this means is that the MessageBroker will iterate through each file located in the destinations/messaging folder and read in the configurations it finds. Which means that if we want to add a new destination, we need to add a new file in this location. In my sample, I created a file called com.adobe.tm.flex.broker.messaging-config.xml the contents of this file is typical destination config information:

Step 2: Loading configuration changes

This defines a new destination called “flexmobile“. The only thing left to activate this new destination is reload the MessageBroker class. In the J2EE version, this means bouncing the app server or some other weird incantation. Remember that in ADEP, Data Services is now a set of OSGi bundles.To reload MessageBroker to pick up the new configuration changes, we need to access the OSGi (Felix) console. On your machine, navigate to http://localhost:4502/system/console/configMgr. Click on the Components button in the toolbar and locate the following class: com.adobe.dataservices.impl.ApplicationManagerImpl

In the actions column, click on the stop icon. Once the component has stopped, the icon will change to a play button. Click it again to start the component. This will trigger the MessageBroker class to reload the configuration xml files.

Step 3: Creating a bundle to send a message via MessageBroker

Back to our original scenario. We want to send a message via message broker when a node in the content repository changes. A very simple approach to setting this up is to use the ADEP WEM workflow engine. It has built-in launchers that can be triggered by content repository node events like update, add and delete. What I did in this case, was build an ADEP OSGi bundle that implements the workflow execute() interface so it can be called from a workflow process. Since this post is not meant to be a complete tutorial on how to develop on ADEP Core, please refer to Defining a Process Step: with a Java Class for detailed steps and examples. Here is the code from the bundle class:

/*
 * @author: Marcel Boucher (mboucher@adobe.com)
 * MessageBrokerProxy class
 * This class is an implementation of a customer workflow step that can be used
 * to publish messages to the dataservices message broker running on this server.
 * 
 */
package com.adobe.tm.wf.dataservices.messaging;

import com.day.cq.workflow.WorkflowException;
import com.day.cq.workflow.WorkflowSession;
import com.day.cq.workflow.exec.WorkItem;
import com.day.cq.workflow.exec.WorkflowData;
import com.day.cq.workflow.exec.WorkflowProcess;
import com.day.cq.workflow.metadata.MetaDataMap;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Properties;
import org.apache.felix.scr.annotations.Property;
import org.apache.felix.scr.annotations.Service;
import org.osgi.framework.Constants;

import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Date;

import flex.messaging.MessageBroker;
import flex.messaging.messages.AsyncMessage;

import javax.jcr.Node;
import javax.jcr.RepositoryException;
import javax.jcr.Session;



@SuppressWarnings("unused")
@Component
@Service
@Properties({
        @Property(name = Constants.SERVICE_DESCRIPTION, value = "Send Message to Data Services MessageBroker."),
        @Property(name = Constants.SERVICE_VENDOR, value = "Adobe"),
        @Property(name = "process.label", value = "Send to MessageBroker")})


public class MessageBrokerProxy implements WorkflowProcess
{
        private static final Logger log = LoggerFactory.getLogger(MessageBrokerProxy.class);
        private static final String TYPE_JCR_PATH = "JCR_PATH";

        public void execute(WorkItem item, WorkflowSession session, MetaDataMap args) throws WorkflowException 
        {
            //Collect Message information from the dialog.
            String destination = args.get("destination","not set");
            // Default Messagge.
            String messageBody = args.get("message", "not set");
            
            //Set the message to contain the path of the node that has changed.
            WorkflowData workflowData = item.getWorkflowData();
            if (workflowData.getPayloadType().equals(TYPE_JCR_PATH)) {
                String path = workflowData.getPayload().toString() + "/par";
                messageBody = path;
            }
            
            //Create a new message.
            AsyncMessage msg = new AsyncMessage();

            msg.setClientId("ADEP-Experience-Server");
            msg.setTimestamp(new Date().getTime());
            //you can create a unique id
            msg.setMessageId("ADEP-Experience-Server-Message");
            //destination to which the message is to be sent
            msg.setDestination(destination);        
            //set message body
            //msg.setBody(messageBody != null?messageBody:"");
            msg.setBody(messageBody);
            //set message header
            msg.setHeader("sender", "From the server");

            //send message to destination
            MessageBroker.getMessageBroker("__default__").routeMessageToService(msg, null);
          
    }
}

Notice that the getMessageBroker() uses the __default__ argument which is to indicate the instance currently running in the same container.

Step 4: Create and configure the workflow

The next step is defining a workflow that will invoke our custom class when something in a specified node tree changes. You can access the workflow console on you machine using this url: http://localhost:4502/libs/cq/workflow/content/console.html

In the Models tab within the Workflow Console, click the New button and give your new model a meaningful name. For example “Post to Message Broker”. Double click on the newly created model to edit it. Delete the default user task from the model and add the custom step you created in the previous step from the Workflow group in Sidekick. You can double click the step to access it’s property dialog and configure additional settings. When you are done editing, click the Save button to return to the Workflow Console.

That’s it for the workflow model. All we want it to do is call our custom class to post a message to the MessageBroker.

The next thing we need to define is how this new workflow model will be launched. From the Workflow Console, click on the Launcher tab. You will see a significant list of launchers that are pre-configured in the system. We are going to add a new launcher, so click on the Add… button. Complete the launcher configuration settings and click OK.

ADEP will now monitor the node located in the path provided and launch the specified workflow when that node is modified.

The next step is to build a Flex application that subscribed to the MessageBroker destination and handles the messages it receives.

Step 4: The message consumer

Create a typical Flex application, you will need the FDS.swc library of course to use messaging. Simply define a consumer like you would with regular data services


<span><<span>mx</span>:Consumer id="consumer"</span>
<span> destination="<span>flexmobile</span>"</span>
 message="messageHandler(event);"
<span> fault="<span>faultHandler</span>(event);"/></span>

All you have to do now is build your handler functions and you now have real time notification of ADEP content repository changes. Go on and start building your content-driven applications.

TIP: Transitioning Flash Builder ADEP tooling from ADEP prerelease to release build

,,

Like any other software package that moves along a release cycle, final tweaks were made to ADEP that can cause some inconsistencies for those of us that used a previous builds. In this case, I have found one of these inconsistencies while using the latest Adobe Enterprise Suite Extensions in Flash Builder 4.5.1 to create a Composite Application Framework (previously known as Mosaic) project.

When you create a Composite Application in Flash Builder, you will notice that a new folder called catalogs will be added to your workspace. This folder is a local “cache” of the Composite Application Framework catalogs that are stored in the ADEP experience server repository. When you install the experience server, you automatically get a default catalog aptly named default.cxml. Of course, you can create multiple catalogs for your Composite Applications - but that’s for another post.

 

If you have used previous prerelease builds of ADEP to create Composite Applications using Flash Builder, you will have this catalogs folder in your Flash Builder workspace. When you upgrade to a newer ADEP build, you need to delete this folder from your workspace before attempting to create a new Composite Application. One of these tweaks that has occurred between builds is that some tile definition attribute names have changed in the cxml file. Therefore, if you continue to use the old cxml format and try to deploy a new Composite Application, an error will be displayed in Flash Builder. The error will likely refer to the use of an invalid attribute called initialHeight - which has been changed to height.

Of course, deleting the catalogs folder means that existing Composite Applications you may have created in previous builds will no longer be registered in the repository. If you would like to keep your existing applications, then you would simply have to manually append your applications and tiles to the new default.cxml. Just be mindful to change the appropriate attributes like intialHeight to the new names. Don’t worry, the default.cxml has a commented block at the beginning that describes all of the attributes you may need.

Announcing Adobe Digital Enterprise Platform

Today, we announced the Adobe Digital Enterprise Platform. This is a very exciting time for Adobe and every organization looking to deliver customer experience solutions that truly meet market requirements. Too many times software companies talk about things to come and how they can make it better. Customer Experience Management is not a future trend, the time is now. The Adobe Digital Enterprise Platform is built to enable developers to deliver the best multi-channel experience possible – whether it’s HTML5, Flash or AIR.

You may be asking yourself, so what’s the big deal about ADEP, I could do the above with Flex and jQuery, etc. The big deal is that with the combination of CRX (from the Day acquisition) and LiveCycle ES which is now ADEP, you now have a modular platform where web scalable capabilities such as data services and composite application framework (previously known as Mosaic) run on the lightweight Experience Server core (CRX) and enterprise scalable capabilities like process management and document services run on the Document Server on JEE(LiveCycle).

Add that to what you can now build in Flex 4.5 for mobile and browser as well as HTML5 within dreamweaver, you now have one killer platform and best of breed tooling to leverage your existing IT investments.

Now that we have reached public announce, you will see a lot of backlogged information hit the bloggosphere pretty fast. Actually, I am hosting two sessions this week: one on Tuesday as part of the Developer Deep Dive sessions and another on Thursday as part of Flex Developer Week. You can also check out the new CEM website for more information on the awesome solutions that we will be releasing on top of ADEP. Rob Tarkoff also posted on the Adobe blogs an excellent overview.

Of course we will be showcasing all of this great stuff at Adobe MAX 2011and for the first time, we will also be hosting our first Digital Enterprise Summit October 3-4 in LA as well.

Stay tuned, we’re just getting started!

 

iPhone and iPad added to the list of targeted clients for LiveCycle ES

Yesterday, Apple announced that it has lifted restrictions in regards to third-party developer guidelines. I think this is good news for some enterprise developers that are looking to target “iDevices” as clients for their enterprise applications. By using the Adobe’s Packager for iPhone in CS5, developers can deploy their apps via the App Store. As mentioned in the blog post from Adobe Corporate Communications, the strong partnership between Adobe and other device manufacturers to get Flash Player and AIR running on their devices provides enterprise developers with an impressive reach for mobile.

Flex 4 Certification Study Released

For those of you looking to become an Adobe Certified Expert on flex 4, check out Attest 3.0. Holly Schinsky and David Flatley have released the latest version of their certification study tool. Of course, it’s an AIR application :)

A nicely done app that features mini and full exams with random questions.

My designer to developer preconference session at MAX

I plan on running a preconference session this year at MAX to showcase some really cool stuff for enterprise application developers. If you have not signed up for this session, you should have a look at this. It might change you mind :-)

With the release of CS5 which includes Photoshop, Flash Builder 4 and Catalyst; provides a completely different approach to building enterprise applications. Imagine being able to start from a Photoshop image that represents the application interface. Blow is a screen shot of the login state of the application in Photoshop.

image

The second step is to import that image into Catalyst and use it to convert the artwork from Photoshop into controls. There is much more to Catalyst. You can define design-time data which enables you to run your prototype to see how it would work. The image below shows Catalyst processing the image from Photoshop. This image shows that a second state has been defined. Many properties like transitions can be easily configured.

image

Then, once all of the user interaction patterns have been defined, import the project (FXP) into Flash Builder 4. All of the components are available for coding. This is where we will leverage the LiveCycle Service Discover Plugin to hook up the application to LiveCycle ES. This could be any service made available by your LiveCycle ES server. In our case, we are using two simple processes that expose Content Services functionality. The first service retrieves a list of documents in a specific space. The second service enables the application to retrieve a document based on the user’s selection. And while we are at it, apply a Rights Management policy to the document to encrypt it on the way out. In the following image, you can see our project in Flash Builder 4. At the bottom are the LiveCycle ES services.

image

As you can see, this stuff is really cool and is just a sample of all the stuff we will cover in the preconference session.

AIR application creation for dummies… like me!

Today, a brand new project call Adobe AIR Launchpad has been posted on labs.adobe.com. This utility makes the creation of Flash Builder 4 AIR application projects painless. For those of us that have created AIR applications, we all know the many configuration settings (sometimes confusing) required to have a transparent application with a custom install badge and icons. Not to mention the coding required to center the app on the screen, add native menu support, etc.

This is where the Adobe AIR Launchpad comes in. This small, but very valuable utility (also built on AIR) provides an intuitive and easy to understand visual interface that exposes these low-level options via simple checkboxes. Now THAT is going to save me loads of time. This utility was written by one of the developers that brought us Tour de FlexHolly Schinsky aka DevGirl. You can read her post about the app on her blog.

 image

But wait… there’s more!

Really? Can it be Marcel?

Yes, it can… Holly and the rest of the team have built enough AIR applications to know that there is a number of recurring things that many AIR apps require. If we look at the Samples section, we see that these application patterns are available for our new application. By selecting one or more of these patterns, the generated project will include the Tour de Flex samples which give you a major kick start in the right direction.

image

I highly recommend that you get the Adobe AIR Launchpad and give it a try. I am sure you will come to the same conclusion I have – this is going to be a major time saver!

New blog for Michaël Chaize

If you want to follow one of the most creative and talented guys in the enterprise RIA game, check out Michaël’s new blog RIAgora. I know I will. 

Interesting article on HTML 5 and Flash

I just read an interesting article posted by Greg Wilson about the current debate about Flash and HTML 5. While I understand the widespread excitement about something new happening in the world of HTML (it’s been a long time coming), I am surprised by the amount of noise around how HTML 5 will be the Flash killer.  Seriously?!?! I know it’s been a long time since HTML 4, but have we all forgotten the issues around browser fragmentation and compatibility issues? With newer browsers like Chrome in addition to the fragmentation of versions of IE and Firefox for example just screams of managing multiple implementations.

Don’t get me wrong, I truly believe that HTML 5 is a great thing. The more you commoditize features, the more vendors like Adobe have to innovate. Everyone wins. HTML 5 and Flash go hand in hand like HTML 4 and Flash do today. I especially like Greg’s analogy of using Flash to replace all your <IMG/> tags. That is absurd. Just as absurd as thinking that HTML 5 will provide everything Flash can do consistently across browsers and OSes.

My Sessions at MAX 2010

Again this year, I will be presenting at MAX. In addition to the regular track sessions, I have signed up to host a full day pre-conference session called “Creating Enterprise RIAs: From Design to Implementation”. For the past few months, I have been running Adobe Enterprise Developer Days where we take a look at the new possibilities that are now available with the release of CS5. Using a new comer to the CS lineup – Catalyst, we can now bridge the gap between the visual designers and application developers. Catalyst is able to import visual assets from other CS tools such as Photoshop and Illustrator. Once the visual assets are imported, Catalyst can then be used to convert artwork into components – while maintaining visual fidelity!!!!

image

During these Adobe Enterprise Developer Days, I have been demonstrating how you can take a Photoshop PSD file with multiple layers into Catalyst and actually build a functional prototype. I won’t go into all the features here, but for a sneak peak, check out this recording of Kevin Lynch demonstrating Catalyst at the Web 2.0 conference.

Once all the interactivity is defined in Catalyst, I then import the project into Flash Builder 4. Using a wicked cool plug-in that the LiveCycle ES team has created – The LiveCycle Services Discovery Plug-in for Flash Builder, I can then wire up the project to real enterprise-class services. Trust me, this is a jaw dropper!!! And this is the reason I have agreed to do a full day pre-conference session at MAX this year. The ability to bridge the gap between the visual designers that can deliver on the requirements of usability and experience and the application developers that need to translate them into back-end transactions is invaluable. 

The other session I will be hosting is called “LiveCycle Data Services in the Cloud”. For a while now, Adobe has been working closely with Amazon’s EC2 offering to provide hosted services for our enterprise software. LiveCycle ES has been the first product line to embrace this approach. For over a year now, we have made LiveCycle.express.adobe.com available to our Adobe Enterprise Developer Program members as a benefit to their membership.  LiveCycle.express.adobe.com is basically a provisioning system to enable EADP members to launch and manage their own instance of LiveCycle ES in the cloud. We have evolved this offering to support customers that whish to use LiveCycle ES in the cloud in production as a single-tenant system.  We launched Adobe LiveCycle Managed Services in January 2010. As this new offering is taking off, it just makes sense to extend the reach to LiveCycle Data Services. During my BYOL (Bring Your Own Laptop) session, I will walk through how to launch your own LCDS instance in the cloud and start building enterprise-class applications that leverage the hosted instance.

Make sure you sign up now at http://max.adobe.com !