In my earlier articles on
animation, I discussed various slide, grow and flip transitions for items and containers. In this article I want to discuss a fade
animation and specifically the use of fades and auto-dismissal for informational dialogs. If you use a Mac, you may be familiar with Growl as a notification system, and the nice way that messages that are informational just fade out after a few seconds. So in this blog entry I wanted to discuss how we could make an ADF popup behave in the same way. This can be an effective way of communicating information to the user without "getting in the way" with modal alerts. This of course, has been done before, but everything I've seen previously requires something like
JQuery to be in the mix when we don't really need it to be.
The solution I've put together is nice and generic and will work with either <af:panelWindow> or <af:dialog> as a the child of the popup. In terms of usage it's pretty simple to use we just need to ensure that the popup itself has clientComponent is set to true and includes the
animation JavaScript (animateFadingPopup) on a popupOpened event:
<af:popup id="pop1" clientComponent="true">
<af:panelWindow title="A Fading Message...">
...
</af:panelWindow>
<af:clientListener method="animateFadingPopup" type="popupOpened"/>
</af:popup>
The popup can be invoked in the normal way using showPopupBehavior or JavaScript, no special code is required there.
As a further twist you can include an additional clientAttribute called preFadeDelay to define a delay before the fade itself starts (the default is 5 seconds) . To set the delay to just 2 seconds for example:
<af:popup ...>
...
<af:clientAttribute name="preFadeDelay" value="2"/>
<af:clientListener method="animateFadingPopup" type="popupOpened"/>
</af:popup>
The
Animation Styles
As before, we have a couple of CSS Styles which define the
animation, I've put these into the skin in my case, and, as in the other articles, I've only defined the transitions for WebKit browsers (Chrome, Safari) at the moment. In this case, the fade is timed at 5 seconds in duration.
.popupFadeReset {
opacity: 1;
}
.popupFadeAnimate {
opacity: 0;
-webkit-transition: opacity 5s ease-in-out;
}
As you can see here, we are achieving the fade by simply setting the CSS opacity property.
The JavaScript
The final part of the puzzle is, of course, the JavaScript, there are four functions, these are generic (apart from the Style names which, if you've changed above, you'll need to reflect here):
The initial function invoked from the popupOpened event, animateFadingPopup which starts a timer and provides the initial delay before we start to fade the popup.
The function that applies the fade
animation to the popup - initiatePopupFade.
The callback function - closeFadedPopup used to reset the style class and correctly hide the popup so that it can be invoked again and again.
A utility function - findFadeContainer, which is responsible for locating the correct child component of the popup to actually apply the style to.
Function - animateFadingPopup
This function, as stated is the one hooked up to the popupOpened event via a clientListener. Because of when the code is called it does not actually matter how you launch the popup, or if the popup is re-used from multiple places. All usages will get the fade behavior.
/**
* Client listener which will kick off the
animation to fade the dialog and register
* a callback to correctly reset the popup once the
animation is complete
* @param event
*/
function animateFadingPopup(event) {
var fadePopup = event.getSource();
var fadeCandidate = false;
//Ensure that the popup is initially Opaque
//This handles the situation where the user has dismissed
//the popup whilst it was in the process of fading
var fadeContainer = findFadeContainer(fadePopup);
if (fadeContainer != null) {
fadeCandidate = true;
fadeContainer.setStyleClass("popupFadeReset");
}
//Only continue if we can actually fade this popup
if (fadeCandidate) {
//See if a delay has been specified
var waitTimeSeconds = event.getSource().getProperty('preFadeDelay');
//Default to 5 seconds if not supplied
if (waitTimeSeconds == undefined) {
waitTimeSeconds = 5;
}
// Now call the fade after the specified time
var fadeFunction = function () {
initiatePopupFade(fadePopup);
};
var fadeDelayTimer = setTimeout(fadeFunction, (waitTimeSeconds * 1000));
}
}
The things to note about this function is the initial check that we have to do to ensure that the container is currently visible and reset it's style to ensure that it is. This is to handle the situation where the popup has begun the fade, and yet the user has still explicitly dismissed the popup before it's complete and in doing so has prevented the callback function (described later) from executing. In this particular situation the initial display of the dialog will be (apparently) missing it's normal
animation but at least it becomes visible to the user (and most users will probably not notice this difference in any case).
You'll notice that the style that we apply to reset the opacity - popupFadeReset, is not applied to the popup component itself but rather the dialog or panelWindow within it. More about that in the description of the next function findFadeContainer().
Finally, assuming that we have a suitable candidate for fading, a JavaScript timer is started using the specified preFadeDelay wait time (or 5 seconds if that was not supplied). When this timer expires then the main
animation styleclass will be applied using the initiatePopupFade() function
Function - findFadeContainer
As a component, the <af:popup> does not support styleClass attribute, so we can't apply the
animation style directly. Instead we have to look for the container within the popup which defines the window object that can have a style attached. This is achieved by the following code:
/**
* The thing we actually fade will be the only child
* of the popup assuming that this is a dialog or window
* @param popup
* @return the component, or null if this is not valid for fading
*/
function findFadeContainer(popup) {
var children = popup.getDescendantComponents();
var fadeContainer = children[0];
if (fadeContainer != undefined) {
var compType = fadeContainer.getComponentType();
if (compType == "oracle.adf.RichPanelWindow"
|| compType == "oracle.adf.RichDialog") {
return fadeContainer;
}
}
return null;
}
So what we do here is to grab the first child component of the popup and check its type. Here I decided to limit the fade behaviour to only <af:dialog> and <af:panelWindow>. This was deliberate. If we apply the fade to say an <af:noteWindow> you would see the text inside the balloon fade, but the balloon itself would hang around until the fade
animation was over and then hide. It would of course be possible to make the code smarter to walk up the DOM tree to find the correct <div> to apply the style to in order to hide the whole balloon, however, that means that this JavaScript would then need to have knowledge of the generated DOM structure, something which may change from release to release, and certainly something to avoid. So, all in all, I think that this is an OK restriction and frankly it's windows and dialogs that I wanted to fade anyway, not balloons and menus. You could of course extend this technique and handle the other types should you really want to.
One thing to note here is the selection of the first (children[0]) child of the popup. It does not matter if there are non-visible children such as clientListener before the <af:dialog> or <af:panelWindow> within the popup, they are not included in this array, so picking the first element in this way seems to be fine, no matter what the underlying ordering is within the JSF source. If you wanted a super-robust version of the code you might want to iterate through the children array of the popup to check for the right type, again it's up to you.
Function - initiatePopupFade
On to the actual fading. This is actually very simple and at it's heart, just the application of the popupFadeAnimate style to the correct component and then registering a callback to execute once the fade is done.
/**
* Function which will kick off the
animation to fade the dialog and register
* a callback to correctly reset the popup once the
animation is complete
* @param popup the popup we are animating
*/
function initiatePopupFade(popup) {
//Only continue if the popup has not already been dismissed
if (popup.isPopupVisible()) {
//The skin styles that define the animation
var fadeoutAnimationStyle = "popupFadeAnimate";
var fadeAnimationResetStyle = "popupFadeReset";
var fadeContainer = findFadeContainer(popup);
if (fadeContainer != null) {
var fadeContainerReal = AdfAgent.AGENT.getElementById(fadeContainer.getClientId());
//Define the callback this will correctly reset the popup once it's disappeared
var fadeCallbackFunction = function (event) {
closeFadedPopup(popup, fadeContainer, fadeAnimationResetStyle);
event.target.removeEventListener("webkitTransitionEnd", fadeCallbackFunction);
};
//Initiate the fade
fadeContainer.setStyleClass(fadeoutAnimationStyle);
//Register the callback to execute once fade is done
fadeContainerReal.addEventListener("webkitTransitionEnd", fadeCallbackFunction, false);
}
}
}
I've added some extra checks here though. First of all we only start the whole process if the popup is still visible. It may be that the user has closed the popup before the delay timer has finished so there is no need to start animating in that case. Again we use the findFadeContainer() function to locate the correct component to apply the style to, and additionally we grab the DOM id that represents that container. This physical ID is required for the registration of the callback function. The closeFadedPopup() call is then registered on the callback so as to correctly close the now transparent (but still there) popup.
Function - closeFadedPopup
The final function just cleans things up:
/**
* Callback function to correctly cancel and reset the style in the popup
* @param popup id of the popup so we can close it properly
* @param contatiner the window / dialog within the popup to actually style
* @param resetStyle the syle that sets the opacity back to solid
*/
function closeFadedPopup(popup, container, resetStyle) {
container.setStyleClass(resetStyle);
popup.cancel();
}
First of all we reset the style to make the popup contents opaque again and then we cancel the popup. This will ensure that any of your user code that is waiting for a popup cancelled event will actually get the event, additionally if you have done this as a modal window / dialog it will ensure that the glasspane is dismissed and you can interact with the UI again.
What's Next?
There are several ways in which this technique could be used, I've been working on a popup here, but you could apply the same approach to in-line messages. As this code (in the popup case) is generic it will make s pretty nice declarative component and maybe, if I get time, I'll look at constructing a formal Growl component using a combination of this technique, and active data push. Also, I'm sure the above code can be improved a little too. Specifically things like registering a popup cancelled listener to handle the style reset so that we don't loose the subtle
animation that takes place when the popup is opened in that situation where the user has closed the in-fade dialog.
