Tekstikenttä

Kuten edellinen esimerkki osoittaa Processing-ohjelmassa lukuja voidaan lukea tekstisyötteestä key-komennolla, mutta tiedonsyötön rakenne poikkeaa perinteisestä tekstipohjaisten ohjelmointiympäristöjen lukujen syöttämiskomennosta, koska konsoli-ikkunassa rivi rullaa aina rivin alaspäin. Tässä tulostus ja tiedon syöttö tapahtuu koordinaatistoon sidotusti. Lukujen syöttämiseen on myös toinen ja ehkäpä fiksumpi lähestymistapa. Koska Processing-ohjelma toimii Java-alustalla, niin yksi tavallinen tiedonsyöttötapa tässä ympäristössä on tekstikenttien käyttäminen. Ongelma on vain siinä, että Processing-ohjelmointikielestä puuttuvat komennot tekstikenttien ja painonappien luomiseen. Tähän onneksi löytyy helppo ratkaisu, nimittäin ladattavat kirjastot. Tekstikentät ja painonapit on määritelty ControlP5 kirjastossa.

Mene kohtaan Add Mode…

Mene välilehdelle Libraries ja etsi sieltä kohta ControlP5. Tämä kirjasto sisältää tarvittavat komennot, jotta ohjelmaan voidaan lisätä tekstikenttiä ja painonappeja tiedon syöttämistä varten. Valitse ControlP5-kirjasto ja paina install-painiketta. Lopuksi tulee kommentti installed, ja kirjasto on asennettu.

Huomio: Tätä kirjastoa ei voi käyttää iPAD:lla tai Android tabletilla.

Tehdään seuraava ohjelma.


// Ohjelman tehnyt: e-Oppi Oy

// 29.1.2017

import controlP5.*; // Otetaan controlP5 kirjasto käyttöön

int luku1 = 0; // Määritellään muuttujat ja annetaan

int luku2 = 0; // niille alkuarvot nolla.

ControlP5 cp5; // Kuuntelijan määrittely

void setup() {

size(500,500); // Ikkunan koko cp5 = new ControlP5(this); // Lisätään kuuntelija PFont font = createFont("Arial",20); // Määritetään fontti ja fonttikoko tekstikentälle cp5.addTextfield("Luku1") // Lisätään tekstikenttä: Luku1 .setPosition(20,100) // Tekstikentän paikka .setFont(font) .setFocus(true) ; cp5.addTextfield("Luku2") // Lisätään toinen tekstikenttä .setPosition(250,100) // Tekstikentän paikka .setFont(font) .setFocus(true) ; cp5.addBang("Laske") // Lisätään painonappi .setPosition(20,180) // Painonapin paikka .setSize(80,40) // Painonapin koko .getCaptionLabel().align(ControlP5.CENTER,ControlP5.CENTER) ;

}
void draw() {

background(0); textSize(20); text("Lukujen summa on "+(luku1+luku2),20,300);

}

// Seuraava ohjelma ajetaan, kun painetaan Laske-painonappia 

public void Laske() {

String vastaus1 = cp5.get(Textfield.class,"Luku1").getText(); //Komento lukee tiedon ensimmäisestä tekstikentästä String vastaus2 = cp5.get(Textfield.class,"Luku2").getText(); // Komento lukee tiedon toisesta tekstikentästä luku1 = int(vastaus1); // Muutetaan vastaus1 kokonaisluvuksi ja sijoitetaan luku1 muuttujaan. luku2 = int(vastaus2); // Muutetaan vastaus2 kokonaisluvuksi ja sijoitetaan luku2 muuttujaan.

}

Jolloin saamme luotua ohjelman, jossa on kaksi tekstikenttää nimeltään: Luku1 ja Luku2. Lisäksi lisäämme painonapin nimeltään: Laske. Tekstikentät ja painonappi määritellään void setup () -lohkossa, joka suoritetaan vain kerran. Nyt voit syöttää luvut tekstikenttiin ja vasta lopuksi painetaan Laske-painonappia, tällöin tekstikenttien sisältö siirretään: luku1 ja luku2 muuttujiin lohkossa public void Laske (). Tämä lohko suoritetaan vain silloin kun painonappia painetaan. Kun muuttujilla laske1 ja laske2 on arvot, niin ne on helppo laskea yhteen ja tulostaa void draw () -lohkossa, joka siis pyörii ikuisessa silmukassa. Mielestäni tekstikenttien ja painonapin käyttäminen on paljon fiksumpaa kuin key-komennon käyttäminen. Key-komento sopii paremmin grafiikkakomponenttien ohjaamiseen ruudulla kuin tiedon syöttämiseen. iPadille sopii taas paremmin hiirikomennot. Palataan tähän uudestaan seuraavassa kappaleessa.

Ohjelman suoritus näyttää tältä, kun painonappia on painettu.