Komplexe Eingabenmasken in FXML definieren?

[Maxi62]

Hi,
ich freunde mich gerade mit dem SceneBuilder und JavaFX an?
Ich muss eine komplexe Eingabemaske mit vielen Textfeldern definieren, welches Layout ist da empfehlenswert und wie kann man einzelne Gruppen von Feldern umrahmen?

Als Grundlage habe ich Borderpane, und im Center Bereich wollte ich nun die Eingabegruppen definieren. Gibts da schon Beispiele oder Vorlagen wie man sowas schick gestalten kann? Welches Element/Container nehmt ihr um den Rahmen um eine Gruppe zu zeichnen?

 

[dzim]

Styling wird in JavaFX i.d.R. über CSS erledigt:
JavaFX CSS Reference Guide (ist zwar noch JavaFX 2.2 aus Java7, aber im Grossen und Ganzen auch für JavaFX 8 aus Java8 gültig; für weitere CSS entpacke dir die caspian.css (Java7 und 8) und modena.css (Java8) aus der jfxrt.jar aus deinem JDK)

Wie du es genau umsetzen kannst, ist davon abhängig, wie du deine Oberfläche gestalten möchtest. BorderPane als Root ist sicher vernünftig, als Center könntest du ein GridPane verwenden (erste Spalte Textfelder und zweite Spalte die jeweils dazugehörigen Inputfelder). Am Ende wird es sicher eine tiefere Verschachtelung sein, aber pauschal kann man dir deine Frage so nicht beantworten. Poste vielleicht mal ein Mockup, dann kann man dir sicher weiterhelfen.

 

[Maxi62]

Na ja ich hätte gern mal ein paar gelungene Beispiele eines komplexeren Eingabedialoges in JavaFX angeschaut um mir ANregungen zu holen. Aber anscheinend findet man sowas im Netz noch nicht. Liegt vielleicht daran das es immer noch recht aufwendig ist bei jedem Feld Eingaben auf Länge und Inhalt zu verifizieren, in anderen Sprachen gibt es dafür Properties und gut ist!

Kann man um ein GridPane per CSS einen leichten Border zeichen, wie würde sowas gehen?

 

[dzim]

Ok vielleicht erklärst du mal, was du eigentlich willst: "Komplexe Eingabemasken" tönt nach vielen Label- und Text-Elementen. Dafür braucht man eigentlich keine Beispiele, weil man die schon auf seinen Use-Case zugeschnitten selbst erstellen muss.

Was du in deiner Antwort nur so am Rande erwähnst, scheint eine Validierung der Eingabewerte der Text-Felder zu sein. Das ist ein komplett anderes Thema, bzw. von dir so in deiner Frage nicht (oder eben viel zu umständlich) formuliert wurde.

Es gibt hier IMHO *noch* kein offizielles Framework. JavaFX ist da noch kräftig im Aufbau. Im nächsten Update sollten offiziell Dialoge enthalten sein und ich glaube auch mal was über Input Field Validation oder so gelesen zu haben...

Eine Quelle von Update im JavaFX-Umfeld ist die Seite fxexperience. Der Blogger ist einer der Entwickler von Oracle, der an JavaFX arbeitet (ich glaube sein Kind sind die Table- und TreeViews).
Dort habe ich zu den Dialogen das hier und zu der Validierung von Input zum einen einen Hinweis in einem der Blog-Posts, aber auch, dass das von ihm und ein paar anderen als Open Source bereitgestellte ControlsFX-Projekt seit der Version 8.0.6 die Möglichkeit der Validierung von Eingabewerten unterstützt.

Aber wie gesagt: Deine ursprüngliche Frage hat das IMHO nicht deutlich gemacht, sollte es das gewesen sein, was du gesucht hast...

 

[Maxi62]

Hi, danke für die Tipps! Nun bei der Validation bin ich noch nicht, das kommt etwas später. Es ging mit jetzt erst mal um die professionelle Gestaltung von umfangreichen Business-Dialogen. Ja schon vorwiegend Label und Textfelder aber auch Auswahlfelder usw. Einfach wie man beispielsweise Gruppen von Textfeldern z.B. Adresse, Bankverbindung etc. vom Design her am besten kenntlich machen kann, z.B. mit Rahmen. Einfach ein paar gestalterisch gelungene Dialoge als Vorlage wären schön.

 

[Ruzmanz]

Das hat nix mit JavaFX zu tun. Man kann nahezu jedes Layout/Design in JavaFX umsetzen, auch wenn das ein "Webdesign" ist ...

Poste vielleicht mal ein Mockup, dann kann man dir sicher weiterhelfen.

 

[Maxi62]

Na ja, das Design soll ja mit dem SceneBuilder angelegt werden, da ist man schon von den Möglichkeiten und der Erscheinungsform der vorhandenen Controls abhängig. Sicherlich lassen sich auch noch eigene definieren, aber davon wollte ich weitgehend absehen da das Projekt auch mal fertig werden soll!

 

[dzim]

Viele - ähm... oder besser: alle - Controls, lassen sich mit mässigem Aufwand mittels CSS umgestalten.
Einen allgemeingültigen Plan für dein konkretes Problem kann dir niemand geben. Es gibt Firmen, die sich auf Design und/oder Usability von Oberflächen (oder auf Reviews von solchen) spezialisieren. Allerdings müssen schickes Design und gute Usability nicht etwas miteinander zu tun haben (schon selbst nach solchen Reviews erlebt Der eine sagt "super!", der andere "naja..." (ein "s******e" hört man selten, die wollen ja keine Auftraggeber verlieren)).

