JavaFX Splitpane css stylen

[lam_tr]

Hallo zusammen,

hat jemand eine Idee wie ich am Besten meine SplitPanes stylen kann so dass es wie bei Eclipse aussieht, oder annähered?

Ist etwas knapp beschriebene, das was ich will sind runde Ecken und der Übergang von einem TabPane zum anderen ist einfach nicht geschmeidig



Grüße
lam

 

[dzim]

Was genau stört dich gerade, bzw. soll anders aussehen? Wenn es die 3px-Border sind, musst du sie IMHO eher mit dem Content anpassen.

Wenn du dir das modena.css anschaust (z.B. hier) und nach split-pane suchst, siehst du einige Einträge in drei Bereiche aufgeteilt:

1. Split-Pane-Hintergrund
2. Divider-Hintergrund
3. und noch Optik von bestimmten eingebetteten Objekten, oder wenn das Split-Pane woanders embedded ist.

Ich würde hier mir alle (relevanten, vermutlich Punkte 1 und 2,) rauskopieren und ans Ende deiner eigenen CSS einfügen und dann anpassen, was du brauchst.

Für ein wenig mehr Insight beim Stylen deiner Applikation empfehle ich immer gern das Tool Scenic View. Dann kannst du schauen, was in deiner Applikation noch "falsch" ist - vom Styling her.

 

[lam_tr]

Alles klar kopier ich mal die Attribute von modena.css mal raus und teste es. Danke!

 

[dzim]

Viel Erfolg!

 

[lam_tr]

Viel Erfolg!

Ich hätte mal eine weitere Frage diesbezüglich, kann mann irgendwie zu einer TabPane Buttons hinzufügen, z.b. für min, max und close?

 

[lam_tr]

Hi dzim,

irgendwie bekomme ich das ganze nicht so gebacken. Warum sieht mein Styling einfach nicht so schön wie bei



Das ist nicht mal annäherend so cool wie hier

- Wie bekomme ich den Close Button einer Tab weiter reingerückt.
- Wie passe ich Font Color für den aktiven Tab an? Ich habe nur geschafft allgemein alle Tabs mit einer gleichen Farbe zu versehen
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: -fx-text-base-color;
}

 

[Robat]

Den aktiven tab müsstet du doch in der Theorie auf jeden Fall mit folgendem Code bekommen

.tab:selected > .tab-container > .tab-label {

}

Um den Button einzurücken könntest du ggf einfach dem Tab rechts ein Padding geben?

PS: Nichts davon ist getestet

 

[lam_tr]

Den aktiven tab müsstet du doch in der Theorie auf jeden Fall mit folgendem Code bekommen

.tab:selected > .tab-container > .tab-label {

}

Um den Button einzurücken könntest du ggf einfach dem Tab rechts ein Padding geben?

PS: Nichts davon ist getestet

CSS Datei:

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
    -fx-color: -fx-hover-base;
}

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
    -fx-color: -fx-pressed-base;
}

