I truly lament the elimination of the web style editor but I’m determined to move on. I need to try to recreate a style in a WebLabel to duplicate a style in a a Web 1.0 app. The style has a gradient background that is light blue at the top &c809FFF to dark blue at the bottom &c00134B. the Top border is &cA2A2AC and the left, right and bottom borders &c00134B. How do I recreate style using the new WebStyle methods? Am I screwed and it’s not possible with WebStyle? Is there another way way to create a background like this?
If applying a WebStle style won’t overwrite the styles set in the UI for the control then I can set the text attributes there, but if not I also need to set the text color as &cFFFFFF, text alignment as centered, and font style as bold in addition to the background.
Can anyone shed some light on this problem and or point me to an example of creating a gradient background for the WebLabel control?
Well actually it isn’t really easier, also not in the long run. Because, what could be easier than simply appliying a webstyle like item.style = styleName.
We usually don’t want to have every control of same also sort look alike.
I’m 100% with Lars on this one. This is the biggest conversion incompatibility with Web 1.0 I’ve encountered so far and it is a huge deal for me. In some of my apps I have a large number predefined web styles and ALL of them get used on various pages of the app in different contexts.I do not see a style sheet replacing that.
It says “A from-the-ground-up rewrite of the Xojo web framework providing more robust web applications, a modern user interface, many new controls, better style management and more. The APIs in this version are API 2.0-compliant.”
Especially this part:
“better style management”
Now we have in code ability for styles but i don’t see that as better style management. By now we need to design “bootstrap.min.css” in another editor and development in the ide while this file has been imported is not showing expected results.
Unless the IDE correctly renders styles it is practically unusable as tool to design web apps. I’m totally unimpressed with 2020 R1 and Web 2.0. Looks like I’m stuck with 2019 R3 for the foreseeable future which probably means at least 2021. That’s very disappointing.
Here’s a screenshot of our entire style library. 98% of them are still in use. And most of them have additional CSS in the frontend.
We had to make auch a large list of webstyles, because you couldn’t “stack” styles in Xojo, as you usaually do in large web projects. So each state of each control has its own style and is reflected also in our 5K lines long stylesheets.
Converting THIS to the current web framework is actually impossible.
Not ideal, but you can build a dictionary as a WebStyle and then have a WebUIControl extension method in a module that loops through to add them
Public Sub AddStylesFromDictionary(extends control as WebUIControl, d as Dictionary)
for i as integer = 0 to d.KeyCount - 1
control.Style.Value(d.key(i)) = d.Value(d.Key(i))
next
End Sub
@Brock_Nash that is one way to partially simplify setting a style but it still gives no rendered representation of the control in the IDE like in Web 1.0 styles so it is less than satisfying because you cannot design the look and feel of the app.
You can replicate that style by running the following four lines in the Button’s Opening event. If you have a lot of them, I suggest making a method or subclassing the button:
Me.style.Value("background") = "linear-gradient(to bottom, #809fff 0%, #00134b 100%)" // the gradient, top to bottom
Me.style.Value("color") = "#FFFFFF" // the text color
Me.style.value("border") = "1px solid #00134b" // blue all the way around
me.style.Value("border-top") = "1px solid #A2A2AC" // light gray on top
Edit: wow. There were a lot of responses while I tested that
Public Sub Operator_lookup(propertyname as string, assigns value as string)
Select Case propertyname
Case "background"
Me.style.Value("background") = value
Case "Color"
Me.style.Value("color") = value
Case "border"
Me.style.value("border") = value
Case "bordertop"
Me.style.Value("border-top") = value
End Select
End Sub
then the Opening event for it looks like
Me.background = "linear-gradient(To bottom, #809fff 0%, #00134b 100%)" // the gradient, top to bottom
Me.Color = "#FFFFFF" // the text color
Me.border = "1px solid #00134b" // blue all the way around
Me.bordertop = "1px solid #A2A2AC" // light gray on top
you cannot simply translate 100 webstyles into this way of code.
you also have to convert your pure CSS into xojocode 3) Xojo doesnt support the full CSS palette. So we loose functionality and Style informations when we rewrite all styles with this method. EDIT: Learned recently: with the .value property you actually can
we still use stacking CSS classes. if a containet has class „container“ and a button has class „button“, then the button looks different as it is when its on webdialog for example. With css in some few lines coded, with your suggestion, you‘ll habe dozens and still will have bugs and weird behaviour.
That is definitely not a good way to convert webstyles
@Xojo
how about creating a global control event something like
GetStyle(byref sender As Object)
select case sender
case textbox
style = …
case label
style = …
a central place for inserting own styles by identify the object type or object name.
means one method that can handle all (special looking) controls.
Or I might be misunderstanding “because you couldn’t “stack” styles in Xojo”