Programmatically populate values in ADF Faces multiSelect component (af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox, af:selectManyShuttle)

ADF Faces provides some component to support multiple selection as af:selectManyListbox, af:selectManyCheckbox, af:selectManyChoice, af:selectManyShuttle
In this post we will see how to populate values in these component from managed bean using POJO
You can read my previous post on multiple selection that was about populating multiselect component using ADF BC and binding layer
Using Multiple Selection (selectManyListbox & selectManyCheckbox component) in ADF
Shuttle Component in Oracle ADF (Allow Multiple Selection)

See the step by step implementation-

• Create a Fusion Web Application and a managed bean in viewController
  
  
  


• Create a variable of type java.util.List in managed bean, and generate its accessors



    //List to show records in selectMany components
    List<SelectItem> allValuesList;

    public void setAllValuesList(List<SelectItem> allValuesList) {
        this.allValuesList = allValuesList;
    }

    public List<SelectItem> getAllValuesList() {
        return allValuesList;
    }



• This list contains value of type javax.faces.model.SelectItem; that is supported by af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox compoent



    //List to show records in selectMany components
    List<SelectItem> allValuesList;

    public void setAllValuesList(List<SelectItem> allValuesList) {
        this.allValuesList = allValuesList;
    }

    public List<SelectItem> getAllValuesList() {
        if (allValuesList == null) {
            allValuesList = new ArrayList<SelectItem>();
            allValuesList.add(new SelectItem(1, "India"));
            allValuesList.add(new SelectItem(2, "Australia"));
            allValuesList.add(new SelectItem(3, "America"));
            allValuesList.add(new SelectItem(4, "United Kingdom"));
        }
        return allValuesList;
    }



• See how to add this list reference to  af:selectManyCheckbox component, just drag n drop component on page





• Set managed bean list reference to selectManyCheckbox component, records stored in this list will be populated in component





• Suppose I have to show some record as selected by default on page load so for this requirement created another List in managed bean and added it to value property of selectManyCheckbox component
  Value property of component refers only selected records but selectItems component refers all records of component



    //List to show selected values in selectMany Component
    List selectedValues;

    public void setSelectedValues(List selectedValues) {
        this.selectedValues = selectedValues;
    }

    public List getSelectedValues() {
        if (selectedValues == null) {
            selectedValues = new ArrayList();
            selectedValues.add(1);
            selectedValues.add(3);
            System.out.println("List is-" + selectedValues);
        }
        return selectedValues;
    }


See af:selectManyCheckbox source -



<af:selectManyCheckbox id="smc1" value="#{viewScope.ProgSelectManyComp.selectedValues}">
                                    <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si1"/>
                                </af:selectManyCheckbox>



• Now run this application and see component on page





• Following same steps i have three more component on page , all 3 adf faces component support multiple selection
  af:selectManyChoice-
  
  

  <af:selectManyChoice label="Label 1" id="smc2"
                                                       value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                       simple="true">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si2"/>
                                  </af:selectManyChoice>
  

  
  
  af:selectManyListbox-
  
  

  <af:selectManyListbox label="Label 1" id="sml1"
                                                        value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                        simple="true">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si3"/>
                                  </af:selectManyListbox>
  

  
  
  af:selectManyShuttle-
  
  

   <af:selectManyShuttle label="Label 1" id="sos1" simple="true"
                                                         value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                         contentStyle="width:50px;">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si4"/>
                                  </af:selectManyShuttle>
  



• All 4 components on page are populated using same List, this is just an example to show that all 4 components share same strucutre, run this application and see 




Thanks, Happy Learning :)
Download- Sample ADF Application

ADF Basics: Delete child records on delete of parent record, Overriding remove() in EntityObject class

This post is about one basic question of Master-Detail relation between business components
How to delete all child records on delete of parent record ?
So answer is quite simple , see the steps how to achieve this?

• Create a Fusion Web Application and prepare model project using Departments and Employees table of HRSchema.
  you can see multiple associations and viewLinks are created automatically due to foreign key relation in database





