Showing white-spaces properly in ADF table column- 11g & 12c

Hello All,
This posts talks about a requirement of showing white-spaces before any text/number in an af:table
Suppose i have , form and table of a ViewObject on page

Case 1- both table and form are editable , in this case you can see that white spaces are properly visible in both form and table

but normally in applications we have a read-only table and editable form so in this case you can see that white-spaces are not visible in table

But sometimes we need to show spaces in table same as in form so to do this select that field and go to property inspector and select component

Now set it's contentStyle (for input component as- af:inputText) or inlineStyle (for display component as- af:outputText)- white-space:pre;

now run your page and see-

 Cheers :-)

Disabling keyboard input in af:inputDate, restrict user to use calendar only - Oracle ADF

hello all,
this tutorial is about a requirement of restricting user to enter date through calendar only in ADF application
this trick was posted by Frank Nimphius (ADF Code Corner)

• Drop a af:inputDate component on page from component pallete








• Now set its background color so that it looks like disabled field

• Now to make it's input field disable, we have to write a small javascript function, copy this function and paste in your page source (XML)



<af:resource type="javascript">
          function enableCalendarOnly(evt) {
              evt.cancel();
          }
        </af:resource>



• Now drop a af:clientListener under af:inputDate component to invoke javascript

• Now set properties in af:clientListener as Method & Type

•  Now run your page and see that input field is disabled for date component , now value can be selected using calendar only
  
  
  

 Cheers - Happy Learning :-)

Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Hello All,
Hope all are doing good, this post talks about skinning inputListOfValues to hide its search icon (magnifying glass)
we can use the auto-suggest feature in inputListOfValues so if we don't want to display that default search icon then what to do?

• inputListOfValues looks like this in ADF Faces

•  I have created a page and dropped 2 inputListOfValues on page

•  there is 2 types of requirement about hiding search icon
1. Hide icon of all inputListOfValues(LOVs) available on page or application
2. Hide icon of some selected fields
• to do this we have to create a CSS (skin) in application

• give relevant name of CSS file and set this file as default skin of application

• Now to hide icon of the selected inputListOfValues component in an application, go to the source of CSS file and just write this code
   



.TagSearchIconHidden af|inputListOfValues::search-icon-style
{
display: none;
} 



• Now go to the page and paste TagSearchIconHidden in StyleClass property of lov component to hide its icon, run your page and see, I have done this in my first LOV

•  Now to hide icons of all lov component just change CSS file with this script



af|inputListOfValues::search-icon-style
{
  background-image: none; 
}



• Now no need to set StyleClass, it is applicable to all lov components of the application

 Cheers :-)

Creating new object in list (af:inputListOfValues) using 'createPopupId' feature- ADF 11g & 12c

Hello All ,
This post is about a good feature provided with inputListOfValues in ADF .
inputListOfValues is used where large and complex data is populated in list, this component supports search in list values
Suppose on opening list values you want to add one more value in list generally to do that you will  close the list and add a value in source table then again open list but this feature provide instant creation of list values

this functionality can be achieved in Combo Box with List of Values using customActions facet, i have posted about it
Create new look up data using List of Values (LOVs) in Oracle ADF

so this time it is about  inputListOfValues, see the steps to do

• Created a fusion web application and business components  using Departments and Employees table of HR Schema

• now i have created list of values on DepartmentId of Employees ViewObject referenced from Department ViewObject, display type is Input Text with List of Values

•  drop Employees VO on page and run, it looks like this

• Now i have dropped a popup on page and to create new value in list, i have dropped form of Departments ViewObject and a link to create it on dialog inside popup
   
  


• select list of values component (Employee VO) in structure window and go to property inspector and set popUp id in a property called 'createPopupId'

• After setting 'createPopupId' ,on running a commandToolbarButton appears in the LOV popup dialog box with a icon, this button's action triggers custom popUp (i have added before)

        on clicking on this icon-

•  on create link i have just called createInsert for Departments ViewObject and on dialogListener , Execute



