login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Java


Gegevens:
Geschreven door:
nemesiskoen
Moeilijkheidsgraad:
Moeilijk
Hits:
8232
Punten:
Aantal punten:
 (5)
Aantal stemmen:
6
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (4)
 



Tutorial:

JAVA Deel 7 (Layouts in SWING)

1. Inleiding
2. Welke layouts zijn er
3. FlowLayout
4. BorderLayout
5. CardLayout
6. GridLayout
7. Besluit
 top
1. Inleiding
Deze tutorial behandelt de verschillende soorten layouts voor een JAVA SWING applicatie.
Dit zodat je een beetje kunt beslissen welke layout je wil gebruiken omdat je programma er zo en zo moet uit zien.
Ik ga elke layout illustreren met een voorbeeld en dan de voor en nadelen opsommen.
 top
2. Welke layouts zijn er

Eerst en vooral: welke layouts zijn er?
Voor mij bekend zijn er 6 layouts, het kan zijn dat er nog meer zijn maar daar weet ik niets van af.
Alle layouts even op een rijtje:
- FlowLayout
- BorderLayout
- CardLayout
- GridLayout
- GridBagLayout
- BoxLayout

Deze 2 laatste zal ik niet gaan behandelen omdat deze TE complex zijn.
Ze trekken allebei op een smelting tussen de FlowLayout en de GridLayout(alleen kan de BoxLayout in de meeste gevallen niet zonder een andere layout).
Dit geeft enorm veel mogelijkheden, maar ook veel te veel stof om uit te leggen en veel te veel nieuwe methodes die gebruikt zullen worden.
En je zult deze zeker op het begin niet gaan nodig hebben.
Als je al wat meer ervaren bent kan je op sun's site eens gaan uitpluizen hoe deze 2 in elkaar zitten.
 top
3. FlowLayout

De flowlayout vult zichzelf aan. Je kan een bepaalde lengte meegeven aan een tekstveld en de flowlayout zal zich houden aan deze lengte.
Voor de rest geeft hij alles (standaard gecentreerd) naast elkaar weer.
Het probeert zoveel mogelijke componenten aan een rij toe te voegen, en zal pas aan de volgende rij beginnen als je vorige rij vol is.
Het valt het best te vergelijken met een tekstverwerker als WORD. Deze plaatst ook zoveel mogelijk tekst op 1 rij tot je (of op enter drukt, of je) rij vol is.
Het is de standaard layout voor JPanel objecten.

Een klein voorbeeldje met een button, een tekstvlak en een label.
import javax.swing.*;
import java.awt.*;

public class smSwing5 extends JFrame {

    
private JTextField tekstveld;

    
private JLabel text;

      
private JButton knop;

    
public smSwing5( String sTitel, int iHoogte, int iBreedte ) {
          
          
super( sTitel );
    
          
Container c = getContentPane();
          
c.setLayout(new FlowLayout());
         
         
tekstveld = new JTextField( 10 ); //10 is hier in dit geval de breedte van het tekstveld
          
text  = new JLabel( "Tekst" );
          
knop = new JButton( "klik" );
          
          
c.add( tekstveld );
          
c.add( text );
          
c.add( knop );
        
        
setSize( iBreedte, iHoogte );
        
          
show();
              
              
    }
    
public static void main(String[] argv) {

              
smSwing5 test = new smSwing5( "Sitemasters tutorial", 300, 300 );

    }
    
}

Zoals je ziet zal alles op 1 lijntje verschijnen.

Wat zijn de voordelen hiervan?
- automatische uitlijning
- geen lelijke buttons en tekstvelden die de helft van je programma vullen
- je hebt meer speling

En alles wat een voordeel heeft, zal ook wel een nadeel hebben:
- teveel speling, waardoor je niet altijd het gewenste resultaat krijgt
- onvoorspelbaar
 top
4. Borderlayout

De borderlayout ordent alles in 5 vlakken: noord, oost, zuid, west en center.
Je kan meegeven in welk deel welk component staat.
Je buttons worden uitgerekt als ze niet alle plaats opvullen.

Weeral een voorbeeldje.
import javax.swing.*;
import java.awt.*;

public class smSwing6 extends JFrame {

      
private JButton oosten;
      
private JButton westen;
      
private JButton center;
      
private JButton zuiden;
      
private JButton noorden;

    
public smSwing6( String sTitel, int iHoogte, int iBreedte ) {
          
          
super( sTitel );
    
          
Container c = getContentPane();
          
c.setLayout(new BorderLayout());
          
          
oosten = new JButton( "Oosten" );
          
westen = new JButton( "Westen" );
          
center = new JButton( "Center" );
          
zuiden = new JButton( "Zuiden" );
          
noorden = new JButton( "Noorden" );
          
          
c.add( oosten, BorderLayout.EAST);
          
c.add( westen, BorderLayout.WEST);
          
c.add( center, BorderLayout.CENTER);
          
c.add( zuiden, BorderLayout.SOUTH);
          
c.add( noorden, BorderLayout.NORTH);
        
        
setSize( iBreedte, iHoogte );
        
          
show();
              
              
    }
    
public static void main(String[] argv) {

              
smSwing6 test = new smSwing6( "Sitemasters tutorial", 300, 300 );

    }
    
}

Wat is er veranderd: de container layout natuurlijk, maar ook de add methode.
Hier heb ik een argument aan toegevoegd, dit argument kan je enkel toevoegen bij de BorderLayout.
Je geeft een richting aan: noorden, zuiden, westen, oosten of centraal.
En voor de rest is het grotendeels hetzelfde.

