ADF Signature Component(Declarative)

In this post we are building a Signature Declarative Component.

To create a declarative component.

From the main menu, choose File > New. In the New Gallery, expand the General category and select Applications. Then in the Items list, select Custom Application and click OK.

  

 Provide the name and click Finish.

In the Application Navigator, double-click the project you just created to open the Project Properties dialog. Select JSP Tag Libraries and Distributed libraries, then click Add.  

In the Choose Tag Libraries dialog, select ADF Faces Components 11 and click OK twice to close both dialogs

Click File -> Web Tire-> ADF Declarative component and provide the details.

Click on the JSP XML radio button to create a .jspx file.

Add the Attribute.

                <attribute>
                    <attribute-name>signatureValue</attribute-name>
                    <attribute-class>java.lang.String</attribute-class>
                    <required>true</required>
                </attribute>

Add Tag Library.

Created Css and Js folders to copy the Signature files.

in the signature.jspx file implement your signature code.

After completion of your code, create a deployment profile.

Click on Build-> Deploy -> New Deployment Profile. And then deploy the jar file.

Signature Test Application.

Simple Application with model and View controller project.

Created a simple table to save the signature images and value.

 

 To add your declarative component jar file,

Resource Palette from the main menu to open the Resource Palette. Expand the IDE Connections panel.

From the New dropdown menu, choose New Connection > File System

Point to your Jar location.

Right click on the jar file select -> Add to project.


To add signature component to you page. Click on components palette -> from the drop down select signature component.

Then created test page signaturetest.jsff and add the signature component to page.

 

Name space and Tag sample.

Created a Bean value and passed to the signature component.

Note: Signature capture is based on the 2d coordinates.

Ex:{"lines":[[[76,51.43],[76,52.43],[77,56.43],[82,66.43],[92,80.43],[106,100.43],[119,119.43],[134,141.43],[148,164.43],[158,178.43],[165,188.43],[172,197.43],[176,204.43],[178,208.43],[178,209.43]]]

Before saving the data to database i am converting this coordinates to image BLOB.

--End Note--

    private static BlobDomain redrawSignature(List<List<Point>> lines) throws Exception {
        BufferedImage signature = new BufferedImage(
                SIGNATURE_WIDTH, SIGNATURE_HEIGHT, BufferedImage.TYPE_BYTE_GRAY);
        Graphics2D g = (Graphics2D)signature.getGraphics();
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, signature.getWidth(), signature.getHeight());
        g.setColor(Color.BLACK);
        g.setStroke(new BasicStroke(2, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
        g.setRenderingHint(
                RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        Point lastPoint = null;
        for (List<Point> line : lines) {
            for (Point point : line) {
                if (lastPoint != null) {
                    g.drawLine(lastPoint.x, lastPoint.y, point.x, point.y);
                }
                lastPoint = point;
            }
            lastPoint = null;
        }
        BlobDomain blob = new BlobDomain();
        OutputStream out = blob.getBinaryOutputStream();
        ImageIO.write(signature, IMAGE_FORMAT, out);
        return blob;
    }

Test Screens.

You can download the Sample Application.