• Here Departments is parent table and Employees is child, so there is an association between both entity objects , open this association and goto Association Properties . Now you can see source and destination accessor name that are created in both entity objects







• Next step is to create EntityObject java class. To do this open Departments entity object -- go to java section-- click on edit icon and check the box to create class and required methods
  See Accessors and Remove Method will be created in this class





• Open DepartmentsEOImpl class and check there is a method that returns RowIterator of Employees (this is Accessor)



    /**
     * @return the associated entity oracle.jbo.RowIterator.
     */
    public RowIterator getEmployeesEO1() {
        return (RowIterator)getAttributeInternal(EMPLOYEESEO1);
    }



• Now locate remove method in EOImpl, this method is called every time when delete operation for Departments is executed so add this code to remove(); method



    /**
     * Add entity remove logic in this method.
     */
    public void remove() {
        //Get all Employees of currenlty selected Department
        RowIterator employees = getEmployeesEO1();
        while (employees.hasNext()) {
            //Delete all Employees
            employees.next().remove();
        }
        //Delete Department itself after deleting all Employees associated with it
        super.remove();
    }

This is how we can make use EntityObject class and Association accessors, in the same way other operation can be performed as updating all child rows, sum of a column of child records etc
Thnaks , Happy Learning :)

Using captcha with ADF Faces (Integrate Kaptcha project with Oracle ADF)

First of all wishing a very Happy New Year to all of you, learn more n more ADF this year :)

This post is about using captcha challenge in ADF Faces, captcha is used to determine whether user is a human or not
CAPTCHA stands for-Completely Automated Public Turing test to tell Computers and Humans Apart
Frank Nimphius posted about 'captcha with ADF Faces' using "Simple Captcha" project.
You can read complete article- http://www.oracle.com/technetwork/developer-tools/jdev/captcha-099103.html



For this post I am using modern version of simplecaptcha project called Kaptcha, project provides a servlet that is responsible for generating captcha image and there are various configuration parameters to change look n feel of captcha image
See project documentation - https://code.google.com/p/kaptcha/
Download jar file- https://code.google.com/p/kaptcha/downloads/list

Now see the steps to integrate Kaptcha project with Oracle ADF

• Create a FusionWeb Application, attach kaptcha-2.3.2 jar to viewController project, also see How to use "Kaptcha"-https://code.google.com/p/kaptcha/wiki/HowToUse





• Next step is to add kaptcha servlet reference in web.xml file



 <servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptchaimage</url-pattern>
    </servlet-mapping>



• Add an af:image on page to show captcha, image source is referenced from servlet mapping



<af:image id="i1" partialtriggers="l1" shortdesc="Captcha" source="/kaptchaimage">



• Default configuration for captcha image is completed , I have added an af:inputText and button on page to enter captcha result .



<af:panelBox text="Captcha Demo- www.awasthiashish.com" id="pb1" showDisclosure="false"
                                 inlineStyle="width:350px;">
                        <f:facet name="toolbar"/>
                        <af:spacer width="0" height="10" id="s3"/>
                        <af:panelFormLayout id="pfl1">
                            <af:panelGroupLayout id="pgl1" layout="horizontal">
                                <af:image source="/kaptchaimage" id="i1" partialTriggers="l1" shortDesc="Captcha"/>
                                <af:spacer width="10" height="0" id="s4"/>
                                <af:link id="l1" icon="#{resource['images:reload.png']}" shortDesc="Refresh Captcha"/>
                            </af:panelGroupLayout>
                            <af:inputText label="Enter text" id="it1" binding="#{ReadCaptchaBean.entrdCaptchaBind}"
                                          contentStyle="font-weight:bold;"/>
                            <af:button text="Submit" id="b1" actionListener="#{ReadCaptchaBean.readCaptchAction}"/>
                        </af:panelFormLayout>
                    </af:panelBox>



• Run application and see how captcha image is appearing on page





