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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</af:resource>
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.........
</af:resource>
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="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="Animation.jsf" id="d1">
<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></af:resource>
<af:resource type="javascript">
$(document).ready(function(){
$(".button").click(function(){
$(".box").hide();
});
});
</af:resource>
<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"/>
</af:toolbar>
</f:facet>
<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"/>
</af:panelBox>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
When we click on the button then box will be Hide by using the above code example
Thanx
Mushtaq Wattu
ADF UI Developer
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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</af:resource>
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.........
</af:resource>
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="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="Animation.jsf" id="d1">
<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></af:resource>
<af:resource type="javascript">
$(document).ready(function(){
$(".button").click(function(){
$(".box").hide();
});
});
</af:resource>
<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"/>
</af:toolbar>
</f:facet>
<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"/>
</af:panelBox>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
When we click on the button then box will be Hide by using the above code example
Thanx
Mushtaq Wattu
ADF UI Developer
No comments:
Post a Comment