Tk-UI

CSSSerializer API

When you wish write CSS style sheet for existing SWT, Swing user interface, it's very usefull to start with base of style sheet to simplify the writing of the sheet. CSSSerializer can be help you, because it can generate CSS style sheet from existing SWT, Swing user interface , in other words CSSSerializer loop for each widgets of the user interface, compute the CSS styles and generate the style sheet.

This section describe how

generate style sheet with existing SWT user interface with selectors SWT .
generate style sheet with existing SWT user interface with selectors HTML .
generate style sheet with existing Swing user interface with selectors Swing .
generate style sheet with existing Swing user interface with selectors HTML .

CSSSerializer using

CSSSerializer serialize method is able to generate style sheet of existing user interface. CSSSerializer use CSSEngine instance and it you configure it to manage the selectors as you wish . Here how use CSSSerializer :

CSSEngine engine = ....
CSSSerializer serializer = new CSSSerializer();
StringWriter writer = new StringWriter();
serializer.serialize(writer, engine, shell, true);
System.out.println(writer.toString());

CSSSerializer/SWT

SWT samples are based on following SWT code :

Display display = new Display();
Shell shell = new Shell(display, SWT.SHELL_TRIM);

// Text
Text text1 = new Text(shell, SWT.NONE);
text1.setText("bla bla bla...");

// TextArea
Text textarea = new Text(panel1, SWT.MULTI);
textarea.setText("bla bla bla...");

// Label
Label label3 = new Label(panel1, SWT.NONE);
label3.setText("Label 3");

// Create Button
Button button = new Button(panel1, SWT.BORDER);
button.setText("SWT Button");

// Create Button [SWT.CHECK]
Button checkbox = new Button(panel1, SWT.CHECK);
checkbox.setText("SWT Button [SWT.CHECK]");

// Create Button [SWT.RADIO]
Button radio = new Button(panel1, SWT.RADIO);
radio.setText("SWT Button [SWT.RADIO]");

// Create Combo
Combo combo = new Combo(panel1, SWT.BORDER);
combo.add("Item 1");
combo.add("Item 2");
combo.select(0);

SWT/SWT selector

Here code sample whith CSSSerializer to generate style sheet of SWT user interface with SWT selectors :

CSSEngine engine = new CSSSWTEngineImpl(display);
CSSSerializer serializer = new CSSSerializer();
StringWriter writer = new StringWriter();
serializer.serialize(writer, engine, shell, true,
		CSSSWTSerializerConfiguration.INSTANCE);
System.out.println(writer.toString());

This code generate this style sheet :

Button[style='SWT.CHECK'] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Text {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Shell[style='SWT.RADIO'] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Button[style='SWT.RADIO'] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Text[style='SWT.MULTI'] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Button[style='SWT.PUSH'] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Label {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Combo {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

Composite {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

SWT/HTML selector

Here code sample whith CSSSerializer to generate style sheet of SWT user interface with HTML selectors :

CSSEngine engine = new CSSSWTHTMLEngineImpl(display);
CSSSerializer serializer = new CSSSerializer();
StringWriter writer = new StringWriter();
serializer.serialize(writer, engine, shell, true,
		CSSHTMLSerializerConfiguration.INSTANCE);
System.out.println(writer.toString());

This code generate this style sheet :

input[type=text] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

body {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

select {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

textarea {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

input[type=radio] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

div {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

input[type=checkbox] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

label {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

input[type=button] {
	cursor:auto;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(240, 240, 240);
	font-size:9;
	font-style:normal;
	color:rgb(0, 0, 0);
	text-transform:none;
	font-family:"Segoe UI";
}

CSSSerializer/Swing

Swing samples are based on following Swing code :

JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel panel = new JPanel();
frame.getContentPane().add(panel);

// Text
JTextField text1 = new JTextField();
text1.setText("bla bla bla...");
panel.add(text1);

// TextArea
JTextArea textarea = new JTextArea();
textarea.setText("bla bla bla...");
panel.add(textarea);

// Label
JLabel label3 = new JLabel();
label3.setText("Label 3");
panel.add(label3);

// Button
JButton button = new JButton();
button.setText("Swing Button");
panel.add(button);

// Checkbox
JCheckBox checkbox = new JCheckBox();
panel.add(checkbox);

// Radio
JRadioButton radio = new JRadioButton();
panel.add(radio);

// Create Swing JComboBox
JComboBox combo = new JComboBox();
combo.addItem("Item 1");
combo.addItem("Item 2");
panel.add(combo);

Swing/Swing selector

Here code sample whith CSSSerializer to generate style sheet of Swing user interface with Swing selectors :

CSSEngine engine = new CSSSwingEngineImpl();
CSSSerializer serializer = new CSSSerializer();
StringWriter writer = new StringWriter();
serializer.serialize(writer, engine, frame, true,
		CSSSwingSerializerConfiguration.INSTANCE);
System.out.println(writer.toString());

This code generate this style sheet :

JTextField {
	cursor:text;
	visibility:visible;
	font-weight:normal;
	border-width:1;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JLabel {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JComboBox {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JPanel {
	cursor:default;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JRootPane {
	cursor:default;
	visibility:visible;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	text-transform:none;
}

JLayeredPane {
	cursor:default;
	visibility:visible;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	text-transform:none;
}

JRadioButton {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

CellRendererPane {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

MetalComboBoxButton {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JCheckBox {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JFrame {
	cursor:default;
	visibility:visible;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	text-transform:none;
}

JButton {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

JTextArea {
	cursor:text;
	visibility:visible;
	font-weight:normal;
	border-width:1;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

Swing/HTML selector

Here code sample whith CSSSerializer to generate style sheet of Swing user interface with HTML selectors :

CSSEngine engine = new CSSSwingHTMLEngineImpl();
CSSSerializer serializer = new CSSSerializer();
StringWriter writer = new StringWriter();
serializer.serialize(writer, engine, shell, true,
		CSSHTMLSerializerConfiguration.INSTANCE);
System.out.println(writer.toString());

This code generate this style sheet :

input[type=text] {
	cursor:text;
	visibility:visible;
	font-weight:normal;
	border-width:1;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

body {
	cursor:default;
	visibility:visible;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	text-transform:none;
}

select {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

textarea {
	cursor:text;
	visibility:visible;
	font-weight:normal;
	border-width:1;
	background-image:none;
	background-color:rgb(255, 255, 255);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

input[type=radio] {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

div {
	cursor:default;
	visibility:visible;
	font-weight:normal;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

input[type=checkbox] {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

label {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

input[type=button] {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:1;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	border-color:gray;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

CellRendererPane {
	cursor:default;
	visibility:visible;
	font-weight:bold;
	border-width:0;
	background-image:none;
	background-color:rgb(238, 238, 238);
	font-size:12;
	font-style:normal;
	color:rgb(51, 51, 51);
	text-transform:none;
	font-family:Dialog;
}

User Guide

Developer Guide

Download

Translation

Project Documentation

CSSSerializer API

CSSSerializer using

CSSSerializer/SWT

SWT/SWT selector

SWT/HTML selector

CSSSerializer/Swing

Swing/Swing selector

Swing/HTML selector