control subclasses holding their own properties?

SDKs Web SDK
1

I’ve got one very successful WebSDK control under my belt now. It’s just an html canvas and I put a draw method into a local library. When I need to reload it I can send it all the information I need with a single call to the library method that also gets a reference to the control. There are no local variables or other things that it needs to store on a canvas by canvas basis so the fact that the screen can hold many of them doesn’t matter, the control itself is very simple.

For my next project I need to build a more complicated control that will store some min/max values and do some math as you interact with it. I’ve got it working as a standalone bit of javascript and html code and I’m ready to start converting to a webSDK control. My problem is that the values are currently stored as globals within that script and all my methods access them. I’m having trouble wrapping my head around how I can encapsulate those globals into the actual control object since each control object will have different values to build their displays from.

If I include a script inside the HTML code and pass it in the SetupHTML handler will that somehow become available on a control by control basis? it’s just my relative inexperience with javascript that is causing me this pain :wink: I can get the canvas reference inside the library drawing code by doing something like: (thisParent is passed into the library call by my event from Xojo)

var thisCanvas = thisParent.children[0];

as is documented in the SDK. but then I need to be able to get more information about it like:

var maxValue = thisParent.maxValue
var minValue = thisParent.minValue

how can I put those into the control so I can get them to the library drawing code when it needs them? These things really do need to be stored on the browser as I’ll be redrawing in response to mouse/touch drags which you can’t do by sending events back and forth to the server. The only event I’ll be sending back will be the final value when you’re done working with the control.

Any philosophical ideas to fill in my spotty understanding of all this greatly appreciated :slight_smile:

2

This is where your namespace comes in. What you’ll want to do is create your own namespaces below the ones you registered with is. For instance, if your namespace is “foo”, the control is named “bar” and the instance is “qwerty” you’d want to do this:

Make sure the controls namespace is XojoCustom.foo.bar.

[code]// create a JavaScript namespace for the control itself
XojoCustom.foo.bar.qwerty = {};

// put the control’s value in there.
XojoCustom.foo.bar.qwerty.maxvalue = 42[/code]

3

Thank you! I think I’m getting this to settle in. Here’s what I did so far and it works, but is this the correct way…

For this test I just wanted to create a canvas that would popup an alert when I clicked on it displaying a number from a per-control data structure somewhere. my javascript namespace is XTension.test. For the HTML I returned this:

filling in the controlID before sending it of course. So in the HTML I’m creating and passing a specific reference to the data structure I’m about to create in the load libraries section.

for the javascriptlibrary load I sent this:

RSCustom.XTension.test.<> = {
“mySecretValue”:42
}

RSCustom.XTension.test.gotClick = function( theDataReference){
alert( theDataReference.mySecretValue);
}

and that worked! So now I need to move all the methods that work with the data and the controls off to a separate library i can manage separately, but each control will return the javascript data description, but the library code that accepts those events will only be loaded once, rather than with every control like it’s doing now.

so anywhere I need to access that data I just need to make sure that the link to the command includes the full link up to the control id from when the HTML was setup and sent.

Does this sound like I’ve got a basic understanding OK? Or am I going to run into a wall shortly :slight_smile:

4

That sounds good so far.