PROGRAMMIERPRAKTIKUM GRAPHICAL USER INTERFACES. Tobias Witt

Transcription

1 PROGRAMMIERPRAKTIKUM GRAPHICAL USER INTERFACES Tobias Witt

2 K.O.-SYSTEM Korrekt Oida! Jeder Student für jeden Meilenstein 1, ½ oder 0 K.O. Erstes K.O. für den Eingangstest ab 15 Punkten (ohne Aufgabe 3) Zum Bestehen: Max. 2 fehlende K.O.

3 GRUNDLAGEN

4 TOOLKITS/FRAMEWORKS Bibliotheken/Sammlungen von Funktionen und Klassen Swing, AWT, SWT JavaFX!!!

5 FENSTER import javafx.application.application; import javafx.stage.stage; public class Fenster extends Application { public static void main(string[] args) { launch(args); } public void start(stage primarystage) { primarystage.settitle("ein Fenster"); primarystage.show(); }

6 Titel Stage Scene

7 FENSTER (UND EIN EVENT) Button button = new Button(); button.settext("hallo Welt!"); button.setonaction((actionevent event) -> { Alert alert = new Alert(Alert.AlertType.INFORMATION); alert.settitle("hallo Welt"); alert.setcontenttext("ich habe 'Hallo Welt' gesagt!"); alert.showandwait(); }); StackPane root = new StackPane(); root.getchildren().add(button); Scene scene = new Scene(root, 500, 500); primarystage.setscene(scene); primarystage.settitle("mein Fenster"); primarystage.show();

8

9 SCENE GRAPH Stage Scene Root-Node Parent-Node Parent-Node Leaf-Node Leaf-Node Leaf-Node Leaf-Node

10 Stage primarystage new Scene( ) StackPane root Button button

11 BUTTON Button button = new Button("Ein Button");

12 SLIDER/SPINNER Minimum Aktueller Wert Maximum Slider slider = new Slider(50, 100, 50); Spinner<Integer> spinner = new Spinner<>(50, 100, 50);

13 CHOICEBOX ChoiceBox box = new ChoiceBox(); box.getitems().addall("eins", "Zwei", "Drei", "Vier");

14 PROGRESSBAR ProgressIndicator progress = new ProgressIndicator(); progress.setprogress(.25);

15 CHECKBOX/RADIOBUTTON ToggleGroup group = new ToggleGroup(); RadioButton b1 = new RadioButton("Eins"); b1.settogglegroup(group); b1.setselected(true); RadioButton b2 = new RadioButton("Zwei"); b2.settogglegroup(group); CheckBox b3 = new CheckBox("Eins - Checkbox ); b1.setselected(true); CheckBox b4 = new CheckBox("Zwei - Checkbox");

16 FLOWPANE FlowPane root = new FlowPane(); root.getchildren().addall(button, textfield, textarea, slider, spinner, box, progress, b1, b2, b3, b4); Scene scene = new Scene(root, 500, 500);

17 TextField Button Spinner TextArea TextArea ChoiceBox ProgressIndicator RadioButton CheckBox

18 EVENTS Spinner<Integer> spinner = new Spinner<>(50, 100, 50); Slider slider = new Slider(50, 100, 50); Label label = new Label(String.format("Wert: %d", (int) slider.getvalue()));

19 EVENTS slider.valueproperty().addlistener((observablevalue<? extends Number> ov, Number oldvalue, Number newvalue) -> { int value = newvalue.intvalue(); spinner.getvaluefactory().setvalue(value); label.settext(string.format("wert: %d", value)); }); spinner.valueproperty().addlistener((observablevalue<? extends Number> ov, Number oldvalue, Number newvalue) -> { int value = newvalue.intvalue(); slider.setvalue(value); label.settext(string.format("wert: %d", value)); });

20 EVENTS GridPane root = new GridPane(); root.add(slider, 1, 1); root.add(spinner, 1, 2); root.add(label, 1, 3); Scene scene = new Scene(root, 500, 500);

21

22 LAYOUT

23 GridPane root = new GridPane(); root.setalignment(pos.center); root.sethgap(10); root.setvgap(10); root.setpadding(new Insets(25, 25, 25, 25));

24 Text title = new Text("Willkommen bei Meinkraft"); title.setfont( Font.font("Verdana", FontWeight.NORMAL, 20)); root.add(title, 0, 0, 2, 1);

25 Label volume = new Label("Lautstärke:"); root.add(volume, 0, 1); Label teamcolor = new Label("Teamfarbe:"); root.add(teamcolor, 0, 2);

26 ToggleGroup teamcolorgroup = new ToggleGroup(); RadioButton redcontrol = new RadioButton("Rot"); redcontrol.settogglegroup(teamcolorgroup); RadioButton greencontrol = new RadioButton("Grün"); greencontrol.settogglegroup(teamcolorgroup); RadioButton bluecontrol = new RadioButton("Blau"); bluecontrol.settogglegroup(teamcolorgroup); HBox teamcolorcontrols = new HBox(); teamcolorcontrols.getchildren().addall(redcontrol, greencontrol, bluecontrol); root.add(teamcolorcontrols, 1, 2);

27 Button button = new Button("Speichern"); HBox hbbutton = new HBox(10); hbbutton.setalignment(pos.bottom_right); hbbutton.getchildren().add(button); root.add(hbbutton, 1, 4); Text message = new Text(); message.setfill(color.firebrick); root.add(message, 1, 6);

28

29

30 Text message = new Text(); message.setfill(color.firebrick); root.add(message, 1, 6); Scene scene = new Scene(root, 500, 500);

31 Text message = new Text(); message.setfill(color.firebrick); root.add(message, 1, 6); root.setgridlinesvisible(true); Scene scene = new Scene(root, 500, 500);

32

33

34 CSS Text title = new Text("Willkommen bei Meinkraft"); title.setfont(font.font("verdana", )); root.add(title, 0, 0, 2, 1); Text message = new Text(); message.setfill(color.firebrick); root.add(message, 1, 6);

35 CSS Text title = new Text("Willkommen bei Meinkraft"); title.setid("title"); root.add(title, 0, 0, 2, 1); Text message = new Text(); message.setid("message"); root.add(message, 1, 6); URL stylesheet = getclass().getresource("/login.css"); scene.getstylesheets().add( stylesheet.toexternalform());

36 CSS.root { -fx-background-color: pink; }

37 CSS.label { -fx-font-size: 12px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow(gaussian, rgba(155, 155, 255, 0.5), 0, 0, 0, 1); } #title { -fx-font-size: 32px; -fx-font-family: "Verdana"; -fx-fill: #818101; -fx-effect: innershadow(three-pass-box, rgba(0, 0, 0, 0.7), 6, 0.0, 0, 2); } #message { -fx-fill: FIREBRICK; -fx-font-weight: bold; -fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.5), 0, 0, 0, 1 ); }

38 CSS.button { -fx-text-fill: white; -fx-font-family: "Arial Narrow"; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box, rgba(0,0,0,0.6), 5, 0.0, 0, 1); }.button:hover { -fx-background-color: linear-gradient(#2a5058, #61a2b1); }

39

40

41 FXML public void start(stage primarystage) throws Exception { Parent root = FXMLLoader.load( getclass().getresource("/fenster.fxml")); Scene scene = new Scene(root, 500, 500); String stylesheet = getclass().getresource("/login.css").toexternalform(); scene.getstylesheets().add(stylesheet); primarystage.setscene(scene); } primarystage.settitle("meinkraft"); primarystage.show();

42 FXML <?xml version="1.0" encoding="utf-8"?> <?import javafx.scene.layout.gridpane?>

43 FXML Root-Node <GridPane fx:controller="de.hhu.propra.javafxexample.fenstercontroller" xmlns:fx=" alignment="center" hgap="10" vgap="10"> <padding> <Insets top="25" right="25" bottom="10" left="25" /> </padding> </GridPane>

44 FXML <Text fx:id="title" text="willkommen bei Meinkraft" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/> <Label text="lautstärke:" GridPane.columnIndex="0" GridPane.rowIndex="1"/> <Label text="teamfarbe:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>

45 FXML <Slider min="0" max="100" GridPane.columnIndex="1" GridPane.rowIndex= 1"/> <HBox GridPane.columnIndex="1" GridPane.rowIndex="2"> <fx:define> <ToggleGroup fx:id="teamcolorgroup"/> </fx:define> <RadioButton text="rot" togglegroup="$teamcolorgroup"/> <RadioButton text="grün" togglegroup="$teamcolorgroup"/> <RadioButton text="blau" togglegroup="$teamcolorgroup"/> </HBox>

46 FXML <HBox alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"> <Button text="speichern" onaction="#handlesavebutton" /> </HBox> <Text fx:id="message" GridPane.columnIndex="1" GridPane.rowIndex="6"/>

47 CONTROLLER public class FensterController private Text message; fx:id= private ToggleGroup teamcolorgroup; fx:id= teamcolorgroup } onaction= protected void handlesavebutton(actionevent event) { if (teamcolorgroup.getselectedtoggle() == null) { message.settext("bitte Teamfarbe auswählen!"); } }

48 HAPPY LITTLE CANVAS

49 PIXELGRAFIK

50 FORMEN <StackPane xmlns:fx=" fx:controller=" xample.fenstercontroller"> <Canvas fx:id="mycanvas" width="500" height="500"/> </StackPane>

51 FORMEN public class FensterController implements Initializable private Canvas public void initialize( URL location, ResourceBundle resources) { GraphicsContext g2d = mycanvas.getgraphicscontext2d(); g2d.setfill(color.white); g2d.fillrect(0, 0, mycanvas.getwidth(), mycanvas.getheight()); } drawshapes(g2d);

52 FORMEN I private void drawshapes(graphicscontext g2d) { g2d.setfill(color.green); g2d.setstroke(color.blue); g2d.setlinewidth(5); g2d.strokeline(40, 10, 10, 40); g2d.filloval(10, 60, 30, 30); g2d.strokeoval(60, 60, 30, 30); } g2d.fillroundrect(110, 60, 30, 30, 10, 10); g2d.strokeroundrect(160, 60, 30, 30, 10, 10);

53

54 FORMEN II private void drawshapes(graphicscontext g2d) { g2d.setlinewidth(20); g2d.setlinecap(strokelinecap.butt); g2d.strokeline(30, 130, 100, 130); g2d.setlinecap(strokelinecap.round); g2d.strokeline(30, 160, 100, 160); g2d.setlinecap(strokelinecap.square); g2d.strokeline(30, 190, 100, 190);

55 double[] xpoints = {30, 60, 90}; double[] ypoints = {290, 230, 290}; g2d.setlinejoin(strokelinejoin.bevel); g2d.strokepolygon(xpoints, ypoints, 3); g2d.setlinejoin(strokelinejoin.miter); xpoints[0] += 120; xpoints[1] += 120; xpoints[2] += 120; g2d.strokepolygon(xpoints, ypoints, 3); } g2d.setlinejoin(strokelinejoin.round); xpoints[0] += 120; xpoints[1] += 120; xpoints[2] += 120; g2d.strokepolygon(xpoints, ypoints, 3);

56 Einfach abschließen Rund abschließen Quadratisch abschließen Rund verbinden Schräg verbinden Spitz verbinden

57 EVENTS <BorderPane xmlns:fx=" fx:controller="de.hhu.propra.javafxexample.fenstercontroller" onkeypressed="#keypressed" onkeyreleased="#keyreleased"> <center> <Canvas fx:id="mycanvas" focustraversable="true" width="500" height="400"/> </center> <bottom> <ScrollPane fx:id="scrollpane" prefheight="100"> <Text fx:id="log" GridPane.columnIndex="0" GridPane.rowIndex="1"/> </ScrollPane> </bottom> </BorderPane>

58 public class FensterController implements Initializable public ScrollPane private Canvas private Text log; private GraphicsContext public void initialize( URL location, ResourceBundle resources) { mycanvas.requestfocus(); g2d = mycanvas.getgraphicscontext2d(); } g2d.setfill(color.white); g2d.fillrect(0, 0, mycanvas.getwidth(), mycanvas.getheight()); }

59 public void keypressed(keyevent event) { log.settext(log.gettext() + event.gettext() + "-Taste gedrückt\n"); } scrolltobottom(); public void keyreleased(keyevent event) { log.settext(log.gettext() + event.gettext() + "-Taste losgelassen\n"); } scrolltobottom(); private void scrolltobottom() { scrollpane.setvvalue(scrollpane.getvmax()); }

60 Text in ScrollPane Canvas

61 <center> <Canvas fx:id="mycanvas" focustraversable="true" width="500" height="400"/> </center>

62 <center> <Canvas fx:id="mycanvas" focustraversable="true" onmouseclicked="#canvasclicked" width="500" height="400"/> </center>

63 public void canvasclicked(mouseevent event) { double radius = 10, x = event.getx(), y = event.gety(); log.settext(log.gettext() + String.format( "Maus bei (%d, %d) geklickt\n", (int) x, (int) y)); scrolltobottom(); } g2d.setfill(color.black); g2d.filloval(x - radius, y - radius, radius * 2, radius * 2);

64

65 SZENENWECHSEL

66 SZENEN public void start(stage primarystage) throws Exception { FXMLLoader startloader = new FXMLLoader( getclass().getresource("/start.fxml")); Parent start = startloader.load(); Parent gamearea = FXMLLoader.load( getclass().getresource("/fenster.fxml")); Scene startscene = new Scene(start, 200, 100); Scene gamescene = new Scene(gameArea, 500, 500);

67 SZENENWECHSEL public void start(stage primarystage) throws Exception { ((StartController) startloader.getcontroller()).setonstart(() -> { }); primarystage.setscene(gamescene);

68 SZENEN String stylesheet = getclass().getresource("/fenster.css").toexternalform(); startscene.getstylesheets().add(stylesheet); primarystage.setscene(startscene); } primarystage.settitle("meinkraft"); primarystage.show();

69 START-CONTROLLER <StackPane xmlns:fx=" fx:controller="de.hhu.propra.javafxexample.startcontroller"> <Button fx:id="startbutton" text="start" onaction="#startgame"/> </StackPane>

70 START-CONTROLLER public class StartController { private Runnable r; public void setonstart(runnable r) { this.r = r; } public void startgame(actionevent actionevent) { r.run(); }

71 SZENENWECHSEL public void start(stage primarystage) throws Exception { ((StartController) startloader.getcontroller()).setonstart(() -> { }); primarystage.setscene(gamescene);

72

73 BILDQUELLEN Bild Quelle Gui / / /000000/20000/1000/100/21130/21130.strip.gif Layout Happy Little Canvas Szenenwechsel