Suche
Menübänder für alle!

FXRibbon 1.2: Menübänder für JavaFX noch besser stylen

Pedro Duque Vieira

© Shutterstock / 1981 Rustic Studio kan

Mit Office 2007 führte Microsoft Menübänder als Steuerungselement in den Massenmarkt ein. FXRibbon ermöglicht es, solche Menübänder – auch Ribbons genannt – über JavaFX zu erstellen und in Java-Anwendungen zu implementieren. Nun ist Version 1.2 erschienen.

Dieses Mal geht es nicht um FXParallax, sondern um etwas anderes: Es gab ein Update zu FXRibbon, eine Menübandkontrolle für Java (JavaFX), die der von Microsoft ähnelt.

Nachdem in einem neuen Issue Request eine bessere Unterstützung von Java 9 und höher durch FXRibbon gefordert wurde, habe ich die Gelegenheit genutzt und gleich noch einige Features hinzugefügt. Ein paar ästhetische Anpassungen wurden ebenfalls gemacht, widerspenstige Bugs gefixt, das Projekt weiter bereinigt und insgesamt etwas mehr auf Vordermann gebracht.

Das Ergebnis davon ist FXRibbon 1.2, auf das ich in diesem Blogbeitrag näher eingehen werde.

FXRibbon 1.2 – das ist neu

Hier ist die Liste der Änderungen in der neuen Version:

  1. Mit Updates auf Java 9 und darüber hinaus kommt FXRibbon nun besser klar. Dies beinhaltet auch, dass die Klassen ersetzt wurden, die in den neueren Versionen von JavaFX nicht mehr verfügbar sind.
  2. Es gibt CSS-Variablen, die leicht überschrieben werden können, um visuelle FXRibbon-Elemente zu optimieren.
  3. Ästhetische Optimierung: Im Menüband kommt die sogenannte Combobox-Optik zum Einsatz, Farben, Schriftgrößen, etc. wurden optimiert.
  4. FXRibbon wurde in zwei separate Projekte aufgeteilt, eines mit der FXRibbon-Bibliothek („FXRibbon“) und das andere mit Code-Beispielen für Dokumentationszwecke („FXRibbon-samples“). Entwickler können sich im Projekt FXRibbon-samples einfache praktische Beispiele für die Verwendung von FXRibbon ansehen.
  5. FXRibbon funktioniert jetzt besser mit dem JavaFX-Theme JMetro.
  6. RibbonGroup-Titel sollten immer aufeinander abgestimmt sein, was nicht immer der Fall war. Das wurde behoben.
  7. Bereinigen von Code und der Ribbon-CSS-Datei.

Detaillierte Informationen können im Git-Log eingesehen werden.

Optimieren von FXRibbon durch CSS

Bereits in früheren Versionen von FXRibbon wurden einige Variablen definiert, jedoch wurden diese nicht ausreichend berücksichtigt. In dieser neuen Version habe ich die Variablen bereinigt und einige neue hinzugefügt.

Hier ist eine Liste mit den aktuell definierten CSS-Variablen:

  • ACCENT_COLOR: Spezifiziert den Farbakzenten des Menübandes. Man könnte hiermit beispielsweise die Markenfarbe als Farbakzent nutzen.

Der Standardfarbakzent ist Blau. Das folgende Bild zeigt das Menüband mit den entsprechenden Standardwerten für die CSS-Variablen.

FXRibbon

Abb.1: Standardakzentfarbe

Variationen des Farbakzents sieht man in der ausgewählten „locked“-Taste, dem ausgewählten Tab-Titel „Home“ und der Schaltfläche „Save“, über der die Maus schwebt und die somit fokussiert ist. Dies ist nur ein Beispiel, es zeigt nicht alle Stellen, an denen der Farbakzent verwendet wird.

Angenommen, man will nun den Farbakzent auf einen Grünton ändern. Zum Beispiel dern grünen Farbwert mit dem Farbwert #10893E. Mit diesem Befehl lässt sich dies durchführen (im Projekt FXRibbon-samples enthält die Anwendung ChangeAccentColorSample ein komplettes Beispiel):

ribbon.setStyle("ACCENT_COLOR: #10893e");

Und hier ist das Ergebnis:

FXRibbon 2

Abb. 2: Grüne Farbakzente

  • RIBBON_BUTTON_HIGHLIGHT_COLOR: Definiert die Farbe, die in Schaltflächen im gesamten Menüband verwendet werden soll. Diese Farbe ist standardmäßig eine Variation der ACCENT_COLOR.
  • RIBBON_BUTTON_SELECTED_COLOR: Diese Variable definiert die Farbe, die bei der Auswahl von Schaltflächen verwendet werden soll, wie im vorherigen Beispiel die Schaltfläche „locked“. Diese Farbe ist ebenfalls standardmäßig eine Variation der ACCENT_COLOR
  • CONTROLS_LABEL_COLOR: Hiermit wird die Farbe der Labels definiert, die auf Steuerelementen verwendet werden, die sich innerhalb des Menübandes befinden. Die Standardfarbe ist ein Schwarzton (mit dem Farbwert von #4b4b4b).

Das sind die im Moment verfügbaren CSS-Variablen. H1_COLOR und BUTTON_SELECTED_COLOR aus der Vorgängerversion sind veraltet und werden in einer späteren Version entfernt. Es wird empfohlen, sie durch die neuen zu ersetzen.

Abschließende Überlegungen

Für die besten Ergebnisse würde ich Entwicklern empfehlen, das JavaFX-Theme JMetro zusammen mit FXRibbon zu verwenden. FXRibbon ist derzeit so gestaltet, dass es bei der Verwendung mit JMetro am besten aussieht. Und meiner Meinung nach sieht und fühlt sich JMetro auch moderner an.

Zusammenfassung

In diesem Beitrag habe ich über das neue FXRibbon 1.2 gesprochen. Es gibt eine beträchtliche Anzahl von Änderungen, inklusive der Ergänzung neuer CSS-Variablen, mit denen man den FXRibbon-Stil optimieren kann, um diesen besser an die eigene Marke anzupassen.

Sämtliche Informationen zur neuen Version gibt es in der Dokumentation von FXRibbon

Hier sind die Dinge, die ich als nächstes hinzufügen möchte:

  • Ein Dark Theme für FXRibbon
  • Einen Modena-Stil für FXRibbon
  • Andere, noch fehlende Steuerelemente für Menübänder

Ich werde mich zudem an der Weiterentwicklung des JavaFX-Themes JMetro beteiligen. Wer mir auf Twitter folgt, verpasst keine Neuigkeiten.

Verwandte Themen:

Geschrieben von
Pedro Duque Vieira
Pedro Duque Vieira
JavaFX and Swing, Freelancer and Consultant – http://www.pixelduke.com - specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke. Twitter: @P_Duke"
Kommentare

Hinterlasse einen Kommentar

1 Kommentar auf "FXRibbon 1.2: Menübänder für JavaFX noch besser stylen"

avatar
400
  Subscribe  
Benachrichtige mich zu:
Entwickler
Gast

Macht Lust auf JavaFX.