Ashish Awasthi's Blog: Jquery

Showing posts with label Jquery. Show all posts

Saturday 22 April 2017

Blog listed in 'Top 60 Oracle Blogs on planet' listing on Feedspot

Feedspot is modern RSS reader built especially for power users who want to save time
and they have a listed Top 60 Oracle Blogs on Planet based on following critera

Wednesday 14 October 2015

Blog Completed 3 awesome years

I am happy to tell you that my (Ashish Awasthi's Blog) blog has completed 3 years today.
On 14-October-2012 i have posted my first blog post on ADF Basics: Show inline Message in Oracle ADF and till now blog has more than 180 posts on ADF, Java, JavaScript, jQuery etc.

I started blogging to help Java & ADF developers, to share what i have learnt and still trying to do same
Initially started this blog with blogspot.com - oracleadf-java.blogspot.com & after one year changed it to a custom domain www.awasthiashish.com

It has 1700+ fan following on facebook -Facebook Page
Now i am trying to put some more interesting stuff to learn, Keep an eye on blog

Taking as a whole it was awesome journey of 3 years :) Thanks for your support , Keep reading Keep Learning :)

Now say Happy B'day to Ashish Awasthi's Blog :)

You might also like:

Tuesday 7 April 2015

Better UI -Show jQuery notification message (for error, warning, info) in Oracle ADF

Hello all,
Another post about using jQuery with ADF Faces , this post is about showing a notification message using jQuery in your ADF Application
Normally we use default FacesMesage to show error, warning and info messages in ADF

here i am using jQuery growl library , you can download files from Growl : jQuery Informative Messages Plugin

Let's see how to integrate this library with ADF Faces, you will get two files from above link
one is JavaScript file (jQuery script) and other one is CSS file (style-sheet for notification UI)

Add both files to viewController project under Web Content

now add reference of both files (JS and CSS) in page and also jQuery library to execute growl script

 <af:resource source="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="javascript"/>
            <af:resource source="js/jquery.growl.js" type="javascript"/>
            <af:resource source="style/jquery.growl.css" type="css"/>

Now i have added 3 buttons on page to show different messages on button click and created a managed bean to define action for each button
On button click i have called jQuery script to invoke notification message
see managed bean code-

import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;

public class ShowJqNotification {
    public ShowJqNotification() {
    }

    /**Helper method to execute javascript
     * @param script
     */
    public void calljqHelper(String script) {
        FacesContext context = FacesContext.getCurrentInstance();
        ExtendedRenderKitService erks = Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
        erks.addScript(context, script);
    }
    //Change your message as per requirement 
    /**Method to invoke Error Message
     * @param actionEvent
     */
    public void showErrMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.error({ message: \"Hi this is error message!\" });");

    }

    /**Method to invoke Warnign Message
     * @param actionEvent
     */
    public void showWarningMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.warning({ message: \"Hi this is Warning!\" });");
    }

    /**Method to invoke Info Message
     * @param actionEvent
     */
    public void showNoticeMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.notice({ message: \"Hi this is Notice!\" });");
    }

}

All done, now run application and check - how it looks :)

this is default look of script , you can customize it , just change some parameters in both JS and CSS files
I have changed some parameters in both files and see how it looks now

Cheers, Happy Learning :)
Sample ADF Application- Download

Read more about - Jquery and ADF Working together

Image zoom (power zoomer) effect using Jquery in ADF Faces
Show animated Image Caption using jQuery in ADF Faces
Using JQuery in Oracle ADF

Monday 8 December 2014

Show animated Image Caption using jQuery in ADF Faces

This is another post about using jQuery in ADF Faces, see previous posts on jQuery

Using JQuery in Oracle ADF
Image zoom (power zoomer) effect using Jquery in ADF Faces

