I have been a long time user of Web 1.0 (Xojo 2019 r3.2) and am finally making the jump to the current version (Xojo 2026 2.1). I am not using Bootstrap for now.
-
Upon using WebTextField it seem pretty easy to specify the style with code. However, I cannot find how to stylize the Caption property. Is there any way, or am I blind to something simple and obvious?
-
And the other issue that I cannot find is how to specify TabIndex. It is not showing up in the IDE.
In general I am finally happy with the jump to Web 2.0
Well, if you are building for Xojo Web 2.0 are you saying you replaced bootstrap with your own css?
Please expand on how exactly you are building your web 2.0 since bootstrap is the default.
I think those willing to help will need more information
I am not replacing it, simply ignoring its use so far. That is because it is something I have never learned nor used. So far I am using WebStyle with some minor CSS values changed. Maybe I am going the wrong way around this precisely for not using Bootstrap. That is because of many years of Web 1.0 which is my confort zone so far.
Yes, it takes some time to move on to Xojo WEB 2.0 as it has 0 to have in common with WEB 1.0 as can be seen by no XOJO tools for migrations, just advise to create all over.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
moving from WEB 1.0 to 2.0 is a rewrite
Totally agree with you. I found it impossible to migrate. That is why my old webapps (Web 1.0) will not get migrated to Web 2.0 and any new webapps will probably be exclusively Web 2.0
So do you know of any way to stylize the Caption of a WebTextField (without getting into Bootstrap)?
Plus, is there any way to see the TabIndex in the IDE?
How are you meaning in style? bold? Underline? color?
I can change the style of a TextField by assigning, for example:
me.Style = StyleField
(StyleField is a predefined global WebStyle property), where I can change bold, underline, color, fontname, fontsize, etc. But this only affects the field itself, not the Caption property.
Just not that easy in web 2.0 as far as global styles.
Would need to define the CSS in App header and attach the class to the field. Just not as easy as web 1.0
Basically there is no direct conversion from what you are used to in Web Styles to WEB 2.0
It is CSS that you need to create.
maybe this will help? blog.xojo.com/2020/08/28/webstyles-and-web-framework-2-0/
You might have to look at writing your own css and pasting it into the app html header, something like this:
form-label { font-weight: 600 !important; color: #2c3e50 !important; font-size: 14px !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; transition: color 0.2s ease-in-out; } /* Optional: Custom style class if you only want to target specific text fields */ .custom-caption .form-label { color: #0066cc !important; font-size: 15px !important; text-transform: uppercase !important;
You can create a Container composing some controls and expose the internals through Computed Properties and Events. Here is a sample project:
CustomTextFieldWithCaption.xojo_binary_project.zip (12.0 KB)
Here is a related blog post:
Building a Vertical Navigation for your Web Application
