Creating custom menu in Documentum 6

WDK of Documentum 6 brings in come major enhancement for developers. The new library is Section 508 compliant and has also undergone user testing for accessibility and usability by the NFB (National Federation for the Blind). The list of new features is a big list including change to UI like right-click context menus, XML-based fixed menus that can be modified or extended, Configurable keyboard shortcuts etc. In this post we will see how to add a menu to the menu bar using configuration elements rather than extending menubar component.

In previous versions on WDK, you would have extended the menubar component and placed the xml in custom/config folder. You would also move the menubar.jsp with your new menu and menu items. In D6, things are little different. Let me quote from WDK tutorial PDF:

In earlier versions of the Web Development Kit, you would extend and override the configuration information files that come with the product as shipped. That approach still works. However, in Version 6, you have the option of modifying the user interface by adding, removing, or replacing individual configuration elements.

And this is exactly what we are going to do today. The concept of configuration elements is a great advantage to developers. By just changing XMLs you can modify the component. There is no need to extend each component for a minor change. This concept also makes the customizations more manageable and developer friendly.

WDK introduces component modification instead of extending it. To modify a specific component all you have to do is create a XML file in custom/config and specify the component you need to modify using modifies attribute of component element. Have a look at the below XML where I simply add a new menu item in tool menu of the webtop:

<config>
 <scope>
  <menuconfig modifies="menubar_tools_menu:webcomponent/config/library/menubar/menubar_component.xml">
   <insert path="menu[name=tools_menu]">
    <actionmenuitem dynamic = "genericnoselect"
     name = "hello_world_menu_item"
     id = "hello_world_menu_item"
     value = "Hello World"
     action = "hello_world_action"
     showifinvalid = "true"/>
   </insert>
  </menuconfig>   
 </scope>
</config>

The XML is simple and clean. In earlier versions, you will have used the “extends” attribute and specified the component you are extending. Here we just specify the component you want to modify and specify the section (in the above case menubar_tools_menu). WDK offers five different configuration elements: insert, insertafter, insertbefore, replace and remove. You can use these elements to modify any component.

An important change to notice is the way how menu component works. If you open menubar_component.xml in /webcomponent/config/library/menubar you will notice that all the menu and menu items are declared as part of the component.In previous versions, this would have been part of the JSP. Also notice each menu is defined by the tag menuconfig. These entire menus are declared in menuconfigids element as shown below:

<menuconfigids>
 <id>menubar_file_menu</id>
 <id>menubar_edit_menu</id>
 <id>menubar_view_menu</id>
<id>menubar_tools_menu</id>
</menuconfigids>

To add a new menu, we will have to modify the menuconfigids and our custom menu into it. Let’s see how we will insert a new menu into menuconfigids:

<component modifies="menubar:webcomponent/config/library/menubar/menubar_component.xml">
 <replace path="menuconfigids">
  <menuconfigids>
   <id>menubar_file_menu</id> 
   <id>menubar_tools_menu</id>
   <id>my_tools_menu</id>
  </menuconfigids>
 </replace>  
</component>

And to define the menu and one menu item:

<menuconfig id="my_tools_menu">
   <menu name="Level1" value="Level One">
    <actionmenuitem dynamic = "genericnoselect"
     name = "hello_world_menu_itemx"
     id = "hello_world_menu_itemx"
     value = "Hello World"
     action = "hello_world_action"
     showifinvalid = "true"/>
   </menu>
</menuconfig>

So finally we have a single XML containing the above two fragments:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<config version="1.0">
 <scope>  
  <menuconfig id="my_tools_menu">
   <menu name="Level1" value="Level One">
    <actionmenuitem dynamic = "genericnoselect"
     name = "hello_world_menu_itemx"
     id = "hello_world_menu_itemx"
     value = "Hello World1"
     action = "hello_world_action"
     showifinvalid = "true"/>
   </menu>
  </menuconfig>  
  <component modifies="menubar:webcomponent/config/library/menubar/menubar_component.xml">
   <replace path="menuconfigids">
    <menuconfigids>
     <id>menubar_file_menu</id> 
     <id>menubar_tools_menu</id>
     <id>my_tools_menu</id>
    </menuconfigids>
   </replace>   
  </component>  
 </scope>
