I’m still new to WebStyle, hopefully someone can easily point out my mistake. No matter what “property” name I use I cannot find any that will generate a True result. This is in the Opening event of a simple WebRectangle. I’d expect to see True, but never do (not with “height”, “background-color”, or any CSS value that most every object likely contains. Where is my blindingly obvious mistake?
Var hasValue as Boolean = Me.Style.HasCSSProperty("width")
if hasValue then
System.DebugLog("it has the value")
else
System.DebugLog("nope")
end if
It looks like you need to add the property first, IDE default properties are not considered.
Do this:
put a rectangle on your web project
put your code in a button but change Me. for Rectangle1.
add another button with this code: Rectangle1.Style.Value(“width”) = “600px”
Run
If you click the first button it will report “nope”, then click the second button to put new “width” to it and press the first button again, now you will get “it has the value”
This is the first time I use HasCSSProperty but I didn’t expect that the default properties set with the IDE are not found by this.
I replaced all the code in the Opening event of my Rectangle, and check out these results…
Me.Style.Value("width") = "550px" //if you remove this line...
If Me.Style.HasCSSProperty("width") then System.DebugLog("Has Width") //...then this line will not work.
Me.Style.Value("height") = "550px"
If Me.Style.HasCSSProperty("height") then System.DebugLog("Has Height")
// Setting the width and height works with the code above...
// But look at this, I can add a value to the Style that is meaningless (no CSS tag known to match this)
Me.Style.Value("bananas") = "coconuts"
If Me.Style.HasCSSProperty("bananas") then
System.DebugLog("Has Bananas")
System.DebugLog(Me.Style.Value("bananas")) //outputs: connect.debug[62447] <Warning>: coconuts
End if
// ...so it appears that you can't use .HasCSSProperty to query for the existence of a value, unless
// you set the value first - which defeats the purpose of detecting if it exists before trying to set it...?
As far as I know, HasCSSProperty only works for CSS properties that are set using the WebStyle. As an example, I added a WebRectangle to a page. When you run, you can see a border on the WebRectangle both on the page and in the browser’s inspector.
So I added a button to the page with the following code:
var ret as Boolean = Rectangle1.Style.HasCSSProperty( "border" )
break
The value of ret was False, despite actually being True.
As another test, I added the following to the Shown event of my WebRectangle:
me.Style.FontName = "Tahoma"
Then updated my button code:
var ret as Boolean = Rectangle1.Style.HasCSSProperty( "border" )
var ret2 as Boolean = Rectangle1.Style.HasCSSProperty( "font-family" )
break
ret is False ret2 is True
I really wouldn’t expect anything else than the current behavior because that wouldn’t fit with the asynchronous model and would require a round-trip to check whether that CSS property is actually applied to the element.
You’re a champ Anthony - thanks for all the time spent on this. I’m going to be spending a great deal of time this next week+ on the UI/UX for a WebApp and doing a deep-dive on everything I can will hopefully save me from making any regrettable choices
So that means that to make HasCSSProperty work we first need to add code with the .Style (WebStyle) and what the IDE sets as default (border, width, etc) is not going to be reported, even setting the background-color with this IDE option?
I expected all Styles set by the IDE and Xojo by default will return true. I guess I just need to use the same information that is sent by default on the opening event to make HasCSSProperty work as I expected.
Well, remember that a lot of this relies on Bootstrap themes, even the default styling, and isn’t necessarily set by the IDE, nor parsed by the IDE to be able to respond to these queries. I suggest, if you have a question about it, test it. I can’t see what the IDE is doing internally, only make inferences from testing as I did above and analyzing the JavaScript of the framework.
Thank you Anthony, testing is what I do to learn things. When I first read this topic I didn’t know that HasCSSProperty existed, so I’m testing to learn when/if I will use that.
Then I tested to see why the default Style values are not returning true, that’s why I wrote “It looks like you need to add the property first, IDE default properties are not considered” trying to say that you need to use code to add the WebStyle before it can return true.
If I want the .HasCSSProperty to return true when I check for width on a WebRectangle, I can put this code in the Opening event for the rectangle with the same width I set using the IDE:
me.Style.Value("width") = "400px"
Now if I ask for HasCSSProperty width I will get true. Now I learned when I get true and when false and understand how it was designed, even if it is not what I expect.
