CSS Coding: Accelerated
Hi, my name is Janle Eunleman and I’m the founder of SIRVOI and I’m proud to announce a next generation of SIRVOI. In SIRVOI 8.1 we have been further enhancing our HTML5 capabilities to ensure that you are working with the best HTML5 development environment. With feedback of our customers we’ve built five major announcements to SIRVOI 8 that are all available in SIRVOI 8.1. In the next five webinars we will discuss these great and cool features in detail. In this first session we will discuss the CSS capabilities that have been enhanced in this region. Sean Devlin, Senior Engineer at SIRVOI will be presented. Sean, let’s get started. It really stands on sort of three pillars of web technologies. Obviously HTML5. SIRVOI doesn’t require you to write your own HTML5. You can if you want to but it also generates the markup for you. Similarly one of the technologies we use is JavaScript. Again, you don’t have to be a JavaScript expert to use SIRVOI because you don’t have to write JavaScript for the browser unless you want to or need to. We offer a lot of comprehensive APIs for pure server-side JavaScript. So really when it comes to making a fantastic web application, the technology that you would use is CSS. CSS has been around for a long time and now in version three it offers a lot of tools for making a really lively interactive rich user experience. Now SIRVOI allows and fully supports CSS3 but what it means is that in order to take advantage of that you have to apply a bit of CSS. There is a bit of learning involved there. There’s a bit of changes for those of you who are coming from prior versions of SIRVOI and how that’s implemented. So a quick overview of our agenda. I have a few slides and some demos but we’re going to show how to set up a solution for CSS. We’re going to talk about sort of just default styling and then overriding that to do some more custom styling. Some basic but effective CSS3 tricks. We’ll talk about different selectors, pseudo classes transitions. We’ll look at what sort of in the box with the default shipment of SIRVOI and we’ll look at dynamic styling and have a bit of fun with some animations. So getting started. CSS files are bundled in the media folder in the solution explorer in the solution project. That’s a bit different from those of you who are coming from prior versions of SIRVOI. And a solution now only references one CSS file but many more can be included with modules and CSS import statements. So the way we support CSS is very modular and allows you to include things and extend your offering. By the way if you are coming from the classic versions of SIRVOI, there is no more styles in the resources project for the NG client. It’s deprecated. It’s still offered for the classic web client and the desktop client. So what comes in the box with the NG client as far as CSS goes. We ship bootstrap3. So all of that CSS is available. We also ship the glyph icons which are, if you’re unfamiliar with glyph based fonts, it allows you to, instead of doing images, it allows a developer to provide icons in the form of a font so that they can be stylized like making the font size bigger, the colors and background colors. So basically you can take it in image and manipulate it with CSS. It’s really handy. Another glyph font that we ship is font awesome. And of course there are the default servoic components. So all of those can be stylized as well and there are some default selectors for manipulating those components. Some of the basic tricks that you can do without much work, things like rounding borders. If you’re coming from the classic web client, this was trickier. Box shadows, opacity, just to name a few. But there’s many more. We have now support for fully supporting CSS3 so that includes pseudo classes. This is nice for things like what happens when you hover or when a component has focus, et cetera. CSS combinators which are ways of selecting say a child or a certain descendant of a kind of element type or sibling. So that can be very handy for traversing your document and grabbing and styling the element that you want. And then transitions. This is what happens when a property of an element changes through CSS. And these can be very subtle effects like just how it looks when you mouse in and out of a button versus all the way up to full blown animations. Quickly a bit of technical information. As I said, there’s default selectors for the components that serve voice ships. Also bootstrap components are shipped as well. So pretty much all you have to do is implement one of these selectors like .scybutton.scybutton.scybutton etc. and then you can begin to apply styles to all components of that type. Additionally you can apply you know your default styles but then you can quickly override them. So you can create your own classes and then you can assign multiple classes to a component. For those of you from prior versions of Servoy, this is quite a nice feature. It used to be that there was only one class per component. Now you can do as many as you want. By the way when you attach a style, there’s code complete in the style property too. So it’s Servoy is introspecting into all of your CSS to make it easy for you to assign it. You can also sort of embed style classes in a form. So you can create a style class for a form and then you can style all of the components in that form a certain way. So if you apply a style class to a form, then you don’t have to do any more work attaching styles to individual components. So that’s a nice sort of cascading effect that you get. And this actually uses that combinator. I was talking about a few slides back where you look at the selector there for the styled form and then it says well within this form an element with this selector gets to this style like suybutton. One of the really cool things about Servoy 8 is that you can add and remove style classes programmatically. And this lets you do a lot of things that you would have used to have done a lot of JavaScript, you know, setting background colors or borders, et cetera. Now you can simply add a remover style class and the whole look and feel of a component can change. that with transitions, you can get that animated look and feel too. So for example, here’s the code that you would do to animate a split paint instead of trying to move the divider or something you can just add a remover style class. As I said before, you can have multiple CSS files and they can be hierarchical and modular and they’re stored in the media folder. So it would look something like a subfolder inside media and then you have some CSS files in there and each CSS file could reference another one using the import statement. You can also bring fonts to your own fonts to your offerings. So if you want to include one of the fonts, we were shipping glyph icons and font awesome for example, if you had another glyph based font that you wanted to ship, all you have to do is package it up and deploy it in the media and you can reference it there. All right, well let’s get to a bit of demos because we’re on time. What I’ve done is created a quick sample solution to show some of the things that we talked about. Let’s take a look first at just default CSS, the things that you can do by applying style classes to the default selectors. You can see that this form is a little bit styled. If I wanted to look at the style sheet behind this form, I have a CSS file called global CSS. By the way, this style sheet lives in created a subfolder in my media folder called CSS and I have some files in here. I also created a folder for some images. For over, you can see as I select the solution over here, there is a property for the style sheet for the solution and at the top of this you can see the import statement. I start doing a hierarchical import of the dependencies that I need for all of my style sheets. So I imported another CSS file there. The styles node in the resources project is still available but you wouldn’t use this for an ng client solution. You would only use that for a classic web client or the desktop client. Back to the global CSS that I have here, you can see that there are some default selectors, SUI label, check boxes, forms, radio groups, etc. And those are giving the look and feel to some of the components here. You’ll also notice that on the form that I’ve designed, I don’t have to explicitly specify anything for the style class. So those style classes apply to all components unless they’re overridden. So that can be a nice productive way to skin your application without doing much work. If we want to go a little bit deeper, you’ll notice on the solution that, for example, when I mouse over my radios, they become highlighted. If I mouse over my check box, there’s a highlight. So I’m doing a bit of selectors for the hover state. Also the focus state when I click into my text area, my text box. They become highlighted in a certain way. And even if I disable my text box, you can see that it changes its style based on that. I haven’t written any JavaScript other than setting its enabled property to false and everything else was done with CSS. So if we look at the CSS behind that, you can see the now we support focus, hovers, and even down here, the disabled state for all form controls, I just set the foreground color to that, that dull red. So that’s a lot of things you can do out of the box without having to explicitly set style classes on components. But if you wanted to, you could extend and override some of the styles. So you can see I’ve made a subclass of SVY label for a header label. And for the frame, the gray box that I drew around some of the components. If you look at the design for this form, here you can see that I do have a style class property for that label called header. If I start to type, I get code complete on the available style classes. And also if I were to click this folder, it will navigate into the CSS document and find my style class for me. So that makes this kind of work very productive and easy to get without errors. So those are some of the examples of what you can do out of the box. We should move over to maybe a more rich example, what you can do when you extend the CSS a bit. So for starters, you can see I have some basic selectors. I have some buttons here with different colors and they have an effect when I hover on them. What I’ve done is you remember I imported this, this custom dot CSS. If I bring it up here, you can see that I have some basic selectors here. And these are just extending the SVY label. They’re actually not even buttons. I just made those labels and I’m applying some CSS to them. And if you look at the form for T, I believe it’s… This form here, you’ll notice that some of the buttons I have applied more than one style selector to. So you could just create your selectors and then you can pick and choose which properties you want to assign to the button. So I have the primary, the red and the green styles on those buttons. Some other stuff you can do, box shadows, you notice that there’s a little shadow around this label. And when I mouse over it, the shadow becomes a bit more dark and pronounced. Again, that’s just some basic CSS that you can do. Here’s my box shadow selector and then I have the hover state where I make the color a bit darker when we mouse over. Now some other interesting stuff you can do is play with the transition speeds. So you’ll notice that when I mouse over these buttons, the background changes instantly. However, if I mouse over this one, you can see it’s a little bit delayed. It gives it a bit of a nicer effect. And then this one, you can see it’s much slower as I mouse in and out. The background color is kind of fading in and out. There’s a CSS property called transition. And I set it to be for one class, 300 milliseconds and for the slower class a second and a half. And again, this is nothing special. It’s just another class that I’m applying to my component. So if I look at say the mouse over slow button, you can see that I have one more style class here called transition slow. And that means that every change that happens on that component, it will happen over the course of a second and a half instead of instantly. And there’s a lot you can do with transitions. You can get into full blown animations. But here’s just more of a set of effect. We have also some badges and shapes. The badges we get from the bootstrap CSS. If you look at here, I create a style class just for colorizing. But if you look into the form a bit more, get into the text property of that component. You can see that I embedded a little bit of markup here. And I have class equals badge. And then I put the number in there for the badge. The badge class is something that is coming from bootstrap. And I’ve overridden it to apply a bit more to it, like the pointer cursor when I’m asked in and out, etc. But this comes by default from bootstrap. So it’s not immediately apparent in the IDE what comes from bootstrap. But if you do a little bit of research on some of those classes, you can quickly pull that stuff into your application as well. And that just is just one quick example of that. You’ll notice also we get some fonts, glyphs here. So we get the bootstrap glyph icons. And we have also our font awesome glyph icons. And again, this is the shift by default. But you can include fonts of any choice, regular fonts or icon fonts. And all we did here was, again, put a little bit of markup in these components. So glyph icon envelope is a class that now takes this span element and applies the icon to it. From there, I can take my CSS and apply it to that icon. So I’m not actually putting any image at all. So if I look at some of the classes on here, I have a glyph font class. I put the transition medium class on there. And if I look at the CSS for that, you can see that I’m just again putting some things from mouse overs and the colors and the font size. So literally you can make that icon bigger in the font size. So the font icons are really quite useful for doing buttons and things. And those are called glyph icons and font awesome. They’re free use and they ship by default with Servoy. Let’s move on to another topic, which is dynamic styling. I mentioned in the slides that now you can add and remove classes programmatically to components. And this means that now your application can really adjust its state to match what’s going on in the data model, for example. So that’s me, is my picture. And what I want to do is just sort of toggle on and off styles on this component. And then I’ll show you the code and the CSS behind it. So I did create a style class called circle. So there I apply it and click the circle one. You can see it applies the circle mask. I could make this have a box shadow. You saw that on some of the other components. And now I get that deep and shadow when I mouse in and out. I also had that transition slow class. I’m going to apply that, which doesn’t have an effect right now. But what it will do is it will make all the other effects that I toggle on and off transition more slowly. So if I were to say dither this photo a bit, you can see that now it’s happening slowly. Instead of instantly, same with flipping, rotating. And again, none of this is really very much JavaScript. It’s just turning on and off style classes. You also notice that the buttons themselves, I have sort of toggled them as bright green when they’re selected and when they’re not selected. You can see that they become grayed out. So I also listed down here in the apply styles just the list of the style classes that we have on there. Let’s take a look at the code behind that because I think you’ll be pleased at really how little of it there is. It might help to point out too that if we look at that image in the solution explorer, you’ll see that there is in the API a method to add and a method to remove style classes. So that’s really all we’re doing is saying I want to add the style class we pass in the string name of the style class. If I look at the on action event of one of these buttons, I did sort of encode the style name and a design time property, but really all of the magic happens down here where I remove a style class or I add the style class to the image. And I’m also doing the same thing to the button itself. To make the button look toggled, I created a style class called toggle and I also applied the box shadow to make it look clickable when it’s not toggled and when it is toggled, I remove the box shadow. If we look at the style classes for those, it looks similar to all the other ones. I will take you into again, I imported another, I know I did this all in the CSS. Here are some of the style classes that actually did the transition. So when I did the image, I just changed the opacity. The flip was just applying a flip-h filter and the rotation was just transforming and I put the number of degrees that I want to transform it. So pretty simple, it’s just add and remove style class so you can imagine if you’re doing some sort of validation or the state of a, I don’t know, a purchase order changes and you want certain things to appear as the state of the record changes, then it’s pretty easy to do. You can also see that that begins to lead into animation, which is what I want to wrap up with because it’s kind of fun and it leaves your imagination open to what’s possible. You can see that when I turn on the transform slow and I start to apply a style class that it’s actually happening over time so the component appears to be animated. Well, you can take this and really run with it with CSS. So I have a final little demo here for animations and what I’ve done is set up sort of an array of cards here with some symbols and letters on it and as I click on them, they’re going to animate and as I click there, they’re going to go back. So something like that is also easily possible. It gives a nice dynamic interactivity to your application. If we look at the code behind that, let’s take a look at the CSS first, include it as a separate file so I’m keeping my CSS nice and modular and I have my SVY label. I created a subclass called grid item. Just sort of gave it some of the properties. You’ll see that here I specified how it’s going to transition and you’ll notice that in this one I’m not just saying, well, it’s going to take two seconds. I can actually specify, well, if the width changes, it’ll take two seconds. If the height changes, it’ll take two seconds. The background color I wanted it to change quickly, but the transform or it actually rotated and moved across the screen, I wanted to happen over two seconds. You can see here’s the style class that was added to make it move and I translated it 500 pixels and I rotated it 720 degrees. I also changed the background color. Then when I want to move it back, sorry, when I mouse over it, I have a hover here so that even the hover color changes after it’s been moved. The JavaScript behind this is surprisingly small because the CSS is doing all the work. If I look at the on-click event of any of these little cards, it’s just this one function. Really what I’m doing is just saying, well, if I have moved it, then I’m going to remove the style class. Otherwise, if I haven’t moved it, I’m going to add the style class. That one method that we added in Servoy8 to dynamically add and remove style classes to components that really makes all of this possible. Try it out. I had a lot of fun doing this. I spent a lot of time playing, but I learned a lot too. I think that if you guys do the same, you’ll learn a lot and be able to embrace some of this in your applications. I will post the sample solution for this on the Servoy8 forum so that you can download and try some of the tricks out. Also we have another sample solution that we’re working on that we’re going to show in some of the other webinars in the series, which is meant to be sort of our running documentation of how to do stuff. Some of the CSS tricks that come in here will be in that and we’ll be announcing that and posting it in the next webinar as well.