.tab-pane > .tab-header-area > .headers-region > .tab:disabled{
    -fx-opacity: 0.4;
}

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow  {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

.tab-pane > * > .scroll-pane {
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.tab-pane > * > .scroll-pane > .scroll-bar,
.titled-pane > .content > .scroll-pane > .scroll-bar {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.tab-pane > * > .scroll-pane > .scroll-bar > .increment-button,
.tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button{
    -fx-padding: 0.25em; /* 3px */
}

.tab-pane {
    -fx-tab-min-height: 40; /* 22 */
    -fx-tab-min-width: 250; /* 22 */
    -fx-tab-max-height: 1.8333em; /* 22 */
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
    -fx-font-weight: bold;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0 20 0 0;
}
.tab-pane > .tab-header-area > .headers-region > .tab:top {
    -fx-background-color: #64946A;
}
.tab-pane > .tab-header-area > .headers-region > .tab:right {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:bottom {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:left {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-color: -fx-hover-base;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
    -fx-background-insets: 0;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected .tab-container > .tab-label{
    -fx-text-fill: #64946A;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 0;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: 0;
    -fx-border-radius: 0; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
    -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
}
.tab-pane > .tab-header-area > .tab-header-background {
    /* TODO should not be using text-box-border I think? */
    -fx-background-color:
        #64946A
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
}
.tab-pane:top > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0 0 0 0;
}
.tab-pane:bottom > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 1 0 0 0, 1;
}
.tab-pane:left > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 1 0 0, 1;
}
.tab-pane:right > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 0 1, 1;
}
.tab-pane:top > .tab-header-area {
    /*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */
    -fx-padding: 0;
}
.tab-pane:bottom > .tab-header-area {
    -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
}
.tab-pane:left > .tab-header-area {
    -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
}
.tab-pane:right > .tab-header-area {
    -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
}
/* TODO: scaling the shape seems to make it way too large */
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
    -fx-background-color: white;
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-scale-shape: false;
    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button {
    -fx-background-color: #64946A;
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-scale-shape: false;
    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}


.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
    -fx-background-color: derive(-fx-mark-color, -30%);
}

/* CONTROL BUTTONS */
.tab-pane > .tab-header-area > .control-buttons-tab > .container {
    -fx-padding: 3 0 40 0;
}
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
    -fx-padding: 4 4 9 4;
    -fx-background-radius: 10;
}
.tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-padding: -5 4 4 4; /* TODO convert to ems */
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-header-area {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-content-area {
    -fx-background-color: -fx-outer-border, -fx-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 0;
    -fx-padding: 2;
}

.tab-pane > * > .scroll-pane > .corner {
     -fx-background-insets: 0;  /* Fix for RT-35067 */
}
.tab-pane.floating > * > .table-view,
.tab-pane.floating > * > .tree-table-view,
.tab-pane.floating > * > .list-view,
.tab-pane.floating > * > .tree-view,
.tab-pane.floating > * > .scroll-pane,
.tab-pane.floating > * > .split-pane,
.tab-pane.floating > * > .text-area,
.tab-pane.floating > * > .html-editor {
    -fx-background-insets: 0, 0;
    -fx-padding: -1;
}

Vielen Dank das hat geholfen



Ich denke langsam kriegen wir das hin

Hast du auch ein Idee wie ich den SuchButton oder andere Buttons in den TabPane Background Area hinbekomme?

Wahrscheinlich kommt man nicht drum rum die JavaFX TabPane Klasse zu überschreiben oder?

 

[Robat]

Eventuell könnte man sich über tabpane.lookup('.tab-header-area'); die Node holen und damit was anstellen?

Vielleicht kann man so einen "Dummy" Tab einbauen der immer rechts ist (zB).

Aber auch hier gilt wieder: Das sind nur willkürliche Ideen - hab ich noch nie ausprobiert

 

[dzim]

Frag doch Dirk Lemmermann einfach mal auf Twitter... (den du offenbar als Vorbild nimmst) Ich hab das Glück den persönlich zu kennen: Der ist nett und hilfsbereit, wenn es in seiner Zeit liegt. Er ist halt Freelancer und wird sicher nicht mit allen Wissen rausrücken, aber probieren kann man es ja mal.



Btw: So sieht's bei mir (also die App, die wie in der Firma schreiben) aus, aber ich hatte auch nicht den Anspruch, es wie Dirks Tabs aussehen zu lassen. Bis auf den kleinen grauen Spalt unterhalb der Tabs, bin ich ganz zufrieden mit dem Ergebnis.

 

[dzim]

Btw: Ich denke nicht, dass er hier tatsächlich ein TabPane verwendet hat. Er hatte als Projekt mit Studenten das hier gebaut:
https://github.com/dlemmermann/WorkbenchFX

Wenn du dir die Screenshots ansiehst, sieht das recht ähnlich aus. Ich vermute, dass das Projekt als Core, oder wenigstens als Ideengeber für sein Energiebörsen-Projekt hergehalten hat.

 

[mihe7]

also die App, die wie in der Firma schreiben

Ich sehe gerade einen Tippfehler: "Standardwerte" müsste es heißen.

 

[dzim]

@mihe7 wenn du "Standardeinstellungen" meinst - nicht mein Text. Was die Übersetzungen angeht (hier für die Schweiz brauchen wir halt im Normalfall 3, mit English halt 4), ich verwalte nur die Keys, die Daten kommen vom Übersetzungsbüro, nachdem der entsprechende Chef den deutschen Teil abgenickt hat.

 

[mihe7]

@dzim Ne, ich meine das Label "Standartwerte" (-> Standardwerte) neben Mehrfachmessung.

 

[dzim]

Danke, das werd ich mal korrigieren!

#edit: Ist schon witzig. Es wird ja von mehr als einer Person gelesen und gegengelesen. Und trotzdem geht es ungesehen unter.

 

[mihe7]

Ja, das ist teilweise wirklich verrückt Das geht so weit, dass man etwas liest und beim Lesen förmlich spürt, dass irgendwo ein Fehler ist, ihn aber nicht sieht, egal wie oft man sich die Stelle durchliest

 

[dzim]

Ja, das Hirn ist da mitunter "leider" fast schon zu effizient, solche Fehler zu übersehen.

 

[lam_tr]

Frag doch Dirk Lemmermann einfach mal auf Twitter... (den du offenbar als Vorbild nimmst) Ich hab das Glück den persönlich zu kennen: Der ist nett und hilfsbereit, wenn es in seiner Zeit liegt. Er ist halt Freelancer und wird sicher nicht mit allen Wissen rausrücken, aber probieren kann man es ja mal.

Anhang anzeigen 12172

Btw: So sieht's bei mir (also die App, die wie in der Firma schreiben) aus, aber ich hatte auch nicht den Anspruch, es wie Dirks Tabs aussehen zu lassen. Bis auf den kleinen grauen Spalt unterhalb der Tabs, bin ich ganz zufrieden mit dem Ergebnis.

Meine Fresse, die Anwendung sieht echt Klasse aus. Darfst du einfach so Anwendung eurer Firma posten

Danke für den Hinweis, ich werde ihn mal ansprechen, fragen kostet ja nichts

 

[dzim]

@lam_tr klar darf ich - die Anwendung gibt's ja auch kostenlos auf unserer Seite...

Genau, falls er nicht antwortet: Auf StackOverflow sind ein paar recht gute Leute unterwegs, die eigentlich auch immer helfen können, wenn wir hier auf dem Schlauch stehen.
Aber: Wie gesagt vermute ich ganz stark, dass er auf sein WorkbenchFX aufsetzt. Das heißt, dass er hier keine "echten" Tabs (im Sinne von TabView) verwendet.