Requirement: Let us assume, we have a demo.jspx page. On that page I have a button with the name as “Show Department Details“.
Now, when User clicks on the “Show Department Details” button, it will open a popup with a dialog. Inside that dialog it will have all the Departments Data displayed in Tabular format.
Thus, the default look and feel of the dialog and its content is shown below:
Now, as per the requirement we want to change the default look and feel of the content inside the dialog. And the new look and feel of the dialog and its content is shown below:
Pre-requisites: For demonstration purpose we will be using the DEPARTMENTS table present inside the HR schema of the Oracle Database 11g XE Edition.
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: Create an Oracle ADF Fusion Web Application. Create an ADF Business Components from Tables for the DEPARTMENTS table.
Step 2: Create a demo.jspx page inside the ViewController project. Inside the demo.jspx drag and drop a button with the text as “Show Department Details”.
Now, on click of this button, it will open a popup, and inside that popup we will have a dialog. The content of the dialog is a Departments table data displayed in a tabular format.
Thus, the complete code for the demo.jspx is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="demo.jspx" id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:button text="Show Department Details" id="b1">
<af:showPopupBehavior popupId="p1"/>
</af:button>
<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
<af:dialog id="d2" title="Department Details">
<af:table value="#{bindings.DepartmentsVO1.collectionModel}" var="row"
rows="#{bindings.DepartmentsVO1.rangeSize}"
emptyText="#{bindings.DepartmentsVO1.viewable ? 'No data to display.' : 'Access Denied.'}"
rowBandingInterval="0"
selectedRowKeys="#{bindings.DepartmentsVO1.collectionModel.selectedRow}"
selectionListener="#{bindings.DepartmentsVO1.collectionModel.makeCurrent}"
rowSelection="single" fetchSize="#{bindings.DepartmentsVO1.rangeSize}"
filterModel="#{bindings.DepartmentsVO1Query.queryDescriptor}" filterVisible="true"
queryListener="#{bindings.DepartmentsVO1Query.processQuery}" varStatus="vs" id="t1">
<af:column sortProperty="#{bindings.DepartmentsVO1.hints.DepartmentId.name}"
filterable="true" sortable="true" headerText="Department ID" id="c1">
<af:outputText value="#{row.DepartmentId}"
shortDesc="#{bindings.DepartmentsVO1.hints.DepartmentId.tooltip}"
id="ot1">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.DepartmentsVO1.hints.DepartmentId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.DepartmentsVO1.hints.DepartmentName.name}"
filterable="true" sortable="true" headerText="Department Name" id="c2">
<af:outputText value="#{row.DepartmentName}"
shortDesc="#{bindings.DepartmentsVO1.hints.DepartmentName.tooltip}"
id="ot2"/>
</af:column>
<af:column sortProperty="#{bindings.DepartmentsVO1.hints.ManagerId.name}" filterable="true"
sortable="true" headerText="Manager ID" id="c3">
<af:outputText value="#{row.ManagerId}"
shortDesc="#{bindings.DepartmentsVO1.hints.ManagerId.tooltip}" id="ot3">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.DepartmentsVO1.hints.ManagerId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.DepartmentsVO1.hints.LocationId.name}" filterable="true"
sortable="true" headerText="Location ID" id="c4">
<af:outputText value="#{row.LocationId}"
shortDesc="#{bindings.DepartmentsVO1.hints.LocationId.tooltip}" id="ot4">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.DepartmentsVO1.hints.LocationId.format}"/>
</af:outputText>
</af:column>
</af:table>
<f:facet name="buttonBar"/>
</af:dialog>
</af:popup>
</af:form>
</af:document>
</f:view>
</jsp:root>
Save all, and run the application. Thus, the ran application is shown below:
Click in “Show Department Details” button and it will open a popup containing dialog and its content with the default look and feel as shown below:
Now, as per the requirement we will be changing the default look and feel of the content inside the dialog.
Step 3: Please refer to my post How to Add ADF Skin in Oracle ADF application? and create an ADF Skin.
Just for your reference, the entire project folder structure will look like as shown below:
Put the below code inside the skin1.css file.
@charset "UTF-8";
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "";
@namespace dvt "";
/**Below code to change background color and border color of dialog**/
af|dialog {
background-color: White;
border-color: #4267b2;
}
/**Below code to 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;
}
/**Below code to 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;
}
/**Below code to 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;
}
Save all and run the application. Thus, the new look and feel of the dialog and its content is shown below:
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
435 total views, 2 views today