This Servoy tutorial demonstrates how to use CSS (Cascading Style Sheet) UI components in Servoy layouts, and how to capture callbacks from them so you can fire events events in Servoy.

If you do some research on the Internet, you will see that they are building some amazing web controls using pure CSS. Web developers are using CSS to build gorgeous buttons, menus, tab panels, etc. Wouldn’t it be sweet if we could use these CSS controls in our Web Client solutions?

Well, who said we couldn’t use CSS controls on our Servoy forms? I don’t think anyone said that. But Gary, how do we actually get CSS UI components to work seamlessly with Servoy? Ah, I’m glad you asked that; this is what this Servoy tutorial is all about. I am going to show you two examples of how to do it, one using an external reference to the CSS style sheet, and the other using in-line CSS. I’m also going to show you in this tutorial how to capture the onclick event from the CSS control, and generate a callback to Servoy using the WebClientUtils plugin. If you are not familiar with this plugin, head over to Servoy Forge and grab it now; you need if for this Servoy tutorial, and we will be using it in future tutorials I have planned.

Okay, so let’s start out with something we need in every application, a menu. If you look around the web there are kinds of styles and variations of CSS menus; some free and some commercial. For this tutorial I chose a vertical CSS3 menu that is kind of basic, but free, and it does have the pop-out child menus that I wanted. It will be more than good enough to drive home the point of this Servoy tutorial.

Keep in mind that we are keeping this tutorial basic; we are going to do everything in the HTML so you can see what is happening. In the next tutorial, we will do it differently, so don’t jump ahead and start emailing me suggestions.

To get started, I created two globals that I will use to hold some HTML. I use a global because I want to retain the HTML, even when Servoy refreshes the page, like with the onShow event. I intend to load the global with the HTML during the forms onLoad event. Yes, this type of global is an excellent thing to put into a cache that you reference by key, as demonstrated in the Servoy tutorial “Using an Object as a Cache“.

On the form that I will be using the control, I create a loadHTML function and set the form’s onLoad event to call it. In this function, I am building the HTML that will do all the work, like showing the CSS menu, capturing the onclick event from the menu, and generating the Servoy callback via the WebClientUtils plugin. It’s really very basic HTML, so look it over carefully, as we step through what is happening here. You may need to pop-up the code into a new window so you can read it all.

So in the form onLoad event, the global “_html_menu” will get loaded with all this HTML. All that remains is to place an HTML area on my Servoy form, use the global as the dataprovider, and write the “runMenuHandlerServoy” callback method. In this example, we are just outputting to the console whenever we click on any menu or sub-menu item.
Here is what the menu looks like when viewed in Web Client. As I click on any one of the menu items, the console outputs the item ID. Obviously, you could call any method you want; you are back in Servoy after the CSS menu has been clicked. The CSS menu is now fully integrated into your Servoy layout. Cool, right?

Okay, so CSS menus work. But what about tab panels and other CSS UI components? Sure, they work the same way. If you have ever been bored with the native Servoy tab panels, then work through this example with me. I am going to take a simple CSS tab control and I am going to use it in Servoy, changing out Servoy forms as the user clicks on the CSS control. Ready? Here we go.

Exact same method as before; use a global to hold the HTML, put the text area onto the layout, set the dataprovider to the global, write the loadHTML function for the onLoad event, and finally write a callback method to process the tab ID clicked on by the user.

This time, instead of referencing external CSS, I embed the CSS directly in the HTML. It’s another way of doing it and works perfectly fine. Personally, I prefer to reference the external CSS in the webapps folder for a number of reasons:

In the <body> tag, you can see where I use the same technique to embed an ID for each tab, and pass that in a “runTabHandler” method in the onclick event. This method will in turn pass the parameter to the Servoy “runTabHandlerServoy” callback method. Yes, we will learn better ways of doing all of this in the future; stop jumping ahead.

Here is what the CSS tab panel looks like when I render the page in Web Client. Pretty nice, right? Well, there are much nicer ones out there, but it would have been more than we needed for this example. I do like the drop shadow effect, rounded tab corners, etc.

Once I had my CSS tab panel rendering fine, I placed a Servoy tab panel over top of the HTML area. I used a green background so I could align the Servoy panel perfectly over top of my HTML area. The reason for doing this, is so that I will be able to swap out Servoy forms on the tab panel when the user clicks different tabs in the CSS control.

Once I had it positioned nicely, I set the Servoy tab panel to transparent, and I wrote my  “runTabHandlerServoy” callback method. Basically, all I need is simple logic to put the right Servoy form onto the tab based on the ID received in the “eventName” parameter.

I created the three Servoy forms, and changed the labels on each so it would easily demonstrate that the switch was happening. I placed the first form onto the Servoy tab panel, so that when the Web Client loads the form, we are looking at the right Servoy form with the CSS control on “Tab 1”.

Click “Tab 2” on the CSS control and the right Servoy form is instantly shown on the tab panel, giving the illusion that it is part of the CSS control itself. Works perfectly! Wasn’t that easy? Now we have a new CSS/Servoy hybrid tab panel working. Everyone say “ooohhhh….sexy!”.

Okay, so maybe you think that doesn’t look that much better than native Servoy controls. Well, my friends, we did what we did to keep it simple. If you want to see what is possible, here are some screenshots of CSS control configurations I have used to wet your appetite.

This is one commercial tab control, with five different themes, and one commercial menu with a few color schemes (I can’t really demonstrate the effects , but believe me, they are numerous and very impressive).

Now everyone say again “ooohhhh….sexy!”

Alright, so there you have it. A Servoy tutorial on how to use CSS UI components with callbacks in Servoy. Using this technique you can take pretty much any CSS control and integrate it tightly into your Web Client application, making gorgeous interfaces that will knock your boss’s socks off. Maybe its time to approach him about that raise again?

I’m going to build on this technique in a future Servoy tutorial and explore how to use JQuery and DHTML components in Servoy, which I am sure will further enlighten you. There is nothing cooler than navigating to a Servoy form that shows a fully interactive, commercial grade, high-quality chart, schedule, or Gantt, completely integrated with your Servoy application.

That concludes this Servoy tutorial. I hope you enjoyed it!

• Tweet