Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Creative tools for business

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

Adding navigation tabs to Adobe LiveCycle Workspace ES2

by Nithiyanandam Dharmadass

nith-lces.blogspot.com

Content

Setting up of the Workspace source code
Creating the MVC components
Creating a Controller class
Packaging and deploying the customized Workspace

Created

13 June 2011

Requirements

Prerequisite knowledge

Experience with Adobe LiveCycle Process Management ES2.
Basic knowledge on Adobe Flex and ActionScript coding.
Knowledge on Workspace ES2 customization.

User level

Intermediate

Required products

LiveCycle ES (Download trial)
Flash Builder (Download trial)

Sample files

find_28x28.png (2 KB)

The Adobe LiveCycle Workspace ES2 provides three basic navigation tabs: Start Process, ToDo and Tracking. This article explains how to add additional navigation tabs to workspace by customizing its source code.

This way of adding tabs to workspace helps enterprise users to make use of generic tasks within workspace such as:

Workflow participation statistics of currently logged in user
Process KPI visual indicators etc.

After reading this article, you will be able to add your own tabs and implement the business logics for your need.

The customized Workspace will look like the following screen (see Figure 1).

Figure 1: Customized workspace view

In the above screen, you notice a new tab named “It’s my own Tab” has been added next to Tracking Tab.

Setting up of the Workspace source code

This article is based on the Workspace ES2 stand-alone source code available at the installation directory. You should configure the Adobe Flex Builder 3 to compile this source code. You can refer to the documentation (Customizing LiveCycle Workspace ES2 User Interface) available here . Read Sections 3 and 4 (Pages through 20 to 31) to understand how to configure the development environment and import the workspace flex project into Flex Builder 3.

Note: You can use Flash Builder 4.x provide that you use the Flex SDK version for LiveCycle to compile (3.4.1). (For information, refer to this blog post.)

Modifying the Ant build file (build.xml)

Modify the build.xml to suit your development environment configuration. Update the properties as highlighted in the following screen:

Creating a package

Create a new folder named “mytab” under the /src/lc/procmgmt/ui directory. Place all your custom codes under this newly created package.

Adding required image resources

Add an icon (sized 28X28 pixels) to the /theme/images directory. This icon will be used in the new Tab as shown in Figure 1. I have used a sample image (find_28x28.png ) for this tutorial.

Updating the core CSS file

Update the lc.css file to refer the newly added image. Open the file and add the following lines at the end of file.

Creating the MVC components

To be aligned with the existing source code provided by Adobe, let us create a modeler, a controller and a view component.

Creating a Model class

Create a model (ActionScript class) named MyCustomTabModel.as within the newly created package. This class will function as a modeler for the custom Tab.

Edit the MyCustomTabModel.as file and update the following:

Import necessary classes (NavigationSupervisorModel and SessionMap)
Add [Bindable] metadata to the class
Extend the NavigationSupervisorModel class
Modify the constructor to load the CSS style
Override the session setters , getters and initialize methods

You can add any additional logics to the initialize() method which will be executed while loading the custom Tab.

You may the use the below code:

        package lc.procmgmt.ui.mytab 
{ 
    import lc.procmgmt.ui.layout.NavigationSupervisorModel; 
    import lc.foundation.domain.SessionMap; 
    
    [Bindable] 
    public class MyCustomTabModel extends NavigationSupervisorModel 
    { 
        public var iconSource:Class; 

        /* 
        * The Constructor. 
        */ 
        public function MyCustomTabModel() 
        { 
            iconSource = Class( getCSSStyle("MyTabIcon", "icon") ); 
        } 
        
        override public function set session(value:SessionMap):void 
        { 
            super.session = value; 
        } 

        /* 
        * Retrieves an instance of the current session map. 
        * return A SessionMap object representing the current session. 
        */ 
        
        override public function get session():SessionMap 
        { 
            return super.session; 
        } 

        /* 
        * Invoking super class initialize() method 
        */ 

        override public function initialize():void 
        { 
            super.initialize(); 
            initializeMyCustomTabUserInterface();
        } 
private function initializeMyCustomTabUserInterface():void
        {
            // write your logic to initialize your custom user interface
        }
    } 
} 

    

Creating a Controller class

Create a base wrapper class which functions as a controller between the View and Model classes of the custom Tab. This class is usually handles the user events such as Navigation OK, Navigation Cancelled, etc.

This is shown below:

        package lc.procmgmt.ui.mytab 
{ 
    import lc.procmgmt.ui.layout.NavigationEvent; 
    import mx.containers.Canvas; 
    [Bindable] 
    public class MyCustomTabBase extends Canvas 
    { 
        public var model:MyCustomTabModel; 
        public function MyCustomTabBase() 
        { 
            //TODO: implement function 
            super(); 
                addEventListener(NavigationEvent.NAVIGATION_OK,navigationSuccessHandler); 
        } 

        public function navigationSuccessHandler(event:NavigationEvent):void 
        { 
            trace("MyCustomTab.NavigationSucceeded!"); 
            model.endpointSelectorModel.closeDetails(); 
            //TODO: Invoke your business logic when this tab is clicked 
        } 
    } 
} 

    

