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]  }) 
})


here i1 is the id of image, default zoom power and magnifier size is configured here

• 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

Thanks, Happy Learning :)
Download Sample ADF Application

Populate af:table programmatically from managead bean using POJO

This post is about a common question
How can we populate an af:table programmatically ?

It means that data in af:table is not populated through model layer (Using ViewObject) using binding layer. lets say I have some values in our managed bean and have to show records in tabular format on page

So what we have to do -

• First you should know the number and data type of columns in table, suppose i have to populate a table for person details (name, mobile number and salary). to get and set value of columns i have created a java bean class , it has 3 variable for 3 columns





// Java Class to set and get value for table column
public class PersonBean {

    public PersonBean(String name, String moNo, Integer salary) {
        this.Name = name;
        this.mobNo = moNo;
        this.salary = salary;
    }
    private String Name;
    private String mobNo;
    private Integer salary;

    public void setName(String Name) {
        this.Name = Name;
    }

    public String getName() {
        return Name;
    }

    public void setMobNo(String mobNo) {
        this.mobNo = mobNo;
    }

    public String getMobNo() {
        return mobNo;
    }

    public void setSalary(Integer salary) {
        this.salary = salary;
    }

    public Integer getSalary() {
        return salary;
    }
}



• Next step is to create a managed bean for referencing af:table , this managed bean makes use of person java bean class to add data in same format for all table rows. A List data structure is used to pass all values in af:table. See code of managed bean 



//ArrayList to poplate data in af:table
    List<PersonBean> personList = new ArrayList();

    //To Populate default row in table (Code in Constructor)

    public ProgTableBean() {
        personList.add(new PersonBean("Ashish Awasthi", "xxxxxxxxxx", 50000));
    }

    public void setPersonList(List<PersonBean> personList) {
        this.personList = personList;
    }

    public List<PersonBean> getPersonList() {
        return personList;
    }



• Now just drop an af:table on page and set it's properties like value, column header and text values in columns



 As i have to show only 3 columns so deleted extra ones



 Set properties -
 value- from where table collection is populated
 columns values- take the var reference of table and refer variable name in List (here 'row' is table var and second is variable name in person bean class)




 See the XML source of af:table-



<af:table var="row" rowBandingInterval="1" id="t1" value="#{viewScope.ProgTableBean.personList}"
                          partialTriggers="::b1">
                    <af:column sortable="false" headerText="Name" id="c1" width="150">
                        <af:outputText value="#{row.name}" id="ot1"/>
                    </af:column>
                    <af:column sortable="false" headerText="Mobile Number" id="c2">
                        <af:outputText value="#{row.mobNo}" id="ot2"/>
                    </af:column>
                    <af:column sortable="false" headerText="Salary" id="c3" align="right">
                        <af:outputText value="#{row.salary}" id="ot3"/>
                    </af:column>
                </af:table>



• Now run this application and see there will be one row in table as code is added in constructor of managed to populate one row





• I have added a form and button in page to add new records in table , see the form source code



<af:panelFormLayout id="pfl1">
                    <f:facet name="footer"/>
                    <af:inputText label="Name :" id="it1" binding="#{viewScope.ProgTableBean.nameBind}"/>
                    <af:inputText label="Mobile Number :" id="it2" binding="#{viewScope.ProgTableBean.mobNumBind}"/>
                    <af:inputText label="Salary :" id="it3" binding="#{viewScope.ProgTableBean.salaryBind}">
                        <af:convertNumber/>
                    </af:inputText>
                    <af:button text="Add Record" id="b1" actionListener="#{viewScope.ProgTableBean.addNewRcord}"/>
                </af:panelFormLayout> 


Code in managed bean for button action-

    /**Method to add new record in table
     * @param actionEvent
     */
    public void addNewRcord(ActionEvent actionEvent) {
        //Get all values using compoenet binding as mobNumBind
        if (mobNumBind.getValue() != null && nameBind.getValue() != null &&
            salaryBind.getValue() !=
            null) {
            // Add new Record in List
            personList.add(new PersonBean(nameBind.getValue().toString(), mobNumBind.getValue().toString(),
                                          Integer.parseInt(salaryBind.getValue().toString())));
        }
    }



• now run and check application- 

 More posts on POJO Based table -

Get selected row (single/multiple) from POJO based table in ADF
Apply sorting to POJO based af:table programmatically , Using custom sort listener in ADF

Thanks , Happy Learning :)
Download-Sample ADF Application

Populate Dynamic table and form using af:dynamicComponent and dynamic viewObject - Oracle ADF

This post is about a common development requirement- Can we increase or decrease number of fields , type of fields (columns in case of table), data in fields at run time?

Suppose i have to show data of Departments and Employees table on page using only one af:table component. It means columns should be generated dynamically at run time depending on any defined condition
So for this requirement i am using dynamic viewObject in model layer and af:dynamicComponent in view layer
See previous post about creating dynamic viewObject-
Creating Dynamic View Object at Runtime programmatically - Oracle ADF

See step by step implementation-

• Create Fusion Web Application and follow the link posted above to create dynamic viewObject, in short create a viewObject using dual and a method in AMImpl to create dynamic viewObject from sql query






    /**Method to create viewObject using SQL query
     * @param query







     */
    public void createNewViewObject(String query) {
        ViewObject dynVo = this.getdynamic1();
        dynVo.remove();
        this.createViewObjectFromQueryStmt("dynamic1", query);
        this.getdynamic1().executeQuery();
    }



• Created a page and added an inputText to enter SQL query and a button to process that query and create dynamic viewObject at run time





• See Managed Bean code to process query, value of inputText is passed using component binding



    private RichInputText sqlQueryBind;

    public DynamicTableBean() {
    }

    /*****Generic Method to call operation binding**/
    public BindingContainer getBindingsCont() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**
     * Generic Method to execute operation Binding
     * */
    public OperationBinding executeOperation(String operation) {
        OperationBinding createParam = getBindingsCont().getOperationBinding(operation);
        return createParam;

    }

    /**Method to create viewObject
     * @param actionEvent
     */
    public void createViewObjectAction(ActionEvent actionEvent) {
        if (sqlQueryBind.getValue() != null) {
            OperationBinding ob = executeOperation("createNewViewObject");
            ob.getParamsMap().put("query", sqlQueryBind.getValue().toString());
            ob.execute();
        }
    }

    public void setSqlQueryBind(RichInputText sqlQueryBind) {
        this.sqlQueryBind = sqlQueryBind;
    }

    public RichInputText getSqlQueryBind() {
        return sqlQueryBind;
    }



• Now dropped this dual viewObject on page as dynamic form and dynamic table from Data Control (this snap is about creating form)








• Next is to change pageDef entry for this dynamic component , open pageDef and goto treeBinding. there is an entry for nodeDefinition, there will be separate treeBinding for form and table both (you should change both)



 <tree IterBinding="dynamic1Iterator" id="dynamic1">
            <nodeDefinition DefName="dynamictableapp.model.view.dynamicVO" Name="dynamic10"/>
        </tree>


Change this entry like this-



 <tree IterBinding="dynamic1Iterator" id="dynamic1">
            <nodeDefinition Name="dynamic10"/>
        </tree>



• Now run this application and enter SQL query in box and press process button

 Thanks, Happy Learning :)
Download -Sample ADF Application