My Experiences in ADF

Thursday, November 20, 2014

ADF Train Stops - Different Look and Feel

Reference: http://multikoop.blogspot.com/2014/02/adf-faces-how-to-skin-great-looking.html

My Train Result:

Reference Result:

Difference between my version and the reference (On adjusting the browser):

TrainStop.jsf

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="TrainStopPage.jsf" id="d1">
<af:form id="f1">
<af:outputText value="Difference" id="ot6" inlineStyle="font-weight:bold; text-align:center;"/>
<af:panelBox id="pb1">
<af:panelList id="pl1" styleClass="customBreadcrumb">
<af:outputText id="ot1" value="Step 1" clientComponent="true"/>
<af:outputText id="ot2" value="Step 2" clientComponent="true"/>
<af:outputText id="ot3" value="Step 3" clientComponent="true"/>
<af:outputText id="ot4" value="Step 4" clientComponent="true"/>
<af:outputText id="ot5" value="Step 5" clientComponent="true"/>
</af:panelList>
</af:panelBox>
</af:form>
</af:document>
</f:view>

CSS:

/* Custom Breadcrumb - Start */
.customBreadcrumbBeforeAfter:alias {
content: no-open-quote;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
position: absolute;
left: 100%;
margin-top: -21px;
}

.customBreadcrumbTrainHighlight:alias{
font-size: 12px;
font-weight: bold;
}

af|panelList.customBreadcrumb ul {
overflow: hidden;
}

af|panelList.customBreadcrumb li {
float: left;
}

af|panelList.customBreadcrumb li span:hover {
text-decoration: underline;
font-style: italic;
}

af|panelList.customBreadcrumb li, af|panelList.customBreadcrumb li span {
color: white;
padding: 10px 5px 10px 15px;
background: blue;
display: block;
position: relative;
}

af|panelList.customBreadcrumb li:not( last-child), af|panelList.customBreadcrumb li:not( last-child) span {
background-color: yellow;
color: black;
font-size: 12px;
font-weight: bold;
}

af|panelList.customBreadcrumb li:first-child, af|panelList.customBreadcrumb li:first-child span {
background-color: blue;
color: black;
-tr-rule-ref: selector("customBreadcrumbTrainHighlight:alias");
}

af|panelList.customBreadcrumb li:last-child, af|panelList.customBreadcrumb li:last-child span {
background-color: maroon;
color: black;
-tr-rule-ref: selector("customBreadcrumbTrainHighlight:alias");
}

af|panelList.customBreadcrumb li span:before {
border-left: 28px solid white;
z-index: 1;
margin-left: 2px;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}

af|panelList.customBreadcrumb li span:before {
border-left: 28px solid white;
z-index: 1;
margin-left: 2px;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}

af|panelList.customBreadcrumb li:not( last-child) span:after {
border-left: 28px solid yellow;
z-index: 2;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}

af|panelList.customBreadcrumb li:first-child span:after {
border-left: 28px solid blue;
z-index: 2;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}

af|panelList.customBreadcrumb li:last-child span:before {
border-left: 0px solid maroon;
}

af|panelList.customBreadcrumb li:last-child span:after {
border-left: 0px solid maroon;
}

/* Custom Breadcrumb - End */

Reason why ul, li, span elements are used in CSS:

Note: To view Reference result - Go to the link mentioned above and copy paste the code.

Tuesday, November 18, 2014

Some Useful Javascripts in ADF

function setLoginToFocus(evt) {
var keyCode = evt.getKeyCode();
var comp = evt.getSource();
var enterButton = comp.findComponent('cb1');
if (keyCode == '13') {
enterButton.focus();
}
}

function blockNumbers(evt) {
var keyCode = evt.getKeyCode();
var isNumber = (keyCode > 47) && (keyCode < 58);
if (isNumber) {
evt.cancel();
}
}

function blockCharacters(evt) {
var keyCode = evt.getKeyCode();
var isCharacter = (((keyCode >= 65) && (keyCode <= 90)) || ((keyCode >= 97) && (keyCode <= 122)));
if (isCharacter) {
evt.cancel();
}
}

