Tuesday, April 18, 2023

Oracle ADF caputure enter via javascript

 To capture enter key via javascript on an ADF input text do that:

       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" autoSubmit="true">  
           <af:clientListener method="onInputTextKeyUp" type="keyUp"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
 <af:resource type="javascript">  
         function onInputTextKeyUp(event){  
       //console.log("onInputTextKeyUp");  
       var component = event.getSource();  
        if(component != null){  
         var _keyCode = event.getKeyCode();  
         if(_keyCode==='Enter' || _keyCode ===13 ){  
           console.log("enter "+_keyCode);  
         }  
        }  
     }  
     </af:resource>  

Capturing enter you can do anything you want, for example associate a serverListener to execute code and simulate button click


       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" autoSubmit="true"  
                valueChangeListener="#{myDemoRequestBean.onInputTextValueChange}">  
           <af:clientListener method="onInputTextKeyUp" type="keyUp"/>  
           <af:serverListener type="buttonClick" method="#{myDemoRequestBean.onServerListenerButtonClick}"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
 ...........  
 <af:resource type="javascript">  
  function onInputTextKeyUp(event){  
       //console.log("onInputTextKeyUp");  
       var component = event.getSource();  
        if(component != null){  
         var _keyCode = event.getKeyCode();  
         if(_keyCode==='Enter' || _keyCode ===13 ){  
           //console.log("enter "+_keyCode);  
           AdfCustomEvent.queue(event.getSource(), "buttonClick",  
             null, true);  
         }  
        }  
     }  
     </af:resource>  

follow request bean java code:

 import javax.faces.event.ActionEvent;  
 import javax.faces.event.ValueChangeEvent;  
 import oracle.adf.view.rich.render.ClientEvent;  
 public class MyDemoRequestBean {  
   public MyDemoRequestBean() {  
   }  
   public void onActionListener(ActionEvent actionEvent) {  
     myMethod();  
   }  
   public void onServerListenerButtonClick(ClientEvent clientEvent) {  
     myMethod();  
   }  
   private void myMethod(){  
     System.out.println("my button code");  
   }  
   public void onInputTextValueChange(ValueChangeEvent valueChangeEvent) {  
     System.out.println(valueChangeEvent.getNewValue());  
   }  
 }  



Oracle ADF disable/enable button using javascript

 To enable/disable a button in a ADF page via javascript you need declare as client component and set the unsecure attribute to "disabled" as follow:

 <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
 actionListener="#{myDemoRequestBean.onActionListener}"/>  

Doing this using javascript you can disable/enable button as follow:

 var buttonId=document.querySelector('[id*="b1"]').id;  
 var button = AdfPage.PAGE.findComponentByAbsoluteId(buttonId);  
 //console.log(button);  

           button.setProperty('disabled', false);  
       

in the example I looking for the button in the page and than enable the button.

You can combine this in a complex way using an event "keyUp" or "valueChange" or other on another component

       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" >  
           <af:clientListener method="onInputText" type="keyUp"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
...........

 <af:resource type="javascript">  
     function onInputText(event){  
       console.log(event);  
       //var id = document.querySelector('[id*="'+componentId+'"]').id;  
       //console.log(id);  
       var component = event.getSource();  
       //console.log(component);  
       //console.log(component.getSubmittedValue());  
        if(component != null){  
         var buttonId=document.querySelector('[id*="b1"]').id;  
         //console.log(buttonId);  
         var button = AdfPage.PAGE.findComponentByAbsoluteId(buttonId);  
         if(component.getSubmittedValue().length > 0 ){  
           //console.log(button);  
           console.log(component.getSubmittedValue());     
           button.setProperty('disabled', false);  
         }else{  
           //console.log('else ');  
           button.setProperty('disabled', true);  
         }  
        }  
     }  
     </af:resource>