import oracle.adf.model.BindingContext;
import oracle.binding.BindingContainer;
import oracle.binding.OperationBinding;



    /**Method to get Bindings of current page
     * @return
     */
    public BindingContainer getBindings(){
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**Method to execute OperationBinding
     * @param operation
     * @return
     */
    public OperationBinding executeOperation(String operation){
        return getBindings().getOperationBinding(operation);
    }

    /**Method to create new Department
     * @param actionEvent
     */
    public void createDeptAction(ActionEvent actionEvent) {
       executeOperation("CreateInsert").execute();
    }



• now created a new department using 'create' link and you can see value is appeared in list values

 Cheers :-)

Identifying Modified/newely added row in af:table, get all modified rows of viewobject in bean

Hello All,
first of all, a very Happy new year to everyone, learn more and more ADF

this tutorial is about a requirement of showing modified rows on page
Suppose if there is lot of data in af:table and user is modifying some rows then it must reflected immediately on page that which rows are modified for more clarity

Andrejus has also posted about it in 2010
http://andrejusb.blogspot.in/2010/04/changed-row-highlighting-in-oracle-adf.html

But this post talks about two requirements-

1. Want to highlight modified rows only on page
2. Want to get modified rows in managed bean

First One could be achieved without writing a single line of code only using expression, a row in table or view object has four state-

• New
• Modified
• Un-Modified
• Initialized

/* this expression returns state of current row in collection such as table or treeTable*/
#{row.row.entities[0].entityState} 

/*here row is reference variable of collection, this expression returns an int value if it is 
 2-Modified
 0-New
 1-Unmodified
-1-Initialized
*/

• I'm using Departments table of HR Schema to implement this sample app
• after business components configuration ,Drop departments VO from data control on page as af:table
• Now to check row status , i have written following expression in inline style of af:column of af:table, so that it can check state of all rows of table 



#{row.row.entities[0].entityState==2 ? 'background-color:orange' : row.row.entities[0].entityState==0 ? 'background-color:darkgreen' : ''} 



• Now Run your page and change any value of table

       After Updating Values in Row- see modified rows are highlighted

•  Now you are done with first requirement , if we talk about second one, in case you want to get all modified rows in managed bean to perform some operation
• To achieve this i have used a transient attribute in Departments view Object to store state of each row
• Now in RowImpl of departments viewobject i have to write some code to get current state of Row, see the getter method of transient attribute in RowImpl



    /**
     * Gets the attribute value for the calculated attribute CheckRowStatus.
     * @return the CheckRowStatus
     */
    public Integer getCheckRowStatus() {
        byte entityState = this.getEntity(0).getEntityState();
        return new Integer(entityState);

        // return (Integer) getAttributeInternal(CHECKROWSTATUS);
    }



• Now i have placed a button on page to get all modified rows and show a message on page through managed bean
• See the method written in ApplicationModuleImpl class and then exposed to client to be used in managed bean action event



    /**Method to get all modified rows and store corresponding Department Name in an ArrayList
     * @return
     */
    public ArrayList<String> getModifiedRows() {
        ArrayList<String> deptNm = new ArrayList<String>();
        ViewObject deptVo = this.getDepartmentsView1();
        RowSetIterator deptIter = deptVo.createRowSetIterator(null);
        while (deptIter.hasNext()) {
            Row nextRow = deptIter.next();
            if (nextRow.getAttribute("CheckRowStatus") != null) {
                Integer rowStatus = (Integer)nextRow.getAttribute("CheckRowStatus");
                if (rowStatus == 2) {
                    deptNm.add(nextRow.getAttribute("DepartmentName").toString());
                }
            }
        }
        return deptNm;

    }



