gideonvos: Doodle/Notes Control for AX7

[Blog bot]

Источник: https://gideonvos.wordpress.com/2016...ntrol-for-ax7/
==============

As I’m in the process of learning what can and can’t be done in AX7, I’ve started porting a cloud-based forms system over to AX. One item I require is the ability to allow users to digitally sign documents using a pen or mouse, which is then “stamped” into the PDF document they are signing.

This requires some interesting JavaScript usage within an AX7 Extensible Control and I’ve learned quite a lot about how the Extensible Control Framework hangs together while doing so. In building the signature control I thought I’d give something back to the AX community and created a control that will no doubt be used extensively during those exciting project implementation meetings – a doodle control. Feel free to embed this into your own module or hide it as an Easter Egg if you want.

The basic container form code is shown below, and does nothing but instantiate our control:

[Form] public class DoodleForm extends FormRun { DoodleControl doodle; public void init() { super(); doodle = this.design().addControlEx(classStr(DoodleControl),"DoodleControl1"); } }


The control itself is very simple as well, as shown below.

[FormControlAttribute("DoodleControl","resources/html/DoodleControl", classstr(FormBuildControl))] class DoodleControl extends FormTemplateControl { public void new(FormBuildControl _build, FormRun _formRun) { super(_build,_formRun); this.setTemplateId("DoodleControl"); this.setResourceBundleName("resources/html/DoodleControl"); } }


Finally, the HTML code which is stored as a resource contains the JavaScript where all the fun happens. As AX7 uses HTML5 we can use the canvas object for our drawing. I’ve embedded the CSS styling into the button, and instead of sticking the JavaScript into another resource file just embedded it at the end of the page WHICH WORKS FINE. The only trick I learned is in order for it all to work, all the HTML and JavaScript needs to be wrapped in the main control DIV element.

<div style="background:#ffffff;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"> New $(document).ready(function () { var canvasWidth = 600; var canvasHeight = 400; var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; canvas.addEventListener("mousedown", mouseDown, false); canvas.addEventListener("mousemove", mouseXY, false); document.body.addEventListener("mouseup", mouseUp, false); canvas.addEventListener("touchstart", mouseDown, false); canvas.addEventListener("touchmove", mouseXY, true); canvas.addEventListener("touchend", mouseUp, false); document.body.addEventListener("touchcancel", mouseUp, false); function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.strokeStyle = "#000000"; context.lineJoin = "miter"; context.lineWidth = 1; for (var i = 0; i <span style="color:#333333;">