Fri. Apr 23rd, 2021

Explanation: FacesMessage represents a single validation (or other) message, which is typically associated with a particular component in the view. A FacesMessage instance may be created based on a specific messageId. The specification defines the set of messageIds for which there must be FacesMessage instances.

FacesMessage is used to show confirmation, warning, information.

Requirement: I have a demo.jspx page. On that page I have a button with the name as Show ADF FacesMessage. Now, on click of the Show ADF FacesMessage button it show opens an ADF FacesMessage window displaying the message as “Testing FacesMessage, This is Sample Message

The look and feel of the default FacesMessage box is shown below:

As we can see in the above screenshot, that for a small text message it is displaying a big FacesMessage box which is not looking that good.

Thus, our requirement is to control the sizing of FacesMessage.

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create an ADF Fusion Web Application. Create a demo.jspx page. On that page have a button with the name as Show ADF FacesMessage.

Step 2: Create an actionListener with the name as showFacesMessage for the Show ADF FacesMessage button. The name of the bean is MyBean.java

Thus, the complete code for the demo.jspx is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:form id="f1">
                <af:button text="Show ADF FacesMessage" id="b1" actionListener="#{MyBean.showFacesMessage}"/>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Step 3: Write the below code for the actionListener that is for the showFacesMessage method.

Thus, the complete code for MyBean.java is shown below:

package com.susanto;

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

public class MyBean {
    public MyBean() {
    }

    public void showFacesMessage(ActionEvent actionEvent) {
        FacesMessage Message = new FacesMessage("Testing FacesMessage, This is sample Message");
        Message.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext fc = FacesContext.getCurrentInstance();
        fc.addMessage(null, Message);
    }
}

Save all and run the application. Thus, the ran application is shown below:

Now, click on the Show ADF FacesMessage button and we can see the FacesMessage as shown below:

Now, to reduce the size of the above FacesMessage box we can use the below CSS properties.

-tr-default-content-widthThe root style, af|dialog, contains skinning property “-tr-default-content-width” that provides the default contentWidth if not provided when stretching is turned on, “stretchChildren=first”. The default is 250 pixels.
-tr-default-content-heightThe root style, af|dialog, contains skinning property “-tr-default-content-height” that provides the default contentHeight if not provided when stretching is turned on, “stretchChildren=first”. The default is 250 pixels.
af|dialog{
  -tr-default-content-width : -1;
  -tr-default-content-height : -1;
}

After we applied the above CSS, the screen will look like as shown below:

Now, to add color to the dialog border, dialog background, and also to the dialog title. For that we can use the below CSS properties.

af|dialog {
    -tr-default-content-width: -1;
    -tr-default-content-height: -1;
    background-color: Highlight;
    border-color: #006262; 
}
af|dialog::title {
    color: #002e4e;
}

After we applied the above CSS, the screen will look like as shown below:

Now, let us assume that we want to hide the OK button of the above dailog or the FacesMessage box. For that we can write the below CSS properties.

af|dialog::footer-content af|button {
    visibility: hidden;
}

After we applied the above CSS, the screen will look like as shown below. In the below screenshot we will no longer see the OK button.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 266 total views,  3 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *