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.
