Im Folgenden werden die Konstruktoren und Funktionen der Klassen Button, Screen und TextField beschrieben
Button zeichnet einen Knopf mit beliebigen Dimensionen an beliebiger Stelle auf den Screen. Auch das Label ist beliebig. Wenn der Knopf gedrückt wird, gibt er seine Id aus. So kann bestimmt werden, welcher Knopf gedrückt wurde.
TextField ist über weite Teile analog zu Button. Allerdings beinhaltet das TextField text und liefert diesen zurück, damit das Programm damit weiterarbeiten kann.
Die Klasse Screen ist in erster Linie für die Erstellung einfacher Anwendungen gedacht; vor allem Android Apps und Mockups für Android Apps. Das Konzept beruht darauf, dass jeder Screen ein Hintergrundbild enthalten kann und bis zu 25 Buttons und TextFields. Die Userinnen und User können zwischen verschiedenen Screens hin und her wechseln durch das Drücken von Buttons

Die Klasse Button

Zeichnet einen einfachen Knopf mit einem Label
Constructor:

Button(String l, int i, int x, int y, int w, int h, int ts, int s)
   label = l; // Beschriftung des Knopfes
   id = i; // Eine eindeutige ID für den Knopf
   xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
   yPos = y; 
   width_ = w; 
   height_ = h;
   textSize_ = ts;
   nextScreen = s; // Zu welchem Screen führt der Button? - Nur relevant wenn Button zusammen mit der Klasse Screen verwendet wird

int showAndCheckButton() -- malt den Knopf auf den Canvas. Gibt -1 zurück, wenn er nicht gedrückt wird, ansonsten die Id. In der draw() Methode zu verwenden
int getWidth()
int getHeight()
void makeTransparant(boolean t) -- macht den Knopf unsichtbar. Sinnvoll wenn, der Sketch auf ein Android Gerät geladen werden soll und Flächen animiert werden sollen
void setLabel(String l) -- verändert die Beschriftung

Die Klasse TextField

Constructor:

  TextField(String t, int i, int x, int y, int w, int h, int ts) {
    text_ = t; // Beschriftung des Knopfes
    id = i; // Eine eindeutige ID für den Knopf
    xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
    yPos = y; 
    width_ = w; 
    height_ = h;
    textSize_ = ts;
  }

String showAndcheckTextField() -- Malt das TextField auf den Canvas. Gibt zurück, welcher Text enthalten ist. In der draw() Funktion zu verwenden.
int getWidth()
int getHeight()
void setText(String t) -- den Text im TextField aktualisieren
void setLimit(int l) -- Die Anzahl der Zeichen limitieren, damit der User nicht über das TextField hinaus schreiben kann.
String getText() -- den aktuellen Text auslesen
boolean checkFocus() -- Hilfsfunktion
void tKeyTyped() -- Hilfsfunktion

Die Klasse Screen

Hier gibt es 2 mögliche Constructors
- Screen(int s) -- nur die Id wird als Argument übergeben
- Screen(int s, String img_) -- die Id und ein Pfad zu einem Bild werden übergeben
public void addButton(String l, int i, int x, int y, int w, int h, int ts, int s) -- Hinzufügen eine neuen Buttons
public void addTextField(String l, int i, int x, int y, int w, int h, int ts) -- Hinzufügen eines neuen TextFields
public void showScreen()
int[] getButtonStates()
String[] getTextFieldContents()
public void hideScreen()
public void makeTransparant(boolean t) -- macht die Buttons transparent
public void checkFocus() -- wichtige Hilfsfunktion.
public void tKeyTyped() -- wichtige Hilfsfunktion

Der Code der Klassen

// ==================================================================
// ==================== KLASSENDEFINITIONEN =========================
// ==================================================================
// Diese Klassendefinitionen sind einfach in ein neues Sketch zu kopieren

// =======================KLASSE SCREEN===============================
class Screen {
  private int screenId = 0;
  private PImage img = null;
  public Button[] button = new Button[25];
  private int[] buttonState = new int[25];
  private int buttonCounter = 0;
  public TextField[] textField = new TextField[25];
  private String[] textFieldContent = new String[25];
  private int textFieldCounter = 0;
  
  Screen(int s) {
    screenId = s;
    for (int i=0; i<25; i++) {
      buttonState[i] = -1;
      textFieldContent[i] = "";
    }
  }
  
  Screen(int s, String img_) {
    screenId = s;
    img = loadImage(img_);
    img.resize(width, height);
    for (int i=0; i<25; i++) {
      buttonState[i] = -1;
      textFieldContent[i] = "";
    }
  }
  
  // Zeigt den Screen an
  public void showScreen() {
    if (img!=null) {
      image(img, 0,0);
    } else {
      textSize(20);
      textAlign(CENTER, CENTER);
      text(screenId, width/2, height/2);
    }
  }
  
  int[] getButtonStates(){
    return checkButtons(); 
  }
  
  String[] getTextFieldContents(){
    return checkTextFields();
  }
  
  // Überdeckt den Screen
  public void hideScreen() {
    background(120);
  }
  
  public void makeTransparant(boolean t) {
    for (int i=0; i<buttonCounter; i++) {
      button[i].makeTransparant(t);
    }
  }
  
  public void addButton(String l, int i, int x, int y, int w, int h, int ts, int s) {
    if (buttonCounter<25) {
      button[buttonCounter] = new Button(l, i, x, y, w, h, ts, s);
      buttonCounter++;
    }
  }
  
