19 Interfascia

19 Interfascia - GUI Components GUI stands for Graphical...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: GUI Components GUI stands for Graphical User Interface Things like buttons, check boxes, progress bars, text fields, etc. In Processing, we add libraries (extra java code) to get GUI components For this class, we'll use interfascia http://www.superstable.net/interfascia/ 1 Install interfascia (at home) Download interfascia Right click on the folder, and choose "Extract All" Browse to My Documents | Processing | libraries and click OK Click Next and Finish Test out your installation with the sample program on the next page 2 import interfascia.*; GUIController c; IFButton b1, b2; int rectSize = 100; void setup() void { size(200, 100); c = new GUIController (this); b1 = new IFButton ("Bigger", 20, 40, 50, 17); b1 b2 = new IFButton ("Smaller", 20, 60, 50, 17); b2 b1.addActionListener(this); b1.addActionListener(this); b2.addActionListener(this); b2.addActionListener(this); c.add (b1); c.add c.add (b2); c.add } void draw() void { background(0); background(0); fill(255); fill(255); rect(20,10,rectSize,20); rect(20,10,rectSize,20); } void actionPerformed (GUIEvent e) void { if (e.getSource() == b1) { rectSize = rectSize + 10; rectSize } else if (e.getSource() == b2) { rectSize = rectSize - 10; rectSize } } An example Program 3 import interfascia.*; import statement allows us to use other import statement allows us to use other programmer's code without cutting and pasting it into our program It "manages complexity" and helps to make our program simpler and easier to read and understand 4 actionPerformed() actionPerformed() is like mouseClicked() or keyTyped() When a button is pressed, actionPerformed() is called If there is more than one button in your program, you can find out which button was clicked with e.getSource() 5 "Look and Feel" The "Look and Feel" of the button includes baseColor ­ the default color for the background borderColor­ the color of the outline (like stroke()) highlightColor­ the color of the button when you hold the mouse over it activeColor­ the color of the button when you click it textColor­ the color of the text on the button 6 "Look and Feel" Once you create a new "Look and Feel" you apply it to a Button after you've added the button to the controller You only need to do this once, usually in setup() Here's an example where I create a new "Look and Feel" called newLook and apply it to Button b1 newLook and apply it to Button b1 IFLookAndFeel newLook = newLook new IFLookAndFeel(this, IFLookAndFeel.DEFAULT); new newLook.baseColor = color(255, 0, 0); newLook newLook.highlightColor = color(70, 135, 70); newLook newLook.activeColor = color(255,255,0); newLook newLook.borderColor = color(0,0,255); newLook b1.setLookAndFeel(newLook); b1 7 "Look and Feel" If you want all the buttons to have the same look and feel, set the look and feel to the controller before you add the buttons IFLookAndFeel newLook = newLook new IFLookAndFeel(this, IFLookAndFeel.DEFAULT); new newLook.baseColor = color(255, 0, 0); newLook newLook.highlightColor = color(70, 135, 70); newLook newLook.activeColor = color(255,255,0); newLook newLook.borderColor = color(0,0,255); newLook c.setLookAndFeel(newLook); b1 = new IFButton ("Bigger", 20, 40, 50, 17); b1 b2 = new IFButton ("Smaller", 20, 60, 50, 17); b2 b1.addActionListener(this); b1.addActionListener(this); b2.addActionListener(this); b2.addActionListener(this); c.add (b1); c.add (b2); 8 Uploading to your website You'll notice two additional executable jar files when you export your applet You only need to upload core and interfascia once 9 += -= /= *= Arithmetic operators, like -- and ++ num = num + 2; same as num += 2; num same as num = num * 17; same as num *= 17; num same as num = num - 3; same as num -= 3; num same as num = num / 11; same as num /= 11; num same as Be careful, these have side effects! 10 Side effects ++ is not the same as +1 ++ is not the same as The output of the following code fragments is different int num = 4; println(num + 1); println(num); //not the same as int num = 4; println(num++); println(num); 11 Side effects ++ is not the same as +1 ++ is not the same as The output of the following code fragments is different int num = 4; println(num + 1); //displays 5 println(num //displays println(num); //displays 4 //not the same as int num = 4; println(num++); //displays 5 println(num); //displays 5 12 Side effects num++; Has a side effect: the value of num is now 5 num + 1; Has no side effect: the value of num is unchanged Rule: Always use +1 unless you are sure you want to change the value using ++ 13 What number will be IFButton b1, b2, b3; int value; displayed after buttons void setup() void { one, two and three are size(200, 100); value = 4; value c = new GUIController (this); pressed in that order? b1 = new IFButton ("One", 20, 40, 50, 17); b1 import interfascia.*; GUIController c; b2 = new IFButton ("Two", 20, 60, 50, 17); b2 b3 = new IFButton ("Three", 20, 80, 50, 17); b3 b1.addActionListener(this); b1.addActionListener(this); b2.addActionListener(this); b2.addActionListener(this); b3.addActionListener(this); b3.addActionListener(this); c.add (b1); c.add c.add (b2); c.add c.add (b3); c.add } void draw() {} //not used void actionPerformed (GUIEvent e) void { if (e.getSource() == b1) { value/=2; value/=2; } else if (e.getSource() == b2) { value+=3; value+=3; } else if (e.getSource() == b3) { value*=value; value*=value; } println(value); println(value); 14 ...
View Full Document

This note was uploaded on 01/13/2012 for the course CS 12 taught by Professor Ma during the Spring '08 term at UC Davis.

Ask a homework question - tutors are online