Wt

h1. Using CSS

{{toc}}

h2. Introduction 

If you are a typical C++ programmer then Wt is probably your first foray into the field of web applications, or at least this have been the case with me. In this text I'll try to explain the ideas and methods of work regarding the Cascading Style Sheets, or CSS from the Wt programmer's point of few. Learning and applying CSS to my application has taken me a few days, I hope that thanks to this text you'll be able to cut that time down to a few hours and I assure you that these will be a few hours well spent.

h2. What is CSS and why do we need it? 

First a bit of a history. In bad old times the specific look and layout of a web page has been achieved by using some special HTML tags, like font, b, i, table etc. This led to several problems, like having to repeat the formatting information in every place you need specific look. If the look description was complicated this resulted in serious overhead, also changes to the layout required modifying the tags on all pages. And the only way to achieve a specific layout were tables and frames.

The bad thing got just worse when browser wars have erupted. Microsoft and Netscape started creatively reinterpreting standards and largely forced web designers to develop pages specifically for one browser - namely Internet Explorer. Creating universal layout, or even any good looking layouts, had become a kind of dark magic.

CSS, short for Cascading Style Sheets, is what was created by W3 consortium as a solution to this problem. It is a technique used to describe how HTML (or even other XML) document is presented. I wrote "presented", not "displayed" because in theory it allows you to use different styles for different output devices, including computer displays, TVs, cell phones but also printers, Braille displays and speech synthesizers, although Wt doesn't allow specifying multiple CSSes in current version. During the last few years CSS has become the main method for creating web page looks and layouts because:

* it allows for far more and better visual effects than the methods of old;

* it is standardized and browser display it at least in a similar way;

* it allows for the data to be separated from the layout - and reduces overhead;

* it is far easier than old layout methods.

Wt already uses CSS, so called inline CSS, to implement specified widget decorations and positioning. In this way, one could style the program mostly through C++ code. Still using external CSS will give you a lot of advantages:

* move the positioning and other visual informations from the code to the meta data;

* reduce HTTP response size;

* allow dynamic change of the application look (ie. skins).

* allow sharing CSS style between your application and static parts of your web site.

h2. Short description of the CSS 

CSS is grammatically a very simple language. Let's take look at an example:

<pre>

body {

<pre>

    color:black;

    font-family:sans-serif;

    font-size:x-small;

    font-size-adjust:none;

    font-style:normal;

    font-variant:normal;

</pre>

//    font-weight:normal;

/*    line-height:normal;*/

}

</pre>

So, "body" selects types of elements to which the style applies. In this case it applies to everything enclosed in body tags - that means the whole page. You may refine the selectors by appending other stuff, or combining several selectors:

* "#elementid", selecting one specific element in the DOM tree with given id (not very useful since Wt generates and manages these internally and in an undocumented way).

* ".elementclass" applies to many elements with the same class.

* "a:hover", a so called modifier means in this case a link hovered over by mouse pointer.

* ".main_column div img:hover" is a nested selector which in this case points to any hovered image inside a div inside an element with class "main_column".

If you do not care about the element type (a good habit), you can use "*" to select any type, and rely only on the style class. For example, "*.emphasized" selects all elements with style class "emphasized".

After the element selector, in curly braces, there is the style description, build of lines in form of "property: value;". Then "//" and "/* */" are, as you might guess comments.

An element gets its style from several sources: built-in browser style, external style sheet, internal style sheet, some elements from its parent style and finally the inline style. When two styles specify the same property, the one from the style defined closer to the element is taken.

To learn more about CSS go to "W3schools":http://www.w3schools.com/css/ - you will find a tutorial a lot of examples and (most important) a CSS reference - much better than what I could ever write myself.

h2. CSS and Wt for Programmers

h3. Part 1 - Inspiration 

It is a common practice to have first an artist prepare the website design in some graphic program and then a web designer convert it to a CSS. It is quite possible that you don't have such luck and yourself are an aesthetically impaired programmer. In that case I suggest you go to some site offering a free web designs, the two I know are: "Open Source Web Designs":http://www.oswd.org and "Open Web Design":http://www.openwebdesign.org. You can also go to "CSS Zen Garden":http://www.csszengarden.com/ - their styles are very original and inspiring, still very elaborate and designed for one specific document, so they will need a lot of remaking to fit with your project. I'm also not sure about the copyright that they use. Still you should definitely visit the Zen Garden, even if only for your personal amusement.

