api:documentation:grafik:gui
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
api:documentation:grafik:gui [2023/04/01 17:40] – Martin Pabst | api:documentation:grafik:gui [2023/04/02 14:24] (aktuell) – Martin Pabst | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== GUI-Elemente ====== | ====== GUI-Elemente ====== | ||
<WRAP center round info 80%> | <WRAP center round info 80%> | ||
- | Die Online-IDE bringt ein paar einfache GUI-Elemente mit, mit denen sich einfache | + | Die Online-IDE bringt ein paar einfache GUI-Elemente mit, mit denen sich Dialoge bauen lassen: |
* Button | * Button | ||
* Textfield (einzeiliges Texteingabefeld) | * Textfield (einzeiliges Texteingabefeld) | ||
* Checkbox (Ankreuzfeld) | * Checkbox (Ankreuzfeld) | ||
* Radiubutton (Auswahlfeld) | * Radiubutton (Auswahlfeld) | ||
+ | |||
+ | Das folgende kleine Beispiel zeigt die Verwendung. | ||
</ | </ | ||
Zeile 11: | Zeile 13: | ||
< | < | ||
- | <div class=" | + | <div class=" |
<script type=" | <script type=" | ||
- | TextField t = new TextField(50, 50, 300, 32, " | + | MyButton b = new MyButton(); |
- | CheckBox cb = new CheckBox(50, | + | |
- | Text t1 = new Text(50, 250, 32, "Ich bin"); | + | class MyButton extends Button { |
- | t1.setFillColor(0x808080); | + | |
+ | CheckBox cb = new CheckBox(50, 150, 32, 32, "Ich habe Hunger." | ||
- | RadioButton rSchueler | + | Text t1 = new Text(50, 250, 32, "Ich bin"); |
- | RadioButton rLehrkraft = new RadioButton(50, | + | |
- | RadioButton rWederNoch = new RadioButton(50, | + | |
- | rSchueler.connectTo(rLehrkraft, | + | |
+ | | ||
+ | | ||
- | Button b = new Button(400, 500, 32, " | + | |
+ | super(400, 500, 32, " | ||
+ | t1.setFillColor(0x808080); | ||
+ | rSchueler.connectTo(rLehrkraft, | ||
+ | } | ||
+ | |||
+ | | ||
+ | print(" | ||
+ | println(cb.isChecked() ? " | ||
+ | println(" | ||
+ | println(" | ||
+ | } | ||
+ | |||
+ | } | ||
</ | </ | ||
Zeile 32: | Zeile 47: | ||
</ | </ | ||
+ | |||
+ | ===== Methodenaufruf bei Benutzeraktionen ===== | ||
+ | <WRAP center round info 80%> | ||
+ | Es gibt zwei Möglichkeiten, | ||
+ | * Überschreiben der Methode '' | ||
+ | * Implementieren eines '' | ||
+ | |||
+ | </ | ||
+ | ==== Überschreiben der onChange-Methode ==== | ||
+ | < | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <script type=" | ||
+ | MyTextField t = new MyTextField(50, | ||
+ | |||
+ | class MyTextField extends TextField { | ||
+ | |||
+ | public void onChange(String newValue) { | ||
+ | println(" | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | ==== OnChange-Listener ==== | ||
+ | < | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <script type=" | ||
+ | TextField t = new TextField(50, | ||
+ | |||
+ | t.addChangeListener(new MyChangeListener()); | ||
+ | |||
+ | class MyChangeListener implements ChangeListener { | ||
+ | |||
+ | public void onChange(Object changedObject, | ||
+ | println(" | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Verändern des Aussehens ===== | ||
+ | <WRAP center round info 80%> | ||
+ | Alle GUI-Elemente verfügen über Methoden zum Ändern (fast) aller Farben und lassen sich beliebig vergrößern/ | ||
+ | </ | ||
+ | |||
+ | ==== Extrembeispiel ==== | ||
+ | < | ||
+ | |||
+ | <div class=" | ||
+ | <script type=" | ||
+ | SystemTools.setSpeed(-1); | ||
+ | |||
+ | MyTextField t = new MyTextField(200, | ||
+ | t.setFillColor(Color.bisque); | ||
+ | t.setBorderColor(Color.blueviolet); | ||
+ | t.setBorderWidth(8); | ||
+ | t.setTextColor(0x942424); | ||
+ | |||
+ | class MyTextField extends TextField { | ||
+ | |||
+ | public void onChange(String newValue) { | ||
+ | println(" | ||
+ | } | ||
+ | |||
+ | | ||
+ | rotate(0.5); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ |
api/documentation/grafik/gui.1680363630.txt.gz · Zuletzt geändert: 2023/04/01 17:40 von Martin Pabst