The BAM Wizard helps you monitor your data by creating a separate table in your LiveCycle’s database for each process that has the component. The wizard consists of 5 sections, 4 of which require you to input some data in order to create the table and appropriate fields in the database.

Adobe BAM Wizard

Connection:  Needs to be filled once (the first time the wizard is used). On this page you set the data source, BAM Server URL, BAM Server Username, and the BAM Server Password.

Data: This is the page on which you specify what needs to be monitored by the BAM wizard through XPath expressions. You can also delete or modify previously added XPath expressions here in this section.

Type: This is the section where you need to define the data types of those process variables you added in the previous section.

Views: In this page you can add functions such as SUM, Average etc. (depending on the data types you have)

Parameters: This is the section in which the wizard shows you the XML string that tells what will be sent to the BAM server by the component in order to interact with the data.

You won’t get to use this component unless you install SP1 or SP2. Even then, LC Workbench requires you to install the component manually. After installing one of the service packs, you will see a folder named “LavaActivitySuite” under the “Adobe LiveCycle ES2\LiveCycle_ES_SDK\misc\” folder.  In that folder, you’ll find a document that contains instructions on how to install the BAM Wizard.

In conclusion, the BAM wizard is worth a look if you are looking for a fast and easy way to create dashboards which present business data in an easy-to-read format.

Well, in my case, I had to create a custom model with a bunch of properties that can be retrieved within LiveCycle.  I found out that Alfresco Module Package (AMP) files are used in order to extend repository in LC Content Services.

I have attached a sample AMP file which you can modify and use in your own applications by following the steps given below;

1. module.properties

This is the first file that you will see after extracting the content of the AMP package. Locate the line where you put “moduleid” and then replace it with the name of the folder within \config\alfresco\module\ folder.

2. yourmodelnameModel.xml

The XML file that ends with the word “model”, located in config\alfresco\extension should be named same as the “moduleid” which we defined in the previous step.

First, set the moduleid in the namespace node and then replace the prefix value with your own.

Also, don’t forget to change all the prefix values used in name attributes within the whole XML file.

3. custom-metadata-extractors-context.xml

Replace the model filename with the one you used in your xml model file; and then replace the prefix definitions and keywords located in the “mappingProperties” section.

4. yourmodulename_strings.properties

You’ll find this file in the “\config\alfresco\messages\” folder. This is a simple text file which allows you to set the label values of your properties displayed in LC Content Space.

5. module-context.xml

This xml file is located in the \config\alfresco\module\yourmodulename\ folder. Change the name of the xml file in the  section that has the “resource” configuration.

6. yourmodelname-service-context.xml

This file can be found in the \config\alfresco\module\yourmodulename\context folder.

Change the list values of “configs”, “resourcebundles” and “model” properties accordingly.

7. web-client-config-yourmodulename.xml

This is the xml file in which you define what to be shown in the “More Options” panel in your content space. You can also match properties defined earlier in Step 2 with the “display-label-ids” that will be used when the aspect is applied.

The format of an AMP file is similar to that of a ZIP file. Basically, an AMP file is a collection of XML, image, CSS etc. You can extract the content of an AMP package using WinRAR. However, I couldn’t create a brand new AMP file just by compressing the content files using WinRAR. LiveCycle fails to deploy AMP packages created by WinRAR. I was in a little bit of a hurry so I found a sample AMP package, opened it with WinRAR and replaced the files with the ones I created. It worked like a charm! Once your AMP package is deployed successfully, you can see your model from workbench in the aspects list.

Working with custom aspects in LC Content Services

Deploying AMP packages to LC Content Services is a whole another subject matter which will take more than one post to explain, so I’m not going to touch on it here.

Below is the link which contains all the steps to deploy an AMP file to LiveCycle Content Services;

http://www.drflex.eu/2008/10/extending-adobe-document-management-with-even-more-functionality/

The performance concept is also another issue that should be taken into accout at client application side. Flex is one of the best option with the reason of using AMF (Action Messaging Format), which offers fast and efficient communication  with help of binary format. There is another important reason that LiveCycle Service Discovery Plug-in is available to find and generate any service resource at the client application. Let’s take a look at Flex solution provided below for the scenario that retrieving the contents stored and managed by Content Services software.

