ADF UI- Show DVT Chart inside af:table and other collection components

Hello All

This post is about showing a chart inside  ADF Faces Collection component like af:table or af:listView

This is a simple task to create normal chart but in case if we have to show table row record as a chart or graph then we have to change chart value and chart item value references so that it doesn't show all record but only values of that row

This post talks about these two requirements

1. Show same viewObject values as chart in af:table or af:listView
2. Show child viewObject values as chart in af:table or af:listView

Custom selection listener for af:listView, Invoke selectionListener programmatically

In the last post (Better UI for data collection using af:listView, Enable selection in ADF Faces List component ) about af:listView, we saw that how can we present data collection in a better way using af:listView and enable selection using EL (same as used for af:table)

Now in this post i will describe about defining custom selection listener for af:listView
Suppose you have to do some task on selection of an item in list other than making it current row, for this you have to override default selection listener and define own custom selection listener in managed bean
So next step is to define a method in managed bean for handling selection event of af:list view

• Select af:listView, goto properties and click on edit menu of selectionListener property and create a method in managed bean








• now see what we have to do in custom selection listener, first invoke default selection listener EL (#{bindings.Departments1.collectionModel.makeCurrent}) to make selected row as current and then get current row from iterator as selected row is now current row
  See the managed bean code -



//Import these packages

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.el.ValueExpression;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import oracle.jbo.Row;

import org.apache.myfaces.trinidad.event.SelectionEvent;   


 /**
     * Programmatic invocation of a method that an EL evaluates to.
     *
     * @param el EL of the method to invoke
     * @param paramTypes Array of Class defining the types of the parameters
     * @param params Array of Object defining the values of the parametrs
     * @return Object that the method returns
     */
    public static Object invokeEL(String el, Class[] paramTypes, Object[] params) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
        MethodExpression exp = expressionFactory.createMethodExpression(elContext, el, Object.class, paramTypes);

        return exp.invoke(elContext, params);
    }

    /**
     * Programmatic evaluation of EL.
     *
     * @param el EL to evaluate
     * @return Result of the evaluation
     */
    public static Object evaluateEL(String el) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
        ValueExpression exp = expressionFactory.createValueExpression(elContext, el, Object.class);

        return exp.getValue(elContext);
    }

    /**Custome Selection Listener for af:listView
     * @param selectionEvent
     */
    public void listSelectionListener(SelectionEvent selectionEvent) {
        //invoke this EL to set selected row as current row, if it is not invoked then first row will be current row
        invokeEL("#{bindings.Departments1.collectionModel.makeCurrent}", new Class[] { SelectionEvent.class }, new Object[] {
                 selectionEvent });
        // get the selected row , by this you can get any attribute of that row
        Row selectedRow = (Row) evaluateEL("#{bindings.Departments1Iterator.currentRow}");
        FacesMessage msg = new FacesMessage(selectedRow.getAttribute("DepartmentName").toString());
        msg.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }



• Now run application and check

Download Sample ADF Application here
Thanks , Happy Learning :)

Better UI for data collection using af:listView, Enable selection in ADF Faces List component

af:listView is a new component introduced in Jdev 12C to show tabular data (rows of a collection), it uses same configuration as af:table
In this post i will be describing- how to create af:listView using ADF business component and  how we can enable selection in af:listView

Let's start
How to create af:listView using ADF BC-

• Created a Fusion Web Application and prepared model using Departments table of HR Schema




drop Departments viewObject on page from DataControl as ADF List View






Configuration Wizard for List is opened, set the appropriate layout




Set the value binding that we want to show on page




After this we can customize layout on page also, we can change color, style width etc;
see XML source of af:listView-



<af:listView value="#{bindings.Departments1.collectionModel}" var="item"
                             emptyText="#{bindings.Departments1.viewable ? 'No data to display.' : 'Access Denied.'}"
                             fetchSize="#{bindings.Departments1.rangeSize}" id="lv1">
                    <af:listItem id="li1">
                        <af:panelGroupLayout layout="horizontal" id="pgl1">
                            <f:facet name="separator">
                                <af:spacer width="10" id="s1"/>
                            </f:facet>
                            <af:outputFormatted value="#{item.bindings.DepartmentId.inputValue}" id="of1"
                                                inlineStyle="font-weight:bold;font-size:medium;color:red;">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.DepartmentId.format}"/>
                            </af:outputFormatted>
                            <af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}" id="of2"
                                                inlineStyle="font-weight:bold;font-size:small;color:navy;"/>
                        </af:panelGroupLayout>
                        <af:panelGroupLayout id="pgl2">
                            <af:outputLabel value="Manager id" id="ol1"/>
                            <af:outputFormatted value="#{item.bindings.ManagerId.inputValue}" id="of3">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.ManagerId.format}"/>
                            </af:outputFormatted>
                            <af:spacer width="10" height="10" id="s2"/>
                            <af:outputLabel value="Location Id" id="ol2"/>
                            <af:outputFormatted value="#{item.bindings.LocationId.inputValue}" id="of4">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.LocationId.format}"/>
                            </af:outputFormatted>
                        </af:panelGroupLayout>
                    </af:listItem>
                </af:listView>



and how it looks on page- hmmm better than af:table





• By default adf listView doesn't support selection, you can see Selection property is set to none. it shares same configuration as af:table , you can see that value property is bound to #{bindings.Departments1.collectionModel} and attributes are populated using variable reference of this collection





• To enable selection just set Selection to single and in selectionListener property of list set #{bindings.Departments1.treeModel.makeCurrent}







• Now Run this application and check, single selection is enabled

 Thanks, happy learning :)