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?
You want something like this?
Basically what I did:
- Create the WebStyle in Xojo2019
- Run the application with the label and background
- Use Chrome developer tools to copy the CSS style created
- Add the information to the Web 2.0 Label opening event
Me.Style.Value( code for each definition
Here is the code used in the Label Opening event:
me.style.value("border-top") = "1px solid rgba(162,162,172,1.00)"
me.style.value("border-left") = "1px solid rgba(0,19,75,1.00)"
me.style.value("border-bottom") = "1px solid rgba(0,19,75,1.00)"
me.style.value("border-right") = "1px solid rgba(0,19,75,1.00)"
me.style.value("background") = "linear-gradient(to bottom, rgba(128,159,255,1.00) 0%, rgba(0,19,75,1.00) 100%)"
I used the IDE to set the font white, bold and centered. The problem is that now the Label is all white in the IDE, so is hard to work with.
Edit: To avoid having an all white Label on the IDE, keep the black color and add this line to the opening event:
me.style.value("color") = "rgba(255,255,255,1.00)"
Thanks Albert. That will give me what I want. It begs the question; why did Xojo make this significantly harder?
I’m hoping there is a way to do this kind of thing in a subclass of WebStyle so I can call it to set the style
They made is so you can use a style sheet to impose a uniform style on all windows of the app. It will make it easier in the long run.
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.
You might have read the roadmap:
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.
A WebStyle can have a Super Or I might be misunderstanding “because you couldn’t “stack” styles in Xojo”
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))
dim myStyle as new Dictionary
myStyle.value("border-top") = "1px solid rgba(162,162,172,1.00)"
myStyle.value("border-left") = "1px solid rgba(0,19,75,1.00)"
myStyle.value("border-bottom") = "1px solid rgba(0,19,75,1.00)"
myStyle.value("border-right") = "1px solid rgba(0,19,75,1.00)"
myStyle.value("background") = "linear-gradient(to bottom, rgba(128,159,255,1.00) 0%, rgba(0,19,75,1.00) 100%)"
@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.
WYSIWYG definitely suffers
I mean applying multiple css classes/webstyles to one control.
But in Web 2.0, looks like beginner must be understand those.
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
operator_lookup can be useful as well in a subclass
there are downsides to operator_lookup though noted on the references
Public Sub Operator_lookup(propertyname as string, assigns value as string)
Select Case propertyname
Me.style.Value("background") = value
Me.style.Value("color") = value
Me.style.value("border") = value
Me.style.Value("border-top") = value
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
how about creating a global control event something like
GetStyle(byref sender As Object)
select case sender
style = …
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.