WebDialog palette replacement?

I replaced all the WebDialogs in WebConainer and managed them with jsPanel. Much faster and with more functionality.

Actually, what you can do is to use WebContainer.

You can put controls in it just the same way as palette, and use some styling to make it look like a window. For instance:

Sub Opening() Handles Opening
  Me.style.BackgroundColor = &c80FFFF00
  Me.style.BorderColor = &c00000000
  Me.style.BorderThickness = 1
End Sub

Just add a button in the corner to close.

Thanks.
The only reason I need a palette is to display a moveable picture floating on the page; the appearance of the window/frame is not important.
When Web2.0. was launched, mouse events were removed, so I can’t code the moveable behaviour in code; would some calls allow a WebContainer to have a title bar (or be otherwise user-moveable)?

If others need it too I can try to extract a part of my WebSDKUIControl from jsPanel. But I can’t promise to keep the code

1 Like

Thanks. I’m not wanting you to do complex work for that, you know; I’d just like to have a simple call to make a WebContainer (or WebDialog) moveable.

Keep the code where?

I’ll see what I can do without taking too long. I meant updating the class for function requests, fixing any errors, etc…

2 Likes

Ah, no problem for that.
Thanks.

Adding a window bar is probably as simple as using a WebCanvas.

Making the container movable would indeed require MouseDown, MouseUp and some way to get the coordinates of the mouse cursor. All that is available with JavaScript, but will require sending back the events to the Xojo program. It is possible with the WebSDK. But this is getting beyond the scope of this post.

I posted everything here.

1 Like

Thank you very much! I now can go further.

Currently, I’m facing with a problem, though: when changing the height with the code below, the titlebar can go above the page (since the window stays centred) and becomes inaccessible.
I’ve checked the Top property of all related objects (the AttyWebJSPanel and the WebContainer, also combining with their Page and Parent properties); they all return 0, so I cannot store and put the palette back.
How would one find and set the actual top/left properties without these ones?

Here’s my code:

'p is.a picture
'PreviewContainer is the AttyWebJSPanel object
'refTestExample is the AttyWebContainer object
dim wt As Integer=PreviewContainer.Top //Current top position (but returns always 0)
refTestExample.IV1.Picture=p 'Put picture in WebImageViewer
'Adjust size:
PreviewContainer.Height=p.Height
PreviewContainer.Width=p.Width
PreviewContainer.DoResize
PreviewContainer.Top=wt 'Doesn't work yet, obviously

May I just ask you whether I’ve done something wrong?

Thanks again.

I get the problem now, ingora the msg from before. I try to solve and update :wink:

2 Likes

We are getting an update! Sweet!!

I think I’ve solved the problem. Keep in mind though that repositioning only works with some layout types not all. The layouts on the right, I didn’t integrate them because when I wrote the class I didn’t need them.

Great, thank you!
Is the link to download the same as the last time?

Here posted the new link:

Ah, thanks. I did receive a notification only for this thread.

Thank you, @Attilio_Punzi1!

1 Like

One simple thing is also the following:

Since Xojo Web 2.0 uses jQuery, you can simply also use jQuery UI.

Load jQueryUI into your app over the httpheader in the app object. Then call the draggable method over ExecuteJavascript with the controlId of your webdialog and you’re done.
https://jqueryui.com/draggable/

With jquery you’re also able to hide the background. Most simple thing I think.

3 Likes

Thank you Lars.
It is simple when you know what to do, now I need to go learn this JQuery thing. I’ll try to do this after work today.

I took the 10 minutes and made a test project for you:
https://github.com/VanDerLars/Xojo-Drag-and-Drop-Dialog

Still feels clunky and needs a bit love with css and so, but works and only uses 10 LoC or so.

2 Likes

Thank you, I will try to do it before looking at your code.