JavaFX HTMLEditor Funktionalitäten und Styling

[kaffeetasse]

Moin,

in meinem Studium wurde bisher die GUI Programmierung ehr gemieden und ich hatte mich nur ansatzweise mit Swing auseinander gesetzt, womit ich nur umständlich agieren konnte. Ich habe mich vorgestern mal mit JavaFX beschäftigt und bin tendenziell begeistert. Vor allem die Komponenten und deren Anpassungsfähigkeit mittels CSS finde ich wirklich (quer)einsteigerfreundlich!

Ich habe zwei (hoffentlich kleine) Fragen zum JavaFX HTMLEditor:

Ich würde gern die standardmäßig weiße Eingabefläche mit verschiedenen Farben stylen - am besten änderbar zur Laufzeit.

 -fx-background-color: #ff0000;

macht leider nur einen roten Rahmen um das Element.

 -fx-base: #00ff00;

färbt die Buttons und das Menü. Weiß hier vielleicht jemand die CSS-Eigenschaft für den Editor, also den Texteingabebereich? Ich konnte leider nach längerem suchen nichts dazu finden.

Ich nutze Eclipse Kepler und verwende das Oracle Java 8 JDK unter Xubuntu 14.04.

Meine zweite Frage beschäftigt sich mit der Erweiterbarkeit der Funktionalitäten:
Weiß zufällig jemand, ob es noch Erweiterungen wie z.B. Insert/Edit Hyperlink gibt?

Danke für die Hilfe und/oder weitere Anregungen!

Lieben Gruß,
Fabian

 

[dzim]

Hi

Entpacke dir deine jfxrt.jar (irgendwo im JDK zu finden) und suche nach caspian.css (Java7) oder modena.css (Java8). Java8 enthält übrigens beide CSS-Dateien.
In der entpackten Datei suchst du mal nach ".html-editor", dann denke ich, wirst du vielleicht bei den meisten Sachen fündig...

Viel Erfolg!

 

[kaffeetasse]

Hallo dzim,

vielen Dank für die Antwort. Die CSS-Dateien waren in jedem Fall hilfreich, da die Stylesheets wirklich gut dokumentiert wurden.
Ich habe in meinem CSS nun folgende Eigenschaften für .root überschrieben und rot gefärbt:

.root {
	-fx-control-inner-background: red;
	-fx-light-text-color: red; -fx-base: red;
	-fx-base: red;
        -fx-background-color: red;
}

Alles was mit dem HTMLEditor zu tun hat habe ich pink gefärbt

.html-editor {
	-fx-base: ff00aa;
	-fx-color: ff00aa;
	-fx-control-inner-background: ff00aa;
	-fx-body-color: ff00aa;
	-fx-background-color: ff00aa;
	-fx-background: ff00aa;
	-fx-border-color: fcbbcc;
	-fx-text-base-color: ff00aa;
	-fx-text-background-color: ff00aa;
	-fx-text-inner-color: ff00aa;
	-fx-mark-color: ff00aa;
	-fx-text-fill: ff00aa;
}

So habe ich es geschafft fast alle Elemente zu färben. Leider nicht den Hintergrund in der Textbox des Editors. Obwohl keiner weiteren Eigenschaft "white" oder "#ffffff" zugewiesen wird.

Trotzdem danke - ich probiere es weiter und schreib, wenn ich das Problem lösen sollte.

Lieben Gruß,
Fabian

 

[dzim]

such mal im CSS nach so etwas wie ".html-editor .text" oder ".html-editor > .text" (".text" ist geraten, da ich gerade nicht weiss wie die Style-Klasse der Textfelder heisst). Nur die Style-Klasse des ".html-editor" selbst anzupassen bringt dann meist noch nicht das erwünschte Ergebnis. Musst dich halt ein bisschen mit CSS beschäftigen, falls du es nicht schon bereits getan hast. Vieles, aber bei weitem nicht alles (leider), aus der Web-Welt, findet sich hier wieder. Wenn auch immer unter dem etwas bekloppten "-fx-*"-Präffix...

 

[kaffeetasse]

Ok ich hab's gelöst. Es war nicht ganz die richtige Fährte aber sie hat mich schließlich zum Ziel geführt!

Ich kenne mich in der "Webwelt" gut mit CSS aus und hatte schon gesehen, dass in der
modena.css auch Kindelementen Werte zugewiesen werden und diese meine CSS Spezifikationen wieder überschreiben können, allerdings wurden hier nur bereits definierte Werte benutzt.

    -fx-background-color: -fx-control-inner-background

Da ich die Definitionen der Hauptfarben im .root Element überschrieben hatte, müssten diese nun eigentlich übernommen werden. Da dies nicht geschah wollte ich mir ansehen, was für Kindelemente der HTMLEditor überhaupt besitzt. Dazu habe ich mir Scenic View geladen und das *.jar zu meinem Build Path hinzugefügt. Über die Codezeile

ScenicView.show(scene);

öffnet sich nun beim starten der Applikation ein weiteres Fenster indem man die kompletten Elemente auf Kinder untersuchen kann. So sah ich, dass in der HTMLEditor als Kind eine GridPane hat und diese wiederum die Toolbars und eine WebView hält.

Jetzt wo ich das weiß ist es logisch, aber ich war nur von einer TextArea o.ä. ausgegangen. Dementsprechend zeigt die WebView natürlich nicht die CSS Eigenschaften des CSS auf Java Ebene, sondern die von einem "eigenen" HTML Dokument. Es reicht also

 htmlEditor.setHtmlText("<html><body style=\"background-color: "+MY_COLOR+"; margin: 0; padding: 0;\"></body></html>");

aufzurufen. Das ist die Perfekte Lösung für mich, da ich die Farbe ggf. zur Laufzeit ändern möchte.

Vielen Dank dzim für die Ideen und Anregungen!