Tk-UI

CSSSerializer API

Lorsque l'on souhaite écrire une feuille de style CSS pour une interface existante Swing ou SWT, partir d'une base d'une feuille de style peut simplifier son écriture. org.akrogen.tkui.css.core.serializers.CSSSerializer est capable de générer la feuille de style CSS d'une interface existante SWT ou Swing, autrement dit elle itère sur chacune des widgets de l'interface et calcule sont style pour générer la feuille de style CSS.

Cette section décrit comment :

générer la feuille de style CSS avec une interface SWT avec des selectors SWT .
générer la feuille de style CSS avec une interface SWT avec des selectors HTML .
générer la feuille de style CSS avec une interface Swing avec des selectors Swing .
générer la feuille de style CSS avec une interface Swing avec des selectors HTML .

CSSSerializer using

La méthode serialize de CSSSerializer permet de générer la feuille de style CSS d'une interface. CSSSerializer utilise une instance CSSEngine et est configurable pour générer les sectors adéquates. Le principe est le suivant :

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

CSSSerializer/SWT

Les exemples SWT sont basés sur le code SWT suivant :

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

Voici un exemple de code qui permet de générer la feuille de style CSS de l'interface avec des selectors SWT.

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());

Ce qui génère la feuille de style CSS suivante :

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

Voici un exemple de code qui permet de générer la feuille de style CSS de l'interface avec des selectors HTML.

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());

Ce qui génère la feuille de style CSS suivante :

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

Les examples Swing sont basés sur le code Swing suivant :

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

Voici un exemple de code qui permet de générer la feuille de style CSS de l'interface avec des selectors Swing.

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());

Ce qui génère la feuille de style CSS suivante :

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

Voici un exemple de code qui permet de générer la feuille de style CSS de l'interface avec des selectors HTML.

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());

Ce qui génère la feuille de style CSS suivante :

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;
}

Guide utilisateur

Guide développeur

Dépendences

Téléchargement

Traduction

Documentation sur le projet

CSSSerializer API

CSSSerializer using

CSSSerializer/SWT

SWT/SWT selector

SWT/HTML selector

CSSSerializer/Swing

Swing/Swing selector

Swing/HTML selector