ADF Skinning : Change label, content, design and 'Update' button style of af:inputFile

This post is about skinning af:inputFile, see how default inputFile looks on page

See how ADF Skin changes it's appearance :)
Change basic inline style of af:inputFile (background color and design) :

/**Skin Selector to change inline style of af:inputFile**/

af|inputFile {
    background-color: Green;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
}

Output on page-

Change label style of af:inputFile :

/**Skin Selector to change label style of af:inputFile**/
af|inputFile::label {
  font-weight:bold;
  color:white;
  font-family: cursive;
}

Output on page-

Change content style of af:inputFile (background color, design of content only) :

/**Skin Selector to change content style of af:inputFile**/
af|inputFile::content {
    color: #ff6363;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 15px 15px 15px 15px;
    padding: 5px;
    background-color: #d6ffd6;
    font-family: cursive;
}

Output on page-

After selecting a file, update button appears -

On click of update button a popup with af:inputFile appears-

Change update button style of af:inputFile:

/**Skin Selector to change style of update button of af:inputFile**/
af|inputFile af|commandButton {
    color: white;
    font-weight: bold;
    background: #00b55a;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

/**Skin Selector to change style of update button of af:inputFile in case of hover**/
af|inputFile af|commandButton:hover {
    color: white;
    font-weight: bold;
    background: #940000;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

Output on page-

On hover-

Cheers :) Happy Learning
o

Update page component in between of event processing in ADF Faces using JavaScript

This post is not about any specific topic of framework, recently i was working in an application, requirement was like this
There is a button on page that uploads a large file to server and it takes some time . So as soon as user press this button it's text should be changed to 'Processing..' and after upload is complete it should be 'Done'




In this post i am sharing same - How to update page component while an event is processing ?
First i have tried it using java means in same button action listener but in this case button text was changed only after event processing is complete
So for this purpose i have used some javascript function, this is quite simple (see the implementation)

• Drop a button on page and create a ActionListener , it will change button text to 'Done' after event processing (used Thread.sleep() for some long processing)



    private RichButton buttonBind;

    /**Method to process Action Event
     * @param actionEvent
     */
    public void processValueAction(ActionEvent actionEvent) {
        // Sleep for some time (Event Processing time)
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //After processing set button text to 'Done'
        buttonBind.setText("Done");
        AdfFacesContext.getCurrentInstance().addPartialTarget(buttonBind);
    }

    public void setButtonBind(RichButton buttonBind) {
        this.buttonBind = buttonBind;
    }

    public RichButton getButtonBind() {
        return buttonBind;
    }



• Now question is how to change button text to 'Processing..' immediately after clicking button. So for this purpose i am using javascript



function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }



• Calling this javascript function using af:clientListener in button like this (See XML source of page)



 <af:document title="UpdatePageComponent.jspx" id="d1">
            <af:resource type="javascript">
              function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }
            </af:resource>
            <af:form id="f1">
                <af:spacer width="10" height="10" id="s1"/>
                <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">
                    <af:panelBox id="pb1" showDisclosure="false">
                        <f:facet name="toolbar"/>
                        <af:button text="Click to process" id="b1"
                                   actionListener="#{viewScope.UpdatePageComponent.processValueAction}"
                                   clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                   inlineStyle="width:250px;text-align:center;padding:5px;font-weight:bold;">
                            <af:clientListener method="changeButtonText" type="action"/>
                        </af:button>
                    </af:panelBox>
                </af:panelGroupLayout>
            </af:form>
        </af:document>



• As soon as button is clicked this javascript function will be invoked and set new text in button and after event processing button text is again set by managed bean actionListener.




After Clicking button (Event is processing)-



Processing complete-

Thanks, Happy Learning :)

Get updated model values in value change listener instantly, ProcessUpdates in ADF (a beauty)

Hello All,

This posts talks about updating model instantly when a attribute is changed on page level.
In ValueChangeListener of component if we try to get new value from Model layer, it always returns old value, then we have only one option to get new value, use event object (evt.getNewValue();)
but sometimes we need to update model same time
So how to do this-

• Created a Fusion Web Application using Departments table of HR Schema (Oracle)





• Dropped Departments Vo on page as a form, and created ValueChangeListener on DepartmnetName field to get new value 
  
  
  
  
  
  
  
  


• Now i have written a code to get DepartmentName from current row of Departments VO (ViewObject) and to get from ValueChangeEvent

Method in AMImpl- Called in ValueChangeListener through binding Layer



/**Method to print Department Name */
    public void getDeptNameAction() {
        ViewObject depart = this.getDepartments1();
        Row curRow = depart.getCurrentRow();
        if (curRow != null) {
            System.out.println("Current Department from model is-" + curRow.getAttribute("DepartmentName"));
        }
    }



Code in ValueChangeListener - AM Method Called and Code to get new value from event itself



    /**Value change listener for Department Name
     * @param vce
     */
    public void deptNmVCE(ValueChangeEvent vce) {
        if (vce.getNewValue() != null) {
            System.out.println("New Value in VCE-" + vce.getNewValue());
            BindingContainer bc = BindingContext.getCurrent().getCurrentBindingsEntry();
            OperationBinding ob = bc.getOperationBinding("getDeptNameAction");
            ob.execute();
        }
    }



• In this case when i have changed value on page 








• see the result -output from valuechangelistener- Model layer returns old value :-(





• Now to update value in Model layer , i have just called processUpdates in ValueChangeListener- See the code



    /**Value change listener for Department Name
     * @param vce
     */
    public void deptNmVCE(ValueChangeEvent vce) {
        if (vce.getNewValue() != null) {
            //Method to update Model in VCE
            vce.getComponent().processUpdates(FacesContext.getCurrentInstance());
            System.out.println("New Value in VCE-" + vce.getNewValue());
            BindingContainer bc = BindingContext.getCurrent().getCurrentBindingsEntry();
            OperationBinding ob = bc.getOperationBinding("getDeptNameAction");
            ob.execute();
        }
    }



• see the result -Value is updated in model instantly (in VCE)

so this is how processUpdates works, Cheers :-)

See one more post on this concept with different usecase- Update Model Values while Validation (Exception) occurs on page on Value Change event

Happy Learning

Update Model Values while Validation (Exception) occurs on page on Value Change event- Oracle ADF (processUpdates)

In ADF when we have some validation on page and we try to submit any value, but normally after validation (Exception) values are not updated in Model until exception is handled.
This tutorial is about how to update values in Model while exception on page.
For a scenario, i have used department (default HR Schema) table and form in a JSP XML fragment inside bounded taskflow.
In form Department Id and Department Name is mandatory field, ManagerId and Location Id has auto submit true.

• I have dropped createInsert,Execute,Commit and Rollback as buttons on page

• Click on create button and first enter manager id, as this field has autosubmit true so on submission of value page is validated and then Required Fields throw exception, and after exception you can see that manager id & location id is not updated in Model, and not reflected in af:table also.

•  Normally what we do, set immediate true to skip validations, but in this case i have witten ValueChangeListener on manager Id and Location Id to process values in Model.- see code



    public void mangrIdVCE(ValueChangeEvent vce) {
        vce.getComponent().processUpdates(FacesContext.getCurrentInstance());
    }



• processUpdates() method of UIComponent class perform the coponent tree processing for all facet of this component by Update Model Values phase of request processing, and pushes data to Model


• Now after calling this method, run application- Now values are populated in af:table and validation is still there on page

• this approach can be used while using validators on page and want to process some values after validation (as conditional validation of some fields etc)
• Download sample application -Sample App