In your ADF web application you may want to use javaScript functions to perform some actions in client side. I will list some of the major javaScript functions which I use it in my applications. To use javaScript functions in your ADF Application (In JDeveloper 11.1.1.2.0) you should do the following :
1- Put inside af:document --> af:resource component with type javaScript (prefer to put the af:resource component inside metaContainer facet of af:document).
2- use af:clientListener component to call the function.
some of the JavaScript sample :
- Open popup
function openPopup(evt){
var popup = AdfPage.PAGE.findComponent("popupId");
popup.show();
}
- Hide poup
function aboutOkButton(event) {
var dialog = event.getSource();
var popup = dialog.findComponent("aboutPopup");
popup.hide();
event.cancel();
}
- Change component visibility
function showText()
{
var output1 = AdfUIComponent.findComponent("output1")
var output2 = AdfUIComponent.findComponent("output2")
var input = AdfUIComponent.findComponent("input")
if (input.value == "")
{
output1.setVisible(true);
}
else
{
output2.setVisible(true)
}
}
- Read value from inputText
var input1 = document.getElementById('in1::content');
var input2 = document.getElementById('in2::content');
if (input1.value == input2.value)
{
alert("Equals");
}
else
{
alert("No Equals");
}
- Set Panel Splitter Position
function setSplitterPos(event) {
var source = event.getSource()
source.setSplitterPosition(200);
}
insert inside af:panelSplitter ---> af:clientListener as:
< af:clientListener method="setSplitterPos" type="propertyChange"/ >
- Execute af:commandButton action
var component = AdfPage.PAGE.findComponentByAbsoluteId(commanButtonId);
AdfActionEvent.queue(component, component.getPartialSubmit());
- Execute goButton
function invokeGo(event){
var component = AdfPage.PAGE.findComponentByAbsoluteId("gb1");
var redirectEvent = new AdfRedirectEvent(component, component.getDestination(), true);
redirectEvent.queue(true);
}
Hint :
AdfRedirectEvent is an internal class and the target is not recognized. Note that on the goButton, you need to set the clientComponent property to true.
- Run file.exe
function RunExe()
{
var commandtoRun = "C:\\file.exe";
var objShell = new ActiveXObject("Shell.Application");
objShell.ShellExecute(commandtoRun, "", "", "open", 1);
}
- Accepting only Upper Case characters in input field
/// For IE only
function convertToUpperCase( _event ) {
var currText = null;
currText = String.fromCharCode(window.event.keyCode);
window.event.keyCode = currText.toUpperCase().charCodeAt(0);
}
/// For Mozilla
function convertToUpperCase( _event ) {
var _keycode = _event.getKeyCode();
if( ( _keycode > 64 && _keycode < 90 ) ||
( _keycode > 96 && _keycode < 123 ) ) {
currText = String.fromCharCode(_event.getKeyCode());
currText = currText.toUpperCase();
var _textFieldField = document.getElementById ( _event.getSource().getClientId() );
var _inputFields = _textFieldField.getElementsByTagName('INPUT');
var _firstInputField = _inputFields[0];
_firstInputField.value = String.concat( _firstInputField.value, currText);
_event.cancel();
}
}
- To know which browser you use
function iEOrNot(myEvent) {
var currText = null;
if(!myEvent)
myEvent = window.event;
if(navigator.appName == 'Microsoft Internet Explorer') {
// I am IE
} else if(navigator.appName != 'Microsoft Internet Explorer') {
// I am not IE
}
}
- Get screen width and hight
width = java.awt.Toolkit.getDefaultToolkit().getScreenSize().width;
hight= java.awt.Toolkit.getDefaultToolkit().getScreenSize().hight;
- Get Mac Address, Ip Address and Computer Name
function call(event) {
var source = event.getSource();
var macAddress = "";
var ipAddress = "";
var computerName = "";
var wmi = GetObject("winmgmts:{impersonationLevel=impersonate}");
e = new Enumerator(wmi.InstancesOf("Win32_NetworkAdapterConfiguration"));
for(; !e.atEnd(); e.moveNext()) {
var s = e.item();
if(s.DNSHostName!=null)
{
macAddress = s.MACAddress;
ipAddress = s.IPAddress(0);
computerName = s.DNSHostName;
}
}
}
- Open inputDate calender
function openDate(event) {
src = event.getSource();
popup = src.findComponent(""+AdfRichUIPeer.CreateSubId(src.getClientId(), AdfDhtmlInputDatePeer._POPUP_ID));
hints = {alignId:src.getClientId(), align:AdfRichPopup.ALIGN_END_AFTER};
popup.show(hints);
}
- Get keyCode of the key
function keyCode(evt) {
var k=evt.getKeyCode();
}
- Set cursor to inputText
function setFocus(evt) {
var t=document.getElementById('t1::content');// t1 is the inputText Id
t.focus();
}
- Change panelGroupLayout layout property
1- Put inside af:document --> af:resource component with type javaScript (prefer to put the af:resource component inside metaContainer facet of af:document).
2- use af:clientListener component to call the function.
some of the JavaScript sample :
- Open popup
function openPopup(evt){
var popup = AdfPage.PAGE.findComponent("popupId");
popup.show();
}
- Hide poup
function aboutOkButton(event) {
var dialog = event.getSource();
var popup = dialog.findComponent("aboutPopup");
popup.hide();
event.cancel();
}
- Change component visibility
function showText()
{
var output1 = AdfUIComponent.findComponent("output1")
var output2 = AdfUIComponent.findComponent("output2")
var input = AdfUIComponent.findComponent("input")
if (input.value == "")
{
output1.setVisible(true);
}
else
{
output2.setVisible(true)
}
}
- Read value from inputText
var input1 = document.getElementById('in1::content');
var input2 = document.getElementById('in2::content');
if (input1.value == input2.value)
{
alert("Equals");
}
else
{
alert("No Equals");
}
- Set Panel Splitter Position
function setSplitterPos(event) {
var source = event.getSource()
source.setSplitterPosition(200);
}
insert inside af:panelSplitter ---> af:clientListener as:
< af:clientListener method="setSplitterPos" type="propertyChange"/ >
- Execute af:commandButton action
var component = AdfPage.PAGE.findComponentByAbsoluteId(commanButtonId);
AdfActionEvent.queue(component, component.getPartialSubmit());
- Execute goButton
function invokeGo(event){
var component = AdfPage.PAGE.findComponentByAbsoluteId("gb1");
var redirectEvent = new AdfRedirectEvent(component, component.getDestination(), true);
redirectEvent.queue(true);
}
Hint :
AdfRedirectEvent is an internal class and the target is not recognized. Note that on the goButton, you need to set the clientComponent property to true.
- Run file.exe
function RunExe()
{
var commandtoRun = "C:\\file.exe";
var objShell = new ActiveXObject("Shell.Application");
objShell.ShellExecute(commandtoRun, "", "", "open", 1);
}
- Accepting only Upper Case characters in input field
/// For IE only
function convertToUpperCase( _event ) {
var currText = null;
currText = String.fromCharCode(window.event.keyCode);
window.event.keyCode = currText.toUpperCase().charCodeAt(0);
}
/// For Mozilla
function convertToUpperCase( _event ) {
var _keycode = _event.getKeyCode();
if( ( _keycode > 64 && _keycode < 90 ) ||
( _keycode > 96 && _keycode < 123 ) ) {
currText = String.fromCharCode(_event.getKeyCode());
currText = currText.toUpperCase();
var _textFieldField = document.getElementById ( _event.getSource().getClientId() );
var _inputFields = _textFieldField.getElementsByTagName('INPUT');
var _firstInputField = _inputFields[0];
_firstInputField.value = String.concat( _firstInputField.value, currText);
_event.cancel();
}
}
- To know which browser you use
function iEOrNot(myEvent) {
var currText = null;
if(!myEvent)
myEvent = window.event;
if(navigator.appName == 'Microsoft Internet Explorer') {
// I am IE
} else if(navigator.appName != 'Microsoft Internet Explorer') {
// I am not IE
}
}
- Get screen width and hight
width = java.awt.Toolkit.getDefaultToolkit().getScreenSize().width;
hight= java.awt.Toolkit.getDefaultToolkit().getScreenSize().hight;
- Get Mac Address, Ip Address and Computer Name
function call(event) {
var source = event.getSource();
var macAddress = "";
var ipAddress = "";
var computerName = "";
var wmi = GetObject("winmgmts:{impersonationLevel=impersonate}");
e = new Enumerator(wmi.InstancesOf("Win32_NetworkAdapterConfiguration"));
for(; !e.atEnd(); e.moveNext()) {
var s = e.item();
if(s.DNSHostName!=null)
{
macAddress = s.MACAddress;
ipAddress = s.IPAddress(0);
computerName = s.DNSHostName;
}
}
}
- Open inputDate calender
function openDate(event) {
src = event.getSource();
popup = src.findComponent(""+AdfRichUIPeer.CreateSubId(src.getClientId(), AdfDhtmlInputDatePeer._POPUP_ID));
hints = {alignId:src.getClientId(), align:AdfRichPopup.ALIGN_END_AFTER};
popup.show(hints);
}
- Get keyCode of the key
function keyCode(evt) {
var k=evt.getKeyCode();
}
- Set cursor to inputText
function setFocus(evt) {
var t=document.getElementById('t1::content');// t1 is the inputText Id
t.focus();
}
- Change panelGroupLayout layout property
Great article, like the second one on the web talking about that.
ReplyDeleteAlso, the adf js api reference:
http://download.oracle.com/docs/cd/E12839_01/apirefs.1111/e12046/overview-summary.html
Excellent Examples!! Thanks!
ReplyDeleteHello Sameh,
ReplyDeletevery useful and interesting topic
Regards
Karim
Good resource.
ReplyDeleteFor "- Accepting only Upper Case characters in input field "
You can set contentStyle property of af:inputText as "text-transform:uppercase;".
It will make all the input character as upper case and irrespective of browser :)
Great post! Thanx!
ReplyDeleteThank you Rajeev Kumar
ReplyDeletereally useful post . thank you
ReplyDeleteM.Ashry
JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
ReplyDeleteI always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.
Hi Sameh,
ReplyDeleteVery useful post, thanks! Bookmarked.
Do you know of an opportunity to perform navigation (like button action) from javascript?
Very useful Scripts, Thanks Sameer for sharing.
ReplyDeleteThanks,
Arun
I have read several good stuff here. Definitely worth bookmarking for revisiting.
ReplyDeleteI wonder how a lot effort you place to create any
such magnificent informative website.
Also see my website - pc repair ny
Great post! Thanks a lot for sharing those hard to find tricks ;-)
ReplyDelete"2- use af:clientListener component to call the function."
ReplyDeleteHow do you do this? There isn't adf code of the actual components which is what I was looking for in addition to the javascript.
Hi,
DeleteThere is no any java code here just add adf component (af:clientListener) inside button or link or .... like:
af:commandButton text="Open Popup" id="cb1">
af:clientListener method="openPopup" type="action"/>
Thank you Sameh .. very good
ReplyDeleteI every time emailed this blog post page to all my friends, for the reason that if like to read it next my links will too.
ReplyDeleteAlso visit my blog :: windows hiding tool