Voordelen:
- gestructureerd
- heeft voordelen bij bepaalde programma's. Als je bv het hoofdvlak in het midden wilt hebben met daar een tekstveld in en daar rond buttons die acties uitvoeren.

Nadelen:
- extra code nodig
- meer denkwerk (hoe moet ik mijn buttons ordenen)
- soms doet het heel raar en geeft totaal iets wat je niet verwacht
 top
5. CardLayout

De CardLayout is moeilijk te begrijpen. Hij ordent eigenlijk alle onderdelen onder elkaar, en laat alleen het bovenste onderdeel zien.
Totdat je een methode oproept genaamd 'next'.
Dan geeft hij je volgende onderdeel weer, tot je 'next' weer oproept, etc.
Eigenlijk zoals een kaartendeck, waarin je telkens een bovenste kaart hebt, en deze via de methode 'next' onderaan steekt zodat je de volgende ziet.
Het volgende voorbeeldje zal je het gebruik hiervan illustreren:
<?php import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class smSwing7 extends JFrame implements ActionListener {

    
private JButton knop1;
    
private JButton knop2;
    
private JButton knop3;
    
    
private JTextField text1;
    
private JTextField text2;
    
private JTextField text3;
      
      
private CardLayout card = new CardLayout( 50, 50 ); //onze layout

    
public smSwing7( String sTitel, int iHoogte, int iBreedte ) {
          
          
super( sTitel );
    
          
Container c = getContentPane();
          
c.setLayout(card);
         
         
knop1 = new JButton( "volgende (1)" );
         
knop2 = new JButton( "volgende (2)" );
         
knop3 = new JButton( "volgende (3)" );
          
          
c.add(knop1, "Card 1");
          
c.add(knop2, "Card 2");
          
c.add(knop3, "Card 3");
          
          
knop1.addActionListener(this);
          
knop2.addActionListener(this);
          
knop3.addActionListener(this);
        
        
setSize( iBreedte, iHoogte );
        
          
show();
          
    }
    
public void actionPerformed( ActionEvent e) {
    
        
card.next( getContentPane() );
        
    }
    
public static void main(String[] argv) {

              
smSwing7 test = new smSwing7( "Sitemasters tutorial", 300, 300 );

    }
    
}

Zoals je ziet word er telkens eigenlijk een dia getoond, tot je vraagt de volgende te laten zien.
Dit is eigenlijk de perfecte layout voor een fotoalbum of iets dergelijks.

Voordelen:
- fotoalbum
- verschillende acties in 1 layout die dan gemakkelijk kunnen comuniceren tegen elkaar

Nadelen:
- is heel strikt, dus iets kleins veranderen kan leiden in een error
- weinig mogelijkheden

 top
6. GridLayout

Een strikte en ordelijke layout. Hij schikt alles voor jou zoals je het vraagt. Je kan precies aangeven hoeveel elementen per rij.
Deze heb ik ook gebruik in mijn voorbeeldjes in mijn vorige tutorial.

Eens kijken naar een voorbeeldje:
<?php import javax.swing.*;
import java.awt.*;

public class smSwing8 extends JFrame {

    
private JTextField tekstveld;

    
private JLabel text;

      
private JButton knop;

    
public smSwing8( String sTitel, int iHoogte, int iBreedte ) {
          
          
super( sTitel );
    
          
Container c = getContentPane();
          
c.setLayout(new GridLayout(3,1));
         
         
tekstveld = new JTextField( 10 ); //10 is hier in dit geval de breedte van het tekstveld
          
text  = new JLabel( "Tekst" );
          
knop = new JButton( "klik" );
          
          
c.add( tekstveld );
          
c.add( text );
          
c.add( knop );
        
        
setSize( iBreedte, iHoogte );
        
          
show();
              
              
    }
    
public static void main(String[] argv) {

              
smSwing8 test = new smSwing8( "Sitemasters tutorial", 300, 300 );

    }
    
}

Zoals je kan zien word alles onder elkaar weergegeven.
De layout word onderverdeeld in rijen. Het aantal rijen word bepaald door het eerste argument (3 in ons geval).
Het tweede argument geeft het aantal kolommen mee (1 in ons geval).
Het aantal rijen is overwegend en zal ALTIJD 3 zijn (in ons geval dan toch). Behalve als, net zoals bij de FlowLayout er teveel elementen worden toegevoegd. Maar standaard word dus het aantal kolommen vergroot als je een element toevoegt.

Voordelen:
- precies
- geordend
- globaal idee van hoe je layout er gaat uit zien

Nadelen:
- buttons en tekstvelden worden uitgerekt
- geeft geen error als je meer elementen toevoegt dan verwacht (wat in sommige gevallen een voordeel is, maar in andere gevallen een nadeel)

 top
7. Besluit

Zoals je ziet zijn er veel layouts. De bovenstaande 4 plus de 2 'super layouts'.
Je moet voor jezelf uitmaken welke je het liefst gebruikt, aan de hand van de voordelen en de nadelen, maar zeker ook aan de hand van wat voor applicatie je wilt bouwen.
Nog veel succes en hopelijk heb je iets bijgeleerd!
Enkele toepassingen met JAVA zijn bv. JSP, meer info daarover: JSP Tutorials  top



« Vorige tutorial : JAVA Deel 6 (SWING begin)

© 2002-2022 Sitemasters.be - Regels - Laadtijd: 0.021s