UX Patterns in Servoy: CSS Themes
UX Patterns in Servoy: CSS Themes
Welcome to today’s webinar of CSS themes. Cascading style sheets allow you to style your application in Servoy and you can even change styles or use multiple styles at the same time in the same application by changing them on the fly. This is webinar 31 CSS themes where Shannon will present how to use CSS within Servoy. There’s a couple of challenges as you’re styling your application and we’re going to dive into those different challenges like creating a consistent looking field combining components, maintaining those style sheets and the different looking fields and new applications. Let’s get started. We’re calling override style. So I made a value list which shows the themes and you can see that the display value or the real value is actually just the path to where the CSS is located in my project. You can see those CSS files here. So just right off the bat it’s easy to change a style by calling application.overright style. You should make sure that the classes in the style sheets from the design time style sheet and the runtime one that you’re switching to, all the classes should match up the content inside of them of course can change. You can see that if I were to bring up one of these side by side with the loops, not the less file. You can see that these are generally identical except for the values inside of them have changed. Okay, so nothing too crazy yet just application.overright style and you get to switch those, assuming that I built these by hand or I copied one to the other and I replaced a bunch of things that already is pretty tedious. So let’s get into using less and how we made that a bit more productive. I am using a project here called SVY theme roller. This is available on GitHub and right now this is including in the media not only less JS which is the underlying library that we use but then also some default themes and in there you’ll see theme Servoy.less. I’m going to open this up from the navigator because it doesn’t know how to open a dot less extension. So I’ll open it with CSS editor but I think it complains about some content because it’s not really CSS. It is its own language. So you can see that we have a primary color set here and then we made variations on that color and there are some functions here. So these are variables. I declare a variable and then I make a variation on that variable. So I use a function here and I lighten it by 25%. I actually made a couple sort of variations so we have a color swatch. So I lighten it two times to make two light versions and then I also darken it. So I have two dark versions of that color and then I also did an inverse of the light and the dark and the primary color so that I have maybe text that I show on top of a background or something. You can see that also I have a default border color at border style and width and I can use those around the document as well. The declarations are at the top here and then below you’ll just find what looks like CSS. I’m going to jump down to I think BG one of my classes that I have here the BG classes. And you can see now that I’m using, I’m substituting the variable in. So background and then I just stick in primary color and the foreground of that is going to be the inverse color that we define. I made a couple classes lighter, lightest, dark, dark, darkest. There’s also some brand colors here, success info warning. So we’re replacing all of those variables throughout. So what this means is that if I wanted to make a new theme and we can do that right now, I’m going to go into my project here, make a new media file. I’ll just call it my theme.last. And what I’m going to do is I’m going to copy the content here into here and I’m going to change one value and instead of that sort of blue color, let’s just pick a red and kind of dither it and dim it a bit. So I don’t know how this will look in the end. And then I’m going to save it and I’ve only changed the primary color. I’m going to not going to change, we could change a border. Let’s do that as well. We’ll change the border and maybe do sort of a dark version of that red. All right. Now what I’m going to do is I’m going to, I’m going to copy all of this content and I’m going to go into an online less compiler and you can see that the URL here lets me copy and paste and so we’re going to manually compile this file. So I’m going to paste that in and it changes the output CSS over here. So I’m going to select that, copy it to my clipboard and then what I’m going to do is I’m going to make a new media and I’m going to call this my theme.css. And I’m going to paste the content in there. So this is the compiled version of that less file and everywhere that I’ve used that primary color in a function or variable it’s going to replace it. So now what I can do is I’ll go to my value list here and I’ll just call this new theme and I don’t think I put it in the themes folder so it’ll just be right there. My theme dot CSS. Now I should be able to run my application and switch to the new theme. And so without doing any it looks kind of funny but you know you could play with the default color but without doing much you could see that I’ve completely re-skinned the application and I only had to change one thing. Of course you would probably be a bit more nuanced but you know you get the point that that was fairly productive. The downside of that is that I had to do this manual step where I went out into this online compiler I gave it my less file and I copied and paste it. I got pretty good at that yesterday when I was making this but you can imagine that every little change you want to see it immediately it gets kind of cumbersome to test. So we added to this project this SVY theme roller it has sort of a base less file which covers most of the styles and classes that you might want to really get you started but we added a helper scope called SVY theme roller and has a little bit of convenience so you can actually inject the less files into your browser and some browsers like Chrome have a less compiler built in and so you can actually test your less files as you’re working in developer and there’s no need to do this manual recompile so I’ll show you what that looks like. And the first thing I want to do is hook this up the on open event of the solution I have already on solution open and you can see that what I’m doing is first I’m checking if it’s in developer it doesn’t make much sense to do this there could be a use case but in production and deployment you wouldn’t do this you’d already have compiled them and what I want to do is add a dependency I’m going to do I think it was called my theme right my theme dot less I’m going to add that dependency into the browser and so now when I change that I should be able to get to test it without doing that manual steps I’m going to re-launch the application so that that on open method runs and now I should be able to come into my theme dot less and let’s do something let’s it looks like the you know the stripe on the table is a little bit still too saturated we could desaturate that color by using a function so I’ll desaturate the color after I lighten it and I don’t know by 30% and maybe we do that down here as well so as I as I lighten these I desaturate them and so I save the less file and I should be able to come back to the browser and reload and you could see that now the the stripey color on the on the tables is a little bit less intense a little desaturated it’s still a lighter version of the original color up here but I added a bit of that desaturation function so with just a small tweak to the original less template I get to test my my CSS output and I didn’t have to do a manual a manual recompile all I have to do is add the dependency and the application starts and then anytime I refresh it sees that there’s a change and I get the I get the CSS re-computed in in the browser so you can dynamically test everything combine that with the override style and you can and you can really get into building you know themes without you know the maintenance and overhead of dealing with a large CSS file of course the original that less file maybe maybe kind of complicated to build let’s do a quick overview of what we saw so first of all this has been in the platform for a long long time but just in case it’s new to you you can you can override a design time style class with a runtime one at any time and you just call application override style remember that the classes should be the same so the contents inside the classes can change that the next thing we did is we made our themes using using less and so what less is is a preprocessor for CSS and extends the language so it looks very familiar to CSS so and allows you to do various techniques to make your CSS easier to maintain to build those different themes where they kind of all function the same they feel the same but they look different and then you can also extend it easily and what I like about less is that the person who builds the dot less file probably knows a lot about CSS whereas the person that might go in and change the variable and sort of tweak it maybe doesn’t need to know that much about CSS but they want to make a theme so you can kind of distribute your expertise or you could take a third party pre-built less template and make it your own if you don’t have that expertise and that’s really what we’re going for here so it supports these variables you saw where I declare different colors and then rather than sort of repeat the same absolute value of the color everywhere in the file we can just replace it with a variable substitution that’s pretty straightforward you can also use functions so I made the application sort of have a color swatch we had different variations of the same color I used the light and function and desaturate function if you go to the the less website then it has a reference of all the different functions it’s not just colors there’s there’s manipulations of all sorts there so you can you can go crazy with that there’s also support for something called mixtons which I didn’t I didn’t demonstrate here but when I was playing with this I could really see where this would this would bring a lot of power in terms of maintainability the way it works is you declare a class and then you can just use that class inside of another class so you can see that in the second class in this example here it’s it’s just taking the border properties of the first one and injecting them into the second class and what’s nice about that is that that I might use that in ten different places and if I want to tweak that border a little bit I only change it where the class is defined I don’t have to go in and copy paste replace you saw that there was the step I had to take to convert that less file actually into the CSS where it goes through and it it runs the functions it replaces the variables it mixes in the classes that have been mixed and you could do this manually in fact it’s it ideally you’re going to do this manually when you when you finalize your your template so those templates you saw that I made the the green one and the autumn one and the blue one I did those I tested them by compiling dynamically but but when I wanted to have them the physical CSS that I could switch between I did that using that online compiler and and did a final manual compilation but to test things and to be productive while testing there’s the dynamic compilation and and we added this link to take advantage of browsers that have a less compiler again you could use this introduction I use case could be where a user is picking their own colors or something but you know there could be issues with that in terms of browser support and also you know how much how much data is being transferred down so you may have a bit of a performance problem there on load so it’s really meant for for testing and developer it could be used in production but you just want to use that with care and and the best place to do this is right on open and you just inject the dependencies and whatever dependencies you want to inject you do that first and then you call last you call that and it less jas and that tells it to go ahead and compile everything so you may have an an ideally you would have perhaps more than one less file because you may use say a template that we ship or someone else provides and then on top of that you include it and then you you you do some extensions of that so so there’s that option so you could do more than one here before calling in it again that’s for testing when you’re working in developer all I had to do was reload the page when I made a change to a less file so that’s pretty much it before before we go I want to mention that you know this is this is a research we did recently the project is already available on GitHub SVY theme roller but that’s that’s kind of a work in progress it was it was to test the viability of using less but also what we’d really like to do we see that that people want you know great CSS but it’s also a struggle to to have that expertise I know I struggle with it and then it’s a great amount of work and maintenance too it’s very tedious you get it you get your design right and then and then you want to tweak it you don’t want to have to spend a lot of time so what we’d like to do is offer some starter templates we have one there and it covers a lot of the different components even the extra components the bootstrap extra and the Servoyextra components are covered there so that’s some place where you could go and start and we’re going to we’re kind of continue to maintain that and try to make it better and and actually produce like a template that that uses the CSS that really shows shows the power of it but we wanted to get this out there so you guys can start using it now because I honestly I didn’t I didn’t use less before this week and I don’t think I’ll ever go back it’s just it’s just a world of difference in terms of testing and maintaining so I hope you guys find it useful I’ll leave this slide up while we take questions and of course this is recorded if you need to watch it again all right Sean let me see if my audio is back now hopefully it is yeah I can hear you oh okay that’s always a good start of the composition yeah it seems there’s either a problem with go to women or a local Los Angeles internet connection there’s a question from Imra what is the best practice to assign CSS in Servoyif we ate element for a module solution level okay yeah so I didn’t cover just the basics of CSS it can be done at all all those levels so you can assign style classes to a form or an element you can see that I did show that BG style class in in my themes so I think it was BG primary oops there we go and so this is a class I can use anywhere if we go to that that one that one main form I’m having an issue here with my locator I’ll use the button if we go to that main form here and you can see for example the banner across the top uses BG primary as its class so I attached it right to the element inside that that customers form you can see that the I didn’t attach any style classes to the the fields that’s done automatically so most of the styling you see on here I didn’t have to do manually in the form these are picked up by the default selector I’ll show you that in the in the CSS file in a minute even the component these are the default style classes that come with the component so that’s one of the benefits of the starter template is is we provided sort of a formula of course it might not be you might not want your table to be striped or to have to have the hover or something and really a way to even factor that stuff out so you could really just kind of put that into variables I think there’s a lot of now that I’ve played with it I think there’s a lot of opportunity to provide some some starter start a functionality but overall in Ray I didn’t assign any style class to the form here although you can do that you’re going to attach that last to the form or an element the only cases where I did was on the on the banner across the top everything else was was built in and I’ll show you where that where that comes from if we go back to let’s go back to the less file and there are some default selectors in Servoy for example SVY field and this is a default selector and this is well documented on on the wiki documentation that’s the selector for any default field in Servoy and you can see that we have focus a lot of fire on the on the selector probably if I keep searching for it I get the like the border color here when it has focus you saw that the border changed and so back over here oh I made a tweak on this style let me pick a oh and I have the compiler turned on so I’m not going to switch teams on some of them you would have noticed that the border was gray and to like I went into it and that’s because the focus on focus it changes the color all that stuff was built into the template I didn’t assign that or attach that at design time and so that’s that’s kind of always been available but you just want to you want to take advantage of the default selectors and then you sort of override them where let’s you have a field where you want to have say a warning or something then over here I could attach a new style class I think it’s like BG warning and it should turn you can see now that that made it the warning color which you know is is also factored out into a variable in the less file so so you would kind of oh you want to start with the default selectors and those are well document on the wiki there’s one for you know fields combo boxes type of heads etc all the default components and then you want to override from there if you have special variations any other questions yes there’s a question about preprocessors there are many type of see as a preprocessors such as SAS less and stylus do you support the others in the future or make the theory more generic to accept different preprocessors right and I know CSS guru here so yeah there are other preprocessors again most of the work that I’ve done in this demo is is really outside of Servoy you saw that I did the manual you know the manual compile to generate the CSS so there’s nothing to stop you from maintaining your dot less files or your dot SAS files or stylus files inside Servoy and then just run them through a manual compiler and get get the different themes that you want and then and then you can have a theme roller the second step where we saw that that the that the compiler and the browser was was taken advantage of and when we actually changed the less file it automatically recompiles it in the browser and we didn’t have to do that manual step that is right now for that we only support less I suppose we could look into the other preprocessors if there’s a good use case okay and another question can we mix less versus CSS granularly depending on the element I don’t quite understand the question the the less if you look at the less file it already is mixing I showed the variable declarations at the top and then those were substituted in basically you know the file looks like CSS and then you can substitute variables in or mix other classes in so that’s already done for you in the less file and then when you compile it it it all evaluates I think that answers the question I’m not sure if if there is then please post a follow-up question this is your last minute chance to ask final questions and while you think of them Sean what is the topic in 14 days okay the topic in 14 days is we’re going to look at tuning the observer we’ve been getting some questions about that some some things coming up so we’re going to take a look at you know after you’ve deployed we did a webinar on web deployment our word deployment so we’re going to take a look at after deployment tuning the observer so you can look forward to that in two weeks we’ll be back