{"id":2458,"date":"2013-10-05T12:47:30","date_gmt":"2013-10-05T10:47:30","guid":{"rendered":"http:\/\/www.tutego.de\/blog\/javainsel\/?p=2458"},"modified":"2013-10-05T12:47:30","modified_gmt":"2013-10-05T10:47:30","slug":"deklarative-und-programmierte-oberflchen-swing-und-javafx-im-vergleich","status":"publish","type":"post","link":"https:\/\/www.tutego.de\/blog\/javainsel\/2013\/10\/deklarative-und-programmierte-oberflchen-swing-und-javafx-im-vergleich\/","title":{"rendered":"Deklarative und programmierte Oberfl&auml;chen: Swing und JavaFX im Vergleich"},"content":{"rendered":"<p>Grunds\u00e4tzlich k\u00f6nnen grafische Oberfl\u00e4chen \u00fcber eine Programm-API aufgebaut werden oder in einer deklarativen Beschreibung spezifiziert werden.<\/p>\n<p>\u00b7 Programmierte Oberfl\u00e4chen: Der traditionelle Bau von grafischen Oberfl\u00e4chen in Java weist die Besonderheit auf, dass das Design der Oberfl\u00e4che in Java-Code gegossen werden muss. Jede Komponente muss mit new erzeugt werden und mithilfe eines Layouts explizit angeordnet werden. Komplexe Oberfl\u00e4chen bestehen dann aus fast unwartbaren Mengen von Programmcode zum Aufbau der Komponenten, zum Setzen der Eigenschaften und Platzierung auf dem Container. Die \u00c4nderung des Layouts ist nat\u00fcrlich sehr schwierig, da mitunter auch f\u00fcr kleinste \u00c4nderungen viel Quellcode bewegt wird. In der Versionsverwaltung sieht das mitunter schrecklich aus.<\/p>\n<p>\u00b7 Deklarative Oberfl\u00e4chen stehen im Gegensatz zu den programmierten Oberfl\u00e4chen. Bei ihnen ist die Beschreibung des Layouts und die Anordnung der Komponenten nicht in Java ausprogrammiert, sondern in einer externen Ressourcen-Datei beschrieben. Das Format kann etwa XML sein, und spiegelt wieder, wie das Objektgeflecht aussieht. Eine Ablaufumgebung liest die Ressourcen-Datei und \u00fcbersetzt die Deklarationen in ein Geflecht von GUI-Komponenten. Im Hauptspeicher steht dann am Ende das gleiche wie bei der programmierten GUI: ein Objekt-Graph.<\/p>\n<p>Das andere Ufer: Microsoft erkannte ebenfalls die Notwendigkeit einer deklarativen Beschreibung von Oberfl\u00e4chen und nutzt intensiv XAML (Extensible Application Markup Language). Gleichzeitig gibt es leistungsf\u00e4hige Tools und Designer f\u00fcr XAML. Die Firma Soyatec versucht sich mit eFace an einer Java-Realisierung (http:\/\/www.soyatec.com\/eface\/).<\/p>\n<h3>Gui-Beschreibungen in JavaFX<\/h3>\n<p>JavaFX unterst\u00fctzt beide M\u00f6glichkeiten zum Aufbau von grafischen Oberfl\u00e4chen. Zum einen ist da die klassische API, die Knoten in einen Baum h\u00e4ngt, viel interessanter ist aber der deklarative Ansatz, der sehr sch\u00f6n Pr\u00e4sentation und Logik trennt. JavaFX selbst bietet eine Beschreibung auf XML-Basis, genannt FXML. XML ist selbst hierarchisch, kann also die grundlegende hierarchische Gliederung einer GUI in Containern und Komponenten sehr gut abbilden.<\/p>\n<p>Neben FXML gibt es weitere propriet\u00e4re Beschreibungen und Mischformen. Eine davon ist FXGraph vom Projekt e(fx)clipse (http:\/\/www.eclipse.org\/efxclipse\/), einer JavaFX-Unterst\u00fctzung in Eclipse. Die Beschreibung ist eine DSL<a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftn1_1928\" name=\"_ftnref1_1928\">[1]<\/a> und definiert den Objekt-Graphen, der im Hintergrund in FXML umgesetzt wird. FXGraph ist kompakter als FXML und erinnert entfernt an JSON. Auch kann die JavaFX-API in alternativen Sprachen angesprochen werden, JavaScript und weitere Skriptsprachen wie Groovy (und der Hilfe von GoovyFX<a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftn2_1928\" name=\"_ftnref2_1928\">[2]<\/a>) oder Scala (zusammen mit ScalaFX<a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftn3_1928\" name=\"_ftnref3_1928\">[3]<\/a>) zeigen interessante Wege auf. Allerdings mischt sich dann doch wieder schnell die Deklaration der GUI mit Logik, was die Trennung zwischen Pr\u00e4sentation und Logik aufweicht. Es ist guter Stil, die Beschreibung der Benutzerschnittstelle und der Logik zu trennen, um auch Tests leichter zu realisieren.<\/p>\n<h3>Deklarative GUI-Beschreibungen f\u00fcr Swing?<\/h3>\n<p>F\u00fcr AWT und Swing hat sich f\u00fcr deklarative Oberfl\u00e4chen in den letzten Jahren kein Standard gebildet, und Oberfl\u00e4chen werden heute noch so programmiert wie vor 15 Jahren. Dass Swing-Oberfl\u00e4chen immer programmiert werden m\u00fcssen h\u00e4lt auf, auch wenn ein GUI-Builder heutzutage die Schmerzen minimiert. \u00dcber die WYSIWYG-Oberfl\u00e4che wird in der Regel das Layout mit allen Komponenten zusammengeklickt und im Hintergrund erzeugt der GUI-Builder den Programmcode. F\u00fcr die Laufzeitumgebung hat sich also nichts ver\u00e4ndert, aber f\u00fcr uns schon.<\/p>\n<p>Um auch in Swing in die Richtung von deklarativen Oberfl\u00e4chen zu kommen, gibt es unterschiedliche Open-Source-L\u00f6sungen, da Oracle nichts im Angebot hat.<\/p>\n<p>\u00b7 Swixml (http:\/\/www.swixml.org\/) nutzt das XML-Format zur Beschreibung von GUIs und bildet jede Swing-Klassen auf ein XML-Element ab. Sp\u00e4ter nutzt Swixml dann SAX und JDOM, um die XML-Datei einzulesen und zu repr\u00e4sentieren und um zur Laufzeit eine Swing-Komponentenbaum aufzubauen. Die Folien unter http:\/\/www.swixml.org\/slides.html geben einen Einblick in die M\u00f6glichkeiten. Seit Mitte 2011 wird Swixml nicht mehr erweitert.<\/p>\n<p>\u00b7 Eine weitere L\u00f6sung zur deklarativen Beschreibung von Swing-Oberfl\u00e4chen bietet der Swing JavaBuilder (http:\/\/code.google.com\/p\/javabuilders\/). Die Open-Source-Bibliothek steht unter der Apache-Lizenz und nutzt statt XML das kompaktere YAML-Format, dessen Schreibweise noch weiter verk\u00fcrzt wurde. Das letzte Release stammt von Ende 2011, eine Weiterentwicklung ist unwahrscheinlich.<\/p>\n<p>Die Inaktivit\u00e4t l\u00e4sst entweder so erkl\u00e4ren dass die Produkte perfekt sind, oder sich Entwickler mit den klassischen Code-generierenden GUI-Buildern anfreunden konnten, oder die Tools mit dem Aufkommen von JavaFX einfach unattraktiv werden.<\/p>\n<hr align=\"left\" size=\"1\" width=\"33%\" \/>\n<p><a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftnref1_1928\" name=\"_ftn1_1928\">[1]<\/a> Eine domain-specific-language (DSL) ist eine \u201eSpezialsprache\u201c, die ein exklusives Format f\u00fcr einen klar abgegrenzten Anwendungsfall definiert.<\/p>\n<p><a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftnref2_1928\" name=\"_ftn2_1928\">[2]<\/a> <a href=\"http:\/\/groovyfx.org\/\">http:\/\/groovyfx.org\/<\/a><\/p>\n<p><a href=\"file:\/\/\/C:\/Users\/Christian\/Dropbox\/Eigene Dokumente\/Insel\/#_ftnref3_1928\" name=\"_ftn3_1928\">[3]<\/a> <a href=\"https:\/\/code.google.com\/p\/scalafx\/\">https:\/\/code.google.com\/p\/scalafx\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grunds\u00e4tzlich k\u00f6nnen grafische Oberfl\u00e4chen \u00fcber eine Programm-API aufgebaut werden oder in einer deklarativen Beschreibung spezifiziert werden. \u00b7 Programmierte Oberfl\u00e4chen: Der traditionelle Bau von grafischen Oberfl\u00e4chen in Java weist die Besonderheit auf, dass das Design der Oberfl\u00e4che in Java-Code gegossen werden muss. Jede Komponente muss mit new erzeugt werden und mithilfe eines Layouts explizit angeordnet werden. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[11,62],"tags":[],"class_list":["post-2458","post","type-post","status-publish","format-standard","hentry","category-insel","category-javafx"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/2458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/comments?post=2458"}],"version-history":[{"count":1,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/2458\/revisions"}],"predecessor-version":[{"id":2459,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/2458\/revisions\/2459"}],"wp:attachment":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/media?parent=2458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/categories?post=2458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/tags?post=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}