Creating a View component

Create an MXML view component and implement the User Interface.

Follow the below steps to complete the View component creation:

Create an MXML file name MyCustomTab.mxml by extending the wrapper base class MyCustomTabBase.as
Create a SessionMap object which can be used to retrive value from current user session
Add a reference to the Model object MyCustomTabModel
Add your custom controls

The code is shown below:

        <?xml version="1.0" encoding="utf-8"?> 
<MyCustomTabBase 
    xmlns="lc.procmgmt.ui.mytab.*" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:lc="http://www.adobe.com/2006/livecycle" 
    xmlns:mytab="lc.procmgmt.ui.mytab.*" 
    width="100%" height="100%" 
    currentState="{model.state}" 
    label="It's my own Tab" 
    icon="{model.iconSource}" horizontalAlign="center"> 

    <lc:SessionMap id="session"/> 
    <mytab:MyCustomTabModel id="model" session="{session}"/> 
    
<!-- This is the MXML component where the desing logics are implemented --> 
    <mx:Label text="Its my own page utilizing the entire content area!"       
    fontSize="24" paddingTop="100"/> 
</MyCustomTabBase>

    

Modifying the Workspace.mxml file

We should modify the Workspace.mxml file to refer the newly created Tab component.

The workspace.mxml can be found at /src/lc/procmgmt/ui/layout directory. Open the file and follow these steps to modify the file.

Add a custom namespace to locate our package
Add a reference to the newly created Tab component

The code is below:

        <?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas 
xmlns:lc="http://www.adobe.com/2006/livecycle" 
xmlns:mx="http://www.adobe.com/2006/mxml" 
width="100%" height="100%" 
styleName="navigationBar" 
horizontalScrollPolicy="off" verticalScrollPolicy="off" 
currentState="{model.state}" 
xmlns:helpdesk="lc.procmgmt.ui.helpdesk.*" 
xmlns:workflow="lc.procmgmt.ui.workflow.*" 
xmlns:mytab="lc.procmgmt.ui.mytab.*"> 
<mx:Metadata> 
[IconFile("blank.png")] 
</mx:Metadata>
<mx:states> 
<mx:State name="maximizedState"> 
</mx:State> 
<mx:State name="minimizedState"> 
<mx:SetProperty name="height" value="40"/> 
<mx:SetProperty name="enabled" value="false"/> 
</mx:State> 
</mx:states> 
<!-- 
A SessionMap object that stores information relating to the server session. 
--> 
<lc:SessionMap id="session"/> 

<!--- 
The presentation model for this view. 
--> 

<lc:WorkspaceModel id="model" 
session="{session}" 
startProcessModel="{startProcess.model}" 
toDoModel="{toDo.model}" 
trackingModel="{tracking.model}" 
workspaceNavigator="{tabNavigator}"/> 

<lc:WorkspaceTabNavigator id="tabNavigator" 
width="100%" height="100%" 
styleName="featureTabs" 
tabStyleName="featureTab" 
paddingTop="0" 
tabIndex="10" 
borderSides="top" 
navigationSupervisor="{model}"> 

<!--- 
A reference to the <code>StartProcess</code> component. 
--> 
<lc:StartProcess id="startProcess" session="{session}" width="100%" height="100%"/> 

<!--- 
A reference to the <code>ToDo</code> component. 
--> 

<lc:ToDo id="toDo" session="{session}" width="100%" height="100%"/> 

<!--- 
A reference to the <code>Tracking</code> component. 
--> 
<lc:Tracking id="tracking" session="{session}" width="100%" height="100%"/> 

<!--- 
A reference to the custom Tab component. 
--> 

<mytab:MyCustomTab id="myCustomTab" session="{session}" width="100%" height="100%"/> 
</lc:WorkspaceTabNavigator> 

</mx:Canvas> 

    

Packaging and deploying the customized Workspace

Compile the Workspace source code and deploy the .EAR file on a LiveCycle server. The complied .EAR file can be found at the /export directory. The EAR file will usually created with the application.name property mentioned in the build.xml file. Test the workspace by navigating the following URL in a web browser:

http://<server_name>:<port>/myworkspace

For more information about deploying and testing workspace customizations, see Page 34 of the customization guide .

Where to go from here

The article explained only the steps to add additional navigation tabs to Workspace ES2. You may leverage your existing Flex applications which are used across the enterprise into this additional navigation area.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License