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

Resize FacesMessage, Change look n feel of Message Box using ADF Skin

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel

Using popupFetchListener to execute method on popup launch in Oracle ADF

Everyone must have used ADF Faces popup component , this is one of most used container to show information on top of page
In this post i am talking about popup fetch event suppose we have to perform some operation before opening popup like filtering data inside popup . We can do this by capturing popup fetch event, if you have checked af:popUp documentation then you must have seen concept of popupFetchListener

From Docs-
The PopupFetchEvent is one of two server-side popup events but doesn't have a corresponding client event. The popup fetch event is invoked during content delivery. This means that the event will only queue for popups that have a contentDelivery type of lazy or lazyUncached. Another caveat is that the event will only work when the launch id is set. This is automatically handled by the af:showPopupBehavior but must be provided as a popup hint if programmatically shown.

So here we will see -

How to use popupFetchListener to filter data inside popup ?
How to execute some operation before opening popup ?
How to call AMImpl method before launching popup?

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 :-)

Create new look up data using List of Values (LOVs) in Oracle ADF

While working on project , I have seen such type of LOV that have a option of create Lov Value at selection time, this is quite good, as if desired value is not available in list then user can create on that time.

This type of list looks like this

It means if there is no company available in list you need not to go on Company form, user can create it directly from here.
Doing this in ADF is quite simple , in this tutorial i am taking example of Oracle default HR schema (Employees and Departments) table-
Implementation Steps-

• Create business components from Department and Employees table 





•  Now create LOV on DepartmentId of employees ViewObject from Department VO

• Go to UI Hints tab of LOV and select Combo Box with List of Values

•  Now drag fields of Employee from DataControl to page as form

•  Select Department Id Lov and go to structure window, and drop a link in customActions facet of  af:inputComboboxListOfValues

• Now drag a popup on page and drag Department VO on af:dialog as form to create new department. and other things are same as normal form
  

• Bind this popup to bean and create a ActionListener on the link inside facet to invoke createInsert of department table



package lookup.view.bean;

import java.io.Serializable;

import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import oracle.adf.model.BindingContext;

import oracle.adf.view.rich.component.rich.RichPopup;

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

import oracle.binding.BindingContainer;
import oracle.binding.OperationBinding;

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

public class LookupDataBean implements Serializable {
    private RichPopup deptPopUpBind;

    public LookupDataBean() {
    }

    public BindingContainer getBindings() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    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);
        }
    }

    public void createDept(ActionEvent actionEvent) {
        BindingContainer bindings = getBindings();
        OperationBinding ob = bindings.getOperationBinding("CreateInsert");
        ob.execute();
        showPopup(deptPopUpBind, true);
    }

    public void DeptDialogListener(DialogEvent dialogEvent) {
        FacesContext fct = FacesContext.getCurrentInstance();
        if (dialogEvent.getOutcome().name().equals("ok")) {
            BindingContainer bindings = getBindings();
            OperationBinding ob = bindings.getOperationBinding("Commit");
            ob.execute();

        }
    }

    public void setDeptPopUpBind(RichPopup deptPopUpBind) {
        this.deptPopUpBind = deptPopUpBind;
    }

    public RichPopup getDeptPopUpBind() {
        return deptPopUpBind;
    }
}



• Now run this application and click on Lov of DepartmentId, you will see your link there to create Department

• Now see that how many departments are listed currently in LOV

• Now click on Add Department link and add a department

•  Again see the listed departments- Oracle ADF Tutorial is added in now list

 this is how you can use this beautiful feature in your LOV-
Sample ADF Application- Download

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