Servoy 201903 introduction

Welcome everybody to episode 53 of the servoite tech webinars and welcome to today’s live session and today yet another exciting session we are launching the next version of servoite and as you may have read on the forum we are changing the way we number releases and I understood this is the modern way of doing things as a dry chat. It’s very modern. Oh that’s fantastic. Alright guys welcome again. The audience still growing I see. That’s good. If you do have any questions during the session feel free to post them in the questions channel we are here to answer all and any of your questions. And we have quite some ground to cover so sit back have a sip of your favorite beverage and I’m enjoying the rain in California actually we had the coldest February ever recorded in California so far for a global warming year session. How’s the weather there? Winter. Oh okay good. Alright let’s get started. Yeah so as Yawn mentioned today’s number 53 and episode 53 and we are pleased to announce the coming availability of the 2019 Q1 build and as Yawn just mentioned we’re changing the release cycle a bit so we are moving away from the semantic versioning so the six seven eight dot whatever. To the quarterly builds and henceforth builds will be known by their quarter that the quarter that they’re released in and there will be no major minor version and there will also be long term support builds made yearly. This is the first of those quarterly builds 2019.03. We expect this to be released no later than Monday of next week but we wanted to give you guys a timely preview. We’ll be putting it into a release candidate for the month of March and at the end of the month we’ll make a final version of it we may make a few rebuilds throughout the month. So we encourage you to download and start testing as soon as it’s made available that’ll be announced on the forum. There are a lot of enhancements and maintenance fixes in this build. I think the most notable is our continued work on no CSS theme rolling and so this webinar will be focused on that. There will be another webinar in two weeks and we will catch you up on some other features coming then. Before we jump into a demo I know that usually we do the demo first but I have one slide. I want to talk about why we’re doing this and what it means from a product point of view. The theme roller project which we started some time ago I think sometime last year. We started that because we want to take away the burden from our customers of a challenge that we’re seeing. Although the NG client gives you all the power of CSS three and all the great things you can do with it it also creates the challenge not only of learning and using that particular technology but also just to get a consistent look and feel across your application and to. When you introduce a new component or new modules and do things match anymore all of a sudden you have to go back and refactor everything. So it becomes I think very time consuming to maintain your CSS and also to do things like create variations or themes on a look and feel are even more challenging. So we wanted to step in and really bring it back to our roots which is to make things productive and easy. And that’s why we introduce this project and this is an update on that. So we’re going to do a demo. And then we want to talk a bit about how to extend it. And then we’ll do an overview which includes kind of a more in depth about this particular project and what plan for even future releases. So let’s get to it. We’re looking at an application that I built this morning. I get up early for these webinars before the sun and I try to see what I can do by 11 a.m. I think that’s a good way to make sure that things are still productive. And this morning I wanted to start with a sort of a basic solution out of the box and then kind of make it a dark theme. And the most notable aspect of this whole process is that I don’t use any directly use any CSS that I have to put into an editor. So you can see here this is a just one screen it has a tab panel with some fields on it and we have a grid down below we have the. So I have a side nav component on the left and the nav bar across the top with one button in the corner there and some theme icon and text up here. So I didn’t want to spend a lot of time putting lots of components on here. I think you get the idea things look like their coherent the colors for example from the side nav match the alternating dark color here in the grid and you can see the colors for the background here are consistent. There, etc. So I want to look under the hood and how we did something like that and maybe the right way to do this is to build it together. But first I want to take a look at how it’s built and then we can kind of reverse engineer it. So the first thing to. Close all these the first thing to notice is when we make when we make an application now. It will generate a style sheet for us that is a less file. And inside that less file it will be empty except for this import tag and it’s going to import the defaults or voice theme. And that’s kind of what we customize to be able to get there. You can ignore the stuff down here this is an example of how you can customize that if you actually want to get into the CSS we’ll talk about that in a minute. So if we look in the media of the project we can see that there is the this is automatically added for you the custom servoic theme properties. If I want to open this. It’s going to open up an actual visual editor so I’m not going to I’m not going to edit this directly in server a four we released the same concept but you would actually go in and kind of change the properties here and we had to do that as sort of a bridge to get to this point. And we will continue to develop our less editor to be able to really give you the tools you need to to theme your application without getting into the details unless you really need to. So this editor basically exposes every property that’s in the theme. The first thing that I want to point out though is that right away we realize we’re going to have to maintain this sort of default theme so it’s already versioned. And so we will be able to update this theme as needed. And also we would like to be able to offer alternative themes as well. Now the theme itself is not a dark theme a theme is really the sort of fundamental building blocks that you could actually create variations on that theme. So they really do things at a generic level and you can see going down the list here we have exposed properties like a main color a secondary color a text color an inverse of a text color. If I just want to give things a border what the width is going to be what the style will be etc. So we fill these in with some default values at the beginning but very easily we can go in and change things. In order to make the dark theme that I just showed you all I did was come in here and start editing some of these properties. And you can see that every property that I’ve edited is highlighted in blue. If I mouse over it I get a compare I get to see three things. I can see the value that I’ve overwritten so that the default was that the text would be bright white. But because I’m doing a dark theme text that’s really bright white is kind of harsh I wanted to dim it down so I I I took that down a bit. I was looking at a change from a prior version I could see what what the property is that I’ve overwritten but it was in in the current version what it was in the prior version. If I wanted to revert this and say make all my. I let’s see I did text color here. I just do main color the main color was that sort of blue highlight color if I wanted to change that and make it red. I’ll just come over here and grab this. And save it. You can see that it shows now. That it overrides the default value and if I wanted to reset it I could right click. I’m going to come in here you can see that the selected side nav and the highlighted tab here are red. And so the dark theme I get going with. With some of these other secondary colors like this is quite a dark color the in versus that light gray. And then we can get in some functions here as well so you’ll notice that the the darkest color here is the dark secondary the main area here is the middle secondary and then and then. The lighter areas here are the light secondary and those are accomplished with these dark and enlightened functions. And so we take the the main secondary color this which is kind of just a dark gray. If it’s a little bit tilted towards blue I could I could make it a bit more blue. Now you can see that the theme the whole theme goes a bit towards blue without me really doing much because the main middle part of the screen here is that color. But then we darken and lighten it so it stays kind of within the same hue although when you darken it it really loses its hue but as you lighten it you can see even more of the color expression coming out. I could tell you when I was working on this I spent a waste at a lot of times just playing with colors and then I said oh crap I got to build make a webinar. But it was kind of fun and and I really felt started to feel the power that I could I could go in here and really tweak things across the entire application and I don’t get into any any code at all. As you can see there are a lot of properties. We get down to the text colors. One thing I want to point out is that there are properties for all of the standard components and this is one of the reasons why we have to version this underlying theme and it’s really one of the whole goals of the theme is that if a new component is released. And you just drop it in your application how do you know that it’s going to look and feel to match up with the rest of your application. Well, the way that we can control for that is by exposing more properties that really you know get underneath and into the style sheets of those those components and and expose the important parts of them so that you can just come in here and tweak them so you can see that for example that side nav selected color. Is the. Is the secondary color which is the bit lighter gray. You can also see that I put a border with the four picks automatically the border of that is going to be the the main color here because I this is the default and that’s why I got that little that little line on the on the left hand side. And you can see that it’s it’s reusing itself so the selected the selected border color is drawing from main color and that’s how it was able to sort of cascade throughout that so I didn’t really even have to come in this side nav to change too much. To get that but I did want to play with the light and dark and so you can see that by default it goes darker. than the secondary color and that the highlighted. The highlighted color goes. What is this. The main color light for the selected text it sort of brightens up the text a bit so. You can see that really only to change one or two things and you can you can go through and mix all the components in and just tweak them and they should be already themed. The other thing that I want to point out is way down here. There you can see there’s some stuff I did for the table way down here there’s some brand settings. So these are added to give your application that really those standard kind of mix of colors or settings you would have so like info success warning. Danger that kind of thing and you can go in and really control. Control these properties as well now I really haven’t changed too much of this for this dark theme because this sort of goes to the next, an next example that I want to show. So this is kind of an overview of how it works in a minute we could try to do this from scratch. But I want to jump over to another part of the demo. So if I come over to these built in selectors. I want to talk about how you might apply these things on individual elements because right now what I’ve done is just change sort of at the macro level. The properties of the application. The second aspect that this. Theme roller project includes is the ability to have these sort of pre built selectors that are easy to attach. And what they really do is they take a bunch of CSS and sort of combine it into little packages that you can just apply the things so you don’t have to go in and define these things yourself in a CSS file. So you can see that I have some buttons here that show you those brand colors. You can see that the one thing I did have to change is that I wanted the dark text on the on the gray brand color the tertiary brand color. Everything else is white which was the default. Here’s the outline version of those buttons. And down here we show a bit of just changes in typography. Again, you don’t have to make your own classes. You can just sort of attach these to get underlined or to transform to uppercase and make bold. This one you can see. Maybe you can see through the webinar there’s a hover on it and you can see the cursor changes as well. That’s all just done by attaching one of these selectors. So I want to take you under the hood and look at that particular form. So here I’ve designed this form and I really just placed a bunch of labels on the form and started attaching things to them. So let’s take a look at these buttons real quick. Down here along the style class property you can see what styles I’ve added. So I made all of these with the style text center because I want the text to be centered. The way you would have to do that under the hood would be you’d make a new class called text center and you would put the text align property in that class and you would attach it everywhere you wanted that. Well this saves you the step of having to do that. And it relieves you from having to even open a CSS file which is really the old goal here. And you can see the different brand settings here button primary and then we go down the line with secondary success info warning. That sort of thing. It’s more than just the background color because you can see it’s the foreground color it’s also what happens when you hover. You can make these things with a cursor pointer change the transition speed. That sort of thing and that can all be controlled without really opening a CSS file. But what you can see is that that was all applied just by applying these sort of pre built selectors and you can still customize the selectors without going to CSS. So if you look at the theme properties when I was down in the brand settings. Way way down here. I did want to customize the tertiary inverse color and make it the same as the text inverse color which is we have a light text in the dark text and that’s the dark text. So I wanted it to switch to that because that one looked kind of funny with a light gray text over a gray background. So that’s one area where I did that down here to as I darken it instead of lighting it when you mouse over it. So these are sort of exposed in a smart way where all I had to do is kind of look at it and say oh yeah I want to tweak this I want to try that and and away I go. These buttons over here are the same except for they just go with the a different style class you can see the outline primary outline you know success etc same thing but just a little variation on that. These little headings that I put on here I just came in and attached a few quick selectors and I was done I put on the H3 which puts it at a certain kind of font size. And then I also wanted to say there’s no borders but I do want a border bottom and it automatically attaches the border to that. And you notice that the border colors are all consistent and even the borders around. Around these outlines I just put the style selector border and the border colors on them are all different. And that’s one thing that’s really powerful is that the border colors already defined by what it means to be primary or success successor warning all have to say is yeah I want the border on and it’s it’s already looking good. Some more about these built in selectors and there’s there’s loads of them. I just wanted to decorate some text or or to just change the heading size and you can see that. Here I was just changing the heading and then I put some of the brand settings on there so we have h1 through six underline this one transforms the text so even if I type in something lowercase. It still goes to upper case automatically so you can force that in this one we just added the clickable hover and that’s what gave us the pointer cursor and that sort of slow background transition that you saw. That’s all just by adding those and I would point out that you get code complete on all of the available selectors that you have not just from the theme project but from from your own custom stuff if you’ve added that. There’s quite a lot there the good news is that this project is documented so if we go to the theme roller project on GitHub let’s get hub.com slash serve voice slash SUI theme roller. We have the wiki documentation and we will maintain what the selectors are what selectors are available and what they do so you can see it’s with colors and brands we have. So if we etc so again this will be a version kind of thing but we expect to have to enhance this or fix things along the way so this is where if you really want to get into the details of it you can you can read what these are for but again we haven’t had to write any CSS at this point. What I thought we could do next is actually try to. Try to make a theme from scratch so you get a feel for it and then we’ll go through an overview of. Of the slides. Actually I’m let’s do the overview first and then we’ll do that the sort of off script thing. So. Let’s kind of drill into a bit more about this project. So I just want to remind you of you know why we’re doing this what’s the goal because we are adding things into the product. Our mission is to take the best of breed tools like you know less and CSS three. So that you can have great applications but we need to make it easy to use because every time you add a new technology it shouldn’t mean that you have to become an expert in that technology so that’s the real goal here. At the same time we want to remain open and sensible so what I showed you didn’t require that you have to write any CSS or any less. But if you want to and you need to you certainly can and then you can really get in and tweak things and you could create your own themes and that kind of stuff. So we want to bring developers along go fast when it’s easy and then if you need to do some hard stuff the option is there you’re not boxed into a rigid kind of framework. A bit about the technology that’s underlying this. So less and we’ve done this in prior webinars when we first introduced the topic but just to revisit it it’s it’s a kind of a language extension for CSS that lets you have I think the most important thing is variables. So that you can say main color secondary color and then just reuse that so that you can make changes one place it’s pretty powerful. We did start to introduce this back last year in eight three and eight four and again the goal is to get to the point where you don’t have to do CSS it wasn’t to make things more technical and to have more options. So the a three release I call the hackers only because we said yeah we support less now. We also created that theme roller project but it was kind of like you you’re still putting the pieces together in those files yourself. In eight four we decided to start shipping the default theme in the project this was a big step again if you’re feeling brave you can open up that that less file and start manually editing those properties. But finally in the Q1 build anybody can start to create variations on this theme and you don’t need to have any special knowledge about CSS or less. And right now we support multiple versions. Multiple themes are currently possible we just only have the one default theme but we we kind of reserve judgment on what kind of themes we need right now we want to drive the most generic. kinds of variations that people will want. Looking forward though we’re going to continue on this because we think it’s pretty important. To make it very productive to style your application so we’re going to continue to enhance the default theme as needed to make sure that like if we find that people still have to go back and write CSS to get what they want it means that the theme is not working well so we’re going to keep an eye on that. We also want to offer you pre built variations so yeah the dark theme was pretty easy to make but why not just give you a dark theme and let you tweak that so we can offer variations. And I think that we can enhance the editors too so we’re looking to see what kinds of feedback you have on the editor and we have some ideas of our own. Again, this is just the start and things will be backwards compatible so again we’ll be versioning these. These default themes and anything that’s added so that you can kind of evolve your product with with those enhancements. The theme roller project started out as a separate kind of GitHub project and the goal was to really provide that integration of you know web components and modules in your own application and being able to bring things together but still have a consistent look and feel. And so it introduced less and introduce some very generic properties and some built in generic selectors so things like having main colors and secondary colors and a light version of that and a dark version of that and what is your default border etc. But also these built in selectors that I showed you so just being able to make something a clickable hover text or just being able to say I want this thing to be the full width and to be centered. It’s pretty simple to do and CSS but why should you have to do that you should just be able to stick these things on and go with it so I think we’ll be extending those as we go. You can you can download or you can go visit the documentation I mean for that theme roller project I showed you on GitHub and we’ll put these links up at the end. So let’s go a bit off script here and try to do this from from the from scratch and I’m also open to interruptions if you are in a few spot any good questions that you think we should answer. Then we can. There’s a couple of fun with it there’s a couple of questions coming in already. Okay. Go ahead from Stephen is there code completion on the reference properties. Yes, there is I’m glad you asked that because I I had in my notes to to talk about that so if we if we look at the. If we look at the file that we had open. In the editor this custom server with team properties if I wanted to change a color here and I hit my at. And then we’ll get I get all of these or at any any point if I do control space just like in the JavaScript editor it brings up the code complete so you don’t have to copy paste or memorize these things. That’s pretty cool. It is. Any other questions so far. Yeah, there’s a couple more coming in. So the properties listed here on the left hand side are they static. Okay. So we can do that in the. In the last file that gets generated so I’ll get to that that sort of like the the hacker way. This is the in the box way. So let’s stay in the box and then we’ll we’ll do one example of going out of the box because I think that. Naturally, the Servoy community is filled with hackers. So let’s start easy though let’s start from scratch. I’m going to. Don’t save. I’m going to make a new solution. And I’ll call this. off script. One thing that’s that’s nice and in the new release is it already allows allows you to import modules that you might want. So security. Search utilities that’s that sort of thing. It also by default is with hiding a bunch of stuff that you know like default is ng client. I kind of think so. We’re trying to make the first use experience here nice or in the ability to import some stuff. It also imports web components by default so you don’t have to go to the web package manager and get Servoy extra. For example it’s there from the start. So. One of the things that does one of the advanced options but I have the default is that it generates the the less file for you. So you can see over here in the solution properties this off script that less is generated automatically for you. It’s really just a stub and it does import the the theme the underlying default theme. The actual support of import in a less file is new in the Q1 build it was not in the eight four. So I think that was a pretty important thing to make sure we have so this really allows you to to do some extension. And this will answer that one question that I said we’ll get to. But we’ll come back to this. Let’s start simple. So let’s make a new form. I’m just going to call this one main. It doesn’t need a data source. And we’ll go and get again the the a lot of the default component libraries are now in in the the new solution automatically. So that’s that’s nice. I’m going to grab this side nav drop it on the form. I’m going to use my CSS positioning here and just kind of put it full screen. So that’s top right bottom left and then we don’t care about with and height. Funny I think it’s done a bit of caching of the dark theme from before. Maybe there’s only one instance that’s okay we’ll just revert it. So now if I go to the media. And I open this up. Let’s have a look. Oh yeah these are all these are all back of the default that’s what I expected. I think it’s just kind of cash something here in the editor. Because it is still showing dark. Oh no that is the default for side nav. I’m sorry. This is why we go off script. Okay so we’ll create another form like an orders form. Grab the orders table from example data. I’m going to drop a few fields on there. Okay. Yeah there’s sort of the default that you get that vanilla thing out of the box. But the first form the side nav is going to contain orders. We could also. On load will build that menu. So that you can see it. There’s something like this. And we need an array of menu items. So we have by default. Borders call it the text will call it orders. We’ll give it a font icon. I think it’s icons that I’ll class. I don’t know if a list that sounds good. We need to call that here. Okay so. Let’s at least just start with that. I’m going to launch this in the browser. There we go. Okay so this is this is what you get without doing any any theming at all. And let’s say we want to straight away. Start to change things so we go and grab this default theme properties. And we see the main color yet. Not yet. So. Tell you what let’s put a table on orders and we get that with like the row highlight. So I’m going to grab. Excuse me. The extra components. And we’ll drag the table on here. And a column for that. And we want to set the found set for this to be. I’m going to import a module here. It gives me some data model stuff. And that then I get some relations out of that. So the found set property of this table is going to be. Orders to order details. And. Make this data provider. Order details to products product name. And we’ll make this thing a bit bigger here. All right let’s have a look now. Let’s go on here. Let’s get this again. I don’t see my table. Could be a soft the bounds or something. Or maybe adding that module did something. Let me start from scratch. Let’s table on. Set the found set to. Orders to order details. And we’ll give it a data provider. The product name. No. Okay well let’s do something else then. I don’t know what’s going on there. That didn’t happen earlier this morning. So we’ve got the. Let’s do the side nav to start with. So we got that highlight color on the side nav. The way that I did that is to. To go down to the side nav properties way, way down. Here. And. I’m going to go down to the left. And I like that little. That little left side border to show up. So let’s give it something of four picks. So you can see as soon as I change it this becomes highlighted. It shows me what I’ve overwritten. And. I click you see I get the default orange one here to show that it’s selected. It also becomes kind of that light gray as well. Let’s do something like. Change the border color of everything that has a border. I think the. That’s it it’d be a simple one. Border color right now is kind of a light of medium light gray. So we can see that we could make it. You know. Something else and now you can see all the fields for example. Go to orange as the kind of the default border. Would be nice to get that grid. But I think you guys get the idea. So we have any requests. Yeah, there’s a couple. I’m sorry. There’s nothing more questions coming in. Oh, Andrea’s suggesting you didn’t save when you placed. Great. I did. I did. There’s something some issue. I don’t know what it was. There’s a question from Steve. What would a third party component need to have to make it work well with the fee roller? Okay. The third party component doesn’t need anything. The theme roller needs it. So we have to go in and update it to. To expose what what it needs to be. So if it’s a third party that we don’t maintain. You’d have to get into your own less file. And expose those but you wouldn’t. You wouldn’t see the component stuff in here. But you could take from this and kind of inherit it. So let’s let’s do a bit about the built in selectors and then we’ll go and do the custom less stuff because I think that shows kind of the hacker way if you want to really extend things. If we wanted to go and and put a label on here. And then just call this order info. And start to use those selectors. This is where I was wasting lots of time this morning just playing with all the different built in stuff. If you now come down to the style class property. And. So we’re going to have to look at well what do we have for text we want text info. I don’t know. That’s a bit light but I think that’s. We could do. Brandon. Chief. There we go. You know and we want it to be center so we do. We have to enter puts in the middle. And. I have something like that if we want to put up a button down here. And. This one is we’ll do button primary. We get the primary color and maybe we. Make another one. Whoops. Copy to bunch of stuff. That was not. I could. And we want to have this one be. The button tertiary color. And you can see that one goes gray maybe this is canceled and the other one’s safe. I’m Dave. Okay. But you get the idea. So those are the selectors in and you could see I get I get code complete on all of them. So. It’s fairly easy to kind of. Try them out you can also go to the documentation and see what. What the selectors are really meant for. And again all of those are driven by. By the theme so. If I wanted to go to. Down to the brand settings and say well. Beji primary is not what I want. I wanted to match all the orange stuff that I have. I could go down and find a brand primary. Here. And that’s that like blue color you saw. And instead I could say I want I want main color. Maybe main color dark. If I save that. Anything that I apply that that beji style to is gonna that primer style is going to get that. Not just not just buttons but anything that has a we can attach beji primary to. Okay let’s do the final I think example which would be to really go and customize things. So I go into the again the solution properties here the file that generated was this off script.less. It has nothing in it but it imports the the theme the default theme. So what I could do is I could make my own. My own class for example and it’s called it like my custom label. And I want the color to be. And now normally in CSS I would just put the color but I could I could say you know I want the color to be main color dark. And I want the background to be. So I’m. You know secondary. Secondary color I don’t know. And then if we we go on to our orders form. Put this one down here. And. You’ll see that in the style class I have. My custom label I don’t know what this is gonna look like. I don’t know what it looks like. It’s transparent. No. Maybe I didn’t. The problem with this is you don’t really get a code complete here this is just raw. Less than CSS or maybe I copied something wrong. It would be. I’m going to use the same color. See where I have that somewhere. Just one of these. Yeah I think that was right. I don’t know. I’m going to do something probably in the second line. So there you can see I get the main color and then I could do. I don’t color. There we go. So we start to get some of that now you can do you can reference your own or you can reference properties out of the default theme. Which is probably what you want to do for a lot of stuff because the more you start to fork then the more maintenance you have. Right if you just want to reskin everything and change a few key properties then that’s nice. But what you can do is also do your own properties and I’ll show you that in a minute. But you could for example. Use some. Less functions here like you want to lighten this. Secondary color. 15% So now you can see it’s a bit lighter than the side nav over here so. That’s one way that you can get under the hood and extend things. Another probably the better way to do this as long as you’re hacking away and using the last is you might want to do. Make something called like my custom. Color. And then you kind of move this out. What happened to my text up here. I kind of dragged my mouse. Do this again. My custom color. So I define it there. And down here I can. I can reference it. And you can see that it still works. So now I can use my custom color anywhere in my own stuff. So really the right way to use less is to avoid putting. You know primitive values into your selectors it’s really to externalize those so you can reskin things in one place. So that’s kind of how if you if you were to build your own bring your own component, you would have some internal style selectors. That would already be in the CSS file of that component probably. And then you would want to create ways to expose those so you would be this would maybe be overriding you know my component dot you know. So you can just add a header label or something. And then it would override it. And then you could really just inject stuff from the theme so that that’s how you would really skin your component consistent with everything else. Is to override the selectors that are in that component style and then apply things from the default theme. Any other questions. Yeah, there’s a couple more coming in question from one we have our own SSS files can we create our own properties in those team files. SSS is not supported so you have to convert that to less to be able to use it. All right. And one also is a question when you created a new module. These modules you can import when creating the solution can be can they be customized I mean can I add other modules my own to that list. Yeah, so one thing that you’ll notice is this import here. Now that in the latest build of Servoywe support the the last importing in less files. So if your module brings its own customization. Then the container needs to just import it. So, and I wanted to have an example of that but that’s quite a bit more work is. But I could show you in practice how it would work is you have your media here. Well, suppose that you had another module that also had media but i’ll put it in here for the sake of example. And so i’ll make a new create a media file and call it my module.less. And then I come in here and say you know my module color. Just make it bright red. And then some class you know my module select here. I think one question was even more off script than we are already off script. And he’s talking about when you created a new solution you were importing things and about being able to customize that menu. So not the not the less file but the module itself when you created when you started. And the server solution you import. You imported two things and I imported it. I imported a module that just had some relations and stuff in it. I didn’t that doesn’t have anything to do with the style. All right one you have to rephrase a question to make it. The list the menu is a list of components he says now. When you with the main menu. Well no when you were creating the solution if you go to new solution. Uh huh. Oh this one here. You were in. Okay okay okay yeah yeah. No right now that’s that sort of preconfigured. In in server for developer. This is this is our first step at making sort of first use and experience better in speeding up the creation of applications that by including all the things that you might need. Which will probably grow to include some prebuilt themes. Like some prebuilt variations that you could choose from and that sort of theme thing. So for now this is sort of closed you can’t add your own stuff to it. That’s a good idea. Probably at some point we can expose it just like how we expose the web package manager to be able to point to your own web packages. The themes you can you’ll be able to add your own themes and choose them and you know maybe someday we’ll be able to grow this menu as well. Okay good suggestion on keep them coming. Then there’s another off script question from WIM. And the mission was sure that question means. And we’re very brief in his questioning. So for anybody posting questions please be as extensive as you can on the other. Otherwise I’ll just answer it anyway I wanted because WIM says still smart client available. So I’m guessing here this question could go two ways. Is smart client still generally available in this new upcoming bills 2019.03? Yes. Okay so WIM smart client is still available. And if we take this question the other way we’re just guessing here. But this is how mark we go script. This styling I guess is not available in smart client. Correct. The smart client is like a pseudo CSS. It doesn’t even support CSS3 because it’s not really being evaluated in a browser. All right WIM I hope we answered your question both ways. So this type of styling is not available in smart client. Smart client in general is still available. But if you are still using it you should start looking at the NG desktop client as that will be the long term successor. But as long as Java will support it we will continue to include smart client in current and upcoming sure for bills. Yeah before we say goodbye. Again, here’s all the relevant links. The usual ones I would just point out that that theme roller project you don’t need to go there to download or anything. But if you want to look at the documentation for those built in selectors. That’s the right place to go. And just a bit about what’s coming up. Again we are in RC mode or we will be. By Monday you’ll get the the Q1 build and will be in RC mode for the rest of the month. So we are aligning our tech webinars towards that and there is also some enhancements around. Oh off and consuming API’s so we want to give an update on the new oh off plug in and what that means for you. And again the the example that you saw today will make that available on the forum. We could just give you the dark theme. And others as an exporting you can see what properties are over written. And I know we’re a couple behind to on the example solution so we’ll catch up on those as well on the forum. All right excellent so for anybody interested in trying out. Make sure to go to server.com slash download and download the latest RC give it a try with your current applications. Post feedback if you are running into any issues. And we look forward to seeing you in about two weeks and we will post this recording pretty soon that our archive has been updated yesterday. So if you are looking at the previous webinars they are posted the short version on our website. The longer. Offscript edition is on the forum. So we look forward to seeing you again next week on Thankshaun for presenting.

Close