Sorry in advance if this comes across wrong or a little bit meh, but I am totally stuck on applying styles in 2020R1,
Before 2020R1 I had styles created, and if a field on a form was not valid, I could set the style for that field to be “TextField.Style = FieldError” FieldError being a style created in xojo ide
The blog post https://blog.xojo.com/2020/08/28/webstyles-and-web-framework-2-0/ says drop the bootstrap.min.css into your project,
yep ok done that, now what? how do we access the classes, are we supposed to do something else? as I can’t access any of the styles in code or the IDE.
So in essence - How is one supposed to assign a class to a WebTextField? I take it, that the whole point in dropping the internal style from 2019R(whatever) is that we can change the styling without recompiling the project, yep thats a good move, as uploading a new stylesheet can change the look in an instance.
I have tried all variations to try and get TextField.Style = “BootStrap CSS ClassName” and the compiler just moans
or are we supposed to now type out in code every single piece of styling for that field, e.g
Var style As New WebStyle
style.Bold = true
style.Do I really want to retype out ever piece of css styling for this field that is already defined in the stylesheet, for every WebObject???
me.Style = style
As I certainly would not do that in html & javascript, I would just change the class name to represent the styling I want when that field has an error
Simply put if this is the way it’s going, I’ll have to rethink renewing my license, and push every web app over to docker and symfony
I’d be grateful if someone could give me hint, as none of the built in examples have the bootstrap.min.css attached
To do what you want, you will need to send the components that you change for that style, something like what I did on this post:
I hope that a future version of Xojo Web 2.0 has an option to create and use custom CSS styles that we can assign easily and will update the IDE for visual feedback without the need to run the app every single time.
Hi AlbertoD,
Thanks, I did read through your post a few times
but in all honesty, I thought the process of using bootstrap.min.css is that would could change the style of a field by setting the class thats defined in the css, not rewriting the whole css style sheet on every field in xojo, it makes no sense to import bootstrap in the first place and it’s basically adding thousands of lines of extra code to type in and locking each field down to what size, color etc, we type in the IDE,
in my websites (not xojoWeb) I don’t import a css style sheet then rewrite every font, colour etc when i need to change that dynamically I just change the class thats assigned to that field to one that has been created in the stylesheet to start with
Hi Sarah,
I understand you completely. What Xojo “fixed” with bootstrap is the need for overall change on the look of the application.
The problem that you have is the same that I have at work. We use WebStyles to change the look of individual controls for specific reasons, so a new bootstrap theme doesn’t work for us. Now instead of myField.Style = Field_Invalid and back to myField.Style = Field_Valid (and many other things that we use WebStyles in Web 1.0) we can’t do that in Web 2.0
I see that we are not alone with this need and I hope Xojo will add, maybe, a CSSStyle option to add, change, remove CSS Styles to controls. Even a Web 1.0 WebStyle converter to Web 2.0 CustomCSS so we can do things like:
myField.CSSStyle.Toggle("Field_Invalid")
that way if myField doesn’t have the Field_Invalid CSS class then add it, or if it is there remove it.
My idea is to work like this, for example, Web 2.0 buttons:
That way I can create a button the uses a bootstrap outline button instead of solid button. I know the IDE will not show the outline button if I do this with code, but at least will let me use other bootstrap CSS classes already there in the bootstrap default theme and third party themes offer many others that Xojo will never support, and the only way to use those is for Xojo to let us add, create and change the CSS class used.
I’m sure Xojo will add more features in the near future.
After having a break and playing pool for a few hours, I think I figured it out,
So this does indeed change to the colours defined in the bootstrap.min.css, however the un-ticking of the checkbox doesn’t change the colour back to Primary - maybe thats me, but I’m sure it’s supposed to work
if CheckBox1.Value then
Button2.Indicator = WebUIControl.Indicators.Success
else
Button2.Indicator = WebUIControl.Indicators.Primary
End If
it is a good work around, but I also want to change the font colour etc, which tbh makes it a lot of work for a workaround where as before 2020R1 i just called the style name, even the documentation isn’t great and I have no idea how I stumbled on .Indicator to start with
If you have a look at the mentioned Github Repository - there you can add styles to controls, and their names (the style names) are applied as css classes to the elements. This makes it handy to change the look of the controls using CSS.
I have cloned it and looked through it, it’s interesting and a lot of work,
I did just type out a massive rant as to why I’m going to ditch web2.0 in xojo, but you don’t need that,
thank you for taking the time to share it
I am so new to Xojo that most of this is over my head. I did download a bootstrap theme and downloaded the css. I dropped it into my project and I see it there. But none of the style has changed for any of my project. This is my first project and I have not purchased a license so I’m not able to do a build. Will the changes only show if I run the build process?
You can simply run the project from the IDE. The bootstrap theme styling will be more apparent in the browser than in the IDE. The IDE rendering of the theme should improve with time. Web 2.0 is not finished. It is just at the initial minimum viable product stage.