• Now call this method in managed bean through Binding Layer



    /**Method to get BindingContainer of current page
     * @return
     */
    public BindingContainer getBindings() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**Method to call AM method and to show modified rows on page in FacesMessage
     * @param actionEvent
     */
    public void getModifiedRows(ActionEvent actionEvent) {
        OperationBinding ob = getBindings().getOperationBinding("getModifiedRows");
        ob.execute();
        if (ob.getResult() != null) {
            ArrayList<String> deptName = (ArrayList<String>)ob.getResult();
            StringBuilder saveMsg =
                new StringBuilder("<html><body><b><p style='color:red'>Modified Rows in Departments table are-</p></b>");

            saveMsg.append("<ul>");
            for (String name : deptName) {
                System.out.println(name);
                saveMsg.append("<li> <b>" + name + "</b></li>");
            }

            saveMsg.append("</ul><br>");
            saveMsg.append("</body></html>");
            FacesMessage msg = new FacesMessage(saveMsg.toString());
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }



• Now again run this page and change some departments then click on get modified rows, it will show currently modified rows

Cheers- Download Sample App

Changing default text of af:dialog buttons (ok,cancel) in ADF

Hello All,
you all have used pop up component with af:dialog in ADF,
default dialog component look like this inside popup

in ADF there is option to change dialog type , select dialog component and go to property inspector-

But sometimes we need to change default dialog button's text as per our requirement, to do this follow steps mentioned below

• Drag a popup having dialog as its child component on page
• select af:dialog in structure window and go to property inspector

• In property inspector navigate Appearance--->Text 

• Now set values for Affirmative and cancel text 
  
   
• Now run your application and see-
  
   



• But it's outcome doesn't get changed as it is static, you can see this in managed bean code, i have created dialog Listener and a cancelListener in managed bean 



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

import oracle.adf.view.rich.event.DialogEvent;
import oracle.adf.view.rich.event.PopupCanceledEvent;


public class DialogListenerBean {
    public DialogListenerBean() {
    }

    public void dialogListener(DialogEvent dialogEvent) {
        FacesMessage msg = new FacesMessage("You have clicked- " + dialogEvent.getOutcome().name());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void cancelListener(PopupCanceledEvent popupCanceledEvent) {
        FacesMessage msg = new FacesMessage("You have clicked- cancel");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

• When you click on ok and cancel (with changed text), it will return same outcome that was before changing button's text

Cheers- Merry Christmas :-)

Checking Transaction Status of DataControl for Dirty/Modified transaction in ADF

Sometimes we need to check status of data control's transaction, when we have any form or table on page ,initially transaction is not dirty (it means there is no pending changes in binding layer)

If user changes any data set on page that is populated from ADF binding layer, status of transaction is modified as now there is pending changes on page .

When user perform commit or rollback operation then again transaction status changes.

So it is necessary to have basic understanding of Transaction Status and using this we can write some better piece of codes.
Example- suppose we have a save button in our Application that performs commit operation, when user clicks on that button, every time commit gets executed but logically if there is no change in binding layer then commit must not be executed.
So we can check transaction status on this button and if there is any pending changes in ADFm binding layer or transaction is dirty only then commit will be executed

• I have created a sample application to check this , there is departments and location ViewObjects are on page and a button to check transaction status
• Code to check transaction status-



public BindingContainer getBindings(){
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

DCBindingContainer dcbind =(DCBindingContainer)getBindings();
dcbind.getDataControl().isTransactionModified()


OR





amObject.getDBTransaction().isDirty()



• Initially see page status there is no pending changes so transaction is not dirty

• Now i have changed DepartmentName attribute , then clicked on Check Transaction button

 

• Now when data is committed again status got changed

Show current Date and Time on Page in Oracle ADF (refresh Date/time Programmatically)

Hello All,
in this tutorial i am going to explain that how to show current date and time on your ADF application page
Follow Steps-

• Create a fusion web application and a page in it (i have used .jspx page)
• Now drag an output text from component palette and drop it on page

• Now select the output text and go to its property inspector then select value from Expression Builder as shown in image

• Now in Expression Builder ,create a Managed Bean of type java.util.Date and assign its value to output text

•  Now run your page and see current date is there

• Now to format Date and Time , drag and drop af:convertDateTime  under output text from component palette

•  Select convertDateTime and go to property inspector and change its pattern and run your page

•  Now you have done basic configuration for Date/Time, if you want to refresh time (second and minute part) on page periodically then drop a poll component in page and create a poll listener in managed bean

• Now write this simple code in your managed bean to invoke poll listener



    /**Binding of Output text*/
    private RichOutputText dateBind;

    public void setDateBind(RichOutputText dateBind) {
        this.dateBind = dateBind;
    }

    public RichOutputText getDateBind() {
        return dateBind;
    }


    /**Poll Listener Method ,handles Poll Event
     * @param pollEvent
     */
    public void refreshTime(PollEvent pollEvent) {
        AdfFacesContext.getCurrentInstance().addPartialTarget(dateBind);

    }


And don't forget to set clientComponent property of outputText to true

• Now Run your application , see in this video clip how your page get refreshed... Cheers ..!

Cheers :) Happy Learning