-          Install LiveCycle Service Discovery Plug-in for Flash Builder

You can find the details here

-          Find and define DocumentManagementService in the LiveCycle services list

Once connecting to LiveCycle ES data services, then you will be able to search service list

<fx:Declarations>
    <services:DocumentManagementService fault="documentService_faultHandler(event)" result="documentService_resultHandler(event)"/>
</fx:Declarations>

-          Test and call getSpaceContents method

The method is available under DocumentManagementService definition, and it can be tested via Test Operation tool inside Flash Builder

private function retrieveContentsAction():void {
	documentService.getSpaceContents(storeLoc.text,spaceLoc.text, false);
}

Testing getSpaceContents method with Test Operation Tool

-          Bind result to a datagrid component

The result is returned as a list of retrieved contents and a datagrid component can be used to visualize those contents. In the example, I have created an auxiliary class named ContentInstance to format the result list.

protected function documentService_faultHandler(event:FaultEvent):void{
	Alert.show(event.fault.toString());
}

protected function documentService_resultHandler(event:ResultEvent):void{
   var returnObj:ArrayCollection = event.result as ArrayCollection;
   productList = new ArrayCollection();
   for(var i:int=0; i<returnObj.length; i++){
	   var atmapObj:Object = returnObj[i]["attributeMap"] as Object;
	   var docObj:Object = returnObj[i]["document"] as Object;
	   var ci:ContentInstance = new ContentInstance();
	   ci.guid = atmapObj["{http://www.alfresco.org/model/system/1.0}node-uuid"] as String;
	   ci.documentName = atmapObj["{http://www.alfresco.org/model/content/1.0}name"] as String;
	   ci.documentCreator = atmapObj["{http://www.alfresco.org/model/content/1.0}creator"] as String;
	   //ci.documentLink = atmapObj["{http://www.alfresco.org/model/content/1.0}browse-link"] as String;
	   ci.documentLink = docObj["url"] as String;
	   productList.addItem(ci);

	}
}

Display contents in Datagrid component

I think anybody tries to develop the same will aggree with me on that it is very easy and fast to develop an application running on LiveCycle ES platform by using Flex. Especially, testing and defining a service with help of service discovery plug-in makes application development and unit testing of LiveCycle’s services really exciting.

Rendering PDF in Flex Client

The main problem with Flex client application was that displaying PDF document in a popup window. I have read almost every articles about displaying PDF in Flex application and then I realized that the best way to achieve the same is using google’s iframe component. But, the problem about iframe was that it crashes once direct URL of PDF document is assigned as its source. So as required in the usage scenario, PDF documents are the contents stored in the system and they should be viewed directly. Generally, the solution is that using a temprorary HTML, which gets rendered to initialize Iframe instance, and then the direct URL of PDF can be provided as its source. Please find the solution’s detail below.

- Define an IFrame instance in Flex by making it disabled.

<flexiframe:IFrame id="iframe" source="docViewer.html" backgroundColor="gray" width="100%" height="100%" visible="false"/>

- Generate an HTML resource by including only a couple of mandatory HTML tags

<html>
    <body>
    <h1>Creasis - HTML Test</h1>
   </body>
</html>

- Develop a popup window function to display IFrame instance

private function showDocumentAction(doclink:String):void {
	var showContDoc:DocumentViewer=DocumentViewer(PopUpManager.createPopUp(
		this, DocumentViewer , true) as spark.components.TitleWindow);
	showContDoc.addElement(outerDocument.iframe);
	outerDocument.iframe.visible = true;
	outerDocument.iframe.source = doclink
}

<s:Button label="Show Doc" width="75" click="showDocumentAction(data.documentLink)"/>

As you can easily see that, temprorary HTML resource is just used to help rendering IFrame instance. So the solution can be thought as ineffecient one and it will be invalid once the IFrame is improved for displaying PDF’s URL directly. I also aggree with the idea that IFrame should not be used for displaying a document within Flex application. To overcome such problems, AIR based client application should be considered seriously.

From SOA viewpoint, such coupling between partners is unacceptable. To overcome this problem there is Event structure in SOA, and Event is a data type defined in Data Model which is presented in overall architecture. Processes share Data Model including particular events and publish-subscribe mechanism is handled by the system automatically. It means that any process can publish any event to inform its subscribers without knowing them; similarly, any process can be subscribed to an event without knowing its producer. It also means that there is no need to change any implementation once a new partner joins to that event no matter that it is a producer or subscriber.

