Thursday, March 3, 2011

JavaScript With ADF Faces Samples

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();
}

4 comments:

  1. hi, this is quite useful. Thanks for the post.

    I have a question though. I have a java script that returns a string. now i want to save and access this value in a adf page flow scope variable/attribute.

    how do i capture this javascript string value?? any clues?

    ReplyDelete
  2. Isn't this blog copied from http://sameh-nassar.blogspot.in/2010/02/javascript-functions-sample.html .. even you link points to this dude !!

    ReplyDelete
  3. document.getElementById('it1') getting null in jsff (fragments) pages.
    Same code is working in jspx and jsf pages.

    Please help on this

    ReplyDelete