Tuesday, 15 December 2015

ADF: Disabling Input Field for Date Component af:inputDate

Hello all,

This post is a basic post regarding a scenario in which we had to provide a date component and disable the inputField in af:inputDate component.

There are many ways to implement this scenario, this is one of those.
For the the demonstration, I have created a TemporaryVO and create a transient attribute with Timestamp dataType.

For the an implementation just drag the attribute and drop it as ADF input Date.


Surround the component with a af:panelLableWithMessage and then put an af:inputText component from the components section.

Then set the disable property of the inputText to true.
And then copy the value of the inputDate and paste it in the value of the input field.
Here is the xml code .

<af:panelLabelAndMessage label="New Date" id="plam1">
                        <af:panelGroupLayout id="pgl1" layout="horizontal">
                            <af:inputText label="Label 1" id="it1" simple="true" disabled="true"
                                          value="#{bindings.NewDateTrans.inputValue}"/>
                            <af:inputDate value="#{bindings.NewDateTrans.inputValue}"
                                          required="#{bindings.NewDateTrans.hints.mandatory}"
                                          columns="#{bindings.NewDateTrans.hints.displayWidth}"
                                          shortDesc="#{bindings.NewDateTrans.hints.tooltip}" id="id1" autoSubmit="true" simple="true"
                                          contentStyle="display:none;">
                                <f:validator binding="#{bindings.NewDateTrans.validator}"/>
                                <af:convertDateTime pattern="#{bindings.NewDateTrans.format}"/>
                            </af:inputDate>
                        </af:panelGroupLayout>
                    </af:panelLabelAndMessage>



That's it. Now run the application.

Here is the Sample Application for Reference : DateFieldTestApp

Saturday, 5 December 2015

ADF : Creating an MultiLevel Tree i.e. af:tree Programatically | Populating TreeTable from Bean

Hi,

Here I am going to demonstrate how we can create a n-level Tree table by populating data from the bean.
Here are the steps that need to be followed.
  1. For creating this we need to create a datatype for storing the values of the  row or we call it node in TreeTable. Here is the code for the datatype or POJO class named TreeNodeDS.
    package testtabledemoapp.view.treeds;
    
    import java.util.ArrayList;
    
    public class TreeNodeDS {
        private String id;
        private String description;
        private ArrayList<TreeNodeDS> child = new ArrayList<TreeNodeDS>();
    
        public void setId(String id) {
            this.id = id;
        }
    
        public String getId() {
            return id;
        }
    
        public void setDescription(String description) {
            this.description = description;
        }
    
        public String getDescription() {
            return description;
        }
    
        public void setChild(ArrayList<TreeNodeDS> child) {
            this.child = child;
        }
    
        public ArrayList<TreeNodeDS> getChild() {
            return child;
        }
    
        public TreeNodeDS(String id,String description) {
            super();
            this.id = id;
            this.description = description;
        }
        
        public void addNewChild(TreeNodeDS treeNodeDS){
            child.add(treeNodeDS);
            
        }
    }
  2. Here is the code in the bean the bean.

    package testtabledemoapp.view.bean;
    
    import java.util.ArrayList;
    
    import org.apache.myfaces.trinidad.model.ChildPropertyTreeModel;
    
    import testtabledemoapp.view.treeds.TreeNodeDS;
    
    public class TreeNodeBean {
        private ArrayList<TreeNodeDS> list = new ArrayList<TreeNodeDS>();
        ChildPropertyTreeModel charatcerVal = null;
    
        public ChildPropertyTreeModel getCharatcerVal() {
            return charatcerVal;
        }
    
        public TreeNodeBean() {
            super();
            TreeNodeDS firstNode = new TreeNodeDS("F001","First Level");
            TreeNodeDS secondNode = new TreeNodeDS("F002","Second Level");
            TreeNodeDS thirdNode = new TreeNodeDS("F003","Third Level");
            TreeNodeDS fourthNode = new TreeNodeDS("F004","Fourth Level");
            firstNode.addNewChild(secondNode);
            secondNode.addNewChild(thirdNode);
            thirdNode.addNewChild(fourthNode);
            list.add(firstNode);
            list.add(secondNode);
            list.add(thirdNode);
            list.add(fourthNode);
            list.add(secondNode);
          //Initialising the character val with the data
            charatcerVal = new ChildPropertyTreeModel(list,"child");
        }
    }
    
  3. Now create a treeTable on the page. Here is the code of the page.

    <af:link text="#{node.id}" id="l1"
                                             inlineStyle="#{node.description == '' ? 'font-weight:500;color:navy' : ''}"
                                             rendered="true"/>
                                    <af:outputText value="#{node.id} | #{node.description}" id="ot1" rendered="false"/>
                                    <af:link text="#{node.description}" id="l2" rendered="true"/>
    
  4. Now run the application. Here is the screen shot.
    Here is the same Application : TreeTableDemoApp