From what I read in the change log, Script.aculo.us has added some pretty cool features, but what I am most excited about is that Prototype 1.6 includes a JSON parser which was not available in the previous version.

I’ve updated the Oracle / Stellent Content Server script.aculo.us component available on this site.

Feel free to download it here:

Script.aculo.us Component for Oracle / Stellent Content Server

This sample project utilizes the YUI library to create that pop up as well as to provide a “slide” effect seen when the pop up appears and disappears. I was hoping to use a variety of YUI features, but unfortunately this example turned out to be extremely simple. It uses a similar “Panel” object to the one used in the Security Overrides example, however as you’ll see from this project it does not make any Connection Manager based AJAX calls like that one does.

This component has a couple IDOC resource overrides to add Pop Up Preview links to the Stellent UI, but in terms of actual code there’s a single Javascript class with really just a single major method, callPopUpPreview:

this.callPopUpPreview = function(id,name){
 //set the dID
 _dID = id;
 //set the dDocName
 _dDocName = name;//start the build of our URL
 var url = _httpCgiPath + "?IdcService=GET_DYNAMIC_CONVERSION"//if we have a dID add it to the url
 if(_dID)
  url += "&dID=" + _dID;//if we have a dDocName add it to the url
 if(_dDocName)
  url += "&dDocName=" + _dDocName;//if we have a revisionselectionmethod add it to the url
 if(_RevisionSelectionMethod)
  url += "&RevisionSelectionMethod=" + _RevisionSelectionMethod;//if we have a conversion template add it to the url
 if(_conversionTemplate)
  url += "&conversionTemplate=" + _conversionTemplate;//This line create the panel object
 YAHOO.popUpPreview.container.popupPreview = new YAHOO.widget.Panel("popUpPreviewDiv",
 { //set the width and hieght to the values set in the class
  width : _width + "px",
  height : _height + "px",
  //the pop up should be fixed to the center of the screen
  fixedcenter : true,
  //show a close link
  close:true,
  //don't allow dragging of the pop up
  draggable:false,
  //the panel starts out invisible
  visible:false,
  //this line sets the transision effect, where we are using the slide
  //effect and setting it's duration to .25 seconds.
  effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25}]
  } );//Sets the header / menu bar of the pop up
 YAHOO.popUpPreview.container.popupPreview.setHeader("Dynamic Conversion Preview");
 //Sets the body, note the use of the iframe to load the content. The onload event calls the handleiFrameLoad method to display the pop up
 YAHOO.popUpPreview.container.popupPreview.setBody("<iframe id='popUpPreviewBody' onload='Javascript:" + _objectName + ".handleiFrameLoad();' src='" + url + "'></iframe>");
 //render the panel to the page. this just starts the dynamic conversion call
 YAHOO.popUpPreview.container.popupPreview.render(document.body);
}}

The code does not come through so great on the blog, but what’s occurring is the URL to the dynamic conversion is assembled and then placed in the “src” attribute of an iFrame which is then written to a YUI panel object.  Why the iFrame?  Well when I started I intended to make more of a traditional AJAX call to get the dynamic conversion.  The problem though is that the dynamic converter creates a full HTML document complete with head and body elements, which can wreak havoc on the panel’s divs.  Using the iFrame let’s us encapsulate the dynamic conversion output in it’s own private little window and protects the rest of our panel and page from the variety of HTML that may be rendered in it. 

The callPopUpPreview method takes care of creating the URL to the dynamic conversion, creating the panel object and adding the iFrame to it, but it does not actually cause the panel display on the page.  Dynamic conversions can sometimes take a second or two to render and it’s a much nicer effect if we wait for the conversion before displayiing the pop up window.  So instead of just rendering the panel to the page, the onload event for the iFrame is used to call another method(handleiFrameLoad) in the popUpPreview class that can display the pop up once everything is loaded.  This way the pop up window will only appear once the conversion is complete.

Adding the actual links to the content server’s search results and content information pages requires a couple of resource include overrides: 

Append an additional PopupProps row in the extra_setup_search_results_action_popups include to add a links in the Search Results.
<@dynamichtml extra_setup_search_results_action_popups@> <$exec rsAppendNewRow("PopupProps")$>
<$exec setValue("PopupProps", "label", "Pop Up Preview")$>
<$exec setValue("PopupProps", "function", "Javascript:popUp.callPopUpPreview('<$url(dID)$>','<$url(dDocName)$>');")$>
<$exec setValue("PopupProps", "ifClause", "dcShowExportLink()")$>
<$exec setValue("PopupProps", "class", "document")$> <$exec setValue("PopupProps","id", "popuppreview")$>
<@end@>

