Mushtaq Watto Blog (ADF Skining | ADF UI Developer): September 2016

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="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

Friday 23 September 2016

Using Java Script Function For In Jsf Page

In this Tutorial lets talk about the java Script Function
While we are Working on jsf in property section we can see the java script function
AS Shown

These are built in function And Automatically called when we run the Function
lets take a very little example

For This Purpose drag and drop a button .
Choose java Script Function as I Choose onClick()

and when you will run the page and click on Button

Hope So You Will Enjoy The easy Tutorial

Thanx

Thursday 22 September 2016

Use Java Script In adf Applications

We can use Java Script in Adf Applications.There are two types of java script that we can use in our adf applications .They are external and internal cs.

We can prefer external cs because if we have long code then we can easily understand the code
we can use java script in adf application and write our code in the head of html page and in jsf page we can use code under the af:Document

Example of writing script in adf Application is

<af:document title="Button.jsf" id="d1">
<af:resource type="javascript"

function(){

write some code here
}
</af:resource>

So Follow The Step To Use Basic Js For Your Applicatioon

1)Write Java Script Code as Above Mentioned Under The Document and define your Java Script Function
2) Drag and drop A button to perform JS
3)Now Problem Is that in which component/faces You Are Trying To Use java Script ( like button ,input text ,output text etc)

4)Drag and Drop client listener on component for which you want to use java script figure willl clearify your Confuision

Write The Name of function in pop up container and meathed on which you want to use Js Function

Now Run your page and click button

For Complete Understand Here Is the full Code

I hope You will Enjoy Easy Tutorial

Thank You For your Participation

Mushtaq Wattu

Mushtaq Watto Blog (ADF Skining | ADF UI Developer)