Follow by Email

Monday, 11 July 2016

Get selected Tag value from dvt:tagCloud component using custom selection listener in ADF 12.2.1.1


Hello All

Previously I have posted about using new DVT component TagCloud to design better UI (Showing TagCloud from ViewObject data) and this post is about getting selected tag value of TagCloud component

To enable selection in TagCloud component first thing is to set selectionMode property single, after that we can create a custom selection listener in managed bean to get selected row 

tagCloud component uses same tree binding and collectonModel to show data as af:table so we can use same logic in tagCloud selection listener
After setting selectionMode now set selectedRowKeys property of tagCloud, syntax is same as af:table -
#{bindings.DataBindingName.collectionModel.selectedRow}

Create a custom selection listener in managed bean and bind it to tagCloud component, See it's XML source (here I am using Employees table of HR Schema to create tagCloud component)

<dvt:tagCloud id="tc1" var="ent" value="#{bindings.Employees1.collectionModel}"
                              inlineStyle="height:400px; width:500px;" layout="cloud" selectionMode="single"
                              legendSource="ag1" hideAndShowBehavior="hide"
                              selectionListener="#{viewScope.TagCloudBean.tagCloudSelectionListener}"
                              selectedRowKeys="#{bindings.Employees1.collectionModel.selectedRow}">
                    <dvt:tagCloudItem label="#{ent.FirstName}" id="tci1" value="#{ent.Salary}"
                                      shortDesc="Salary #{ent.Salary}">
                        <dvt:attributeGroups value="#{ent.DepartmentId}" type="color" label="#{ent.DepartmentId}"
                                             id="ag1"/>
                    </dvt:tagCloudItem>
                </dvt:tagCloud>

Selection Listener code is quite simple, first invoke default selection listener to set selected tag as current row and then get selected row from iterator

Code in Managed Bean-


Helper methods

    /**
     * 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);
    }

    /**
     * Generic Method to get BindingContainer of current page, fragment or region
     */
    public BindingContainer getBindingsCont() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

SelectionListener method

    /**Custom selection listener for TagCloud Component
     * @param selectionEvent
     */
    public void tagCloudSelectionListener(SelectionEvent selectionEvent) {
        // Makes selected tag as current row (invoke default selection listener)
        invokeEL("#{bindings.Employees1.collectionModel.makeCurrent}", new Class[] { SelectionEvent.class },
                 new Object[] { selectionEvent });
        // Get the selected row (Use pie chart iterator name)
        Row selectedRow = (Row) evaluateEL("#{bindings.Employees1Iterator.currentRow}"); // get the current selected row
        // Get any attribute from selected row
        FacesMessage msg = new FacesMessage("Selected Employee- " + selectedRow.getAttribute("FirstName"));
        msg.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

All done :) Now run and check application


Sample ADF Application (Jdeve 12.2.1.1)- Download
Cheers :) Happy Learning

2 comments :

  1. ADF is introducing cool UI Components, Thanks for wonderful article

    ReplyDelete
  2. Ashish please i wish to know how to make something like bpm composer rule

    ReplyDelete