You can capture signatures in a web view using canvas, as has been demonstrated already, but did you know that you can do the same thing with Scalable Vector Graphics? You may be wondering what the point would be, other than novelty. I will not get into the debate between canvas and SVG in-general, but for this particular application, there are a few advantages to be had by going with SVG. Keep reading to find out why and how to add an SVG signature component to your MAF applications.
The major difference between the SVG and canvas is that canvas is a bitmap vs. a path in SVG. With that bitmap, you will store 4 bits for every pixel of the canvas, adding up to a static data size for your signature data, including all of that empty space. An SVG path is quite a bit smaller and is plain text. If you had to capture signatures for a delivery company and store them for several years, the size of the data stored would be significant. Since we have a path, we also have separate segments that could be analyzed for fraud or otherwise leveraged to provide business value. This data format makes it easy to deal with, it is small and simple, and storable in an attribute without any encoding needed. This enabled me to easily expose the data value so that you can bind it with an expression and treat the signature component as an input component.
I did not go through the pains of making a full-blown component that handles all the AMX events, so all the usual caveats apply to this free code. In production, I would use asymmetric encryption to ensure that signature data is safely transmitted and stored on corporate servers.
All the code for this sample can be found on GitHub, so I will just be focusing on the interesting parts.
First, in the sign.amx AMX Page there are three things to point out:
- Import the namespace
Notice that the part after the colon matches the part before the colon in #3
- Show the data in another component by using the same binding
This is for testing purposes only, you could use this in a managed bean or data control
- Add the component to the page
The value attribute is bound to EL, so this will serve as the model for this example
When the framework sees this avio:signature custom namespace and tag, it needs to know what to render into the document. In the sign.js file, everything is provided to render the appropriate DOM and handle events and data. This is a lot of code to paste in a blog entry, so I will just cover a few of the important parts.
On line 112, the handler for that avio:signature tag is registered. At this point you would get just an empty spot where you expect your signature block. The next line, 113 provides the code for the render implementation, we will cover that in more detail. The last line is to tell the framework which attribute is storing the value for this custom component.
And here it is running on my Android phone
There it is, an easy way to capture signatures that is very efficient and easy to work with. I plan on exploring more with SVG and how it can be used to extend MAF applications, as well as other things that interest me. I hope you enjoyed this entry, let me know if you have any questions, or interesting ideas to explore.