There are many SOA solution environments including business event structure as well. For discovering the product, I tried to implement publish-subscribe event scenario in Adobe’s LiveCycle Enterprise Suite. Firstly, I created publisher process named as Translation Process that gets the inputs from the user and throws an event about translation. Then I created subscriber process named as Subscriber Process that is got started once it receives an event produced for translation. Briefly the scenario is that once the user enters inputs for translation, which are input text, source language, target language; and then a human task created for reviewing the inputs. CreasisBA user group is assigned to execute review task; and once the task gets approved by them, then the Task Completed event is thrown otherwise the process is halted. Task Completed event is a built-in event definition in LiveCycle ES2; and Subscriber Process has a start point that listens that type of events. Once any of such an event is received, then another human task is created by assigning to Creasis Developer user group. That’s why I wanted to keep the implementation as basic one, after the human task is completed in the subscriber process then it gets finished. I mean it will be an external web service call to complete translation process.

Figure 1 : TranslationProcess in EventPublisherApp

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
	<xsd:annotation>
		<xsd:documentation xml:lang="en">
			Adobe LiveCycle Workbench ES2 Translation XSD
       </xsd:documentation>
	</xsd:annotation>
	<xsd:element name="Translation">
		<xsd:complexType name="TranslationInfo">
			<xsd:sequence>
				<xsd:element name="SourceLanguage" type="xsd:string" />
				<xsd:element name="TargetLanguage" type="xsd:string" />
				<xsd:element name="TranslationText" type="xsd:string" />
				<xsd:element name="TranslationResult" type="xsd:string" />
				<xsd:element name="TaskStatus" type="xsd:string" />
			</xsd:sequence>
		</xsd:complexType>
	</xsd:element>
</xsd:schema>

Figure 2 : SubscriberProcess in SubscriberApp

Figure 1 shows the resources of EventPublisherApp and graphical representation of TranslationProcess. I started development with generating data model presented in translation.xsd, which is given above. Then I created user form named as TranslationForm by binding to XSD resource. Finally, I develop the process by binding the form as a variable. Figure2 shows shows the resources of EventSubscriberApp and graphical representation of SubscriberProcess. I reused form and XSD assets generated at EventPublisherApp, which help development of process very easy.

As it can be easily seen from the figures above that Adobe’s LiveCycle ES provides creative and easy-to-manage environment for enterprise-level business process development. First of all, it takes almost only 2 hours to install the product, which has too many useful built-in features. The most important ones are that Adobe LiveCycle ES2 Designer can use data model to generate a user form, which is converted to an editable PDF document during the execution; Adobe LiveCycle ES2 Workbench can deploy, undeploy the applications and check-in, check-out the resources during the development. Once comparing with other SOA environment during the exploration the product, I felt that it brings effective solutions to improve development of complex systems and it has built-in functionalities, which are mostly required even in medium-scale systems. I think it can make complex-system development exciting, and I hope the product will get rightful attention in the market.

Chet Haase from Google, working on Android SDK and previously on Flex SDK at Adobe, was kind enough to take issue as “big enough” to forward to his folks at Adobe. Again thank you Chet for your prompt response to my mail.

A soothing answer to our surprising discovery during our development efforts came from Ryan Frishberg of Adobe’s Flex SDK development team.

Apparently, and as expected, Adobe is aware of the issue with Spark components. Adobe has a plan in place to address this issue in their next release, of which is concentrated on mobile development.

“The underlying issue is what text component we use from the Flash Player (TextField vs. Flash Text Engine/Text Layout Framework).

The most up-to-date info I can share is what’s on our website about Hero development.  http://opensource.adobe.com/wiki/display/flexsdk/Hero“

So there it is… Glad if this may be of any help to whom are in the development area of flex applications on current SDK release to work on mobile devices.

As Flash support is in its primitive stages for mobile devices, we know that Adobe is going to enhance the user experience of both standard and lite version support for mobile devices.

Since we have upgraded our SDK’s to version 4 of Adobe Flex (Adobe Flash Builder), we have been using Spark components, with a sense of joy, I might add. Spark’s development is an on-going effort by Adobe. One of the major reasons of its existence is told to be the support for mobile devices with its light-weight nature and natively better look and feel.

