Grafiska standardelement

Vi ska nu lära oss att avända knappar, txtboxar, labels, slider mm. Exempelvis kan det se ut så här:

gui

Det hela kallas för GUI som stor för Graphical User Interface. Vi kommer att kunna snart disigna ett gränssnitt (=fönster) mot användaren med hjälp av färdiga element.

Det som krävs är ett tillägg, en så kalld bibliotek (library). Gör så här:

Nu är utvecklingsmijön förberedd. För att kunna använda till exempel i ett program krävs en del saker:

Ett fungerande exempel:

//Variabler
import g4p_controls.*; // importera biblioteket

GButton knapp;


void setup(){
  size(360,200);

  knapp = new GButton(this, 50, 20, 80, 40);
  knapp.setText("Rita cirkel");
  knapp.addEventHandler(this, "knapp_click");
}

public void knapp_click(GButton source, GEvent event) { 
  ellipse(100,100,50,50);
} 

// låt vara kvar, behövs för funktion
// även om tom.
void draw(){

}

Laboration 1

GUI Builder

Det är rätt många steg som behövs för att implementera en knapp. Och det är likadant för andra GUI-element. Räät mycket kod som är samma och rätt mycket som kan går fel om det inte görs rätt. Men för processing finns en så kallad GUI-Builder, ett extra program som gör det åt dig. Så här lägger du till verktyget:

Nu har du lagt till verktyget för gott till din utvecklingsmiljö. Du hittar det sedan under Tools. G4P GUI Builder låter dig jobbar grafiskt med alla element. Och den skapa kod åt dig! Direkt när du öppna G4P GUI Builder så skapas fliken gui. Innehållet i den sköter G4P GUI Builder och det är bara tillåtet att lägga egen kod på vissa ställen.

OM GUI Builder

GUI Builder

Grid: Koordinatsystemet som hjälper till med design. show för att visa, snap to för att fästa och Size för storleken.

Nästa rad: Alla tillgängliga element. Med dubbelklick skapas ett element på Main Window.
OBS! Alla nya ellement hmnar i mitten. Om du klickker tre gånnger på Button så ligger de ovanpåvarandra.

Controls: en hirakiskt list med alla element som finns just nu på fönstret. Genom att välja något visas alla egenskaper under PROPERTIES

Remove: Ta bort de valda element. OBS! OBS! OBS! Alla kod som generades för elementet raderas likaså!!!

Denna GUI-Builder skapa sedan i bakgrunden all kod som behövs. Kolla vad som händer i fliken gui. Ibland krävs att man klicka på fönstret för att uppdatera.

Köra en GUI

Koden är förberedd och det krävs bara lite för att det är körbart. Huvudprogrammet (= första flik) Måste innehåller det här:


import g4p_controls.*;

void setup() {
  size(800, 600);
  createGUI();  
}

void draw(){
background(255);
}

Laboration 2

Skapa en knapp (GButton), en etikett (GLabel) och en textbox (GTextField). Döp de till (= ändra Variable Namn) till btnKnapp, txfInput och lblEtikett. Ändra sedan även Text fär knappen och promptText för textboxen. Sök sedan i koden (flik gui) efter den här raden med button1_click1 (siffror kan vaiera): 


public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:406832:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
} //_CODE_:button1:406832:

ta bort raden println ... och ersätt med lblEtikett.setText("Hello " + txfInput.getText() );

talvariabler och TextField

När man läser textboxen text med String svar = txfInput.getText(); så får man en sträng som returnvärde. Om det ska vara ett tal så måste det typkonverteras:

    public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:406832:
          String svar = txfInput.getText();
          float tal = Float.parseFloat(svar);
          float euro = tal / 10.35;
          lblEtikett.setText( tal + "kr motsvarar " + euro + " EUR");
    } //_CODE_:button1:406832:

    // Alternativ till parseFloat
    int tal = Integer.parseInt(svar);
    double tal = Double.parseDouble(svar);

För mer info om Kontroller. Nästa sida

Egna modifikationer

I GUI Builder finns en del PROPERTIES men långt infrån alla. Inställningar och egenskaper som vi kan påverka med GUI Builder hamnar som code i fliken gui och där i metoden createGUI. Alla kod i den metoden genereras automatisk så borde inte röra den. Vi gör istället så här: 

//Innehåll i fliken customGUI

import java.awt.Font;  // viktigt! Annars inga fonts

void customizeGUI(){   

//om du har en GButton med namn knapp1
knapp1.setFont(new Font("Courier New", Font.PLAIN, 20));

}

sedan krävs det bara att man anropar denna metod vid rätt tillfälle, med fördel direkt efter createGUI():

    //Innehållet i första fliken

    //Variabler
    import g4p_controls.*;
    void setup() {
      size(320, 320);

      createGUI();
      customizeGUI();
    }


    void draw() {
      background(255);
    }