Allow creation of webstyle objects in code

This has been raised many times before.

I am starting to hate WE due to the sheer number of styles I need in order to give the end user any kind of choice with styling options. Every time I add another style option my requirement to add styles grows by a multiple of the number of options.

eg If I want red, green and blue back grounds (3 basic requirements).
Now I want left, center and right options (now need 9 styles).
Times this by many choices and many options and it gets crazy.

Dynamic styles would allow us to change properties in loops effectively reducing chunks of code.

Using a canvas is ideal because you can set forecolor but alas it is very slow with complicated paint algorithms (see here for example).

If anyone else agrees please raise awareness by promoting feedback 15949

I swear I’m not following you around trying to make a sale…

Web Custom Controls has support for:

  • Editing WebStyles at runtime.
  • Creating and editing WebStyleTD objects at run time. (My own variation on styles.)
  • Applying multiple WebStyleTD styles to a control.
  • Sharing WebStyleTD styles across sessions.
  • Directly editing the styling of a control (i.e. without any style object).
  • Using pretty much any CSS you want.
  • Using external fonts like Google fonts.

I should point out that when it comes to CSS I’m definitely outside of the WebSDK. There’s a chance that you could use a CSS property or combination of properties which cause a problem with a control. Likewise, there’s a chance that a Xojo update could break this part of WCC requiring an update from me to fix it.

That said, so far this part of WCC has been very stable and issue free. It’s a life saver if you have complicated styling requirements. I had parts of it working, for my own sanity on a project, long before I shipped it in WCC 1.2.

I have no issue with people selling their wares, so long as they do what I need and or save me time.

I am sure your familiar with my canvas/list box conundrum. I want the user to be able to select their own settings, as your demo clearly can do. I am guessing I need to create all styles at run time and set them as the user selects them? If I modify one it changes all styles across sessions? This could be handy or annoying in certain circumstances. Eg for messages or alerts. Can you post code for how you would create and apply the style object. I am typing this on my phone… Sorry for poor formatting.

Does WebStyleTD respect padding, underline or strike through? If we are using CSS I am guessing yes.

If you want to use Xojo WebStyles you would still create them at design time, but you could change their properties at run time. That frees you to treat styles as representing groups of controls (i.e. ButtonStyle, ListBoxStyle) or logical presentation (i.e. HeaderLarge) rather then a million style variations.

WebStyleTD objects are created at run time.

It’s up to you. If you apply a specific WebStyleTD instance to controls in multiple sessions, then yes, changing its properties affects all sessions. But you don’t have to do this. If each session has its own set of WebStyleTD instances then changes would not propagate across sessions.

Changing a Xojo WebStyle called cssWebStyleExtDemo using the convenience methods:

  cssWebStyleExtDemo.FontFamilyTD(strFontFamily)
  cssWebStyleExtDemo.FontSizeTD(cnFontSize.Text)
  cssWebStyleExtDemo.TextAlignTD(cnTextAlign.Text)

Changing CSS properties by name:

    cssWebStyleExtDemo.StyleValueTD("background-image", "url('http://webcustomcontrols.com/images/lgrey011.jpg')")
    cssWebStyleExtDemo.StyleValueTD("background-repeat", "repeat")

Changing a WebLabel directly:

  cnDirectTest.FontFamilyTD(strFontFamily)
  cnDirectTest.FontSizeTD(cnFontSize.Text)
  cnDirectTest.TextAlignTD(cnTextAlign.Text)

Creating a WebStyleTD and applying it to a control:

  objStyle = New WebStyleTD
  objStyle.Value("background-image", "url('https://farm4.staticflickr.com/3735/12899646313_ed56605f43.jpg')")
  objStyle.AddToControl(cnImage)

WebStyleTD has numerous AddTo / RemoveFrom methods for applying the style to controls, parts of a list box, and toolbar items.

The convenience methods like FontFamilyTD can be called on WebStyle, WebStyleTD, and WebControl.

There are convenience methods and constants for setting text decoration (underline, strike through), and a convenience method for setting padding. But again, you can always use the value methods to explicitly set any CSS. Padding is one thing you could potentially run into problems with on some Xojo controls.

You can also initialize a WebStyleTD with CSS. Example:

  objStyle = New WebStyleTD("border: 2px solid black; background-color: blue;")
  objStyle.AddToControl(MyControl)

So you could, for example, define an initial look for a control in raw CSS; create a WebStyleTD object at run time from that CSS and apply to the control; then change the style as the user selects values from popups, color pickers, etc.

[quote=179770:@Chris Musty]This has been raised many times before.

I am starting to hate WE due to the sheer number of styles I need in order to give the end user any kind of choice with styling options. Every time I add another style option my requirement to add styles grows by a multiple of the number of options.

eg If I want red, green and blue back grounds (3 basic requirements).
Now I want left, center and right options (now need 9 styles).
Times this by many choices and many options and it gets crazy.

Dynamic styles would allow us to change properties in loops effectively reducing chunks of code.

Using a canvas is ideal because you can set forecolor but alas it is very slow with complicated paint algorithms (see here for example).

If anyone else agrees please raise awareness by promoting feedback 15949[/quote]

Another way of setting colors in a WebListBox is by injecting an HTML color tag, using the same kind of technique as what I did to insert a picture in
https://forum.xojo.com/21259-weblistbox-and-poor-styling-functionalities-for-the-selected-ro

HTML Color lets you specify colors as RGB. See http://www.w3schools.com/tags/att_font_color.asp

Michel, thank you for your hint with ExecuteJavascript and the replacement of a token! You made my day!

EDIT: Ah wrong topic… but well… still thanks

[quote=179814:@Tomas Jakobs]Michel, thank you for your hint with ExecuteJavascript and the replacement of a token! You made my day!

EDIT: Ah wrong topic… but well… still thanks[/quote]

Glad it is of use. It has helped me greatly.
:slight_smile:

Thanks Michel.
Nothing quite like a good hack to solve your issues.

I cant even run

Me.ExecuteJavaScript("alert('Hello!');")

From the action event of a simple button.
What am I missing here?
LR for executejavascript

[quote=179852:@Chris Musty]Thanks Michel.
Nothing quite like a good hack to solve your issues.[/quote]

Given the limitations of WE, JavaScript fast becomes a necessity. In particular when font size and color are concerned, the WebStyle thing is just like driving a non automatic car with the clutch.

[quote=179860:@Chris Musty]I cant even run

Me.ExecuteJavaScript("alert('Hello!');")

From the action event of a simple button.
What am I missing here?
LR for executejavascript[/quote]

It works here. Would you have a helper that prevents Javascript popups by any chance ?

nope. same on firefox too.

I just run me.execute right? (with a valid string)
I read somewhere else defining the function in the app header?

This raises another issue. If I am going to rely on JS then has anyone had any issues with ad blockers, popup stoppers etc? Do these apps consider making changes to the page harmless ie cell coloring in a weblistbox?

[quote=179865:@Chris Musty]nope. same on firefox too.

I just run me.execute right? (with a valid string)
I read somewhere else defining the function in the app header?[/quote]

I just copied your code into a button on Mac OS X 10.10.3 with the current beta of 2015R2 and my browser is Chrome. Works like a charm. I have been using this for quite a while and never had any trouble besides with a special helper preventing specifically JavaScript popup.

At any rate, you should not need alert, since you got Xojo MsgBox.

Changing cell colors will be seen as HTML. So it should not conflict with any regular tool.

Not trying to replace msgbox just trying to get anything to work re javascript.
As of now chrome version 41.0.2272.118 does nothing…

Working but if JS is run elsewhere first it seems to not fire form the next control?