Hoofdstuk 12 Ontwerp van programma’s. Ontwerp van de GUI nStandaard in Applets: alle met add toegevoegde componenten komen naast elkaar (totdat de regel.

Presentatie over: "Hoofdstuk 12 Ontwerp van programma’s. Ontwerp van de GUI nStandaard in Applets: alle met add toegevoegde componenten komen naast elkaar (totdat de regel."— Transcript van de presentatie:

1 Hoofdstuk 12 Ontwerp van programma’s

2 Ontwerp van de GUI nStandaard in Applets: alle met add toegevoegde componenten komen naast elkaar (totdat de regel vol is)

3 Flow-layout this.add(new Button(“koe”)); this.add(new Button(“varken”)); this.add(new Button(“kortschildkever”)); this.add(new Button(“kip”)); this.add(new Button(“olifant”));

4 Grid-layout this.add(new Button(“koe”)); this.add(new Button(“varken”)); this.add(new Button(“kortschildkever”)); this.add(new Button(“kip”)); this.add(new Button(“olifant”)); this.setLayout( new GridLayout(2,3,5,5) ); rijenkolommen tussen- ruimte totale ruimte wordt eerlijk verdeeld

5 Border-layout this.add( new Button(“koe”), BorderLayout.NORTH ); this.add( new Button(“varken”), BorderLayout.WEST ); this.add( new Button(“kortschildkever”), BorderLayout.CENTER ); this.add( new Button(“kip”), BorderLayout.EAST ); this.add( new Button(“olifant”), BorderLayout.SOUTH ); this.setLayout( new BorderLayout( ) ); randen krijgen zoveel als ze nodig hebben de rest gaat naar het midden

6 Vrije layout b = new Button(“koe”)); b = new Button(“varken”)); b = new Button(“kortschildkever”)); this.setLayout( null ); geen Layout-manager vrije positionering van alle componenten b. setBounds(10,10,70,20); this.add(b); b. setBounds(25,50,50,30); this.add(b); b. setBounds(40,30,100,15); this.add(b);

7 Flow-layout this.add(new Button(“koe”)); this.add(new Button(“varken”)); this.add(new Button(“kortschildkever”)); this.add(new Button(“kip”)); this.add(new Button(“olifant”)); this.setLayout( new FlowLayout() );

8 Voorbeeldprogramma: Rekenmachine Twee aspecten: nUser-interface nWerking class Calc class Proc

9 Rekenmachine: User-interface BorderLayout nNorth: Label met resultaat nCenter: Panel met knoppen component met een eigen deel-layout GridLayout

10 Panel een Panel-object... n...is een Component (kan dus met add worden neergezet) n...is een Container (kan dus met add zelf dingen neerzetten) Component TextArea TextField Panel Window Applet Frame DialogFileDialog Button Canvas Label Scrollbar Text Component Container

