Controlling the Sizing of the af:messages Dialog
- by Duncan Mills
Over the last day or so a small change in behaviour between 11.1.2.n releases of ADF and earlier versions has come to my attention. This has concerned the default sizing of the dialog that the framework automatically generates to handle the display of JSF messages being handled by the <af:messages> component. Unlike a normal popup, you don't have a physical <af:dialog> or <af:window> to set the sizing on in your page definition, so you're at the mercy of what the framework provides. In this case the framework now defines a fixed 250x250 pixel content area dialog for these messages, which can look a bit weird if the message is either very short, or very long. Unfortunately this is not something that you can control through the skin, instead you have to be a little more creative.
Here's the solution I've come up with. Unfortunately, I've not found a supportable way to reset the dialog so as to say just size yourself based on your contents, it is actually possible to do this by tweaking the correct DOM objects, but I wanted to start with a mostly supportable solution that only uses the best practice of working through the ADF client side APIs.
The Technique
The basic approach I've taken is really very simple. The af:messages dialog is just a normal richDialog object, it just happens to be one that is pre-defined for you with a particular known name "msgDlg" (which hopefully won't change). Knowing this, you can call the accepted APIs to control the content width and height of that dialog, as our meerkat friends would say, "simples" 1
The JavaScript
For this example I've defined three JavaScript functions.
The first does all the hard work and is designed to be called from server side Java or from a page load event to set the default.
The second is a utility function used by the first to validate the values you're about to use for height and width.
The final function is one that can be called from the page load event to set an initial default sizing if that's all you need to do.
Function resizeDefaultMessageDialog()
/**
* Function that actually resets the default message dialog sizing.
* Note that the width and height supplied define the content area
* So the actual physical dialog size will be larger to account for
* the chrome containing the header / footer etc.
* @param docId Faces component id of the document
* @param contentWidth - new content width you need
* @param contentHeight - new content height
*/
function resizeDefaultMessageDialog(docId, contentWidth, contentHeight) {
// Warning this value may change from release to release
var defMDName = "::msgDlg";
//Find the default messages dialog
msgDialogComponent =
AdfPage.PAGE.findComponentByAbsoluteId(docId + defMDName);
// In your version add a check here to ensure we've found the right object!
// Check the new width is supplied and is a positive number, if so apply it.
if (dimensionIsValid(contentWidth)){
msgDialogComponent.setContentWidth(contentWidth);
}
// Check the new height is supplied and is a positive number, if so apply it.
if (dimensionIsValid(contentHeight)){
msgDialogComponent.setContentHeight(contentHeight);
}
}
Function dimensionIsValid()
/**
* Simple function to check that sensible numeric values are
* being proposed for a dimension
* @param sampleDimension
* @return booolean
*/
function dimensionIsValid(sampleDimension){
return (!isNaN(sampleDimension) && sampleDimension > 0);
}
Function initializeDefaultMessageDialogSize()
/**
* This function will re-define the default sizing applied by the framework
* in 11.1.2.n versions
* It is designed to be called with the document onLoad event
*/
function initializeDefaultMessageDialogSize(loadEvent){
//get the configuration information
var documentId = loadEvent.getSource().getProperty('documentId');
var newWidth = loadEvent.getSource().getProperty('defaultMessageDialogContentWidth');
var newHeight = loadEvent.getSource().getProperty('defaultMessageDialogContentHeight');
resizeDefaultMessageDialog(documentId, newWidth, newHeight);
}
Wiring in the Functions
As usual, the first thing we need to do when using JavaScript with ADF is to define an af:resource in the document metaContainer facet
<af:document>
....
<f:facet name="metaContainer">
<af:resource type="javascript" source="/resources/js/hackMessagedDialog.js"/>
</f:facet>
</af:document>
This makes the script functions available to call.
Next if you want to use the option of defining an initial default size for the dialog you use a combination of <af:clientListener> and <af:clientAttribute> tags like this.
<af:document title="MyApp" id="doc1">
<af:clientListener method="initializeDefaultMessageDialogSize" type="load"/>
<af:clientAttribute name="documentId" value="doc1"/>
<af:clientAttribute name="defaultMessageDialogContentWidth" value="400"/>
<af:clientAttribute name="defaultMessageDialogContentHeight" value="150"/>
...
Just in Time Dialog Sizing
So what happens if you have a variety of messages that you might add and in some cases you need a small dialog and an other cases a large one? Well in that case you can re-size these dialogs just before you submit the message. Here's some example Java code:
FacesContext ctx = FacesContext.getCurrentInstance();
//reset the default dialog size for this message
ExtendedRenderKitService service =
Service.getRenderKitService(ctx, ExtendedRenderKitService.class);
service.addScript(ctx, "resizeDefaultMessageDialog('doc1',100,50);");
FacesMessage msg = new FacesMessage("Short message");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
ctx.addMessage(null, msg);
So there you have it. This technique should, at least, allow you to control the dialog sizing just enough to stop really objectionable whitespace or scrollbars.
1 Don't worry if you don't get the reference, lest's just say my kids watch too many adverts.