• It looks good :-), now see the managed bean code written in submit button's action. This code checks actual captcha value with entered value



    //Binding of inputText to get entered value
    private RichInputText entrdCaptchaBind;

    public void setEntrdCaptchaBind(RichInputText entrdCaptchaBind) {
        this.entrdCaptchaBind = entrdCaptchaBind;
    }

    public RichInputText getEntrdCaptchaBind() {
        return entrdCaptchaBind;
    }
    
    /**Method to check whether entered value is correct or not
     * @param actionEvent
     */
    public void readCaptchaAction(ActionEvent actionEvent) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        HttpServletRequest request = (HttpServletRequest) ectx.getRequest();
        //KAPTCHA_SESSION_KEY- The value for the kaptcha is generated and is put into the HttpSession. This is the key value for that item in the session.
        String kaptchaExpected =
            (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        //Get entered value of captcha using inputText binding
        String kaptchaReceived = entrdCaptchaBind.getValue().toString();
        System.out.println("Entered Value-" + kaptchaReceived + " Expected Value-" + kaptchaExpected);
        if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
            FacesMessage errMsg = new FacesMessage("Invalid Value");
            errMsg.setDetail("Incorrect captcha value- Not Human");
            errMsg.setSeverity(FacesMessage.SEVERITY_ERROR);
            fctx.addMessage(entrdCaptchaBind.getClientId(), errMsg);
        } else {
            FacesMessage errMsg = new FacesMessage("Correct Value");
            errMsg.setDetail("Hello this is the right guess");
            errMsg.setSeverity(FacesMessage.SEVERITY_INFO);
            fctx.addMessage(entrdCaptchaBind.getClientId(), errMsg);
        }
    }



• Again run this application and enter value for captcha








• So it is working , now to change captcha image added a link with partialSubmit=false and set partial trigger property on af:image.





• Kaptcha integration with Oracle ADF is complete and it is working properly  now if you want to modify captcha look n feel then add some init-param (configuration parameter) in web.xml file.
  See complete list of configuration parameters- https://code.google.com/p/kaptcha/wiki/ConfigParameters
  I have changed some parameters value in web.xml , see changed source of web.xml and captcha output



<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>yes</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.border.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.border.thickness</param-name>
            <param-value>1</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>250</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>60</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>35</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.background.clear.from</param-name>
            <param-value>orange</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>7</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptchaimage</url-pattern>
    </servlet-mapping>


again run this application and check output


Thanks, Happy Learning :)
Download-Sample ADF Application

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 :)

Uploading and showing image file from absolute server path -Orace ADF

This is another post about file handling in ADF. Previous post was about uploading and downloading any type of file from absolute server path
See-
Uploading and downloading files from absolute server path in Oracle ADF (12.1.3)

This post is specifically about handling image files, uploading an image file to server path and immediately show it on page using af:image component
So here i am using Jdev 12C (12.1.3) , see step by step implementation

• Create a fusion web application and a page in viewController






• Now drop af:inputFile (to browse and select file), af:image (to show uploaded image) and a button to upload file





• Bind af:inputFile value to managed bean variable, this variable is further used to read or write or process  file





    //To Store Value of selected file
    private UploadedFile imageFile;

    public void setImageFile(UploadedFile imageFile) {
        this.imageFile = imageFile;
    }

    public UploadedFile getImageFile() {
        return imageFile;
    }





• Now see Managed Bean method to upload image file to absolute server path

