Thank you for joining me for this video, Stiling Your Solution. For Sir Bowl University, I'm Bob Cusick. When you're thinking about your graphical user interface and how you're going to design it and stylize your solution, it's very important to consider your end users and what platforms are going to be using, what browsers they're going to be using, and how you're planning on deploying your solution, whether you're going to do a smart client only or a smart client and a web client, it makes a big difference when you go to start setting up your styles and laying out your graphical user interface. To get started, I've created a very simple solution here. I've put different types of elements on there. There's radio buttons, a pop-up menu, a portal, and a tab panel. And here in the tab panel, I've put two tabs, employees and suppliers, very basic. This is running in Windows 7. Let's take a look at how this very same solution looks on the Mac OS. Wow, there's a lot of differences between the platforms. So let's take a couple of minutes and explore some of the differences just between the Mac and the Windows smart client. The first thing that you'll notice is that our tab panel is stylized differently. The default of the Mac OS is to have the tabs rounded and in the middle, whereas on Windows, there's square and place to the left. The next thing is the button. So this button looks perfectly fine on Windows. And it looks okay here on the Mac, but it doesn't have the rounded aqua look. And finally here on the Mac, besides the fact that the field is not long enough to display the color green, here on the pop-up menu, you'll notice that the top of the lossage icon is cut off because the field size isn't tall enough. So let's go ahead and address a couple of these issues. Here on the Mac side, the ideal field height for fields is 22 pixels high. The default for servoy is 20 pixels high. So it's a good idea if you're designing cross-platform smart client solutions to make all of your objects 22 pixels high. It's very easy to do. Simply drag the select all of your items, hold down the shift key and press the down arrow twice. Now everything is 22 pixels high. And if you notice, the combo box now has the full height of the disclosure widget. There's one other thing that's important to consider when you're doing pop-up menus and you're doing a cross-platform solution. On the Mac for a combo box, if the field is editable, then everything is fine. If it's not editable, meaning that the user can't type in a new value and must choose it from the pop-up menu, you uncheck the editable check box. And then the widget turns into a full Mac OS pop-up menu widget. But also notice when the combo box is rendered, it doesn't fit the full size of the field, something to keep in mind when you're doing your designs. As far as the button goes, if we click on the button and we just increase its size by three pixels. So the default is 20 pixels high. If we hold down our shift key and press our down arrow key and we make it 23, then you'll notice that it pops into the Mac OS style button. Let's go ahead and save that, we'll control S. And let's look at it in the Smart Client. So now we have our rounded button and we have our pop-up menu rendered for Mac OS. There's some other things too, like the form size down here. My tab panel isn't big enough to show the whole form because of this tall tab display. So it causes scroll bars on both of the forms. So you just want to make sure that when you size your objects and you're developing on Windows, that you size them a little bit taller and that you size your tab panels a little bit bigger. My personal preference is to go ahead and develop everything on the Mac platform because if you develop on the Mac platform, it'll look good on Windows. But as you've seen, it's not necessarily so the other way around. There's some other differences too in the font chooser and the color chooser. We'll take a look at those a little bit later. For now, let's pop back into our Windows development environment. Back in the other video, working with forms and form objects. I said to not stylize each object individually, but to use style sheets. So let's go ahead and take a look at style sheets and how to create one and how to apply it. To create a new style, come over here to styles under resources, right click and say create new style. We're going to name our sample and then click the next button and then you can choose to fill the style with sample content. This is a good starting point. So I'm going to go ahead and do that and then click finish. The style will open up in a new CSS editor and all of the styles in Servoyare based on cascading style sheets or CSS. Now if you know a little bit about cascading style sheets and you've worked with them in a browser, it's a little bit different inside of servo. Because remember, Servoyis not a browser. Servoyis both a native Java environment as well as a deployment environment in which you can deploy your same solution to the browser. So here in our style, every type of object has a style. So we have fields, checkboxes, radio buttons, combo boxes, portals, tab panels, the form, labels and buttons. And you can set up multiple styles for each type of object. So here we have label my text. So my text is what's called a subclass of the label. So it is a label, but it's a different style called my text that applies just to labels. It's important to note that all the objects inherit their base style. So for example, this label, my text inherits everything of the master object. So all of the label properties, it inherits and then you can change or replace properties of the default in your subclass. Let's take a look at how this actually looks on a form. To apply a style to a form, you can do it when you create the form in the form creation wizard. So if you create a new form, you'll see right here that you can choose a style. And right now we only have our sample style. Or you can also come to a form that's already existing, scroll down, and we only have one style is called sample. So let's go ahead and apply it. Wow, that's kind of bright. But the sample style is meant to show you how to stylize different things. So it's a good example, even though it's not the most attractive. Let's take a look at how we can fix up our style. Let's come back to our sample style and let's start with the form. Rather than having this green background color, let's change it to the color white. There are different ways to specify colors and styles. You can specify the color name. So I can just type white. You can specify the hexadecimal color if you know what that is. You can also specify the RGB color by using RGB. Then putting in the red, blue, and green values. Or you can also just use the built in color chooser. So let's see how that works. Go to edit, color chooser. This is the native operating system color chooser for Windows. The Mac one looks vastly different, which will take a look at in just a minute. So you can use swatches and you can also define your custom colors using hue, hue, saturation, and luminance or RGB values. Or you can just drag around the slider until you see a color that you like. So in our case, we're going to choose white and click OK. And so what will automatically insert the hexadecimal color there for us? We're also going to change this border style. We're going to change the border style from the inset look to a solid border. And we're going to set the border width to one. Let's save that. And go back to our form now. And you'll see that our form has changed in real time. So you can actually watch these styles change as you're doing it. Now here's a little tip for you. Change the location of this tab so that as you're changing your styles, you can see how they update in real time. So now I have my styles on the top and my form on the bottom. The next thing that we're going to take a look at is this button. It's kind of red. And the offset seems to be a little bit strange. So let's see what's going on with that. We'll scroll down here to the button at the bottom. The color is red and oh look, there's a margin on there. So 10 pixels from the left, 10 pixels from the top, 0 from the right and 0 from the bottom. And the font is 11 point bold Verdona. So let's go ahead and change some of these properties. Let's take off the margin property. And we'll change the color to gray. So let's save that style, control S for save. And as we do, you can see that the button updated down below. The next thing that we'll do is come up here and have a look at our labels. So the label, the color is this dark red color. The worst style is solid, which means that it's going to have a line around there. And the font is 10 point bold Verdona. So let's go ahead and change that as well. Let's make the border style solid, but we're going to set the border width to zero. And let's see what that does, control S for save. It takes the line off. And let's change the color here. So I'm going to select the color. Again, I'm going to use my color chooser. And let's make it this dark gray color. And finally, what we're going to do is we're going to write a line, the text. So we're going to say text a line, write. And then we'll save this. And it's applied instantly. So that looks pretty good. So you're probably thinking to yourself, well, how does he know what all the properties are and what all the values are? As I mentioned before, this is cascading style sheets, but servoit isn't support everything that's in the cascading style sheet specification to find out what servoit actually does support. It's best to go over to the servoit wiki. So here on wiki.servoit.com. If you go to the programming reference, expand the miscellaneous tab, and you can click on supported CSS style properties. And this will give you a list of all of the properties that servoit supports. If you're going to use styles and I really strongly suggest that you do, you really need to check out this page to see what's possible. All right. Now coming back to our style, as we scroll down, we can see that the tab panel has an inset style and it also has a green background. So let's come up here to the tab panel. And as you can see, the border style set to inset. We can set it to outset, for example, so we can see how that looks. Let's change the color to white, since we know that that is 6-F's. And again, we'll save it. And then you can see down here that it changed to an outset bevel rather than an inset bevel. Or you can do like we did for the form and set the style to solid. And if you save that, then it'll be just a solid line. The next thing we're going to take a look at are the field properties themselves. So let's go up here to the field. And again, we have the same sorts of things that should start looking very familiar to you. You have the background color, the border style, the font, text alignments, margins on them. So I'm going to change this border style again. We're going to call it solid. And the font size are okay. So I'm going to click save or control S. And now we have solid styles. And again, we can go through here and do this for every single type of item on here so that we get the style looking the way that we want it to be. Now what I'm going to do is I'm going to make a subclass of this field because I want a field that has a different style to it. So what I'm going to do is I'm going to type field and then write a line. And then you have to open up with a curly brace and close with a curly brace. And then in between here will be the style. So I'm going to make a new line tab over so it looks nice. And I'm going to say text align, write. And that's it. Now I'm going to say the style. Let's take a look at how this looks in our smart client. First we need to save our customers form. Now let's go ahead and launch it. While not the most gorgeous thing in the world, at least it doesn't have a green background and red labels. Now let's see how we can take these style classes and apply them to individual objects. I'm going to move my tab back up to the top here. And I'm going to make this customer ID field right aligned. Now I could do it simply by coming over here to the horizontal alignment and choosing right. But since we have a style already set up, that's going to be a much more efficient way for your solution to load and for you to be able to reuse the same style over and over again and not have to hunt down on every single form where you write a line something where you didn't mean to. So to change a style classes object, we're simply going to scroll down to the bottom. And here where it says style class, we're going to click. And now we see all the field style classes right now we only made one. It's called write a line. You could have as many different ones as you want to for different font sizes, bold alignments, field colors, field borders, whatever you want to do. And that also works for each type of object. So you can have different radio button styles, different tab panel styles, different combo box styles, different portal styles, different button styles. So in this case, we're going to change it to a right align. We'll save the form control S. And now when we open it up in the smart client, sure enough, we have our right aligned customer ID. Now what if you want to change the font? We saw that there's a color chooser, there's also a font chooser. And since our radio buttons are a need of a bit of a help, let's go ahead and change that. So we'll take this font line out. And now we'll come over to edit and we'll have the font chooser. And so here we can change it to, for example, aerial 12 point. So you can even change the color. Let's make it gray and say, OK. Now notice that it just put in the font name. So you still have to have the font tag in front of it. And you still have to close it with a semi colon. So let's save that. And if we come back to our form and we preview it in the smart client, we'll see that the radio buttons have changed to be aerial. Now let's pop back over to my Mac version for just a second. And let's take a look at the color chooser over here. So here on the Mac, if I was going to change the background color of the field, on the Mac, the menus are at the top. They're not part of the window like they are in Windows. So I'm going to go off screen and choose it from the edit. Color chooser. And here you can see that I have the Mac color chooser. So it's got sliders, the blend tool, different color palettes, the spectrum, and the prey on box. So I can choose a color from here. And once I do and close it, it puts in the color for me. The font chooser looks a little different as well. Let's go ahead and do that and choose the font chooser. And here I get the Mac font chooser, like you do in every other application. To choose the font, choose the one that you want and close the box. You can also go ahead and assign styles to all of your subforms as well. If we take a look at our solution in the smart client, you'll notice that our employees and our suppliers are still using the default style, even though our main form is using our new sample style. So there's an easy way to apply styles to more than one form at a time. Simply come over, expand the forms node, and select the forms that you want by holding the shift key down, and then come over to the properties and choose the style name. And serve y will open up both of those forms and apply that style to both the forms at once. You simply need to then save it with control S. And then when we preview in a smart client again, you'll see that the forms have changed their styles. Now keep in mind that styles are stored. Your styles are stored in the resource project. And when you create your solution, you choose which resource project you're going to use. Now because I've imported the sample solution, sample CRM, it had its own resources project and it had its own styles. And so what you can do on your solution is you can come up here to the active solution, right click, and say change resources project. So the resources project that the current solution is using is one called resources. And notice that there's a second one called servoy local host resources. This is the one that the Servoy sample CRM uses. So let's click OK. And now if we come take a look at our styles, our sample style is missing from here because it wasn't created in this resources project. It was created in the resources resource project. So here's servoy has provided a whole bunch of other sample styles. Now you can go ahead and use these styles. You can open them up. Let's take a look here at Dart Gray. Let's double click Dart Gray. And here is the style for Dart Gray. Now what we can do is we can copy this. So we do control all for copy, control C, and we'll close this. Now we'll come back to our styles, change the resources project, back to resources, click OK. And now when we click on styles, we'll see our sample style. And we can create a new style. We'll call this one servoy Dart Gray. And just click finish this time. Now we're going to do control a for select all and paste. And now we have the same style from a different solution. Let's go ahead and save that. I'm going to come here to my customers form now. And we're going to change it from sample. Now we have our Dart Gray. Let's put that on there. And you can see it dramatically changed every object live. So let's go ahead and save that. Let's open it up in our smart client. And now we see this new Dart Gray style. And we see that our two subforms are still using our sample style. There is one more thing that I wanted to show you when it comes to stylizing your forms. Oftentimes you're going to have forms that you want to reuse or forms that need to be a default size. And there's a couple of different ways that you can save templates of objects. And those templates can be individual items. They could be a whole set of items or they can be even entire forms. So let's see how that works. I'm going to select all of these objects. And I'm going to hold down my shift key and use my down arrow and make them 22 pixels high because I want them to look good by default in the Mac OS as well. So I've done that. And now I'm happy with this label and I'm happy with this field as far as their sizing goes. So I'm going to select both of them and I'm going to right click. And I'm going to say save as template. And I'm going to call this default field and click OK. Now here, if I click on my templates, you'll see that there's a default field object here. Let's do something else. Let's also come to our parts tab. Let's add a footer and come back to our design. And let's make the footer larger here. And so for example, if I know that this is the size formling that you use over and over again in tab panels, I can temporarily delete all these objects. So I'm going to select them and just delete them. Now I'm going to right click on the form and say save as template. And I'm going to call this tab panel. Base form. Now I can undo. So I get all my objects back and let's say that. And I'm going to delete the footer part. So just simply remove it. Go back to my design. Save. Now when I create a new form. I have the option of choosing a template. So here's my tab panel base form. I can still go ahead and change the table that it's based on. I can also choose the style that I want to use. We'll make it this dark gray. Choose some fields. And click finish. Notice how these fields are the default 20 pixels high. That's not what I really want. So I'm going to select these fields, take them off. What I really want is I want to come back to my templates. And I want to take this default field and I'm going to drag it onto this object. And now if you notice, so what gives me a label and a field, their stylized now according to the style of this form, but they're also grouped together. To ungroup them. And now we have a field and a label that are set to the default size that we want to use. Notice how the templates is in your resources. So it works just like styles. Different resources can have different templates and different styles. I hope you see how powerful styles are in Sir boy. And you should start using styles for all of your solutions. Don't hard code properties. You're going to save yourself a ton of work in the end. Thanks for watching.