</config>

A simple WDK refresh will make your menu appear on webtop! That's all and it's time for a hot tea :)

Using Ext JS library in Documentum

Documentum provides a very good framework for web applications called WDK. If you have worked with WDK, I am sure you must have come across the Ajax and webtop examples. When ExtJS 2.1 was released I needed to test it features, and the idea of using Ext in Documentum struck me! Here we will integrate Ext and Documentum in a simple WDK application. We will use WDK widgets to build the regural forms but add Ext Slider widget (not available in WDK) to the form.

Integrating or mashups are not always easy. As web developer we all would think that just adding the Ext java script files to the WDK application folders will be enough to get things started. But that turned out to be wrong. So lets start with troubled water.

Troubled Water
We will have few questions first and try answering them. Where will be deploy our Ext files? Where will we access Ext files from (container JSPs or our custom component JSPs)? I will answer these questions collectively. I assume you already have a skeleton WDK application on your server and I am sure you know our customizations will go into to custom folder.

We will hold all Ext related files in customjs folder under the custom folder. And as any normal WDK application, I will have my configurations in config and create appropriate JSPs. Now lets come to the second question. We will access these files from component JSP and will use complete context path to access the java script files. The reason to use complete context path is that, container JSPs access all java script files from /wdk/include folder. Now you know the folder structure, let move to programming.

Setting up Ext
Like any other Ext enabled application I will have a appjs which hold my custom Ext files. In customjs folder I have two folders : appjs and extjs. extjs will hold all the Ext library and appjs will hold our application.js file. In our application we will just be adding a slider to the Documentum form. My application.js will look like this:

app = function() {   
var sampleSlider; 
var sliderClick = function(slider,event) {

sobject = document.getElementById("agetxt");
sobject.value = slider.getValue();

sobject = document.getElementById("sliderval");
sobject.value = slider.getValue();

}
return {
init:function() {        
sampleSlider = new Ext.Slider({renderTo:'sample-slider',width: 200,minValue: 0,maxValue: 100});
sampleSlider.addListener('dragend',sliderClick);

}   
}; 
}();

Note that I have simply initialized Ext.Slider object and rendered it to "sample-slider". I also have added a listener to listen clicks on the slider. We will come back to this later.

Programming your WDK component
I will just create a simple component with a JSP and a behaviour class. The JSP will have a form that will request Name, Age and a slider with which user can select a value. The user will be able to select his age using the slider. But the demo I have displayed a text field for the Age. Ideally we will not need this and we will use a hidden field to hold data. But why do we need hidden fields? In the behaviour class you will not have direct access to the Ext widgets. But you have access to all WDK widgets. This is where hidden field comes to rescue. From the behaviour class you will be able to access the values user sets using the slider. The listener methods that we attached to the slider helps in storing the slider value to the hidden field in the JSP page.

Finally on running the WDK application you will get a good looking Ext widget. You can download all the files (I only have the components & ext js files). But you will have to build the skeleton by yourself. Let me know if you have better ideas or problems.

Flex + Documentum

I started learning Adobe Flex recently and how I got inspired about RIA is through my brother Reji. I did fiddle and play around with Flex SDK and I really like it. With release of Apollo alpha, I am sure there is more adventure coming up my way :) .
This weekend I tried out two things with the flex:

1. Maintaining HTTP Session in flex
2. Connecting Flex with a Documentum repository

Both of these objective turned out to be quite simple but I will explain the second project that I did. For those how don't know Documentum: Its a ECM (Enterprise Content Management) Tool from EMC. My aim was to create a simple login screen, validate the user and login to a DocBase.
I made use of the HTTPService provided by the FDS (Flex Data Service) to rend the user's login information. At the server side I had a java servlet that received the login information as request parameter and then authenticated the user. If the user was a valid user, I just returned a string embedded in a XML and finally displayed it using the alert box in flex.

The code Flex code and the servlet is available for download and one important note for developers using Documentum is that: "You should consider using Flex for building web applications on top of Documentum". I will put up a DQL executer next week.