Creation of Custom Widget Issue

Hi Julie,

You suggestion about the GetResourceString was very helpful.  I’m still having problems with streamlining this application, I created a test project (attached).

1. I used Button1 to draw a rectangle which fires the method “Test”.  It didn’t draw and the error: Unknown function: drawFurnishingsMovement showed, but with a second click and any subsequent clicks it worked fine.  Not sure what’s happening there.  I thought I had initialization covered.
2. I added some mouse handlers.  They don’t seem to be working.  I created a test “TestWidgetSetup” method to use with the button for this and it failed as well.

In my real project, I simply want to drag some boxes across the widget that is superimposed on a picture box. The app uses GDI+ to draw the objects on the picture box but dragging them by redrawing via GDI+ is too slow.  The idea is do a final redraw of the scene without the objects stored in the picture box, with the objects I want to move then drawn on the widget superimposed on the background scene in the picture box.  I simply want to select an object and drag it to another position.  Perhaps there’s an existing javascript out there that already can do this.

On a side note:  In the test project I tried to use Application.MainPage.top and similar to position my pictureboxes added to simlate my real project.  It showed Application.MainPage was nothing despite the call in Program.vb (Application.MainPage = new Page1()).  This works in my real project upgraded from WiseJ 2.5 but not in the new WiseJ4 project.  Just curious.

Thanks again,

Gerry

Hi Julie,

I added a class OverlayCanvasWidget as per your suggestion, which contains Return GetResourceString(“OverlayCanvasWidget.js”).   “OverlayCanvasWidget.js” is set to Embedded Resource. I’m getting an error message on form load:

Error: “Unknown function: drawFurnishingsMovement”

I initialize the widget like this: Private WithEvents OverlayWidget As New OverlayCanvasWidget() and on load make a call to clear it:

OverlayWidget.Call(“drawFurnishingsMovement”, New Dictionary(Of String, Object) From {
{“dx”, 0},
{“dy”, 0},
{“objects”, New List(Of Object)()}
})

Do I need a line in Default.html like: <script src=”Scripts/Widgets/OverlayCanvasWidget.js”></script>?  What else could I be missing?

Thanks very much for you help!!

Gerry

See attached test case.

You need to put all of the js code in a single file, in this case I put it in a file called startup.js.

If you want to load the js code from a file instead of setting it as a string in the InitScript, you need to create a new class that derives from Widget.

Public Class NewWidget
Inherits Wisej.Web.Widget
Public Overrides Property InitScript As String
Get
Return GetResourceString("WidgetTestApp.startup.js")
End Get
Set(value As String)
End Set
End Property
End Class

Note this line of code: Return GetResourceString("WidgetTestApp.startup.js") is where you are telling it where to find the js code. In VB.NET you don’t need to include the folder name like you do in c#. See https://docs.wisej.com/docs/concepts/embedded-resources#resources-and-platform-folders

Thanks Julie!  As I mentioned, this is my first try at this.   The code make this look simple, add the widget, .js file, and a call, but I’m still unsure.

I added the “init” file OverlayCanvasWidget.js. In it’s Properties I set the Build Action to “Embeded Resource” and the Copy to Output Directory to “Copy if Newer”.

In the actual Widget I placed on my page I set the Package Name and Source, however in the InitScript, I’m not sure of the syntax of identifying the “init” file, which is “Scripts/Widgets/OverlayCanvasWidget.js”.  I assume this is what it is looking for, but it doesn’t work.  I can’t find in the documentation how to do this specifically.

Another suggestion or two would be helpful.

Thanks much!

Gerry

Try setting the InitScript of the widget to your js code
https://docs.wisej.com/api/wisej.web/content/widget#initscript