Bean Method to Upload File-




    //To Store path of uploaded Image file
    String imagePath = null;

    public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

    public String getImagePath() {
        return imagePath;
    }

    /**Method to upload image file to absolute server path*/
    private String uploadImage(UploadedFile file) {

        UploadedFile myfile = file;

        if (myfile == null) {

        } else {
            if (myfile.getContentType().equalsIgnoreCase("image/jpeg") ||
                myfile.getContentType().equalsIgnoreCase("image/png") ||
                myfile.getContentType().equalsIgnoreCase("image/bmp") ||
                myfile.getContentType().equalsIgnoreCase("image/gif")) {

                //Path of folder on drive
                String path = "D://ADF//";
                String type = "PNG";
                String TypeVal = ".png";
                if (myfile.getContentType().equalsIgnoreCase("image/jpeg")) {
                    type = "JPEG";
                    TypeVal = ".jpeg";
                } else if (myfile.getContentType().equalsIgnoreCase("image/png")) {
                    type = "PNG";
                    TypeVal = ".png";
                } else if (myfile.getContentType().equalsIgnoreCase("image/bmp")) {
                    type = "PNG";
                    TypeVal = ".png";
                } else if (myfile.getContentType().equalsIgnoreCase("image/gif")) {
                    type = "GIF";
                    TypeVal = ".gif";
                }

                InputStream inputStream = null;
                try {
                    //Generate a unique name for uploaded image with date time
                    DateFormat dateFormat = new SimpleDateFormat("yyMMdd_HHmmss");
                    Date date = new Date();
                    String dtTime = dateFormat.format(date);
                    dtTime = dtTime.replace(" ", "_");

                    String name = "IMG" + "_" + dtTime;
                    System.out.println("File name is-" + name);
                    inputStream = myfile.getInputStream();
                    BufferedImage input = ImageIO.read(inputStream);

                    //Writing file to path
                    File outputFile = new File(path + name + TypeVal);
                    ImageIO.write(input, type, outputFile);
                    imagePath = outputFile.getAbsolutePath();


                } catch (Exception ex) {
                    // handle exception
                    ex.printStackTrace();
                } finally {
                    try {
                        inputStream.close();
                    } catch (IOException e) {
                    }
                }
            } else {
                imagePath = "NO";
            }
        }
        setImageFile(null);
        return imagePath;
    }





ActionListener of Upload Button-




    /**Action Listener to Upload image File
     * @param actionEvent
     */
    public void uploadImageFileAction(ActionEvent actionEvent) {
        File directory = new File("D://ADF//");
        //get all the files from a directory
        File[] fList = directory.listFiles();
        for (File file : fList) {
            //Delete all previously uploaded files
            if (!"NoImage.png".equalsIgnoreCase(file.getName())) {
                file.delete();
            }

        }
        //Upload Currently Selected File
        String flag = uploadImage(imageFile);

        if ("NO".equalsIgnoreCase(flag)) {
            FacesMessage msg =
                new FacesMessage("This is not an Image file, Please upload supported file type (.jpg,.png etc)");
            msg.setSeverity(FacesMessage.SEVERITY_ERROR);
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }



• set usesUpload to true for af:form component on page to support file upload





• Now upload part is complete , next is to show uploaded image on page. So to do this create a servlet (this will process image file into bytes and then show using af:image component)








• See Servlet code and how it is mapped with af:image component



import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ViewImageServlet extends HttpServlet {
    private static final String CONTENT_TYPE = "text/html; charset=UTF-8";

    public void init(ServletConfig config) throws ServletException {
        super.init(config);
    }

    /**
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = (request.getParameter("path"));


        OutputStream os = response.getOutputStream();
        //If path is null or file is not an image
        if (path.equalsIgnoreCase("No")) {
            path = "D:\\ADF\\NoImage.png";
        }
        if (request.getParameter("path") == "") {
            path = "D:\\ADF\\NoImage.png";
        }
        InputStream inputStream = null;

        try {
            File outputFile = new File(path);
            inputStream = new FileInputStream(outputFile);
            BufferedInputStream in = new BufferedInputStream(inputStream);
            int b;
            byte[] buffer = new byte[10240];
            while ((b = in.read(buffer, 0, 10240)) != -1) {
                os.write(buffer, 0, b);
            }


        } catch (Exception e) {

            System.out.println(e);
        } finally {
            if (os != null) {
                os.close();
            }
            if (inputStream != null) {
                inputStream.close();
            }

        }

    }
}






• Now run this application and check this (All uploaded files will be stored in D://ADF path)

Select an image and click upload (Image is immediately reflected on page)

Check in D://ADF folder, image file is uploaded there with a new name

Again upload another image-

Check that previous file is deleted from folder and current one is there-

Happy Learning :)

Download-Sample ADF Application