How to change looks of any component

Vaadin 6 / 7 / 8 Framework UI
1

How can I make new looks for example Panel component? Can you provide tutorial to accomplish this?

2

There are two approaches:

  1. Easy one: CSS
  2. Hard one: JS

CSS:

  • Create your own theme (just look in the lib/themes directory for demo theme. Use it as a example.)
  • Add your own CSS
  • Override panel styles (look into corporate theme css for class-names)

JS:

  • As above, but also add a JS-file. Look at the example below:

/** My own theme class extends CorporateTheme, lets call it RedTheme */
itmill.themes.Redtheme = itmill.themes.Corporate.extend( {

/** Corporate theme constructor.
 *
 *  @param themeRoot The base URL for theme resources.
 *  @constructor
 *
 */
construct : function(themeRoot) {

	// Call parent constructur (explicit call is necessary)
	arguments.callee.$.construct.call(this,themeRoot);
	this.themeName = "redtheme";
},

/** Register all renderers to a ajax client.
 *
 * @param client The ajax client instance.
 */
registerTo : function(client) {

	// Register all parent rendering functions
	arguments.callee.$.registerTo.call(this,client);
	
	// Register additional renderers
	client.registerRenderer(this,"panel",null,this.renderRedPanel);
},

// Just an example of a panel renderer
renderRedPanel : function(renderer,uidl,target,layoutInfo) {
			// Supports styles "light" and "none"

			// Shortcuts
			var theme = renderer.theme;
			
			var style = uidl.getAttribute("style");
			
			var borderStyle = "panelborder";
			
			// Create component element
			var outer = theme.createPaintableElement(renderer,uidl,target,layoutInfo);
			if (uidl.getAttribute("invisible")) return; // Don't render content if invisible
			
            if ("none"!=style) {
			    theme.addCSSClass(div,"outset");
            }
			if ("light"==style) {
				theme.addCSSClass(div,"light");
				//borderStyle += "light";
			}
			
			// Create extra DIV for visual layout
			var div = theme.createElementTo(outer,"div");
            if ("none"!=style) {
			    theme.setCSSClass(div,borderStyle);
            }

			// Create default header
			var caption = theme.renderDefaultComponentHeader(renderer,uidl,div);
			theme.addCSSClass(caption,"panelcaption");
            if ("light"==style) {
				theme.addCSSClass(caption,"panelcaptionlight");
			}
			
			// If no actual caption, remove description popup listener
			if(caption && caption.className.indexOf("hide") > -1) {
				client.removeEventListener(div,undefined,null,"descriptionPopup");
			}

			// Create content DIV
			var content = theme.createElementTo(div,"div");
			theme.setCSSClass(content,"content");

            // Apply width and height
            theme.applyWidthAndHeight(uidl,outer);
            
            // TODO looks ugly, refactor
            var w = parseInt(theme.getVariableElement(uidl,"integer","width").getAttribute("value"));
            var h = parseInt(theme.getVariableElement(uidl,"integer","height").getAttribute("value"));
            if (h && h > 0) {
                content.style.height = (outer.offsetHeight - caption.offsetHeight - 14) + "px";
            }
            if (w && w > 0 && !window.XMLHttpRequest) {
                // fix width for IE 6
                // offsetwidht - scrollbar + border
                content.style.width = (content.offsetWidth - 14) + "px";
            }
 			
			// Render children to div
			theme.renderChildNodes(renderer, uidl, content);

});