App HTML Header

Targets Web
1

Friends

I am just starting to fool around with the web side of Xojo. After a lot of hunting, I get the idea that I can implement global styles via css in App HTML Header. There seems to be a way to use classes also, but I have no idea how they map to the components in Xojo. For instance, some people use table classes to change features of the Xojo web list box, but I haven’t gotten this to work yet (even though I can use a plain div tag and it works on just about everything on the page). Is there a map between bootstrap elements and Xojo elements? If so, where is it? Someone seemed to suggest you could name or declare buttons or text boxes in some way that can be referenced by css code in the App HTML header but I don’t see how yet.

So can you write your own classes or ids in the HTML Header, or do you have to use the ones from Bootstrap? Either way, how do you name or designate your controls so that they are referenced by the Bootstrap classes or IDs? And can you create a class that would apply to just a subset of elements (like buttons for example)? I know you can do that with ease in CSS, but I see nothing in the docs to show me how in Xojo.

Thank you
fritz

2

Go look at the docs for the WebSDK in the extras folder next to the IDE. That will let you do whatever you want.

3

Greg

I took a look at the PDF slideshow and several examples in the WebSDK Examples folder (even though this would normally be the last thing I’d touch in my current stage of Xojo web familiarity). Obviously, along with your video on Web 2.0, these are promising and interesting, but without implementation details this information is lost on me.

As a complete noob, I am looking to leverage what I already know, if possible. In advance of taking the eight months necessary to comprehend half of what is in this WebSDK folder, I will distill my previous question down to this: Can I map existing Xojo web objects (text field, listbox, button) to the CSS I can use in the App HTML Header? If so, how? And can I use CSS classes and IDs, targeting Xojo web controls accordingly?

Examples like this:
MyControlCSS.data = “#” + Self.ControlID + " { color: red }"
are interesting, but I have no context or no reference for the syntax. I can guess that it’s defining a CSS ID, but I have no idea why I should do that here in a control event handler if I could just use a CSS stylesheet. If I can’t use a stylesheet, I would like to know that, disappointing as that information would be.

So if you have a link to some documentation that would further the research of a clueless newbie (complete with implementation details that would be painfully obvious to you but necessary to me), by all means let me take a look. Otherwise, I would prefer just to take the plain vanilla CSS route.

Thank you for your time,
fritz

4

It would be helpful to know what version of Xojo you’re using because it matters.

But the reality is that App.HTMLHeader fires before any of the controls are created and because the control IDs are random, and different per session, the header can’t possibly have the IDs to do what you’re expecting.

5

Greg

I just upgraded to 2022 Version 1.1. Up till last week I was using 2021, Version 3.1.
Thank you for that simple explanation, which I totally get, though–as previously stated–it’s rather disappointing.

However, I will eagerly leverage the Webstyles, which are good enough for me at present. I’m going to assume a subclassed button will be fine for my simple needs.

It does seem like some of the people on this forum are seeking to change the appearance of Web Listbox controls with CSS in the App HTML Header, apparently by modifying what I expect are Bootstrap definitions. Does a Web Listbox map to a generic CSS (or Bootstrap) table? This would be independent of control IDs and sessions (I have to assume).

Thank you,
fritz

6

I’ve been reading about “Webstyle names”, which seem not to be used any more (posts are in the pre-2020 time range). It seems that was the way to link CSS IDs and classes to Xojo web elements.

Unfortunately, this sounds like a very useful feature which, I presume, is not returning.

7

Something like this could help you.

I wrote this a couple of days after Web 2.0 was released, because I hated that they dropped the CSS-Style-Class-Feature.

Together with the already installed jQuery in Webframework 2.0 you still can achieve these features.

This unfinished set of tools should show you how. To apply the new style class use the WebStyleHandler.applyWebStyle method.

8

Just doing some brainstorming: Why not subclass the controls you need to target with CSS and in the sublcass add the CSS classes you need to use to identify the control?

9

Hector

That is exactly what I’m doing as we speak. I am new to Xojo web but I have a button subclass and a combobox subclass going as a proof of concept. For my plebeian requirements, it seems that this might serve the purpose of a CSS class, plus I can build in some default behaviors, if necessary.

Thank you for the suggestion. Till they bring Webstyle names back, this will do nicely.
fritz

1 Like
10

Lars

I’ve read many of your articles and quoted you in my last post. It’s from that article that I got the idea that there used to be a thing called Webstyles that could be named and used as CSS class names (if indeed I understood that correctly).

I have also perused your converter on GitHub. This may be what I need when I spend a little more time with Xojo web. As it stands, this solution is slightly above my pay grade, considering I have absolutely no history with this application platform and never got the chance to leverage Webstyles as they evidently existed before Web 2.0.

Thank you for your reply, and for your articles I’ve found thus far.
fritz

11

It’s actually this one:

https://www.datatables.net/

12

If someone is looking for a Web 1.0 Version of https://www.datatables.net/ → we built it and I can share it someone’s interested in.

This one is so much better than the Xojo-Listbox-Control.

13

Hey Lars,

I’d certainly be interested in that conttol if you’re willing to share :grinning:

Thanks so much
Steve

14

Greg

That is interesting (I remember datatables from my web days) and it is a literal answer to my question. But how can I refer to the web listbox (or anything else) in my CSS? Is there a bootstrap control that I can reference in a CSS file or class inside App HTML header (or anywhere else) that will enable me to modify the web listbox?

15

I just discovered that I can alter the characteristics of the web listbox by using bootstrap classnames (like .table), which is the answer to a previous question I had. Now the other side of the coin is “how do I make use of the other bootstrap classes?” For example, if I want to use bootstrap’s “label label-success”, how do I apply this CSS class to a Xojo web label?

16

Like this, in the Shown event of the control

Var js As String
js = "document.getElementById(""" + Me.ControlID + """).classList.add('yourClassNameGoesHere');"

ExecuteJavaScript(js)
17

That won’t work 100% of the time. Controls can and will redraw themselves from scratch if necessary, wiping out any styles you have applied in this manner.

18

I take your word for it but I have been using this method without a problem ( I just jinxed myself… I know)

19

I don’t have Xojo running at the moment, but in the IDE select a WebLable you would like to change the appearance, and in the inspector you will find a new property - new to Web 2.0 - I can’t recall the name of that property. Look for the values in the dropdown. You should find something like “label-success” or “success”.

I will check tomorrow.

20

Giles

You are quite right. I came upon those options this morning when I was fooling with Hector’s code, which also worked well.

Thanks very much. It certainly took me enough time to run across that option, which is called “Indicator”. You can indeed select “label-success” through this simple selection.

fritz