Web page decoration tools (lack of)

Targets Web
1

I can hardly believe that I can’t set a border width and colour on a web rectangle.

How can we make pages attractive without basic graphical tools like this?

1 Like
2

Please give WebStyle a try:

Me.Style.BorderColor = Color.Red
Me.Style.BorderThickness = 3
Me.Style.BackgroundColor = Color.Blue

Captura de Pantalla 2023-03-23 a las 11.34.21

1 Like
3

we really need a style editor …

4 Likes
4

what we really need is a property for all controls that allows us to insert the name of a custom css class.

4 Likes
5

^^^ This. It seems simple and would go a long way.

6

Is WebStyle new to Web 2. ?

7

Agreed. Anyone wanting this feature should add a thumbs-up to your issue:
https://tracker.xojo.com/xojoinc/xojo/-/issues/72204

In the meantime, here is a workaround.
Add the following method to a Module:

Public Sub AddClass(extends ctrl As WebUIControl, classname As String)
  
  var strID as String = ctrl.ControlID
  
  //Add the class using jquery
  var strScript as String = "$('#" + strID + "').addClass('" + classname + "');"
  
  //Execute the javascript safely
  Var buffer As String
  buffer = "try {" + strScript + "} catch (e) {}"
  
  Try
    ctrl.ExecuteJavaScript(buffer)
  Catch
    
  End Try
End Sub

Use like this in a Control.Opening or Control.Shown event

me.AddClass("h2") //Will display a Label as "h2" header

me.AddClass("alert alert-primary") //Displays a label as a Bootstrap alert
1 Like
8

Apologies for the delay in responding, I’ve been a bit tied up with a Xojo web project database.

Thank you for the Web Style suggestion, Ricardo. I can see there are lot of things that can be done with that. I only need a fraction of them and it seems a bit fiddly at first, but at least I can now put a colour border on a rectangle and overlay another with a white fill and no border so I can cut some text in.

I’ll have a play around with it some more later. Thanks again. Steve

9

Keep in mind that using this technique to add a class may only work until the control is refreshed and some controls are several “divs” deep.

10

OK thanks, but what would you recommend I do? Xojo has been around for a quarter of a century since it was released as RealBasic in 1998 and I would have expected any reputable programming language to be able to produce solid Web apps featuring a few coloured lines and boxes by now. It is immensely exasperating to be told at every end and turn; “Be careful, that might not work reliably”.

11

Use the WebStyle as Ricardo mentioned.

If you decide to use JavaScript to add classes then test your app to see if the class is not removed or if it is applied as some controls are several “divs” deep as Greg mentioned. Using external calls and/or classes that are not part of Xojo Web 2 should be used carefully.

1 Like
12

Using Webstyle as Ricardo mentioned is completely safe, even if the control is refreshed, the style will be kept.

It is only when doing altering the style using ExecuteJavascript (as I wrote in my previous post), that isn’t completely safe.

1 Like
13

OK, that’s reassuring, Jeremie. Thank you.