CSS styling your Smart Pascal app

When you know something and work with it for a long time, human beings tend to make the mistake in believing that everyone else automatically knows the same thing – and instantly get what you are on about.

Having read some of the feedback email and comments, it had begun to dawn on me that — perhaps a lot of those interested in Smart Mobile Studio havent really understood how CSS works in our little RTL. And why should they, like most indie companies our documentation is half-blog half-wiki like (with the exception of the Smart book and what is someone tagged us with on wikipedia).

I thought it would be worth 5 minutes of your time to show you some really awesome features of Smart Mobile pertaining to CSS and creating fantastic looking applications.

The Delphi side of things

In Delphi everything is either owner-drawn or system-drawn. Most of the components you can buy, like the massive packages delivered by Developer Express and TMS – are essentially controls written from scratch, being drawn line by line and pixel by pixel in the Paint() method of TCustomControl.

The system drawn components are naturally those that ship with Windows, like TTextbox, TButton, TToolbar and the likes. Where the VCL implementation is simply a wrapper over an already existing codebase in Windows.

Firemonkey breaks somewhat with this, in that it’s initially completely owner-drawn. Taking full use of hardware accelerated GPU rendering (OpenGL or DirectX).

The Smart Pascal side

Under HTML5 there are two ways to go. We could re-draw the display just like Delphi does by overriding the Paint() method of TW3GraphicControl – and believe it or not the performance is pretty much the same. Actually faster in a lot of situations since Delphi is (and I hate to say this) graphically outdated. It havent changed at all since the days of Windows 95.

The second way to go is via CSS3. Which incidentally is also hardware accelerated.

When you create a visual control in Smart Mobile Studio, be it based on the built-in controls of the browser (a text box for instance or a button) or our own TW3CustomControl base which “mimics” the VCL framework — they all adopt a CSS style.

This is where things get’s interesting, because in the code for TW3CustomControl there is a setting which says “automatically use a CSS style name identical to the Smart Pascal control name“. This is actually a brilliant solution to what could otherwise be a potential problem.

In short, if you create custom-control called TMyGrid, then this control will automatically try to use a style with that name.

So in order to skin this control you simply add a style to the CSS file which is created for each project, add a new style to it:

.TMyGrid {
  background-color: RGBA(255,255,255,1.0);
}

And simply define the CSS code for the components. You can also inject the CSS by code – which can be somewhat helpful, since the concept of styling means that you have to write custom CSS for each theme.

You can also, at any time, switch the CSS class for any control (even those you drag & drop on the form layout) by altering the “StyleClass” string property.

It’s that easy to create fantastic looking CSS3 based styles for any Smart Pascal control (!)

Play around with this under Smart Mobile Studio. What happens if you set the StyleClass property of a button to “TW3Panel” for instance?

And what about CSS animations?

There is a wealth of online CSS examples and ready-made CSS files for awesome looking controls – and you can use them all in your Smart Pascal projects (!)

Defining your own classes

Another handy trick when working with Smart Pascal controls, is to create your own local types for already existing components. For instance if you use a TW3VerticalScrollbar in your project and want a different style for it, you simply declare a new custom scrollbar like this:

type
TMyScrollbar = Class(TW3VerticalScrollbar);

Now you can simply copy and paste the TW3VerticalScrollbar CSS at the bottom of the CSS file, and completely re-model it (and rename it to TW3VerticalScrollbar).

Also remember that CSS is short for “cascading style sheets” with emphasis on “cascading”, meaning that styles follow the same ancestor chain as classes in Delphi does. You can inherit a new style from an older style – and the graphical results are mixed. So if the parent style has a gradient, and you inherit from this and add borders — then the final style will have both a gradient and borders.

That’s very cool!