ADF How To

  
  

   
   
4.2.2 How to Import JavaScript Libraries
   
   

    
    
Use the af:resource tag to access a JavaScript library from a page. This tag should appear inside the document tag's metaContainer facet.
    
    
Before you begin:
    
    
It may be helpful to have an understanding of adding JavaScript to a page. For more information, see Adding JavaScript to a Page.
    
    
To access a JavaScript library from a page:
    
    
Below the document tag, add the code shown in bold below and replace /mySourceDirectory with the relative path to the directory that holds the JavaScript library.
      
      

       
       
<af:document>
  <f:facet name="metaContainer"><af:resource source="/mySourceDirectory"/> </facet>
  <af:form></af:form>
</af:document>

      
      
In the Structure window, right-click the component that will invoke the JavaScript, and choose Insert inside component > ADF Faces > Client Listener.
In the Insert Client Listener dialog, in the Method field, enter the name of the function. In the Type field, select the event type that should invoke the function.
   
   
  
  
  
  

   
   

  
  
  
  

   
   

  
  
  
  

   
   

  
  
  
  

   
   
4.2.1 How to Use Inline JavaScript
   
   

    
    
Create the JavaScript on the page and then use a clientListener tag to invoke it.
    
    
Before you begin:
    
    
It may be helpful to have an understanding of adding JavaScript to a page. For more information, see Adding JavaScript to a Page.
    
    
To use inline JavaScript:
    
    
Add the MyFaces Trinidad tag library to the root element of the page by adding the code shown in bold.
      
      

       
       
<f:view xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
        xmlns:trh="http://myfaces.apache.org/trinidad/html">

      
      
In the Components window, from the Layout panel, in the Core Structure group, drag and drop a Resource onto the page.
      
      

       
       
Note:
       
       
Do not use the f:verbatim tag in a page or template to specify the JavaScript.
      
      
In the Insert Resource dialog, select javascript from the dropdown menu and click OK.
Create the JavaScript on the page within the <af:resource> tag.
      
      

       
       
For example, a sayHello function might be included in a JSF page like this:
       
       
<af:resource>
  function sayHello()
  {
    alert("Hello, world!")
  }
</af:resource>

      
      
In the Structure window, right-click the component that will invoke the JavaScript, and choose Insert inside component > ADF Faces > Client Listener.
In the Insert Client Listener dialog, in the Method field, enter the JavaScript function name. In the Type field, select the event type that should invoke the function.
    
    

     
     

    
    
    
    

     
     
4.2.3 What You May Need to Know About Accessing Client Event Sources
      
      

       
       
Often when your JavaScript needs to access a client component, it is within the context of a listener and must access the event's source component. Use the getSource()method to get the client component. The following example shows the sayHello function accessing the source client component in order to display its name.
       
       
function sayHello(actionEvent)
{
  var component=actionEvent.getSource();
  
  //Get the ID for the component
  var id=component.getId();

  alert("Hello from "+id);
}

       
       
For more information about accessing client event sources, see Using JavaScript for ADF Faces Client Events. For more information about accessing client-side properties, see Accessing Component Properties on the Client. For a complete description of how client events are handled at runtime, see What Happens at Runtime: How Client-Side Events Work.
      
      

    
    
    
    

     
     

    
    
    
    

     
     

    
    
    
    

     
     

      
      http://docs.oracle.com/middleware/12211/adf/develop-faces/GUID-A5DE300F-6EDC-4DB3-8D6F-14CCEF3D3E7C.htm#ADFUI10039