Cool Component - Using af:richTextEditor as text editor, HTML editor with custom toolbox in Oracle ADF

Hello all,
this post is about af:richTextEditor component in ADF,
This component is used  for text formatting ,colors, it supports links,lables, messages etc and can be used as mail editor, blog editor

• af:richTextEditor looks like this on page

• User can use it for text formatting on page as-

• It supports both Rich text and HTML,you can see by switching over editing modes (Rich text editing mode, Source code editing mode)

• If you want to use this as simple text editor go to source editing mode and just write plain text

• One very good thing is that you can use this HTML editor, go to Source Editing Mode and write HTML code, then switch to Rich Text Editing Mode to view result, so it can be used as basic html editor on web page

HTML code-

 Result-

•  Other than this user can control its toolbox structure and layout, there is a property named ToolboxLayout, some built in value for this property are

       all, font, history ,mode, color, formatAll, formatUncommon, justify, list, indent, link, newline
       look in snaps-

Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener

Hello all,
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table Component in Oracle ADF(Hierarchical Representation)

In this post i am going to explain how to

• use multiple detail column in treeTable
• design better UI
• manage child rows
• use link,image,checkbox in treeTable conditionally

so i assume that you all know about creating treeTable, i am using default HR Schema (Employees ,Departments table) to master detail relation in tree and i have to show detail of Employee under Department node

• I have created a treeTable using following details of Employees VO

• Now on running my page it is looking like this, very odd and complex view

 

        xml source-

  <af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1" width="500">
                            <af:outputText value="#{node}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                </af:treeTable>

• It shows that all details of employees are clubbed in one column that is nodestamp, now to show details in different columns i have added 5 columns in treeTable, and seperate detail in each column as Email, FirstName,LastName etc
  To add column right click on treeTable and insert-

 In column drop an input text and set its value taking node reference

•  Now run page and see, there is now 5 column with different details but still that clubbed value is shown.

• Now to remove that clubbed detail, go to nodestamp facet of treeTable and see value of output text inside column, it is set to #{node} ,due to this all values available in node are clubbed and displayed in page, now we have to set its value to any of Master table's (Departments) attribute

•  Now run page , only department name is displayed on header, and corresponding value for detail is blank

•  We are done with this part, now try to make its UI somewhat better using some styles, so i have used different background color for header and detail part of treeTable conditionally

• To do this i have set inline style property conditionally , because i have to change color of same column according to master and detail data, see condition



#{node.DepartmentName!=null ? 'background-color:darkgreen' :  'background-color:rgb(239,255,213);'  }



• Now see how to get selected child row without over-riding treeTable's selection listener, to do this i have added a image link in treeTable and created a action listener on that to show current selected detail row
• Bind tree table to managed bean and create two methods to get selected RowIterator and node Key



    /**Tree Table Binding in managed bean*/
    private RichTreeTable treeTabBind;

    public void setTreeTabBind(RichTreeTable treeTabBind) {
        this.treeTabBind = treeTabBind;
    }

    public RichTreeTable getTreeTabBind() {
        return treeTabBind;
    }

    /**Method to get Iterator*/
    public RowIterator getSelectedNodeIterator() {
        if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
            for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                getTreeTabBind().setRowKey(rKey);
                return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowIterator();
            }
        }
        return null;
    }

    /**Method to get Node Key*/
    public Key getSelectedNodeKey() {
        if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
            for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                getTreeTabBind().setRowKey(rKey);
                return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowKey();
            }
        }
        return null;
    }



• Now to get currently selected node and row pass Iterator and Node key in this method- see



    public void showCurRowDetail(RowIterator ri, Key selectedNodeKey) {
        Row[] rows = ri.findByKey(selectedNodeKey, 1);

        FacesMessage msg = new FacesMessage(rows[0].getAttribute("FirstName") + "'s data available in this row");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }



• Now Run application and click on link to see selected row -

• You can use checkboxes in treeTable same as link, for CRUD operation in treeTable see Jobinesh blog- http://www.jobinesh.com/2010/05/crud-operations-on-tree-table.html
• Download Sample ADF Application

Validation Problem with Cascading mandatory fields in ADF Faces

It is a functional requirement , suppose in application one fields is dependent on another field for its value or any property (required,disable,visible), it means when you select first field and put value in that then second field's value or other property is populated.
or second one is, you have multiple required attributes (cascading) in page and any of that's AutoSubmit  is set to true, in this case when user puts value in first field and goes to second to enter value but before this a large message window appears with required validation and all fields get red

This is very much annoying for user to face this kind of message each time, as i had a scenario where there was 15 required fields in af:form on popup and 10 of that are set to AutoSubmit true .
to avoid this see steps

• Suppose i have page with create button for Departments table (default HR Schema) on pop up as a form and all fields are reuired

•  When user clicks on create button and put value in field of DepartmentId, all required fields throw exception

• To avoid this i have set immediate true for first required field that is DepartmentName, it means when any validation occurs on popup , DepartmentName field will skip all validation on page and will shows only of its own

•  Now when user put value in DepartmentId field, only DepartmentName field shows exception (required)

 Happy coding......!!