  public void addTextField(String l, int i, int x, int y, int w, int h, int ts) {
    if (textFieldCounter<25) {
      textField[textFieldCounter] = new TextField(l, i, x, y, w, h, ts);
      textFieldCounter++;
    }
  }  
  
  public int[] checkButtons() {
    for (int i=0; i<buttonCounter; i++) {
      buttonState[i] = button[i].showAndCheckButton();
    }
      return buttonState;
  }
  
  public String[] checkTextFields() {
    for (int i=0; i<textFieldCounter; i++) {
      textFieldContent[i] = textField[i].showAndcheckTextField();
    }
    return textFieldContent;
  }
  
  public void checkFocus() {
    for (int i=0; i<textFieldCounter; i++) {
      textField[i].checkFocus();
    }
  }
  
  public void tKeyTyped() {
    for (int i=0; i<textFieldCounter; i++) {
      textField[i].tKeyTyped();
    }
  }
}


// ===================KLASSE BUTTON=================================
class Button {

  // Interne Variablen der Klasse. Man könnte auch das Schlüsselwort 'private' voranstellen
  String label;
  int id;
  int xPos, yPos, width_, height_;
  int textSize_;
  int nextScreen;
  boolean buttonIsTransparant = false;

  // Constructor 
  Button(String l, int i, int x, int y, int w, int h, int ts, int s) {
    label = l; // Beschriftung des Knopfes
    id = i; // Eine eindeutige ID für den Knopf
    xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
    yPos = y; 
    width_ = w; 
    height_ = h;
    textSize_ = ts;
    nextScreen = s; // Zu welchem Screen führt der Button?
  }

  int showAndCheckButton() {
    int r = -1;
    push();
    if ((mouseX>=xPos) && (mouseX<=xPos+width_) && (mouseY>=yPos) && (mouseY<=yPos+height_)) {
      strokeWeight(1);
      stroke(204, 102, 0);
      fill(255);
      if (mousePressed) {
        r = nextScreen;
        fill(120);
      }
    } else {
      strokeWeight(1);
      stroke(0, 0, 0);
      fill(255);
    }  
    if (!buttonIsTransparant) {
      rect(xPos, yPos, width_, height_);
      fill(0);
      textAlign(CENTER, CENTER);
      textSize(textSize_);
      text(label, xPos+width_/2, yPos+height_/2); 
    }
    pop();
    return r;
  }
  
  int getWidth() {
    return width_;
  }
  
  int getHeight() {
    return height_;
  }
  
  void makeTransparant(boolean t) {
    buttonIsTransparant = t;
  }
  
  void setLabel(String l) {
    label = l;
  }
}


// ====================KLASSE TEXTFIELD================================
class TextField {

  // Interne Variablen der Klasse. Man könnte auch das Schlüsselwort 'private' voranstellen
  String text_;
  int id;
  int xPos, yPos, width_, height_;
  int textSize_;
  boolean isFocussed = false;
  int lim = 10;

  // Constructor 
  TextField(String t, int i, int x, int y, int w, int h, int ts) {
    text_ = t; // Beschriftung des Knopfes
    id = i; // Eine eindeutige ID für den Knopf
    xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
    yPos = y; 
    width_ = w; 
    height_ = h;
    textSize_ = ts;
  }

  String showAndcheckTextField() {
    push();
    if ((mouseX>=xPos) && (mouseX<=xPos+width_) && (mouseY>=yPos) && (mouseY<=yPos+height_)) {
      strokeWeight(1);
      stroke(204, 102, 0);
      fill(255);
    } else {
      strokeWeight(1);
      stroke(0, 0, 0);
      fill(255);
    }  
    if (isFocussed) {
      strokeWeight(2);
      stroke(204, 102, 0);
    }
    rect(xPos, yPos, width_, height_);
    fill(0);
    textAlign(CENTER, CENTER);
    textSize(textSize_);
    text(text_, xPos+width_/2, yPos+height_/2); 
    pop();
    return text_;
  }
  
  int getWidth() {
    return width_;
  }
  
  int getHeight() {
    return height_;
  }
  
  void setText(String t) {
    text_ = t;
  }
  
  void setLimit(int l) {
    lim = l;
  }
 
  String getText() {
    return text_;
  }
  
  /* https : // forum.processing.org/two/discussion/20882/very-basic-question-how-to-create-an-input-text-box#latest
 * forum.processing.org/two/discussion/423/ */
  boolean checkFocus() {
    isFocussed = mouseX > xPos & mouseX < xPos+width_ & mouseY > yPos & mouseY < yPos+height_;  
    return isFocussed;
  }
  
  void tKeyTyped() {
    if (isFocussed) {
      char k = key;
      if (k == ESC) {
        // println("esc 2");
        //state=stateNormal; 
        key=0;
        return;
      } 
      if (k == CODED) {
        return;
      }
   
      final int len = text_.length();
   
      if (k == BACKSPACE) {
        text_ = text_.substring(0, max(0, len-1));
      } else if (len >= lim) {
        return;
      } else if (k == ENTER || k == RETURN) {
        // this ends the entering 
        println("RET ");
        //state  = stateNormal; // close input box 
        //result = text_;
      } else if (k == TAB & len < lim-3) {
        text_ += "    ";
      } else if (k == DELETE) {
        text_ = "";
      } else if (k >= ' ') {
        text_ += str(k);
      }
    }
  }
}

Dokumentation: Funktionsumfang der User Interface Klassen Screen, Button, TextField

Inhaltsverzeichnis

Die Klasse Button

Die Klasse TextField

Die Klasse Screen

Der Code der Klassen

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Navigation

Werkzeuge