Etwas anderes als einen Prototypen zu machen (z.B. mit dem SceneBuilder, der sich dafür ja geradezu anbietet), wäre der richtige Anfang. Wenn du dann das FXML postest, können wir uns mal anschauen, wie wir es finden und evtl. Verbesserungen vorschlagen/vornehmen.

Ich finde übrigens, das in puncto Design von Elementen/Widgets auf der Oberfläche JavaFX deutlich besser aufgestellt ist, als HTML.
Gewagte Theorie, ich weiss, aber was ich meine ist: Es gibt vernünftige Layouts!
Responsives Design mit JavaFX (oder auch Swing, oder SWT) ist deutlich einfacher (auch wenn man sich schon immer noch Gedanken darüber machen muss ), als im Web. Finde ich. Ich muss aber auch anmerken, dass ich meine bisherigen Erfahrungen mit mobilen Web-Apps (Phonegap) nur an zwei Projekten ausprobieren konnte und vorher nie viel mit Webdesign am Hut hatte...

 

[Maxi62]

Ok, dann frage ich doch mal konkret da ich kein großer CSS Experte bin.
Mit welcher Anweisung bekomme ich um drei Textfelder mit Labels einen hellen grauen Rahmen drum?
Wir gehen mal davon aus das die 3 Textfelder/Labels in einem Gridpane liegen.

 

[dzim]

Indem du hier mal nachliest.
Ich hatte vor JavaFX auch keinen Schimmer von CSS. Und auch jetzt stolper ich viel in Web-Kram über "Besonderheiten". Zum Glück ist das CSS von JavaFX relativ straight-forward, auch wenn die alles mit speziellen (sprich: bescheuerten) "-fx-*" Präfixen versehen mussten.
Was du brauchst ist also "-fx-border-*" ("-fx-stroke-*" geht auch, aber border ist einfacher).

Dein CSS könnte so was hier enthalten:

.my-textfield {
-fx-border-color: lightgrey;
-fx-border-radius: 0;
-fx-border-width: 2px;
-fx-border-style: solid;
}

Wenn du nun diese Style-Klasse ("my-textfield") an die Text-Felder anhängst, erhälst du Textfelder mit Rahmen in der Farbe "lightgrey", eckigen Ecken ( ), der Rahmen ist 2 Pixel dick und ein durchgängiger Strich.
Eigentlich ziemlich simpel.

 

[Maxi62]

Ist doch einfacher als gedacht, danke für Tipp!
Übrigens: Habe jedoch gemerkt das der SceneBuilder schnell mal abstürzt wenn man bei CSS-Style in den Properties was falsches einstellt. Hatte erst mit fx-Border-Region (oder so ähnlich; kann man auswählen) versucht was einzustellen, da hat er sich jedesmal aufgehängt. Andere CSS-Styles gingen.

 

[dzim]

kA. Arbeite nicht mit dem SceneBuilder, von daher ist das Ding für mich eher eine grosse Unbekannte...

 

[Maxi62]

Solltest du aber mal machen, das Teil ist ansonsten perfekt!

 

[dzim]

Mag sein, aber ich verwende Eclipse mit dem dazugehörigen Plugin efxclipse. Das hat zum einen eine eigene JSON-ähnliche DSL für FXML (ich finde FXML selbst eher schlecht zu nutzen) und einen Live-Preview für die DSLs oder FXMLs (mit der Option gleich noch den Controller zu laden und so mitunter schon Teile deines Programm in dem Preview-View in Eclipse zu testen). Und ich bin mittlerweile schon so schnell mit der DSL, dass ich es kaum so schnell im SceneBuilder zusammenklicken und testen (sieh Controller) könnte...
Aber wie gesagt: Das ist nur mein persönlicher Geschmack.

 

[Maxi62]

Also wie man per CSS einen Border um ein Element zeichnet hab ich nun verstanden.
Kann man per CSS aber auch erreichen das man einen Rahmen mit einem Titel um ein Element erzeugt? Also wie in HTML bei so einem <fieldset>. Da hab ich noch nichts passendes gefunden.

 

[dzim]

Nein ich denke, das wird nicht direkt gehen, aber dafür bin ich nicht CSS-Profi genug. Wahrscheinlich musst du dir ein solches Ding selbst bauen (z.B. eine VBox mit Rahmen, erstes Element ein Label, dass du dann mit translatey=-10 oder so nach oben über den Rahmen schiebst - du musst dem Label dann aber einen einfarbigen Hintergrund geben, sonst sieht man den Rahmen immer noch hinter dem Label langgehen).

 

[Maxi62]

Merkwürdig das die FX Entwickler nicht an so eine Group oder Pane mit Titel gedacht haben. Man kann zwar TitledPane nehme, aber da ist der Titel recht groß, vielleicht kann man TitledPane mit CSS etwas zurechtbiegen.

 

[dzim]

JavaFXist noch immer recht neu. Man hat sich ja gerade mal dazu durchgerungen im kommenden Java8u40 eine vernünftige Dialog-API aufzunehmen. Da es im Gegensatz zu Swing nicht "tot" ist, sondern von Oracle munter weiterentwickelt wird, würde es mich nicht wundern, wenn da bald mal was kommt. Aber davon abgesehen: Vielleicht gibt es ja schon wa von ControlsFX oder JFXtras... Hast du da mal geschaut?