GUI für verschiedene Devices

Java-Forum AWT, Swing, JavaFX & SWT
1

Guten Tag Community,

kurze Frage bzgl. GUI-Design, wenn es um unterschiedliche Auflösungen geht.
Heißt also Desktop-Rechner (Windows/Linux) + Android.

Wie sieht da die “Best Practice” aus bei JavaFX?
Für jede evtl. mögliche Auflösung scheint mir der Aufbau mit den einzelnen Scenes in XML
ein wenig aufwendig odernicht?

Ansonsten bin ich auf Bootstrap gestoßen und das sieht auch ganz nett aus.
Bis jetzt bin ich dabei die GUI in FXML + CSS (mit JMetro) für den Desktop zu gestalten und
habe etwas Angst, dass ich mir jetzt evtl. schon einen Fallstrick für andere Geräte zusammenschuster.

Es tut mir leid, wenn es dazu schon ein Thema geben sollte - ich finde wohl nicht die richtigen Worte (aka Suchkriterien)
für mein Problem.

L.G.
BL

2

[quote=BinaryLogic]Für jede evtl. mögliche Auflösung scheint mir der Aufbau mit den einzelnen Scenes in XML
ein wenig aufwendig odernicht?[/quote]
ohne angelesenes Wissen und konkrete Umsetzungserfahrung dort:
die einzige Alternative zu individuellen Design (dann je Auflösung einzeln) scheint mir ein strukturiertes/ regelbasiertes Design zu sein,

z.B. ein Formular mit 10 Eingabemöglichkeiten und einer Textbox, dazu Menü mit 5 Einträgen und noch irgendeine übergeordnete Auswahlliste, was auch immer,

wie dies und ähnliches in Auflösung/ Gerät A, B, C aussehen soll muss man selber einmalig überlegen, das kann niemand abnehmen,
aber dann kann eine automatische Umsetzung dieser Regeln erfolgen:

  • wenn genug Platz dann alle 5 Menüeinträge nebeneinander, sonst eine Combobox (wie hier im Forum oben ‘Community’ aufklappbar)
  • wenn genug Platz dann die Formular-Elemente in zwei Zeilen nebeneinander aufbauen, bei wenig Platz untereinander und zu scrollen
    (nicht allzu originell, aber eben eine Sache um die man sich kümmern muss)
  • weiteres bei viel Platz großzügig reservieren, in kleinen Geräten irgendwelche Aufmerksamkeitsgimmicks die man aufziehen muss, auch vor Weglassen keine Angst haben

von JavaFX und überhaupt Programmiersprache ist das unabhängig,
je nachdem wie ein Framework arbeitet bedeutet die Umsetzung entweder zur Kompilierzeit erstellte Layout-Klassen/ XML oder zur Laufzeit dynamisch angepasstes Layout,
witzig wäre ja, wenn man Fenster von füllenden PC-Breibildschirm auf Smartphone-Format klein zieht und sich dann dieses Design ganz entsprechend umstellt

soviel aus der Erzähler-Ecke

3

Danke für deine Antwort. Habe sie gestern gelesen und mir ein wenig Gedanken darüber gemacht.

die einzige Alternative zu individuellen Design (dann je Auflösung einzeln) scheint mir ein strukturiertes/ regelbasiertes Design zu sein

Ja, denke ich auch. Wahrscheinlich kann man das dann auch nur im Programmcode direkt umsetzen. Daher nicht die Vorteile von JavaFX mit FXML und CSS nutzen (bzw. nur im geringen Ausmaß).
Nachdem ich mich noch etwas im Bereich Responsive Design eingelesen habe, denke ich fahre ich ganz gut,
wenn ich zumindest die Auflösungen abdecke, welche hier gezeigt sind:
http://blog.namics.com/files/2012/12/responsive-wordpress-themes.jpg

Das scheint glaube auch Standard zu sein, für diese Auflösungen (und evtl. weitere) einzelne Stylesheets anzulegen.

Die von dir genannten Regeln setzen denke ich eine Menge Programmcode (in Java) voraus, allerdings möchte ich so viel wie möglich mit FXML+CSS abdecken um das gesamte Layout aus dem Programmcode bzw. auch der Programmlogik raushalten zu können (PS: Ja MVC sagt mir was;)) Da ich mit JavaFX + FXML + (JFX)CSS hantiere, werde ich mir für die o.g. Breiten verschiedene CSS-Dateien basteln und beim Start die jew. Bildschirmgrößen abfragen und dann das jeweilige Stylesheet laden.
Das sollte auch möglich sein dynamisch zu ändern, sollte sich durch Resizing die Breite des Programms ändern.

wie dies und ähnliches in Auflösung/ Gerät A, B, C aussehen soll muss man selber einmalig überlegen, das kann niemand abnehmen

Ja, ich bin da auch schon dran mit Papier und Bleistift diverse Sachen zu kritzeln. Zuerst habe ich mit Mockup-Tools (Balsamiq Mockup) gearbeitet, allerdings dauert es da viel länger, das ist wohl nur zu Präsentationszwecken gut.

Bei meinem Konzept könnte man dann mit der Zeit theoretisch auch weitere Breiten ganz einfach umsetzen, indem man einfach zusätzliche Stylesheets erstellt.
Allerdings weiß ich dann noch nicht ganz, welche Panes man optimalerweise nutzt. AnchorPane, BorderPane etc. machen doch vieles wieder sehr statisch.
Am einfachsten fährt man dann wahrscheinlich mit einem Grid- oder Flowlayout.

Danke für die Antwort, die hat nochmal zum Überdenken angeregt :slight_smile:
Eventuell hat der ein oder andere noch einen Tip, würde ich mich zumindest drüber freuen.

Grüße
BL

4

Habe beim surfen zu diesem Thema diesen Blog gefunden.

Responsive Design for JavaFX - GuiGarage

Ist zwar noch Beta und nicht Released. Die Demos sehen aber vielversprechend aus.

Und die Leute die dahinterstehen sehen in der hinsicht doch ganz kompetent aus. (Ist ein Kompliment).

5

Hey,
danke für den Link. Kannte es zwar schon, aber das ist auch schon wieder länger her.
Die wollten das damals nach der JavaOne releasen aber da wurde irgendwie nichts draus. Habe es auch schon wieder aus den Augen verloren.
Vielleicht wird es ja noch was.