I try to bring some of the WebStyle functionalities from Web 1 to Web 2.0 -> here's my project

Targets Web
1

We rely extremely on the possibility to organize our UI over Webstyles which correspondents to CSS classes in our Stylesheets.

Web 2.0 hasn’t any of those things and it seems to, that it won’t be added completely in the next releases.

So I decided to write some functions, which bring some things back. Like adding Styles to a control where the name of the styles is also applied in the DOM of the xojo app.

Also it is possible to apply more than one WebStyle to a control, like you do regulary in web projects.

I drove into some bugs of Xojo, so it is not fully functionable yet, but it is a good start.

I also started to write a converter, which converts your Web1 WebStyle to a Webstyle which is able to be used in Web 2.0

Only downside is, that you won’t see the style changes in the Xojo editor at design time.

Here’s my project:

I have some things on my list, and I am searching for contributions. So maybe we can make this an open-source-project, which eventuelly brings us some converter functionalities (which we thought Xojo will gives us…).

4 Likes
3

Here’s the feedback case to this project:
<https://xojo.com/issue/61560>

4

I updated the Repo. Turned that it was totally my mistake and not a Xojo one when I wanted to save the old stylevalues.

Anyway, I ran into the next bug, its documented in the Repo.

BUT it is now all working with CSS classes and stuff
:partying_face: :muscle: :tada:

So I can finally transfer my old Web1 styles into new Web2 styles (I write a converter for this).

5

I see that you add/remove the CSS class but, at least on the demo you have, you also change the Style section for the textarea (id_field).

From what I understand Web 1.0 used all CSS class styles for WebStyle, I guess it should be more straightforward to convert Web 1.0 CSS WebStyle to CSS class and just add/remove the CSS class to Web 2.0 without changing the style element, no?

6

I do this to show, that you can also use the “new way” to apply style properties, even though you’re using my “old way”.

As I describe in the code, you better go with one of these ways as using both on one control can lead to weird looks (currently).

Yes, you cannot simply transfer your old WebStyle into WebStyleExtended currently without writing all style properties in CSS.

BUT

I am working an a converter, where you simply insert your webstyle and get either the right CSS or the right xojo-code for “the new way” back.

1 Like
7

Allright, the first step of the converter is ready. It not translates your Xojo Web 1.0 WebStyle into pure CSS.

2020-09-02 16.44.12
2020-09-02 16.44.121046×612 1.87 MB

The second step is now to generate a new Web 2.0 WebStyle (comming very soon).

3 Likes
8

Lars, will you save your converter project as a single .xojo_binary_project so that a windows user can open it?

9

it is a web application. I opened it on Windows.

10

When I download /XojoWebStyleConverter.xojo_project and try to run it I get a message "The project manifest is missing required elements."

So how many other items do I need to download ffs. It’s really not to much to ask to save it as a single file or zip all the required files up so I’m not having to guess.

11

Follow the link, click Code - Download ZIP, open zip then load .xojo_project
GitHub - StadtLandNetz:Xojo-Web-2.0-Style-Converter: Brings back a way to add Styles to Controls and access them over CSS in th… 2020-09-02 12-20-05

12

Lars, first I must thank you very much for the time and effort spent creating this very useful tool. I tested a few styles. Simple styles convert well. I have one that doen’t. It is a style I used with webimageviews, to make imagebuttons. The style has normal, hover and active properties. The converter only handled the normal properties.

