Gra­phi­cal User In­ter­face (GUI) mit dem Gluon Scene Buil­der

Im Bil­dungs­plan ist ver­an­kert, dass die Schü­ler GUIs er­stel­len sol­len. Dabei ist nicht daran ge­dacht, jedes De­tail der GUI-Pro­gram­mie­rung zu be­han­deln. Dies würde den Rah­men kom­plett spren­gen. Ziel ist es, den Schü­le­rin­nen und Schü­lern zu ver­mit­teln, wel­che Schrit­te not­wen­dig sind, um ein Pro­jekt mit einer an­spre­chen­den GUI zu er­gän­zen.

Für die Er­stel­lung einer GUI ist ein GUI-Buil­der hilf­reich und soll­te auch im Un­ter­richt zum Ein­satz kom­men:

Der Ja­va­Edi­tor von G. Röh­ner hat einen ein­ge­bau­ten GUI-Buil­der, der die in der GUI vor­ge­nom­me­nen Ein­stel­lun­gen stän­dig 1:1 in Quell­text um­setzt. Än­de­run­gen im Quell­text wer­den aber nicht in den GUI-Buil­der über­nom­men.

Seit Java 8 gibt es die Mög­lich­keit in Ja­vaFX die De­fi­ni­ti­on des GUI in einer XML-Datei (fxml-Da­tei­en­dung) vor­zu­neh­men. Der Gluon Scene Buil­der¹ bie­tet ein pro­fes­sio­nel­les Tool, um GUIs zu er­stel­len und als fxml-Datei zu spei­chern. Diese XML-Da­tei­en kön­nen dann mit einem ein­fa­chen Ja­vaFX-Pro­gramm ge­la­den wer­den. Die­ses Pro­gramm kann den Schü­lern vor­ge­ge­ben wer­den, da es immer gleich aus­sieht. Zu­sätz­lich wird eine Con­trol­ler-Klas­se de­fi­niert, die alle Me­tho­den be­inhal­tet, die bei Aus­wahl eines Me­nü­punk­tes oder eines But­tons aus­ge­führt wer­den sol­len. Die ver­wen­de­te Pro­gram­mier­um­ge­bung ist dabei un­ab­hän­gig von der Er­stel­lung der GUI. Der hier vor­lie­gen­de Un­ter­richts­gang nutzt die­sen Gluon Scene Buil­der in Kom­bi­na­ti­on mit BlueJ als Pro­gram­mier­um­ge­bung.

Der Scene Buil­der spei­chert das De­sign als FXML-Datei - also ein XML-For­mat für die De­fi­ni­ti­on der Ober­flä­che. Diese Datei kann recht leicht in einem Java-Pro­gramm ein­ge­le­sen und in eine Ober­flä­che um­ge­wan­delt wer­den.

...
     
         
            
         
      
      
         
            
         
      
      
 ...

Der Scene Buil­der ent­hält eine Viel­zahl von Ein­stel­lungs­mög­lich­kei­ten, die in der Schu­le nicht alle be­nö­tigt wer­den. Grund­sätz­lich be­steht ein Ober­flä­chen-De­sign aus einer Reihe ver­schach­tel­ter Lay­out-Kom­po­nen­ten. Die wich­tigs­ten sind VBox (ord­net die un­ter­ge­ord­ne­ten Ele­men­te ver­ti­kal an) und die HBox (ord­net die un­ter­ge­ord­ne­ten Ele­men­te ho­ri­zon­tal an). Bei den un­ter­ge­ord­ne­ten Ele­men­ten kann man im Lay­out fest­le­gen, ob das Ele­ment so groß sein soll, wie es not­wen­dig ist, ob es so groß sein soll wie das über­ge­ord­ne­te Ele­ment (oran­ger Pfeil) oder den zur Ver­fü­gung ste­hen­den Platz fül­len soll (gelbe Pfei­le). Da­durch wird nur die Glie­de­rung der Seite be­schrie­ben und kann sich daher gut an­pas­sen, wenn die Größe des Fens­ters sich än­dert. Al­ter­na­tiv kann man mit einer An­chor­Pa­ne die un­ter­ge­ord­ne­ten Ele­men­te an be­stimm­ten Po­si­tio­nen ver­an­kern.

Die un­ter­ge­ord­ne­ten Ele­men­te kön­nen ver­schie­de­ne Kon­troll-Ele­men­te sein: die wich­tigs­ten sind Label, Text­Field, But­ton, Sli­der, Menus, Me­nuI­tems. Er­gänzt wer­den die Stan­dard-Kon­troll­ele­men­te durch zwei von der ZPG IMP be­reit­ge­stell­te Ele­men­te²: Pic­tu­re­View­er (kann ein Bild an­zei­gen, scrol­len, zoo­men und den Ver­lauf spei­chern) und Num­ber­Field (man kann nur Zah­len ein­ge­ben und diese als Int oder Dou­ble ab­fra­gen).

Die Ver­knüp­fung der Kon­troll-Ele­men­te mit dem Java-Pro­gramm er­folgt über die Fest­le­gung der Con­trol­ler-Klas­se (Rei­ter "Con­trol­ler"), der fx:id (Rei­ter: "Code") und der Ac­tion­Lis­tener-Me­tho­den.

Con­trol­ler: Ganz wich­tig! Der Name der Con­trol­ler-Klas­se muss hier ein­ge­tra­gen wer­den, damit die GUI kor­rekt mit einer In­stanz der Con­trol­ler-Klas­se as­so­zi­iert wird. Die­ses Con­trol­ler-Ob­jekt wird nor­ma­ler­wei­se au­to­ma­tisch er­stellt, wenn die FXML-Datei in­ter­pre­tiert wird.

Die fx:id (Name des Ele­ments) ist not­wen­dig, wenn man die At­tri­bu­te die­ses Ele­ments aus dem Java-Pro­gramm her­aus aus­le­sen oder än­dern möch­te. Der Name ist dann der Name der Re­fe­renz­va­ria­ble in der Con­trol­ler-Klas­se. Über die Com­pi­ler­di­rek­ti­ve @FXML wird ge­kenn­zeich­net, dass die­ses At­tri­but mit einem GUI-Ele­ment ver­knüpft wer­den soll.

Lis­tener-Me­tho­den: Bei onAc­tion muss der Namen der Me­tho­de ein­ge­tra­gen wer­den, die auf­ge­ru­fen wer­den soll, wenn der But­ton ge­drückt oder der Me­nü­punkt aus­ge­wählt wurde.

¹ Scene Buil­der ist ein frei ver­füg­ba­res Open Sour­ce Pro­jekt der Firma Gluon. Down­load des Scene Buil­ders: https://​gluon­hq.​com/​pro­ducts/​scene-​buil­der/

² Die JAR-Datei wurde mit Java 11 er­stellt. Falls man mit einer äl­te­ren Ver­si­on ar­bei­tet, muss man die JAR-Datei er­neut er­stel­len. Dazu muss man in BlueJ in den Un­ter­ord­ner imp wech­seln und Menü Pro­ject -> Crea­te Jar-File wäh­len. Eine Main-Class muss nicht fest­ge­legt wer­den.

Hin­ter­grund GUI-Pro­gram­mie­rung: Her­un­ter­la­den [odt][289 KB]

Hin­ter­grund GUI-Pro­gram­mie­rung: Her­un­ter­la­den [pdf][517 KB]

Wei­ter zu Lamb­da-Aus­drü­cke