Skinning ADF Dialog box inside popup component

 In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this

And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this

Cheers :) Happy Learning

ADF Basics| Tip to Hide af:inputListOfValues search popup at runtime

Hello All

Previously I have posted about a requiremnt of  hiding af:inputListOfValues search icon using CSS
ADF Skinning | Hiding search icon of af:inputListOfValues using CSS & StyleClass

In that solution search icon doesn't appear on page but it is a part of JSF component tree so when user press TAB+SPACE after entering a value in lov component then search popup appears on screen as this action invokes search icon click event

Recently a Friend of mine came across another requirement that was not showing lov popup at all as only autoSuggest behavior was required , so for this first way is to use autoSuggest behavior in an af:inputText compoent using Lov bindings and second way is to short circuit component life cycle

Open af:inputListOfValues popup by calling JavaScript programmatically

af:inputListOfValues provides option to open Lov values in a popup and allow user to search, We can open this popup by clicking on magnifying glass icon

Recently I have seen a thread on OTN forum where user wants to open lov popup on a button click after checking some conditions and also found a post by Frank Nimphius Where he used javascript to open Lov popup on double click of mouse.
So guess what I have done ? ;)
Just called that javascript fucntion programmatically on button click

Oracle JDeveloper and Oracle ADF 12c (12.2.1.0.0) out (bug fixed and lots of new features introduced)

Time to check new Jdeveloper 12.2.1 , Wait is over Check out new features :)

Download- Oracle JDeveloper 12g (12.2.1.0.0)

1. Alta UI is now default skin for all ADF Faces components , previously it was Skyros
Read more about Oracle Alta UI Design Patterns

4. In Data Visualization some change done in Pie Chart and Thematic Map. New component NBox and funnel chart is introduced

Changing default text of af:dialog buttons (ok,cancel) in ADF

Hello All,
you all have used pop up component with af:dialog in ADF,
default dialog component look like this inside popup

in ADF there is option to change dialog type , select dialog component and go to property inspector-

But sometimes we need to change default dialog button's text as per our requirement, to do this follow steps mentioned below

• Drag a popup having dialog as its child component on page
• select af:dialog in structure window and go to property inspector

• In property inspector navigate Appearance--->Text 

• Now set values for Affirmative and cancel text 
  
   
• Now run your application and see-
  
   



• But it's outcome doesn't get changed as it is static, you can see this in managed bean code, i have created dialog Listener and a cancelListener in managed bean 



import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import oracle.adf.view.rich.event.DialogEvent;
import oracle.adf.view.rich.event.PopupCanceledEvent;


public class DialogListenerBean {
    public DialogListenerBean() {
    }

