oop2

Appearance

Return to top
On this page

Meme Studio (Prüfung 1 FS23)

Repository 

https://gitlab.fhnw.ch/oop/oop2-versuche/template-q1.git

Die URL auf GitLab: https://gitlab.fhnw.ch/oop/oop2-versuche/template-q1

Versuch als PDF

Zeit

  • 45 min

Hilfsmittel

  • Erlaubt: alte Übungen, Slides, Material oop1 + oop2
  • Verboten: Kommunikation, AI (führt zu Note 1)

Ziel: Erstellen Sie folgendes GUI für die Applikation "Meme Studio"

b

Vorgehen

Implementieren Sie den Konstruktor von View gemäss weiterem Vorgehen. Alle Attribute der Klasse View sind bereits für Sie angelegt worden. Es gilt die Komponenten entsprechend Vorlage im GUI zu positionieren und die Callbacks der Listener für btUpdate und btClipboard zu registrieren und zu implementieren.

  • ☑ Importieren Sie das Projekt und starten Sie main in der Klasse App.java, um zu validieren, dass der Import geklappt hat.

Komponenten

  • Auf der linken Seite finden Sie das memePanel der Klasse MemePanel.
  • Rechts finden Sie oben das propertiesPanel des Typs JPanel und den Button Copy to Clipboard.
  • Das propertiesPanel besteht wiederum aus mehreren UI Komponenten. Fügen Sie diese via GridBagLayout dem Panel mit hinzu. Das Layout von propertiesPanel ist ein GridBagLayout.
  • textBottom und textTop sind Objekte des Typs MemeText, schauen Sie die Klasse an um zu sehen, welche Information sie für MemePanel trägt.

1. MemePanel, Properties Panel, Combobox und Copy to Clipboard Button

  • ☑ Setzen Sie das Layout von View im Konstrukor als GridBagLayout.
  • ☑ Rufen Sie im Konstruktor memePanel.update auf und übergeben Sie "meme0", textTop und textBottom.
  • ☑ Im Konstruktor von View fügen Sie folgende GUI Elemente gemäss Layout hinzu
    • ☑ memePanel
    • ☑ propertiesPanel
    • ☑ btClipboard
    • ☑ memeSelect innerhalb von propertiesPanel
  • ☑ Füllen Sie memeSelect mit Strings im Format meme01 bis meme14. Verwenden Sie hierzu die Methode .addItem(String) von memeSelect.
  • ☑ Setzen Sie für die Panels gemäss GUI die Borders mit MyBorderFactory.createMyBorder().
  • ☑ Die Zeile propertiesPanel.setPreferredSize(
    new Dimension(300, propertiesPanel.getPreferredSize().getSize().height)); am Ende des Konstrukturs belassen.

2. Update Button

Mit einem Click auf btUpdate soll ein Methodenaufruf von update von memePanel erfolgen. Erstellen und registrieren Sie hierzu einen anonymen ActionListener.

Tipp: Sie können von memeSelect den aktuellen String erhalten, in dem Sie .getSelectedItem() in einen String casten.

  • ☑ Adden Sie den Button gemäss GUI
  • ☑ Rufen Sie beim Click auf btUpdate die Methode update(String, MemeText, MemeText) von memePanel auf und übergeben Sie als erstes Argument den Selektierten String von memeSelect und als zweites und drittes Argument textTop und textBottom.

3. Texte

Um einen Text im memePanel erscheinen zu lassen, ist es erforderlich textTop und textBottom via update die Werte von den zwei JTextFields, Schriftgrösse und Backdrop (mit oder ohne schwarzen Hintergrund) zeichen, mitzugeben.

  • ☑ Adden Sie die zwei tfTop und tfBottom im propertiesPanel mit entsprechenden GridBagConstraints.
  • ☑ Verschieben Sie btUpdate im GUI entsprechend nach unten.
  • ☑ Im Listener von btUpdate: bevor Sie update von memePanel aufrufen, rufen Sie nun update von den textTop und textBottom auf. Übergeben Sie als Parameter die Werte der JTextFields (Methode .getText()).
  • ☑ übergeben Sie für die Schriftgrösse jeweils 14 und für backdrop den Wert true.

Nun sollten Sie in der Lage sein, Text erscheinen zu lassen und via Update zu ändern. Auch sollten Sie die Texte mit der Maus (Drag and Drop) bereits bewegen können.

4. Font Slider und Checkbox für Backdrop

Erweitern Sie die Applikation nun mit dem Slider für die grösse der Schrift und der Checkbox, mit der Sie den schwarzen Hintergrund des Texts ein- oder ausschalten können.

  • ☑ verwenden Sie .getValue() vom Slider um den Wert als int zu erhalten.
  • ☑ verwenden Sie .isSelected() von der Checkbox.

5. Copy to Clipboard

Der Methode Utility.graphicsToClipBoard können Sie als Parameter das memePanel mitgeben, um die Meme als Bild in die Zwischenablage zu kopieren. Erstellen Sie hierzu einen anonymen ActionListener für den Button btClipboard, welcher die Meme in die Zwischenablage kopiert.

Wichtig

Der Methodenaufruf: propertiesPanel.setPreferredSize
(new Dimension(300, propertiesPanel.getPreferredSize().getSize().height)); muss im Konstruktor in der letzten Zeile erfolgen.

Klassendiagramm