One more advice - when looking for a nice web design look rather for one that pleases you visually, not necessary one that could perhaps easily fit with your project. To work with Wt you'll still have to adjust it heavily, so you can as well modify it's layout. Oh, and don't tell anyone that I've told you this, but in many cases you can just easily grab a CSS of any web page you find pretty - just take a look at the header.

h3. Part 2 - Adaptation 

So, you've downloaded some nice web design and want to adapt it for your application, possibly with an example HTML. The design will probably need some refurbishing first, and we will use the example HTML for that. We will also need two tools: "CSS validator":http://jigsaw.w3.org/css-validator/ and "a good DOM and CSS inspector":https://addons.mozilla.org/firefox/1843/. You'll also need a web browser, or even better, a few of them.

Before you do anything, you'll also have to make a decision: do you want a fixed design (for specific resolution) or a liquid one (adapting to current resolution of the screen). In fixed designs you specify dimensions in pixels, which makes them easier and allows for some more elaborate looks that need pixel-perfect precision in positioning. In liquid designs you specify dimensions in percents of the screen size and in font elements (em), or use the descriptive font specifiers - it almost completely denies tricks requiring pixel-perfect precision, but it can better adapt to changing screen and font sizes. In neither designs you use the pt unit - this one should be only used in Style Sheets for printers. You can also use a mixed approach - it contains all problems of both designs and some of their advantages too - unfortunately this is the approach artists creating those free web designs usually take.

So, now you should go through the whole CSS and change the dimensions accordingly. If you want to use a liquid design I'm afraid you might have to remove the background image if i.e. it included shades for the text boxes.

Next thing is changing the selectors. Most designs use tag types for look&feel style part - thats OK with us. But then they usually use #elementids for positioning styles and thats a problem. It is a problem because Wt automatically assigns some ids to elements, as a programmer we are only able to set the element class. But thats simple - just change the ids for classes, both in CSS and HTML.

h3. Part 3 - Repositioning 

Now the fun part begins - we'll be changing the layout to fit to our application. It may help to know the tags generated by Wt for different widgets, although use of the "*" selector in general suffices. They are:

* WAnchor - a;

* WBreak - br;

* WCheckBox - input;

* WComboBox - option and select;

* WContainerWidget - div;

* WFileUpload - form and input;

* WGroupBox - fieldset and legend;

* WImage - img;

* WLabel - label;

* WLineEdit - input;

* WPushButton - button;

* WRadioButton - input;

* WScrollArea - div (probably with "overflow: scroll" style);

* WTable - table, tbody, tr;

* WTableCell - td;

* WText - span, sometimes two nested spans;

* WTextArea - textarea;

* WTimerWidget - span.

Still the easiest way to specify the style is usually using the class selector. If you haven't read already about the CSS positioning, here is a very quick "tutorial":http://www.barelyfitz.com/screencast/html-training/css/positioning/. Now, I'll share with you some tips&tricks I've learned:

* work from document root down, using example HTML and divs to create stubs from your application widgets;

* to center an element horizontally you specify elements width and set margin-left and margin-right to auto, you might also use text-align: center in superior element (this is a work-around for IE);

* if you want to have an image settable via CSS then use it as a background for an empty element;

* if you use floats, remember that sequence of elements matters here;

* use Firebug, to check the ultimate styles for elements, as well as sizes of the margins and paddings;

* Firebug displays the real style used, so it might help you find mistypes;

* if you work remotely make sure the cache between you and the server reloads the files correctly - in Mozilla Ctrl+shift+R is used to force reload, in IE it's F5 (I'm not completely sure);

* if you need a placeholder text, you might use "Lorem Ipsum", a nice generator can be found "here":http://www.lipsum.com/ and a typical text is:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

After finishing this stage, you should have something like "this":http://astariand.com/csstest/.

h3. Part 4 - Applying 

If you've done everything so far the last stage should be quite straightforward. Use the WApplication::useStyleSheet() function to apply your CSS, then work your way from the widgets root down and use WWidget::setStyleClass to set proper styles, optionally removing all the WTables you might have used for positioning before, as well as positioning methods. If some widgets aren't yet implemented simply use WContainerWidget with a Lorem Ipsum WText inside instead.

FireBug (an extension plugin for FireFox) is useful to pinpoint any problems, and to try to fix them first interactively by modifying the style of a single element. It is very useful, as it lets you browse the DOM tree that is dynamically created with Ajax requests. Use its 'Inspect' feature to get to the widget you wish to examine. The tips from Part 3 also apply here.

When you're done try to think about some finishing touches - this is when you'll be able to fully appreciate CSS flexibility.