function onlyNumbers(evt) {
var keyCode = evt.getKeyCode();
var controlKeys = new Array(AdfKeyStroke.BACKSPACE_KEY, AdfKeyStroke.DELETE_KEY, AdfKeyStroke.TAB_KEY, AdfKeyStroke.HOME_KEY, AdfKeyStroke.END_KEY, AdfKeyStroke.ARROWLEFT_KEY, AdfKeyStroke.ARROWRIGHT_KEY, AdfKeyStroke.ENTER_KEY, AdfKeyStroke.ESC_KEY);
var isNumber = (keyCode > 47) && (keyCode < 58);
var isControlKey = false;
for (i in controlKeys) {
if (keyCode == controlKeys[i]) {
isControlKey = true;
break;
}
}
if (!(isNumber || isControlKey)) {
evt.cancel();
}
}

function onlyCharacters(evt) {
var keyCode = evt.getKeyCode();
var controlKeys = new Array(AdfKeyStroke.BACKSPACE_KEY, AdfKeyStroke.DELETE_KEY, AdfKeyStroke.TAB_KEY, AdfKeyStroke.HOME_KEY, AdfKeyStroke.END_KEY, AdfKeyStroke.ARROWLEFT_KEY, AdfKeyStroke.ARROWRIGHT_KEY, AdfKeyStroke.ENTER_KEY, AdfKeyStroke.ESC_KEY);
var isCharacter = (((keyCode >= 65) && (keyCode <= 90)) || ((keyCode >= 97) && (keyCode <= 122)));
var isControlKey = false;
for (i in controlKeys) {
if (keyCode == controlKeys[i]) {
isControlKey = true;
break;
}
}
if (!(isCharacter || isControlKey)) {
evt.cancel();
}
}

function convertToUppercase(evt) {
var comp = evt.getSource();
comp.setValue(comp.getSubmittedValue().toUpperCase());
}

Adding Watermarks to ADF Components in JDev 11.1.2.4

Reference: https://blogs.oracle.com/groundside/entry/placeholder_watermarks_with_adf_11

Note: This will work only for JSF page NOT for JSPX page.

Create a Tag Library

In ViewController project > Right Click > New > JSF/Facelets > Facelets Tag Library.
In the Create Facelets Tag Library wizard - Step1 > Select Project based >
Step 2 > Enter File name as adfglitz.taglib.xml and NameSpace as http://xmlns.oracle.com/adf/faces/glitz. and Finsh.
An entry will be created in the web.xml file.
Make sure to check whether facelet library has been added to the project by going to project properties > Facelets Tag Libraries

2. Create placeholder/Watermark Tag in the Tag Library

Add a new Tag name - setWatermarkBehaviour
Select the behavior radio button and enter Id - oracle.demo.adfglitz.watermark
Add a new attribute - value
value attribute type will be java.lang.String and Required will be True

3. Create a Java Class

Create a Java class named - SetWatermarkBehavior
Code can be copy pasted from https://blogs.oracle.com/groundside/resource/2012-05-16/SetWatermarkBehavior.java

4. Create a JavaScript class

Create a JavaScript class named - addWatermarkBehavior.js

Code:

function addWatermarkBehavior(componentId, type, text){

var sourceInput = AdfPage.PAGE.findComponent(componentId);

var domElemement = AdfAgent.AGENT.getElementById(sourceInput.getClientId());

var targetArray = domElemement.getElementsByTagName(type);

targetArray[0].placeholder = text;

}

5. Create a JSF page (Tried with JSPX but did not work)

NameSpace - xmlns:afg="http://xmlns.oracle.com/adf/faces/glitz" is added to the view.
Javascript addWatermarkBehavior.js is referenced inside the document tag.
The placeholder component <afg:setWatermarkBehaviour value="Please enter your first name here"/> is added inside the inputText component.

6. Done. Run your page and Test the Result