Requirement: I have an af:inputFile component for which I want to change the default style and for this I will be using be Skinning feature of Oracle ADF.

Solution: For the solution of the above requirement follow the steps as shown below:

Step 1: Create an ADF Fusion Web Application.

Step 2: Create a demo.jspx page.

Drag and drop af:inputFile and set label=”Browse and Select”

Thus, the complete code for the demo.jspx page is shown below.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:form id="f1" usesUpload="true">
                <af:inputFile label="Browse and Select" id="if1"/>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Step 3: Create a skin1.css file and write the below code in the skin1.css file.

@charset "UTF-8";
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "";
@namespace dvt "";

af|inputFile {
    background-color: Aqua;
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
}

af|inputFile::label {
  font-weight:bold;
  color:Blue;
}

af|inputFile::content {
    color: Maroon;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    background-color: #d6ffd6;
}

Save all and run the application. Thus, the ran application is shown below:

Click on Choose File and select the file. Thus, the af:inputFile after selecting the file will look as below.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 1,150 total views,  1 views today