The docinfo_conversion_link include can be used to add a link on the Content Information page
<@dynamichtml docinfo_conversion_link@>
<$include super.docinfo_conversion_link$>
<tr><td nowrap align="right"><span class="infoLabel"></span></td>
<td><span class="tableEntry">
<a href="Javascript:;" mce_href="Javascript:;" onclick="Javascript:popUp.callPopUpPreview('<$dID$>','<$dDocName$>');">Pop Up Preview</a></span>
</td></tr>
<@end@>


Also of note is that I used a new editor to create the popuppreview.js file. Rather than my standard text editor, I gave Adobe’s JSEclipse plug in a try. I am not sure I was using it correctly as the experience was not that much different from my text editor(only in eclipse), but as I figure out how to best use it’s features I’ll keep you informed.

The Pop Up Preview component is available for download here:

Pop Up Preview Component

The concept behind the example component, Security Overrides, is an IDOC enabled version of the Security Filter example, which is part of Stellent’s HowToComponents Bundle.  Stellent’s SecurityFilter component is an example of how to use the alterUserCredentials filter to change the rights of a user during a specific service request.  The primary example is the BlackHole check in example which grants everyone write access when checking in an item using the Black Hole service.

Creating security filters or overrides with the alterUserCredentials can be a tricky proposition.  Depending on your implementation, you’re basically altering the behavior of the content server with no real visible indication that it’s being done.  In addition the alterUserCredentials filter is called with every service call, so it’s a great place to cause a performance problem with inefficient code, or just by adding multiple security filter components.

So how does the Security Overrides component and more importantly IDOC help the situation?  The component creates a central, administrator controlled, interface for creating and managing overrides. What’s more, each service configured has an IDOC script prompt, which is used in the final decisioning of whether to apply the override or not.  For example if an administrator desired to only allow the “sysadmin” account access to the providers page, they would configure an override  that removed all permissions for the “GET_ALL_PROVIDERS” service.  In the IDOC prompt script would be added to evaluate the dUser variable, ensuring it was the “sysadmin” account.

The beautiful thing here is that because the component is processing IDOC for it’s final decsioning logic, the override becomes extremely simple to alter as well as include addtional actions down the road if desired.  And as you’ll see in the code, creating a component which can support IDOC scripting takes very little additional work.

In addition to integrating IDOC scripting in a Java-based component, the component also demonstrates:

• Creating an installation filter, which creates a database table after start up
• Working with the YUI library to create a model, pop-up form as well as creating and handling AJAX requests
• The run-time creation and altering of environment variables
• Customizing the Stellent / Oracle interface

As you might have guessed from the word “Introduction” in the title, I plan on making the review of this component a multi-part series, rather then one long post.  The component along with it’s source code will be available for download here.

I should also mention that Oracle has a fully supported component available for download which has some of the same features as this one.  It’s called the “Need to Know” component and if you are considering using my example in a production system, please take a look at their component first.

Security Overrides Component for Stellent / Oracle

Scriptaculous is built on Prototype which is an independent Javascript framework used by several libraries in addition to Scriptaculous. Prototype’s claim to fame is the $() function, which is used to reference html elements and is far easier to type than document.getElementById().  The framework is chock full of functionality to make your life easier and also provides an abstraction layer to the browser so Prototype handles any compatibility issues for you.

Here’s a couple of my favorite Prototype functions:

//returns all elements which have a specified css class
document.getElementsByClassName([class name]);

//attaches a function to an object event
Event.observe([object],[event name],[function]);

//converts the input fields of a form in to an Ajax compatible query string format
[Form Object].serialize();


The Scriptaculous library then has an additional set of utilities, controls and my favorite the effects.

Couple of my favorite Scriptaculous Functions:

Effect.Fade($("testdiv"))
Effect.Appear($("testdiv"))
Effect.BlindDown($("testdiv"))


All of this brings me to Stellent/Oracle who actually have a Javascript preference of their own, the Yahoo YUI library.  I am also a big fan of YUI, but it’s much more of a control library then a framework.  This has caused problems for me when working with 3rd party web designers who are not developing HTML specifically for YUI.  Scriptaculous on the other hand often works great regardless of how the HTML is designed.  Both libraries can live harmoniously on the same page and I’ve often found myself using the Prototype $() function to reference YUI controls.

Oracle/Stellent implements the YUI library using a component which places their Javascriptand CSS files in the weblayout/resources folder.  Using that same concept, I put together a quick and dirty Scriptaculous component which does the same.  In addition there’s a  resource override of the std_html_head_declarations include, where I’ve added a reference to the library, making it globally available in the Content Server UI. That component is available for download here and it includes the latest release version of Scriptaculous 1.7.0.

Updated: 11/10/2007 – The latest Oracle / Stellent Script.aculo.us component(version 1.8) may be downloaded here:

Script.aculo.us Component for Oracle / Stellent Content Server