    public void dialogListener(DialogEvent dialogEvent) {
        FacesMessage msg = new FacesMessage("You have clicked- " + dialogEvent.getOutcome().name());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void cancelListener(PopupCanceledEvent popupCanceledEvent) {
        FacesMessage msg = new FacesMessage("You have clicked- cancel");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

• When you click on ok and cancel (with changed text), it will return same outcome that was before changing button's text

Cheers- Merry Christmas :-)

Validation Problem with Cascading mandatory fields in ADF Faces

It is a functional requirement , suppose in application one fields is dependent on another field for its value or any property (required,disable,visible), it means when you select first field and put value in that then second field's value or other property is populated.
or second one is, you have multiple required attributes (cascading) in page and any of that's AutoSubmit  is set to true, in this case when user puts value in first field and goes to second to enter value but before this a large message window appears with required validation and all fields get red

This is very much annoying for user to face this kind of message each time, as i had a scenario where there was 15 required fields in af:form on popup and 10 of that are set to AutoSubmit true .
to avoid this see steps

• Suppose i have page with create button for Departments table (default HR Schema) on pop up as a form and all fields are reuired

•  When user clicks on create button and put value in field of DepartmentId, all required fields throw exception

• To avoid this i have set immediate true for first required field that is DepartmentName, it means when any validation occurs on popup , DepartmentName field will skip all validation on page and will shows only of its own

•  Now when user put value in DepartmentId field, only DepartmentName field shows exception (required)

 Happy coding......!!

Auto dismiss popup component with dialog- Oracle ADF

af:popup is container component for noteWindow, dialog, panelWinow, contextMenus, when we use popup with af:noteWindow, there is property autoDismissalTimeout is responsible for closing poup after some specific time.
But if we are using af:dialog in af:popup , how to close popup in this situation ?

Steps to do-

• Create a fragment in bounded taskFlow and drag a button on which we have to open popup.
• Drag a popup in page and showPopupBehavior inside button, pass id of popup and set trigger type to action to open poup on button click

•  Now drag a af:poll  component inside af:dialog

poll component delivers poll event to server at  fixed intervals, so we can use this property to fulfil our requirement .

  

• Select poll component in structure window and go to propertyInspector ,create poll listener  in managed bean and set Interval and Timeout to 4000 & 4001 (Timeout slightly greater than Interval time)-It means poll event delivers to server after 4000 ms or 4second

• Now bind popup component to your managed bean, inorder to control poup properties

• Close poup in pollListener(), means when after 4sec when poll event invoke server, it will close popup dialog automatically.

Sample ADF Application- Download

Inline PopUp with noteWindow (Excellent feature) in Oracle ADF

A very good and flexible component in adf is af:popup. we can use popup in various ways.
Suppose sometimes we need to show short description or some detail about any text ,button on Mouse Hover, then we can use inline PopUp (excellent look and feel)

For this you have to follow these steps-

• Create a page in your bounded taskflow, drag an output text in page for that we are going to show Short Description.
• Drag n drop a pop component in page in which we show description for that output text

• Now drop a noteWindow under popup component 

•  and write your description in source of .jsff page in notewindow component

<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
      <af:noteWindow id="nw1" inlineStyle="width:200px;" autoDismissalTimeout="5">
                       <p><b>Penguins</b> <b><font color="maroon">(order Sphenisciformes, family Spheniscidae)
                       are a group of aquatic, flightless birds living almost
                       exclusively in the southern hemisphere, especially in
                       Antarctica.</font></b> <b><font color="Green"> adapted for life in the water, penguins
                       have countershaded dark and white plumage, and their wings
                       have evolved into flippers</font></b></p>
      </af:noteWindow>
    </af:popup>

• Drag showPopupBehavior inside output text for that you have to show that popUp

• Now pass popup id in showPopupBehavior and set trigger type to mouseHover 

• Run your page and see how it look-- It is just awesome
  
  
   
  And this is very good that you can show graphs, tables and other information on this type of inline popUp 
  You can find sample application here- Download Sample Application
  
  

Invoke ADF Table Selection Listener, custom selection listener for af:table

Sometimes we need to define our own selection listener for adf table, or we have to perform some operation on row selection in af:table.

We can do this by defining custom selection listener for table in Managed bean.
In this tutorial i am showing a popup on table row selection , Here i am using Employees table of HR Schema

• Prepare model and ViewController for Employees table and drag table in your page. Now select table and go to property Inspector , you will see its default selection listener 

• Now define your own (custom) selection listener for this table in your managed bean

• Now write this code snippet on that custom selection listener,this code invokes its default listener and get the selected row. first you have to invoke its default listener that is

#{bindings.Employees1.collectionModel.makeCurrent}

    public void empTableSelectionListener(SelectionEvent selectionEvent) {
        ADFUtil.invokeEL("#{bindings.Employees1.collectionModel.makeCurrent}", new Class[] {SelectionEvent.class},
                         new Object[] { selectionEvent });
        // get the selected row , by this you can get any attribute of that row
        Row selectedRow =
            (Row)ADFUtil.evaluateEL("#{bindings.Employees1Iterator.currentRow}"); // get the current selected row
        //to show popup, you can write your logic here , what you wanna do
        showPopup(empPopup, true);
    }

• you have to import these packages in order to invoke selection listener

import org.apache.myfaces.trinidad.event.SelectionEvent;
import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;

• In above code snippet ADFUtil is an utility class that contains methods for invoking EL (Expression language), so you have to make a Java class named ADFUtil in same package as bean

import java.util.Map;

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.el.ValueExpression;

import javax.faces.context.FacesContext;

import oracle.adf.model.BindingContext;
import oracle.adf.model.DataControlFrame;


/**
 * Provides various utility methods that are handy to
 * have around when working with ADF.
 */
public class ADFUtil {

/**
* When a bounded task flow manages a transaction (marked as requires-transaction,.
* requires-new-transaction, or requires-existing-transaction), then the
* task flow must issue any commits or rollbacks that are needed. This is
* essentially to keep the state of the transaction that the task flow understands
* in synch with the state of the transaction in the ADFbc layer.
*
* Use this method to issue a commit in the middle of a task flow while staying
* in the task flow.
*/
public static void saveAndContinue() {
Map sessionMap =
FacesContext.getCurrentInstance().getExternalContext().getSessionMap();
BindingContext context =
(BindingContext)sessionMap.get(BindingContext.CONTEXT_ID);
String currentFrameName = context.getCurrentDataControlFrame();
DataControlFrame dcFrame =
context.findDataControlFrame(currentFrameName);

dcFrame.commit();
dcFrame.beginTransaction(null);
}

/**
* Programmatic evaluation of EL.
*
* @param el EL to evaluate
* @return Result of the evaluation
*/
public static Object evaluateEL(String el) {
FacesContext facesContext = FacesContext.getCurrentInstance();
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory =
facesContext.getApplication().getExpressionFactory();
ValueExpression exp =
expressionFactory.createValueExpression(elContext, el,
Object.class);

return exp.getValue(elContext);
}

/**
* Programmatic invocation of a method that an EL evaluates to.
* The method must not take any parameters.
*
* @param el EL of the method to invoke
* @return Object that the method returns
*/
public static Object invokeEL(String el) {
return invokeEL(el, new Class[0], new Object[0]);
}

/**
* Programmatic invocation of a method that an EL evaluates to.
*
* @param el EL of the method to invoke
* @param paramTypes Array of Class defining the types of the parameters
* @param params Array of Object defining the values of the parametrs
* @return Object that the method returns
*/
public static Object invokeEL(String el, Class[] paramTypes,
Object[] params) {
FacesContext facesContext = FacesContext.getCurrentInstance();
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory =
facesContext.getApplication().getExpressionFactory();
MethodExpression exp =
expressionFactory.createMethodExpression(elContext, el,
Object.class, paramTypes);

return exp.invoke(elContext, params);
}

/**
* Sets a value into an EL object. Provides similar functionality to
* the <af:setActionListener> tag, except the from is
* not an EL. You can get similar behavior by using the following...

* setEL(to, evaluateEL(from))
*
* @param el EL object to assign a value
* @param val Value to assign
*/
public static void setEL(String el, Object val) {
FacesContext facesContext = FacesContext.getCurrentInstance();
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory =
facesContext.getApplication().getExpressionFactory();
ValueExpression exp =
expressionFactory.createValueExpression(elContext, el,
Object.class);

exp.setValue(elContext, val);
}
}

PopUp component in Oracle ADF, Use showPopUpBehavior/JavaScript to show PopUp

In this tutorial we will see that how to deal with PopUp component in Oracle ADF.
Suppose we want to show popUp on any button click or on any other action, then there is 2 way to do this.

First one is-

1. Drag a PopUp component on page from Component Pallette

2. Now Drag a Button on page and drag af:showPopupBehavior under the button

3.Select af:showPopupBehavior at page structure and go to property Inspector and pass tha popUp id and trigger type of Popup that you want to show on button click.

  

5. Now run your page and click on Button and you will able to see Popup

Second One is-



In this you have to do some code in Managed Bean, you have to call a method on button click to show Popup

Method to show Popup-

    private void showPopup(RichPopup pop, boolean visible) {
        try {
            FacesContext context = FacesContext.getCurrentInstance();
            if (context != null && pop != null) {
                String popupId = pop.getClientId(context);
                if (popupId != null) {
                    StringBuilder script = new StringBuilder();
                    script.append("var popup = AdfPage.PAGE.findComponent('").append(popupId).append("'); ");
                    if (visible) {
                        script.append("if (!popup.isPopupVisible()) { ").append("popup.show();}");
                    } else {
                        script.append("if (popup.isPopupVisible()) { ").append("popup.hide();}");
                    }
                    ExtendedRenderKitService erks =
                        Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
                    erks.addScript(context, script.toString());
                }
            }
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

Now we call it on button click, and pass the binding of Popup in it
as we have Popup with binding AddPop then on Button click we call this method as

1. showPopup(Addpop, true);