Sunday, October 30, 2011

Common Multi-Configuration Question Popup

While this might not be the most common use-case, but it is still quite interesting and the month is about to end - so I gotta post something cool for a change right? Hehehe.

Let's say you are in a complex editable form where after clicking the big Save/Confirm button, you would like to ask some follow up questions to the user.
  • Do you want to apply changes?
  • Are you sure?
  • Choosing OK will change X data.
Along with these questions, there are even scenarios (rare) where you need to ask questions next to each other.

Because of these scenarios, I designed a simple demo in the power of ADF declarative components. (note: if there is a design flaw in my implementation as well as class handling, I wouldn't mind suggestions or feedback on it. Feedback is highly encouraged "woooot".

Oh, before I forget, a small constraint that I had to go through is having the button (SAVE/CONFIRM) which triggers the launching of popup will be coming from the the consuming project. So what does this mean? This basically means that the caller or the starting event to launch this question popup will not be part of the component itself. The reason behind this is because the Popup Question might be used by not just a button. It might be a link, a selection event or can even be as simple as a client/server event. So because of this constraint, I had to leave the trigger to be outside of the bean and the component itself will just offer hooks, lots of them if needed.

Starting with our declarative model, let's design an iterator based set of questions where each question has the possibility of having 3 types of answers.

A quick explanation of the output:
  • Display All questions as left aligned
  • Display Confirm/Reject response on the right side
The component bean for this component is as follows.
The only implementation this bean directly calls is the reset, which is called on every popupLaunch, and the onConfirm, which is called during the confirmation.

Next come the bread and butter which gets this thing going. contains all the accessors needed for the generation of the dynamic question/answers. The main thing to note down for this bean is the abstract methods which will make sure that the consumer will have to code those implementation for handling the questions as well as answers where events starts to manipulate.
Let's start with playing with this starting with our fragment.

Take note how I kept the items in the pageFlow scope, for longer life in its context.

The launch method in this class is the entry point of calling the component.
All the hooks are implemented here.

  • initializeItems - This is where I insert question data
  • onConfirm - I check for at least one affirmative answer before I return a yey' to the super class
  • configureAnswer - Just an extra hook before setting the values (think of it as setAttributeInternal :) )
  • resetItems - I directly set the answers back on their initial state which is unanswered.

So let's start putting it to the test.

Kudos to declarative components.

No comments:

Post a Comment