Problem at Hand:

Our shiny applications, upon focus of related form input components are failing to invoke the native keyboard on HTC brand Google Nexus One phones. But this problem is not limited to this brand.

If you access this page via your Android Browser (w/ Flash Player support, of course), you will see that the input areas do not invoke the Android keyboard. Since the browsers do not have support of opening the keyboard with functional button, your users will not be able to login to or fill out a form on your application. This is unfortunately due to Spark component.

The application code of the above example is:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%"
			   height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup id="myHorizontalGroup"
			  verticalAlign="middle"
			  horizontalAlign="center">

		<mx:Form id="mxForm">
			<s:Label text="Spark Components on MX Form"
					 fontWeight="bold"/>
			<s:Label text="Text Input Label:"/>
			<s:TextInput id="myTextInput"
						 width="200"/>
			<mx:Spacer height="2"/>
			<s:Label text="Text Area Label:"/>
			<s:TextArea id="myTextArea"
						width="200"
						heightInLines="3"/>
			<s:Button id="myButton"
					  label="Submit"/>
		</mx:Form>
	</s:VGroup>
</s:Application>

The below example is pure of MX components. As you may see, unlike Spark components, MX input components can invoke the native keyboard on Android.

You may find the code for MX component usage below. The reason I am adding these codes is to show that both of the applications are bare and none of the properties that may effect the experience of the users are implemented. So feel free to experiment on your own.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%"
			   height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup id="myHorizontalGroup"
			  verticalAlign="middle"
			  horizontalAlign="center">
		<mx:Form id="mxForm">
			<mx:Label text="MX Components on MX Form"
					  fontWeight="bold"/>
			<mx:Label text="Text Input Label:"/>
			<mx:TextInput id="myTextInput"
						  width="200"/>
			<mx:Spacer height="2"/>
			<mx:Label text="Text Area Label:"/>
			<mx:TextArea id="myTextArea"
						 width="200"
						 height="40"/>
			<mx:Button id="myButton"
					   label="Submit"/>
		</mx:Form>
	</s:VGroup>
</s:Application>

Is there a solution?

Hopefully yes, but we could not yet figure it out. All I can suggest is that if you plan to span your application use to Android users, you may want to consider sticking to MX components for your text input interactivity that actually requires keyboard inputs. One other solution may be to use virtual keyboards, but I am sure that Adobe is going to come up with a fix sooner or later with their Flex 4 and Spark component enhancements.

LCDS is defined as powerful messaging and data management capabilities. LCDS environment is supported by a model-driven development tool. The tool helps the developer can connect to a data source by creating services for entities defined in that data source. In other words LCDS handles operations on defined data sources by itself, the developer only responsible to bind that data services, which are generated automatically, to user interfaces. This capability makes LCDS the solution which is beyond the data management.

From the messaging viewpoint, LCDS is similar to Enterprise Service Bus (ESB). As a SOA basic, ESB handles messaging between services defined in SAO architecture. ESB is critical in SOA by managing proxy and business related services with providing messaging bus between the partners. It means that ESB can implement any logic between the services, but LCDS does not support an logic at messaging layer. The most important concept LDCS brings to messaging approach is that LCDS supports real-time messaging by pushing particular data. In other words, real-time messsaging protocol is supported by LCDS.

For exploring purposes, I installed Adobe LiveCycle Data Services 3.1 and Flash Builder 4 with Data Modeler plug-in. Then I tried a simple example using a public web service named Wheather Forecasting shown at figure below. It demonsrates how an external data source, which is a web service in the example, is called and how such service can be bind to the user interface. The idea behind implementing such an example with LCDS is that I need to be sure that each service should be able to defined at LCDS side. From SOA viewpoint, the services can be discovered easily by different project teams in SOA which is the base for Enterprise Inventory pattern. To achieve this, there should be resources to give chance on that once a new requirement raises then any team member can make a decision about particuler service whether it is required to develop from the scratch or combination of available service can satisfy the requirement.

Calling external web service via LCDS

