Does anyone have or know of a fairly comprehensive primer on how to implement css styles in Xojo web? I have tried lots of styling options since Web 2.0 and I can make things look like what I want on a computer, but I’ve yet to see any hint that I can make a page responsive like I can with PHP, HTML and CSS Nor can I keep a maintainable and refactor able code base like on the traditional Web. Obviously, a large part of this is just me, but since there are a lot of style and Bootstrap questions on this forum it strikes me that a video or a couple of how-to articles on this subject might be of use. I don’t care much for Bootstrap but I am willing to use it if I know basic things like how to modify the styles and how html tags used by css are mapped to Xojo web controls (or do you just need to assign IDs?). For instance, how to I use CSS Container or Table or Grid on a Xojo web page? It seems to me that this subject calls for a rather more involved explanation than “just drop Bootstrap on the Xojo navigator”. I doubt if I will care for the Bootstrap default for anything ever, and I don’t want to modify every single control I have individually to the end of time (even though it works fine when I do that). Bottom line, since there is no DOM in Xojo web development, a lot of rules I’ve taken for granted in web development seem no longer to apply and I’d love to know what the differences are.
Thank you
fritz
You don’t, at least without a lot of hacking.
While the Bootstrap framework is used, its primary function is to get consistent controls that can be themed. The layout features on the other hand are largely unused because of the limitations/expectations of the Xojo framework.
That said, you could use the Web SDK to create any views you want within a page… and @Brock_Nash has done extensive work in exactly what you are describing. It’s just not built in.
Well, if there’s anything I know less about than Bootstrap 4, it’s Web SDK. Since I’ve got nothing but killtime tonight, I might as well go have a look and see if I get lucky.
Thanks very much for saving me a lot of time on the Container and Grid. That was half my issue with adapting CSS to Xojo.
fritz
Just so you know, things that subclass from WebView have a property that sets the type of layout between default and “flex”. It can be used to create a view that “fills up” as new items are added.
This is potentially something that might serve as a substitute to the @media rules in css (and just a great way to resize a page in general obviously). I haven’t explored this in full because the docs seem to suggest it applies to web containers only. I don’t know if that translates into “things that subclass from WebView” but I’m going to try this out since it seems closer to my skill level than the WebSDK path. Thanks for the tip.
Can someone write a comprehensive / step by step tutorial on WebSdk for Web2.0? Especially in light of the migration of Xojo Web 2.0 to Bootstrap 5. It will be good for the whole Xojo community.
Ricardo did a session at our 2022 conference about the WebSDK. You can view it on our YouTube channel.