Create and set clientAttribute to ADF Faces component programmatically to pass value on client side JavaScript

This post is next in series of "Working with ADF Faces Components programmatically"

So this post is about creating client Attribute, applying it to component and setting it's value programmatically
this requirement comes in picture when user is dealing with dynamic layout means components are created programmatically at run time and it is not possible to apply clientAttribute and other properties declarative

In this i am extending my previous post -
Apply Client/Server listener to programmatically created components, apply JavaScript to ADF Faces components at run time

In previous post i have described about applying client listener and server listener programmatically
here we will see how to pass a variable value to java script function using client attribute
You can read more about af:clientAttribute here

From oracle docs-
The clientAttribute tag specifies the name/value for an attribute which will both be made available both on the server-side (Faces) component as well on on the client-side equivalent. This tag will be ignored for any server-rendered components, as it is only supported for the rich client. ClientAttributes are not synchronized to the server since unknown attributes from the client are not synchronized to the server.



Lets' see how we can do this ,It's simple just check this code -

//Code from previous post to create inputText programmatically 
//http://www.awasthiashish.com/2015/05/apply-clientserver-listener-to.html
        RichInputText ui = new RichInputText();
        ui.setValue("Programmatically Created Input Text");
        ui.setId("pit1");
        ui.setContentStyle("width:200px;color:navy");

Here i am not writing code to apply client/server listener again , refer previous post for that
See the code to add client attributes to component (inputText)

        // A Set that contains all clientAttributes
        java.util.Set<String> clientAttributes = new HashSet<String>();

        // Add client attribute's name
        clientAttributes.add("clientAttribute1");
        clientAttributes.add("clientAttribute2");
        clientAttributes.add("clientAttribute3");

        //Add these attributes to a UI Compoenent
        ui.setClientAttributes(clientAttributes);

        //here assign values to client attributes
        ui.getAttributes().put("clientAttribute1", "Oracle ADF");
        ui.getAttributes().put("clientAttribute2", 9999);
        ui.getAttributes().put("clientAttribute3", "Ashish Awasthi");

So all done , now check it
For that i have used this javascript method

function demoJsFunction(evt) {
                  var comp = evt.getSource();
                  alert(comp.getProperty('clientAttribute1'));
                  alert(comp.getProperty('clientAttribute2'));
                  alert(comp.getProperty('clientAttribute3'));
               
                  evt.cancel();
              }

this method is called using client listener on input text and see the alert messages
First client attribute value-

Second client attribute value-

Third client attribute value-

So this is working :)
Cheers :) Happy Learning

Using Drag-Drop functionality in af:treeTable to move data between nodes -Oracle ADF

This is a very common question and development requirement - How to drag drop records inside treeTable to perform some kind of operation ?
This post is an answer,here i am using Departments and Employees table of HR Schema to create treeTable and Jdeveloper 12.1.3

First Step-
Create business components using Departments and Employees table of HR Schema and create association and viewLink using DepartmentId (here Departments is parent and Employee is child viewObject)

now drop Departments viewObject as treeTable on page from data-control
see- Tree Table Component in Oracle ADF(Hierarchical Representation)  (How to create treeTable in ADF)

So after creating simple treeTable, added  two columns other than nodeStamp to show DepartmentName and EmployeeName in a better way
see-Tree Table Component with declarative presentation in ADF

Finally it looks like this-

Now my requirement is - when drag an Employee to any Department node it should become child of that Department ,means attach Employee to Departments using drag-drop

So to drag Employee Name filed i added af:attributeDragSource under this field and to get corresponding EmployeeId added an af:clientAttribute component

This clientAttribute stores value of EmployeeId for each node and dragSource refers clientAttribute to identify node value
Now to handle dropEvent on DepatmentName node , dropped an af:dropTarget under this field and created a dropListener in managed bean that will handle desired operation on dropEvent

See complete af:treeTable xml source-

<af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                  selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single" id="tt1"
                  binding="#{pageFlowScope.DragDropBean.treeTabBind}">
      <f:facet name="nodeStamp">
        <af:column id="c1" width="10">
          <af:outputText value="#{node}" id="ot1"/>
        </af:column>
      </f:facet>
      <f:facet name="pathStamp">
        <af:outputText value="#{node}" id="ot2"/>
      </f:facet>
      <af:column id="c2" width="150">
        <af:outputText value="#{node.DepartmentName}" id="ot3"
                       inlineStyle="font-weight:bold;color:red;font-size:small;">
          <af:dropTarget dropListener="#{pageFlowScope.DragDropBean.treeDropListener}">
            <af:dataFlavor flavorClass="java.lang.Object"/>
          </af:dropTarget>
        </af:outputText>
      </af:column>
      <af:column id="c3">
        <af:outputText value="#{node.FirstName}" id="ot4" inlineStyle="font-weight:bold;color:darkgreen;">
          <af:clientAttribute name="DragEmployeeId" value="#{node.EmployeeId}"/>
          <af:attributeDragSource attribute="DragEmployeeId"/>
        </af:outputText>
      </af:column>
    </af:treeTable>

Now see the code of drop listener written in managed bean that gets EmployeeId value from dropEvent and DepartmentId from expression and calls a business logic to move employee under that Deaprtment

DropListener in ManagedBean to handle dropEvent-

    /**Method to move Employee Under Department
     * @param dropEvent
     * @return
     */
    public DnDAction treeDropListener(DropEvent dropEvent) {

        Object empId = null;
        Integer dropVal = null;
        //Get Value from dragSource (EmployeeId of dragged node)
        DataFlavor<Object> df = DataFlavor.getDataFlavor(Object.class);
        empId = dropEvent.getTransferable().getData(df);
        if (empId != null) {
            System.out.println("Dropped value is -" + empId);
            try {
                dropVal = new Number(empId).intValue();
            } catch (SQLException e) {
            }
            //Get DepartmentId where Employee is dropped (resolve Expression langusge)
            Object droppedUnderDept = resolvElDC("#{node.DepartmentId}");
            System.out.println("Dropped under-" + droppedUnderDept);
            //Method Call to mode Employee under Department
            OperationBinding ob = executeOperation("moveEmployeeToDepartment");
            ob.getParamsMap().put("deptId", Integer.parseInt(droppedUnderDept.toString()));
            ob.getParamsMap().put("empId", dropVal);
            ob.execute();
        }
        /*Method to expand treeTable to show all nodes
         * see-http://www.awasthiashish.com/2013/10/expand-and-collapse-aftreetable.html
         * */
        expandTreeTable();
        //Refreshing treeTable after all operation, here treeTabBind is component binding of treeTable
        AdfFacesContext.getCurrentInstance().addPartialTarget(treeTabBind);
        return DnDAction.NONE;

    }

Helper methods to get BindingContainer and resolve expression-

    /*****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 resolve Expression
     * @param data
     * @return
     */
    public Object resolvElDC(String data) {
        FacesContext fc = FacesContext.getCurrentInstance();
        Application app = fc.getApplication();
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = fc.getELContext();
        ValueExpression valueExp = elFactory.createValueExpression(elContext, data, Object.class);
        return valueExp.getValue(elContext);
    }

Now run your application and check -
Dragged Prabhakar from Purchase Department and dropped it on Finance-

 Result-

Thanks, Happy learning :)
Download Sample App
See other post on Drag-Drop functionality- Adding Drag and Drop Functionality for collections in page fragments to create insert