v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
Normal
0
false
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
Using the ADF Faces JavaScript API, developers can listen
for user keyboard input in input components
to filter or respond
to specific
characters or key combination. The JavaScript shown below can be used with an af:clientListener tag
on af:inputListOfValues
or af:inputDate.
At runtime, the JavaScript code determines the component type it is executed on
and either opens the LOV dialog or the input
Date popup.
<af:resource
type="javascript">
/**
* function
to launch dialog if cursor is in
LOV or
* input
date field
* @param evt argument
to capture the
AdfUIInputEvent object
*/
function launchPopUpUsingF8(evt) {
var component = evt.getSource();
if (evt.getKeyCode() == AdfKeyStroke.F8_KEY) {
//check for input LOV component
if (component.getTypeName() ==
'AdfRichInputListOfValues') {
AdfLaunchPopupEvent.queue(component,
true);
//event is handled on the client. Server does
not need
//to be notified
evt.cancel();
}
//check for input
Date component
else if (component.getTypeName() ==
'AdfRichInputDate') {
//the inputDate af:popup component
ID always is ::pop
var popupClientId = component.getAbsoluteLocator()
+ '::pop';
var popup =
component.findComponent(popupClientId);
var hints = {align :
AdfRichPopup.ALIGN_END_AFTER,
alignId : component.getAbsoluteLocator()};
popup.show(hints);
//event is handled on the client. Server does
not need
//to be notified
evt.cancel();
}
}
}
</af:resource>
The af:clientListener
that calls the JavaScript is added as shown below.
<af:inputDate label="Label 1"
id="id1">
<af:clientListener
method="launchPopUpUsingF8" type="keyDown"/>
</af:inputDate>
As you may have noticed, the call
to open the popup is
different for the af:inputListOfValues
and the af:inputDate.
For the list of values component, an ADF Faces AdfLaunchPopupEvent is queued with the LOV
component passed s an argument. Launching the input
date popup is a bit more
complicate and requires you
to lookup the implicit popup dialog and
to open it
manually. Because the popup is opened manually using the show() method on the af:popup component, the
alignment of the dialog also needs
to be handled manually. For this, the popup
component specifies alignment hints, that for the ALIGN_END_AFTER hint aligns
the dialog at the end and below the
date component. The align Id hint specifies
the component the dialog is relatively positioned
to, which of course should be
the input
date field.
The ADF Faces JavaScript API and how
to use it is further explained
in the Using JavaScript in ADF Faces Rich
Client Applications whitepaper available from the Oracle Technology Network
(OTN)
http://www.oracle.com/technetwork/developer-tools/jdev/1-2011-javascript-302460.pdf
An ADF Insider recording about JavaScript in ADF Faces can
be watched from here
http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/adf-insider-javascript/adf-insider-javascript.html