Here is what I can find using the browesr developer tools:
`.wsImgButton {
border-top: 1px solid rgba(230,230,230,0.90) !important;
border-left: 1px solid rgba(230,230,230,0.92) !important;
border-bottom: 1px solid rgba(230,230,230,0.90) !important;
border-right: 1px solid rgba(230,230,230,0.90) !important;
-webkit-border-top-left-radius: 4px !important;
-webkit-border-bottom-left-radius: 4px !important;
-webkit-border-bottom-right-radius: 4px !important;
-webkit-border-top-right-radius: 4px !important;
background-color: rgba(230,230,230,1.00) !important;

}
.wsImgButton:hover {
border-top: 1px solid rgba(191,191,191,1.00) !important;
border-left: 1px solid rgba(191,191,191,1.00) !important;
border-bottom: 1px solid rgba(191,191,191,1.00) !important;
border-right: 1px solid rgba(191,191,191,1.00) !important;
-webkit-box-shadow: 3px 3px 8px rgba(0,0,0,0.50) !important;
-webkit-border-top-left-radius: 3px !important;
-webkit-border-bottom-left-radius: 3px !important;
-webkit-border-bottom-right-radius: 3px !important;
-webkit-border-top-right-radius: 3px !important;
background-color: rgba(230,230,230,1.00) !important;
background-image: none !important;
}
.wsImgButton:active {
border-top: 2px solid rgba(191,191,191,1.00) !important;
border-left: 2px solid rgba(191,191,191,1.00) !important;
border-bottom: 2px solid rgba(255,255,255,1.00) !important;
border-right: 2px solid rgba(255,255,255,1.00) !important;
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.50) !important;
background: linear-gradient(to bottom, rgba(191,191,191,1.00) 0%, rgba(220,220,220,1.00) 33%, rgba(240,240,240,1.00) 100%) !important;
}`

The output of the converter is this:
`wsImgButton {
border-top: 1px solid rgba(230,230,230,0.90) !important;
border-left: 1px solid rgba(230,230,230,0.92) !important;
border-bottom: 1px solid rgba(230,230,230,0.90) !important;
border-right: 1px solid rgba(230,230,230,0.90) !important;
background-color: rgba(230,230,230,1.00) !important;

}`

We are missing the rounded corners and the hover and active styling.

That said, other sampled styles converted flawlessly and I can use them in 2.0 using your tool. Great stuff! I can PM the style code if that will help handling such cases.

13

Actually, there is nothing secret about it, so here it is:

#tag WebStyle
WebStyle wsImgButton
Inherits WebStyle
#tag WebStyleStateGroup
border-top=1px solid DCDCDCFF
border-left=1px solid DCDCDCFF
border-bottom=1px solid DCDCDCFF
border-right=1px solid DCDCDCFF
corner-topleft=4px
corner-bottomleft=4px
corner-bottomright=4px
corner-topright=4px
misc-background=solid E6E6E6FF
#tag EndWebStyleStateGroup
#tag WebStyleStateGroup
border-top=1px solid BFBFBFFF
border-left=1px solid BFBFBFFF
border-bottom=1px solid BFBFBFFF
border-right=1px solid BFBFBFFF
misc-background=solid E6E6E6FF
corner-topleft=3px
corner-bottomleft=3px
corner-bottomright=3px
corner-topright=3px
shadow-box=3px 3px 8px 0000007F
#tag EndWebStyleStateGroup
#tag WebStyleStateGroup
border-top=2px solid BFBFBFFF
border-left=2px solid BFBFBFFF
border-bottom=2px solid FFFFFFFF
border-right=2px solid FFFFFFFF
shadow-box=0px 0px 0px 0000007F
misc-background=gradient vertical 0 BFBFBFFF 0.3253968 DCDCDCFF 1 F0F0F0FF
#tag EndWebStyleStateGroup
#tag WebStyleStateGroup
#tag EndWebStyleStateGroup
End WebStyle wsImgButton
#tag EndWebStyle

the state groups seem to be in order: normal, hover, active and visited. In my case, that one is left blank.

14

Pressing the Code button was not intuitive at all. Thanks for the help.

15

Hey together,

you can send me your not working styles and I add the support for it. There are many options in the old styleeditor and I haven’t tested all constellations.

But i‘ll keep on improving it.

16

indeed. I fumbled a bit the first time I downloaded from there. The good news is we do remember! :wink:

17

simply use Git to clone the Repo. If I push updates you can simply pull them and stay up to date.