11 Opbouw klasse Calc class Calc extends Applet implements ActionListener { public void init() { result = new Label(“0”, Label.RIGHT); knoppen = new Panel ( ); this. setLayout (new BorderLayout() ); knoppen. setLayout (new GridLayout(4,4,6,6) );

12 Calc’s methode init public void init() { result = new Label(“0”, Label.RIGHT); knoppen = new Panel ( ); this. setLayout (new BorderLayout() ); knoppen. setLayout (new GridLayout(4,4,6,6) ); this. add( result, BorderLayout.NORTH ); this. add( knoppen, BorderLayout.CENTER ); knoppen. add (knop); knop = new Button (opschrift); for (n=0; n<16; n++) { } opschrift = “789/456*123+0C=-”. substring(n,n+1); knop. addActionListener (this); Button knop; int n; String opschrift; Panel knoppen;

13 Opbouw klasse Calc class Calc extends Applet implements ActionListener { public void init() { result = new Label(“0”, Label.RIGHT); // en de rest van de Userinterface-opbouw proc = new Proc ( ); } Label result; Proc proc; objectvariabelen ook nodig in ActionPerformed

14 Calc’s methode actionPerformed class Calc extends Applet implements ActionListener { public void actionPerformed (actionEvent e) { Label result; Proc proc; e. getSource ( ) Button b; b = (Button) ( ); b. getLabel ( ) char c; c =. charAt (0) ; if (c==‘C’)proc.schoon(); else if (c==‘=’)proc.reken(); else if (c>=‘0’&&c<=‘9’)proc.cijfer(c- ‘0’); elseproc.operatie(c); proc. schermresult. setText ( );

15 Opbouw klasse Proc class Proc { void schoon ( ) {... } void reken ( ) {... } void cijfer (int n) {... } void operatie (char c){... } Proc ( ){ this. schoon(); } wat kan een Proc? wat is een Proc? long scherm;

16 Wat is een Proc? nwaarde op het scherm schermwaarde wordt tienmaal zo groot plus cijfer er lijkt niets te gebeuren... nhuidige waarde nvorige waarde nlaatst gebruikte operator 3737293348

17 Opbouw klasse Proc class Proc { void schoon ( ) {... } void reken ( ) {... } void cijfer (int n) {... } void operatie (char c){... } Proc ( ){ this. schoon(); } wat kan een Proc? wat is een Proc? long scherm; long scherm, waarde, vorige; char op;

18 Proc’s methode cijfer class Proc { void cijfer (int n) { } long scherm, waarde, vorige; char op; waarde = 10*waarde + n; scherm = waarde;

19 Proc’s methode reken class Proc { void reken ( ) { } long scherm, waarde, vorige; char op; if (op==‘+’) if (op==‘-’) if (op==‘*’) if (op==‘/’) scherm = vorige; waarde = 0; vorige += waarde; vorige -= waarde; vorige *= waarde; vorige /= waarde;

20 Proc’s methode operatie class Proc { void operatie (char c) { } long scherm, waarde, vorige; char op; op = c; this. reken ( ); void schoon ( ) {waarde = 0; vorige = 0; scherm = 0; op = } ‘+’;

21 Testen van een reeks mogelijke waarden if (x==1) else if (x==2) else if (x==3) else if (x==4) else if (x==5) else if (x==6) else if (x==7) else this.een(); this.twee(); this.drie(); this.vier(); this.vijf(); this.zes(); this.zeven(); this.meer(); case 1: case 2: case 3: case 4: case 5: case 6: case 7: default: switch (x) { } break;

22 Applets vs. Applications Applet nCompileer met javac nInterpreteer met browser of appletviewer nOutput in window van de browser nAfmetingen in HTML-file nBeperkte rechten op lokale machine Application n Compileer met javac n Interpreteer met java n Maakt zelf een of meer windows n Afmetingen in java-file n Kan ook files gebruiken

23 Van Applet naar Application public class Hallo extends Applet {Button b; public void init ( ) { b = new Button(“hoi”); this.add(b); } public void paint (Graphics gr) { gr. drawString(“Hallo”, 10, 10); } Frame public static void main (String [] p) { } Hallo h; h = new Hallo( ); this. setSize(200,100); Hallo( ) h. setVisible(true); maak je eigen window!

24 Application met componenten default een BorderLayout public class Hallo extends Frame implements ActionListener {Button b; TextField t; public Hallo( ) { b = new Button(“hoi”); t = new TextField(9); this.add(b, BorderLayout.WEST ); this.add(t, BorderLayout.EAST ); b. addActionListener(this); this. setSize(300,200); } public void actionPerformed(ActionEvent e) { t. setText(“hallo”); } public static void main(String [] p) { Hallo h; h = new Hallo(); h.setVisible(true); }

25 Nieuwe mogelijkheden nIn een Application kun je gebruiken: uTitel van het window uMenu-regel met dropdown-menu’s uSluit-button op menu-kader uDialogen, bijv. om een filenaam te vragen uFiles op de lokale machine

26 Voorbeeld: Teksteditor TextField om de tekst te editten Label voor status-info MenuBar Menu MenuItem

27 Een menuregel maken MenuBar bar; Menu menu; MenuItem item; bar = new MenuBar ( ); this. setMenuBar (bar); menu = new Menu (“File”); bar. add (menu); item = new MenuItem (“Open”); menu. add(item); item. addActionListener (this); item = new MenuItem (“Save”); menu. add(item); item. addActionListener (this); menu = new Menu (“Edit”); item = new MenuItem (“Upper”); menu. add(item); item. addActionListener (this); bar. add(menu);

28 Window sluiten class Editor extends Frame implements ActionListener { close, WindowListener Editor ( ) { this. addWindowListener(this); // en andere initialisaties... } public void windowClosing (WindowEvent e) { System. exit (0); } public void windowClosed (WindowEvent e) { } public void windowOpened (WindowEvent e) { } public void windowActivated (WindowEvent e) { } public void windowDeactivated (WindowEvent e) { } public void windowIconified (WindowEvent e) { } public void windowDeiconified (WindowEvent e) { }

29 Listeners nActionListener uactionPerformed (ActionEvent e) nAdjustmentListener uadjustmentValueChanged (AdjustmentEvent e) nWindowListener uwindowClosing (WindowEvent e) + 6 andere nMouseListener umouseClicked (MouseEvent e) + 4 andere nKeyListener ukeyTyped (KeyEvent e) + 2 andere

30 Events waar? welke? ALT ingedrukt? welke actie? welke source? Action Event Object AWT Event Input Event Window Event Mouse Event Key Event Component Event Adjustment Event