Javascript in ADF

 JavaScript in ADF

• One of standardway to add Java script to ADF page
• AF:Document -> Facets -Document -> Meta Container
• Meta Container -> insert inside -> adf faces -> Resource & and select type as JavaScript
• Show Alert on some action
• Create javascript function inside af:resource tag
• function displayAlert(event){
      alert ("I am from Java Script Function");
  }
• Call the java script function from adf components(input Text)
• Insert ClientListner inside any adf faces inputText  
• Provide the JavaScript function name which is created & select the type(trigger when to invoke the function eg: keyDown, Click..  )
• Java Script function to Toggle - Collapse pannel splitter 
• var component = AdfPage.PAGE.findComponent('ps1');
  component.getProperty("collapsed");
  component.setProperty("collapsed",true);
• Toggle the layout between Horizontal and Vertical
• Set ClientComponent property of PageGroupLayout element property to True
•  var component = AdfPage.PAGE.findComponent('pg1');
  component.setProperty("layout","vertical");
• How to invoke ADF component method defined on button action from JS code
• var component = AdfPage.PAGE.findComponentbyAbsoluteId('button1');
  AdfActionEvent.queue(component,component.getPartialSubmit());
• How to open popup in JavaScript
• var popup = AdfPage.PAGE.findComponentbyAbsoluteId('p1');
  popup.show();
• Show date popup automatically with out allowing user to enter manually 
• function disableInputdate(event){
  event.cancel();
  }
• ClientListner to Call above function on keyPress
• Execute code once the page/document is loaded. JS script inturn executes method in backing bean
• AF:Document-> add Client listner -> provide method name "loadPage" and action as Load
  function pageLoad(event){
  var source = event.getSource();
  AdfCustomEvent.queue(source,"callserver",{},false);
  }
• JS code to access backing bean code
• AF:Document -> add Server listner -> provide  type "callServer" & method from backing bean
• loadPage()
  var source = event.getSource();
  AdfCustomerEvent.queue(source,"callServer",{},false);
• Send Parameter from Client to JS -> backing bean. Show Employee details on double click of dept row
• Add clientListner & serverListner to the table component
• clientListner type is dobleclick & method as tableDBClick
• function tableDBClick(event){
  var source = event.getSource();
  var name = source.getProperty("deptName");
  AdfCustomEvent.queue(source,"calltableserver",{deptName<param>:deptName<value>},false);
  }
• serverListner type as calltableserver and method as backing method depttabledblclick
• public voice depttabledblclick(ClientEvent clientEvent){
  string deptName = clientEvent.getParameters.get("deptName");
  showPopup("p2");
  }
• public void showPopup(String popupname){
    StringBuilder strb = new StringBuilder("AdfPage.PAGE.findComponentbyAbsoluteId(\""+popupname+"\ ").show();");
  FacesContext fctx = FacesContext.getCurrentInstance();
  ExtendedRenderKitService erks = Service.getRenderKitService(fctx,ExtendedRenderKitService.class);
  erks.addScript(fctx,strb.toString());
  }
  }
• Add clientAttribute to the table component to send parameter to JS method
  <af:clientAttribute name="deptName" value = "#{row.departmentId}">
•  Backingbean Method
• 
  
• User ENTER to navigate to next field
• function tabIndex(event){
  var code = event.getKeyCode();
  var component = event.getSource();
  if (!e){
  var e= window.event;
  if e.shiftKey{
    if (code==13){
  event.cancel();
  var prevComponent = AdfPage.PAGE.findComponentbyAbsoluteId(component.getProperty("prevComponentId"));
  prevComponenet.focus();
  }}
  else if (code==13){
  event.cancel();
  var nextComponent = AdfPage.PAGE.findComponentbyAbsoluteId(component.getProperty("nextComponentId"));
  nextComponenet.focus();
  }}
• Compare values in 2 input fields
• <![CDATA[
  function checkvalue(event){
  var output1 = document.getElementById("it5::content");
  var output2 = document.getElementById("it6::content");
  output1.value == output2.value then.....
  }
  ]]>
• How to find component id
• af:Document -> properties -> initial focus id -> point to your document to get the ID