Sidebar

Targets Web
1

Testing web 2 just because :slight_smile:

Since Web 2 is Bootstrap based, I was thinking of testing out how you create a sidebar, like this
for example:

sidebar
sidebar441×710 42.8 KB

How have you fellow developers done this in web 2?

I was thinking of using a rectangle and just hide it at certain sizes, but maybe there is a better way?

/Ronny

2

the easiest way to graffitisuite or other extension.

3

done one with webcontrolsdk

Capture d’écran 2021-07-06 à 11.12.09

4

Looks good :slight_smile:

This is completely custom drawn?

5

it doesn’t draw in the IDE (for now) this is a browser capture. I made listbox like. I’m adding the badges inside each cell (to display the number of records actually)
the websdk is quite easy to understand, the drawback is (was?) to find workarounds for things that dont work from one year back 

yes graffiti suite would be easier, but learning the websdk will help you for anything you can’t find in a plugin there will surely be one some day.

it’s a simple bootstrap sidebar.

6

thanks, I will have to have a look at the websdk then :slight_smile:

7

Hello everyone. Anybody has a good working example on creating sidebar for Web 2.0?

8

You can create little containers and build complex interfaces composing them. This is an example of the Twitter Sidebar, using Xojo Web 2:

Sin título

It doesn’t do anything, I’ve just been playing with the GUI, but you can get the code here:

This article can help:

2 Likes
9

Here’s a little something. It’s a set of custom web controls I had lying around, including a sidebar.
Take them, try them, use them if you want. I can’t provide support.
Everything is the result of experimentation, and I can’t guarantee they’re bug free.
If you like them, let me know.

Regards
RomĂĄn

2 Likes
10

Thanks everyone. The samples pointed above were awesome . However, i am looking towards something that was described in Xojo blog previously ( in Web 1.0)

I believe it is almost similar to what the OP was asking.

Btw, i think Xojo should have an updated lists of good workable samples that contributors have did, like the above. Could be useful to many people here.

11

What you’re looking for is typically called an off-canvas menu, and can be done in Web 2.0 similarly to the way that blog post creates it for Web 1.0. The JavaScript included in that post should work just as well.

If you want a drop-in control, I do have GraffitiSidebar which handles all of the sliding, uses WebContainers for content, and has both a header and close button.

2 Likes
12

Le pusiste mas amor a tus controles! :slight_smile:

13

Nice example of what can be done with the display, way beyond “basic” layouts. I’m still figuring out what you did here but with a little patience I’ll get the hang of it.
Thanks for sharing

1 Like
14

Feel free to ask @Hector_Marroquin :smiley:

Edit:
@Hanif_Saad it should be easier now, you probably won’t need JS for this anymore. Using WebStyle.AddTransition you should be able to animate the position.

Something like:

Me.Style.AddTransition("right", 0.5, WebStyle.SpeedPatterns.EaseInOut)

Please check this example as an entry point (click on Code → Download Zip to download):

5 Likes
15

Thanks Ricardo.

1 Like