Servoy 8.4 launch part 2: Delivering great UX: CSS-less ;-)
Servoy 8.4 launch part 2: Delivering great UX: CSS-less 😉
But cast is now starting. All attendees are in listen only mode. Hi everybody and welcome to today’s webinar. It’s time to have a seat and grab your favorite beverage. And for me, that’s going to be a nice hot coffee. It’s early morning in California, Sun and Shiny. And we’re all ready for parts two, the Servoyeight point four and launch party. So join me for a simultaneous sip of your favorite beverage. Excellent coffee. Hey, Sean, how are you doing in the East Coast? How’s weather there? We’re good here. It’s cold, but that’s expected. I’m on my second cup of coffee. Ah, that’s very good. Then you should be sharp enough for parts two that we will be looking forward to. That’s how it sounds. Anybody has any. Yeah. If anybody has any questions and please post them in the questions channel. Try to make it a little interactive, even though that’s a little bit hard with a webinar. I feel free to do that. Recordings will be posted. I have started posting first ones. So today, actually, I was a bit on a high adder’s on posting webinars because a lot of travel going on. So that should be up and running later this week. And feel free to join the conversation in the Servoyforum, but we also just posted an announcement on what’s happening with the future of Java. So go there if you’d like to read up about that and what you need to do if you’re still running smart client. If you are still running smart client, then the last week’s recording, which should be up soon as well. And it also gives you a lot of pointers on how to do those kind of migrations and how to provide and also help you. With that whole process with that out of the way. Sean, welcome to webinar number 49. Thank you, Jan. Fantastic introduction. Can you see my screen. Yes. Excellent. Okay. Again, this is for the eight dot four major release part two launch party. We did in part one if you missed it. We did about the new layout mechanisms in Servoy8.4. We’re going along the same theme of making the UI even easier and more powerful. As is the tradition with the tech webinar series, we’re going to start with a demo. And then we’ll do some overview and some slides after that. We like to keep these webinars short to the point all about tech stuff so that it’s easy to consume and it doesn’t get boring. So let’s jump right in. I’m going to bring up an application that I built this morning. And the point that I want to show here is that this application, the styling, the colors, etc. What you see is out of the box without any CSS. Okay. Big whoop. But what I want to point out here is a few things like you might notice the row highlight, consistency, the color from here to the highlight in the navigation menu, to the highlighting for the different active tab panels. You may also notice that there’s some consistency here in the border around the text field, the type of head fields, calendar picker. If I pop this up, you can see that it’s thematic. So we have some consistency. Now, the reason I’m pointing this out is that, traditionally this is more difficult to do and requires that you not only know a bit about CSS, but that you also know about the individual style classes for all of the web components that might come together in an application. So you may have to know to go look for the particular style class for the active tab in a tab panel. And that may be buried somewhere in a web component file or something like that. So to get everything consistent and styled, it requires a bit of an upfront investment, if you ask me to go through and identify all of the style classes that you want to change and make those changes. So today, I made this application in Servoy8.4 without doing any CSS, and I get the consistent look and feel across my application. So I want to go under the hood and kind of show you what that might look like, and bring in a Servoy8 developer. First of all, when you make a new solution, now in Servoy8.4, you may notice a checkbox down here that says, default Servoy8.less theme, configurable by a less properties file. Okay, so what the heck is less and why do I have to configure a file? I thought this was supposed to make things more simple, not adding new tech. Well, it’s not so bad, so let’s take a look. The file that gets generated is this file called the Servoy8 theme properties dot less file. And it’s a dot less file which looks like CSS, but we’ll get in kind of in the overview into what less is and what that technology is and why we’ve selected it. But you’ll get a file that looks like this. It’s not too big. And it contains some default settings about your application that you can, about the styling replication that you can configure. This is located in the media folder, so you can see right here, Servoy8 theme properties dot less, and that’s where it gets generated. Now, if you’re familiar with CSS, you may notice something that looks not CSS, and that’s these variable declarations with the add symbol and then a name and then a value. And the way this works is that what we’ve done is we’ve exposed certain variables that you the developer can configure easily. And those get injected into all of the style mappings for all of the, for most of the components, web components that you could add to the Servoyapplication. So if you go back to the client here, think about the side nav component that you would get from the Servoyextra web package or the ng grid that you would get from the Servoyng grids package. In fact, that you get that highlight and it’s consistent, it’s getting injected because we’ve chosen main color. And this gets reused throughout the internal CSS, which is now hidden. But of course, you can extend and customize all that if you want to. So let’s do a little experiment and change a few of these values. I’m going to change our main color and make it something like, like a blue highlight and our secondary color over here, making it maybe a darker blue. I’m no designer, so this probably doesn’t look fantastic. The other thing I’m going to do is make a small change over here because I noticed a little bug that it needs a change in a different file to. I’ve already reported that and it should be fixed before the final. So give me a second here. What have I done? Oh, it was loading. I just, okay. It just took a minute. So now you can see that I’ve switched everything to this sort of light blue dark blue for my primary secondary color. The highlight in the, in the grid, the look of the, at least the background color of the side nav, the highlight over here, the tabs, the other grid. You’ll notice that the little outline around the field, which has focus and the type ahead. I’ll get the same theme applied and I did that just by changing the value of two properties and those get injected everywhere dynamically into the style. You can see the calendar picker also has it. So that’s the sort of the introductory level here is that what we’re going for is that. Basic users don’t have to do any CSS if they don’t want to. In the future, we may offer even a visual editor and hide this completely so that you can just edit the theme properties visually and that gets stored away in a less file. But the, the developer never has to go into that level of complexity unless they want to. But let’s, let’s suppose that that a developer does have some CSS or you have one person on your team who’s kind of a web expert and they want to set something up so that other people can easily skin and make use. So, reskin their application application and make use of the styling. So what I’ve done is I’ve, there’s a second. A second file that gets generated, you saw when I was creating new solution and that’s by default it names at the same as your application. So example style dot less. Now when this file is generated, there’s no content in here other than this little comment at the top because this is where you can add your own customization. So what I’ve done here is put some stuff in this morning, tested it and then commented out. And what I’m going to do is change some, uncomment this and introduce some new, some new properties. So I created a variable called highlight color. I’m using a function here. I’ll talk about this in a bit to take the main color which is defined in that, that default setup. And I’m going to lighten it quite a bit. And I’m also going to say the inverse of that. So the color that maybe would show on top of that is going to draw off also from the other file, the text color. So now I can reuse these anywhere in CSS below. And this is again less which is a lot like CSS, it’s sort of a superset of CSS. And so what I’ve done is said, okay, for a lot of the input types like type of heads, fields, calendars, etc. The things you saw on the screen. When they have focus and you’ll see I’m using the focus selector here. I want to apply the highlight color to the background. The other thing is I had some font icons on the screen. And I want them to have the main color by default to also have the pointer cursor into center align. Because they look kind of a bit ugly the way they were. And also when we hover over them, so I’m using the hover selector down here, we want to change lighten and darken that. Again, I’m reusing some of the stuff that was defined in the first file so that if I want to go and re-skin this quite easily, I don’t have to go back and change this. If you don’t want to use CSS, it’s okay. If you do want to use it and you want to go deeper, now you have the capability to use the less preprocessing and send everything through. So let’s take a look. I did switch over the the style back to the default orange and black. And so what you should notice is when I highlight these fields like type ahead calendar. When they get focused, they have that little highlight color. And I’ve done that everywhere throughout the application so that gets applied. Now, I also did the little font icon here as well. So you can see how that was changed. Now, if I go back and change my original theme, I will just kind of put it back to the way that I had. There’s some reason it takes a minute to process it the first time. There you go. Back to the sort of the blue theme that I have now when I mouse into here, it’s hard to tell probably in the go to meeting. Maybe I should have lightened it a bit less. Let’s do 30%. That’s easy to see. So now you can see that highlight gets applied everywhere. These types of fields have focus. I didn’t have to change it anywhere else. But in that original main color, it got lightened. And then it got applied to all of those different components kind of in a cascading way. So that’s really showing you the power of what you can do if you actually get in and do some of the stuff yourself. So let’s go back to some slides and sort of learn a bit more about some of what we saw. So first of all, we’ll talk about what is less. It’s a certain technology. Servoy for now ships with less support. We’ll talk about what that means because we were seeing there’s a built in less file. It allows for advanced users to go kind of even more powerful. But it also makes things for basic users a bit easier. You don’t have to get into styling and understanding all of the internal style class and mappings. Also talk about sort of what’s next in this direction because this is more of a start than a finish. So first of all, the less technology is a CSS preprocessor. There’s a number of preprocessors out there. Essentially, it’s a superset of CSS. So it can do everything that CSS can do, but it also has some things that it adds. And the reason it adds these is to make CSS a bit faster to work with. It makes it easier to maintain things in one place. You can easily switch from one theme to another. And you can kind of take an existing theme or style and really extend it more easily. That’s because in plain CSS, it can be difficult if you don’t already have the experience. It can take quite a while to get the look and feel that you want. But I think in the Servoycontext, one of the greatest challenges to get that consistent look and feel because you may take a web package off of the web package manager. And then you have to go in, you have to style it to match everything that you have. And that can be quite a challenge. Even if you have the expertise, it’s just kind of a lot of tedious work. So that’s really one of the main things that we’re trying to accomplish here. So we’ll be able to add support for new components going forward more easily so that they just work inside your style. And you can maintain your CSS the way you like it going forward. So what’s new in Servoy8.4 and what I just showed you is that we now support less compiling, like an engine inside Servoyand we ship with a default less file. And what that default less file provides is style mappings to all of those components. So the grids you saw, the calendar fields, the text fields, all of them have different style classes associated with them. Not just one class per component, but potentially many, many classes for some of the more complex components like the navigation panel. So we go ahead and we kind of make a guess at what’s the logical way to sort of generalize the style of a component. And then we map it to that less file. What we expose is the variables. The actual all of the mappings that you don’t see are hidden. There’s quite a lot there, a lot of CSS and you probably wouldn’t want to change that because if you change the value of the variables, it cascades through all the style mappings and you don’t have to worry about it. So the end result is that many components can be easily styled out of the box. An example of what this looks like in the first example where I show you just rescending the application without actually writing any new file. Any new files or any new CSS or less is changing one of the values of those variables. So you go to that, that Servoy default theme less file and you look at something like primary color and you just change the value and that’s what I did in the example. If you’re a basic user and you don’t want to get any deeper than that, you can stop right there. You don’t have to define style classes. You don’t have to go into your forms and your elements and map them too. That’s the other thing that you have to do is go and find what style class am I looking for and assign it to this component or that component. This is very high level and very cascading. And again, the bottom part here is what is sort of going on under the hood that you don’t have to worry about. But if you do want to go deeper, then I would encourage you to create your own. Well, there’s one that’s created for you. It has a comment at the top and then it’s empty. Is to fill that file and start to experiment with this technology. So start by defining some variables, then use those variables in some style classes and assign those in your application. And that’s what we did with the highlight example. I created a sort of an extension that said I want to highlight fields when they have focus basically. But I derived the value for the background color from the original main color so that I can still cascade everything if I change it. There’s some more things that you can do with that technology. The one example I did for the highlight was I used a function. I didn’t put in a literal color and say, you know, light orange. I said light in the main color by 30% or whatever it was. And that way if I change the main color, I still get a lighter version of that color. It’s quite handy and there’s other functions beyond just light and you can work with saturation and that sort of thing. Something I didn’t show you that’s kind of neat that’s in the less preprocessor is they call it mix ins. But essentially injecting all of the properties of one class into another one and you can see up above here I define a selector called fun border. I set up the rules for it and then inside another class somewhere else I can just sort of inject it by by referring to it literally and it’ll just kind of, I don’t have to copy. It just sort of saves you, you know, copying and pasting but it also then cascades. So if you change one property of fun border then everywhere you use that class it’ll inject it. So again it makes maintenance much easier and thematic styling much easier. So again this is just a short demo. It’s kind of up to you guys to see how far you want to take this. I’d love to hear from you on how you’re using it where you like it, where you’re finding challenges. But again this is more of a beginning than an end. What we’re working on is first of all to provide sort of a final stable version of that internal mapping. It’s a bit, I guess, open ended what’s the best way to, you know, what are the, we have a primary color and a secondary color and an inverse and that sort of thing. So those are just sort of assumptions about the ways to really generalize the style of an application and make it easier. So we’re working on sort of a final version of that that will go in the 8-4 final build. Because one of the challenges is once that’s distributed if you start to build on it we’re not going to go and change property names. You can change the values but all of those those property names have to stay the same because if you have something called main color and then you build on top of that everywhere else and then you change the name of it and call it primary color or you drop support for it then of course it will mess things up. So we want to get that sort of finalized and ready to go for version one of that. The internal mapping will be maintained, it will be distributed in serve way going forward so it will always be there for you. I think in the future it would be interesting if we can update this via the Web Package Manager so you could actually get a new version of it download and install it. Perhaps there could be variations too. We could find that there’s a simple, a simple sort of base theme and a more complex base theme or something like that. Then it would be interesting to have multiple themes that you could choose from when setting up an application and install those via the Web Package Manager much like you do components and modules and that sort of thing. And really this is a foundation for to build themes upon and so for especially for the audience that maybe wants to not have the burden of programming CSS and their style into everything. What we’d like to distribute is sort of a themes that more comprehensive themes that are built on top of that that then you could just edit really those those simple properties and also do that visually in the IDE rather than editing this one file eventually like to completely hide that file so that it’s really really kind of black box. So thanks for for watching we’ll take some questions now from you on and I’ll leave these links up. We have one more webinar in the series coming up and we’ll be posting the recordings. Thanks Sean that was very nice. There’s a question here from Steve can these styles be loaded dynamically at application startup and I guess one of the use cases would be that you have a different style per customer. Yes, so you could switch the same way you could switch styles, you could switch less files so if you if you create a second less file you can you could dynamically switch so that it that it overloads her overrides. Is there a function to do that. There is its application dot override style. Okay, so that’s how to switch the the less the base file for another one. Yeah, and you wouldn’t want to switch the base I don’t know if the base switching the base file works that’s something we could we could test out and play with because it’s a really common use case. But the file that you put on top of it the in my case it was the example example style dot last or something you can you can create example style to and then switch from example style one example style to. And override things in those files. Maybe we that’s a really great question. Maybe we should. Kind of create a best practice for that and add that to this example. Yeah, I think for especially for software companies doing multi tenancy and from a single server deploying multiple customers that it could be very useful example to say let’s switch to your. Your own colors within the application as they may be skin the application with their own right. That is that is supported today with with CSS files you switch from one file to another. The benefit with this would be that you probably are changing a few of those properties only. So we’ll see maybe the best approaches to dynamically modify the properties otherwise to create sort of two files that override those properties but not have to get into every the nice thing is you no longer have to get into every style class of every you know every part of the application. Right, question from Bob will this work with the web clients as well or just ng the class of web client now this is only for the entry client. Another reason to go to ng. Question from Tony I guess is more recommend for me I missed Monday’s webinar when we’ll be recording be available, well they should be passing them today so keep an eye on the first URL you see on this page. Or if you’re not yet subscribed to our YouTube channel that’s also a great way to get them pop up automatically in the YouTube app or website and make sure to subscribe to serve as YouTube channel and we’ll be seeing all of those webinar show up by themselves. There’s a question from Sonica can you set the for example the primary color from scripting by API. Yeah that’s that similar to Steve’s question about overriding the style I think I doubt it. Because this is not really exposed for API this is just a file that gets that gets included probably the way to do it would be to override the value like the primary color in another file and in two other files and then switch from one to the other. Through that that API that’s something that I didn’t test so I think that’s an interesting topic and we’ll test that out and get a best best practice for that. Okay let’s continue the discussion on the forum please please put those comments on the forum that’s great feedback. Alright it looks like those are all the questions for us today so with three minutes early wow that means you have time for an extra coffee. For the celebration party that’s right so on on Friday is a big day as Shannon they sending you the gold watch for 50 webinars in the room. Yeah. Let’s see if the I guess the community should do that because we do all these webinars for the community so they should be sending you the gold watch right well I’ll check my albox tomorrow. Yeah anybody needs Sean’s address and feel free to contact me back channel. So again thanks for attending and on Friday is the last in the 8.4 series. If you haven’t downloaded to avoid it for yet then please do that today. And getting your feedback before we make this a final release always helps to make the products more stable and we try to get even our dot zero products out. Stable as possible they’re running as many tests as possible but nothing beats a real life test with your application and you behind the wheel. So please do that and please post any bugs you find in our online GRA and if you want to discuss or talk about bugs and the forum is the place to head to. I’m going to talk forward to seeing you on Friday to talk about the 8.4 performance enhancements which a couple of them are quite significant. Feel free to join again on on Friday and I look forward to seeing you all again and Sean thanks for presenting.