At first I tried to run the example with original code in BlazeDS; there was nothing wrong with the application and it ran properly. It made me thinking of that the web service definition is given at Flex application which is at UI side. Then I tried the same example at LCDS, then the application did not run properly by showing the message ‘Security error acessing url’. Then I realized that service definition should be stored at LCDS which is at middleware side. To overcome the problem, destination definitions should be declared in proxy-config.xml file. the file is located in LCDS_install_root\tomcat\webapps\lcds\WEB-INF\flex directory and the definition I made is given below. Finally, Flex application should use that destination once consuming particular web service, the detail of which also given below.

<destination id="myDest">
	<properties>
            <url>http://www.webservicex.net/WeatherForecast.asmx</url>
            <dynamic-url>http://www.webservicex.net/*</dynamic-url>
        </properties>
    </destination>

<mx:WebService id="WS" wsdl="http://www.webservicex.net/WeatherForecast.asmx?WSDL"
				   useProxy="false" destination="myDest"
				   fault="Alert.show(event.fault.faultDetail), 'Error'"
				   result="onResult(event)" >
                  <mx:operation name="GetWeatherByZipCode" resultFormat="e4x" >
			<mx:request>
				<ZipCode>{zipcode.text}</ZipCode>
			</mx:request>
		</mx:operation>
	</mx:WebService>

During the exploration of LCDS, I always thought that nobody can place it in the SOA architecture properly. Despite LCDS is not totally ESB or data management services, it brings fresh ideas to middleware by implementing model-driven approach and real-time messaging. Once combining them with SOA architecture, fully event driven application development will become easy-to-develop.

Since Spark lacks the functionality of critical MX components, one of the issues we ran into was using embedded fonts. Below you may find an easy approach, whilst to some this may seem controversial. But here is our problem and solution:

Using a CSS file, when you define your fonts as below, only the Spark components are able to embed them, but the MX components fail to do so.

/* Your Applications Default CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace "library://ns.adobe.com/flex/mx";

@font-face
{
	src: url("assets/fonts/yourFontName.ttf"); /* font asset location */
	font-family: main;    /* this defines the fontFamily as main for referencing */
	font-style: normal;   /* the rest of the styling */
	font-weight: normal;
}

The above is a typical definition for embedding a font using CSS. The problem with the above example is actually what you do not see. By default the font is embedded with the following property:

embedAsCFF: true;

The problem is that the MX components do not like that. At first one may think that two definitions under different font family names can work, but come to find not:

@font-face
{
	src: url("assets/fonts/yourFontName.ttf");
	font-family: main;
	font-style: normal;
	font-weight: normal;
}

@font-face
{
	src: url("assets/fonts/yourFontName.ttf");
	font-family: mainMX;   /* different naming for the same font. */
	font-style: normal;
	font-weight: normal;
    embedAsCFF: false;      /* required for MX components */
}

So here is the solution:
Dublicate your fonts under different name and define them separately for both Spark and MX:

/* Your Applications Default CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace "library://ns.adobe.com/flex/mx";

/* For Spark Components */
@font-face
{
	src: url("assets/fonts/yourFontName.ttf");
	font-family: main;
	font-style: normal;
	font-weight: normal;
}

/* For MX Components */
@font-face
{
	src: url("assets/fonts/yourFontName_MX.ttf");  /* Dublicate of the same font */
	font-family: mainMX;
	font-style: normal;
	font-weight: normal;
	embedAsCFF: false;
}

This took some looking into to work around. So I hope it helps…

First of all, you may choose a Solaris 10 x64 template for your OpenSolaris 10 image.

After installing the operating system and rebooting it, go to “Virtual Machine” menu on your VMware Fusion/Worksation and choose “Install VMware Tools” and copy the tar.gz file on to your Desktop or where ever you may wish, and extract it. Please make sure that you are using VMware Tools for Solaris 10 OS.

Open a terminal window and do a su command and get your root privileges by entering your root password.

If you do not do the following you will fail to complete installing VMware tools with an error:

unable to copy the source file
/usr/lib/vmware-tools/configurator/autostart-vmware-user.sh
to the destination file
/usr/dt/config/Xsession.d/9999.autostart-vmware-user.sh.

There is an easy but often missed way to fix this. Please do the following on your terminal:

pfexec mkdir -p /usr/dt/config/Xsession.d

Then proceed installing the VMware Tools as instructed per prompt. Voila!