Saturday, 24 September 2016

How We can use id For Jquerry in ADF Application(jsf page)

In This Tutorial we will learn basic jquerry in adf Application Normally we use jquerry in html page but we can also use jquerry with a little bit change in our code

Follow These Steps to Use jquerry in JSF Page

First of all include CDN or download library and put it into your Resources\Js folder

<af:resource type="javascript"source="">


Then Write Your code of jquerry,keep in mind always write the jquerry below

<af:document title="Animation.jsf" id="d1">

<af:resource type="javascript">

write your code here.........


Keep in mind that we use class in jsf page to use jquerry

Following simple example will Clear your Confusion

?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE html>
<f:view xmlns:f="" xmlns:af="">
  <af:document title="Animation.jsf" id="d1">
  <af:resource type="javascript" source=""></af:resource>
  <af:resource type="javascript">
    <af:form id="f1">
      <af:panelStretchLayout id="psl1" inlineStyle="height:100%;" styleClass="AFStretchWidth">
        <f:facet name="start"/>
        <f:facet name="end"/>
        <f:facet name="top">
          <af:toolbar id="t1">
            <af:button text="button 1" id="b1" styleClass="button"/>
        <f:facet name="bottom"/>
        <f:facet name="center">
          <af:panelBox id="pb1" inlineStyle="height:300px;width:400px;background-color:red;" styleClass="box" text="PanelBox1">          
            <f:facet name="toolbar"/>


When we click on the button then box will be Hide by using the above code example


Mushtaq Wattu

ADF UI Developer

No comments:

Post a Comment