Why CSS engine?

This section explain why it's interesting to use TK-UI CSS engines in your existing SWT, Swing (or others) applications :

  • Customize SWT, Swing... user interface with CSS styles.
  • Integrate TK-UI CSS engine in your desktop application is very easy and can be done with existing Swing, SWT application. Please read SWT Swing engine et SWT CSS engine documentation for more informations.
  • CSS engines are very configurable. You can improve TK-UI CSS engine to add your own CSS properties , to manage selectors as you want...
  • TK-UI CSS engines can apply CSS styles to any Java Object . TK-UI provide several implementation for Swing, SWT and XMl (to update XML DOM Document by using CSS styles). It is possible to implement your own CSS Engine to manage another type as Swing or SWT.

Customisation

Today user whish more and more customize her application by selecting Color, Font. CSS is used into WEB word and it is standard, powerfull way to customize WEB application. Zen Garden is a good sample which show the powerfull of CSS styles.

The 4 following screenshots show the customization of SWT Chat user interface with CSS styles. This sample comes from this article . You can find this sample into SWT distribution into org.akrogen.tkui.css.swt.examples.chat.ChatWithStylesAppliedAtRuntime Java class.

Here screenshot of SWT Chat user interface with no styles applied :

After applying Matrix.css CSS styles : 

Tree, Text#output {
	background-color: black;
	color: white;
	background: url(./images/matrix_back.jpg);
}

Text#input {
	background-color: black;
	color: red;
}

CTabFolder {
	background-color: black;
	color: white;
}

CTabFolder:selected {
	background-color: green;
	color: white;
	font-weight: bold;
}

SashForm, Shell, Button, Label {
	background-color: green;
}

ToolBar {
	background-color: white, green, 100%;
	color: black;
}

CLabel {
	background-color: black;
	color: white;
}
The Chat user interface has this look and feel :

After applying Osx.css CSS styles : 

Shell, SashForm, Button, Label {
	font-family: "Lucida Grande",Serif;
	font-size: 11;
	background: url(./images/osx_back.jpg);
}

ToolBar, CLabel {
	font-family: "Lucida Grande",Serif;
	font-size: 9;
	background: url(./images/osx_back.jpg);
}

Tree {
	font-family: "Lucida Grande",Serif;
	font-size: 11;
	background-color: lightgrey, white, white, lightgrey, 10%, 90% 100%;
}

CTabFolder:selected {
	background: url(./images/osx_tab.jpg);
	background-color: rgb(162,208,242);
	color: black;
}

CTabFolder {
	font-family: "Lucida Grande",Serif;
	font-size: 11;
	font-weight: normal;
	background-color: lightgrey;
	color: black;
}
The Chat user interface has this look and feel :

After applying Vista.css CSS styles : 

Shell, Tree, Button, Label {
	font-family: Roman;
	font-size: 10;
	background-color: rgb(233,234,238);
	color: rgb(70,70,70);
}
SashForm {
	background-color: black;
}
Text {
	font-family: Calibri;
	font-size: 10;
}
ToolBar {
	background-color: gradient,
		white,
		white,
		rgb(214,222,223),
		rgb(219,226,228),
		rgb(210,217,219),
		rgb(224,229,231),
		white,
		white,
		5%, 5%, 45%, 45%, 98%, 98%, 100%;
	color: white;
}

CLabel {
	font-family: Calibri;
	font-size: 10;
	background-color: gradient, 
		rgb(67,71,82), 
		rgb(59,62,70), 
		rgb(47,48,48), 
		rgb(76,76,76), 
		40%, 40%, 100%;
	color: white;
}

CTabFolder:selected {
	background: url(./images/vista_tab2.jpg);
	color: white;
}

CTabFolder {
	font-family: Calibri;
	font-size: 10;
	background-color: rgb(233,234,238);
	color: rgb(70,70,70);
}
The Chat user interface has this look and feel :