JavaFX Splitpane css stylen

L

lam_tr

Top Contributor
Hallo zusammen,

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

EfxclipseProject2_4.jpg.webp


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

12024

Grüße
lam
 
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.
 
Hi dzim,

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

12162

Das ist nicht mal annäherend so cool wie hier

D2wWZp8WwAAK_y6.jpg:large


- 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;
}
 
Den aktiven tab müsstet du doch in der Theorie auf jeden Fall mit folgendem Code bekommen
CSS: 
.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
 
Robat hat gesagt.:
Den aktiven tab müsstet du doch in der Theorie auf jeden Fall mit folgendem Code bekommen
CSS: 
.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
Zum Vergrößern anklicken....

CSS Datei:
CSS: 
.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

12163

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?
 
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
 
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. 😉

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.
 
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 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.
 
😱😉 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.
 
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 hat gesagt.:
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.
Zum Vergrößern anklicken....
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 🙂
 
@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.
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

Ist CSS = CSS
Antworten: 2
CSS in ein anderes CSS importieren
Antworten: 2
Tabs von JTabbedPane stylen
Antworten: 6
JFrame stylen
Antworten: 5
Eigene Komponenten mit Synth L&F stylen
Antworten: 2

Zurück
Oben