This post talks about - how to add mouse hover caption to images? Caption means a brief explanation of picture/image. Normally 'alt' attribute of HTML page is used as Image Caption
But in ADF Faces af:image doesn't has 'alt' property , there is a property called 'shortdesc' and this property is used as 'alt' attribute for image when jsf page is loaded at client browser
you can check this in html source of your page in browser (inspect element)

<af:image shortDesc="Black Horse running or flying" id="FirstImage"
                                  inlineStyle="height:300px;width:500px;"
                                  source="#{resource['images:Best-Wild-Animal-Photos-of-2012-307-black-horse-running.jpg']}"/>

JSF page is converted to html for client side presentation, see in HTML source 'shortdesc' is used as 'alt' property

jQuery is used for client side scripting of HTML so jQuery script makes use of this 'alt' attribute to show animated caption for image
There are lots of jQuery and JavaScript available for showing different types of captions , here i am using jQuery Capty - A Caption Plugin (Download jQuery script and respective css file from link)

Now follow steps to use this jQuery plugin with ADF Faces

Create Fusion Web Application and a page in viewController, added jQuery script and css in viewController project (Jdev 12.1.3)

Add jQuery library and script file reference to page, also add css file reference to page

 //jQuery library reference
            <af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            //jQuery file reference that will be used to show caption
            <af:resource type="javascript" source="js/jquery.capty.js"/>
            <af:resource type="javascript" source="js/jquery.capty.min.js"/>
            //CSS file to style Caption
            <af:resource type="css" source="css/jquery.capty.css"/>

Next step is to execute jQuery function on pageload to show caption

//Function to show default sliding caption

$('#ImageId').capty();

//Change default fucntion to change animation type , speed and height of caption

$('#ImageId').capty({
animation: 'fade',
speed:     1000
})

So here i am using both function for two different images (for first image animation type is slide (default) and for second it is fade), add clientListener to document tag and set it's type to 'load' (to execute jQuery function on pageload)

 <af:clientListener method="jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:     1000}) })" type="load"/>

Run application and see magic of jQuery

you can change style (color,font etc) of caption box by modifying css sheet and size can be increased or decreased from jQuery function. for example i have changed color, font and size of caption box. see this

@CHARSET "UTF-8";

div.capty-caption {
 background-color: red;
 color: #FFF;
 font: bold 11px cursive;
 padding-left: 10px;
 padding-top: 7px;
 text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
 color: #318DAD;
 font: bold 11px verdana;
 text-decoration: none;
 text-shadow: none;
}

jQuery function to increase size-

jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:1000,height:50}) })

Thanks, Happy Learning :)
Download Sample ADF Application

Tuesday 2 December 2014

Image zoom (power zoomer) effect using Jquery in ADF Faces

Jquery is most popular javascript library ,it is used to provide better ui design, animations and client side events
This is another post about using jquery in ADF Faces, see previous post
Using JQuery in Oracle ADF

In this post i am using a jquery script to zoom (enlarge) image on hover , you have seen this in many e-commerce websites as they provide power zoom feature to enlarge product image for better customer experience

I have taken this jquery script from Dynamic Drive, see the documentation
To implement this in ADF Application follow these steps

Create a Fusion Web Application and a page in viewController project (Jdev 12.1.3)

Downloaded jquery script file from above link -ddpowerzoomer.js, add this jquery file to viewController project

Now add jquery library reference in page in order to use jquery functions

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            <af:resource type="javascript" source="js/ddpowerzoomer.js"/>

Next step is to add an image to page , so added an af:image to page and set path of image to display

Now i have to execute jquery function that will add power zoom feature to this image (See jquery code that will be executed on pageload)

jQuery(document).ready(function($){
 $('#i1').addpowerzoom({
  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) 
})

So to execute this jquery function on pageload , added a clientListenr to pagelike this

<af:clientListener type="load"
                               method="jQuery(document).ready(function($){   $('#i1').addpowerzoom({  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) })"/>

Now run this application and check it, magnifier is on deer :)

Now i am increasing size and power of magnifier - Power is 3 and size is 200x200