4.1 GUI - Graphic User Interface

En bra början för att kunna göra ett användbart javaprogram är att skapa ett GUI. Med knappar, textfält och lite annat användbart bygger vi upp en sida. I nästa kapitel kopplar vi händelser - events - till de olika komponenterna.

JFrame

Huvudfönstret med standardknappar, titelrad och utseendet vi känner igen från det operativsystem vi använder. Skapas såhär:

JFrame frame = new JFrame("GUIdemo");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel
En panel är en klass som ärver av klassen container, vilket betyder att den kan innehålla andra komponenter, tex knappar, textfält eller andra containers. Här skapas panelerna som används i GUIdemo:

// Create panels
JPanel mp = new JPanel(); // Main panel
JPanel bp = new JPanel(); // Button panel
JPanel np = new JPanel(); // North Panel
mp.setLayout(new BorderLayout());
bp.setLayout(new FlowLayout());
np.setLayout(new FlowLayout());
np.setBorder(new TitledBorder("North Panel"));
bp.setBorder(new TitledBorder("Buttonpanel"));
mp.setBorder(new TitledBorder("Main Panel"));

Metoden setLayout styr på vilket sätt komponenterna i panelen ska placeras ut. Flowlayout är mest basic. Där fylls allting på från vänster till höger tills det inte får plats fler, sen börjar nästa rad fyllas på. Borderlayout placerar ut längs kanterna eller i mitten: BorderLayout.NORTH, SOUTH, EAST, WEST, CENTER.

Här skapas knappar till den nedre panelen, och knapp-panelen bp placeras i main-panelen i SOUTH-läge:

// Create buttons to button panel
bp.add(new JButton("Panelbutton1"));
bp.add(new JButton("Panelbutton2"));

mp.add(bp, BorderLayout.SOUTH);

Sedan skapar vi knappar och choice-list till den övre "north panelen" np:

// Add stuff to north panel
np.add(new JLabel("JLabel"));
np.add(new JButton("JButton"));

// Create Choice-list and add to np.
Choice ch = new Choice();
ch.add(new String("Choice"));
ch.addItem(new String("-list"));
np.add(ch);

Skapa text-fält och scrollbar panel:

// Create textarea
JTextArea ta = new JTextArea(10, 20);
ta.append("JTextArea\ninside a JScrollPane");
ta.setLineWrap(true);

JScrollPane scrPane = new JScrollPane(ta);
scrPane.setBorder(new TitledBorder("JScrollPane"));

Sist av allt ska panelerna (och ett par labels som visa east & west) placeras ut på huvudpanelen mp:

// Add panels and labels to main panel
mp.add(np, BorderLayout.NORTH);
mp.add(bp, BorderLayout.SOUTH);
mp.add(new JLabel("East"), BorderLayout.EAST);
mp.add(new JLabel("West"), BorderLayout.WEST);
mp.add(scrPane, BorderLayout.CENTER);

För att kunna placera ut panelerna i frame'n behöver vi komma åt containern, dvs den lediga ytan under den övre titelraden i fönstret. Denna kommer vi åt genom:

frame.getContentPane().add(mp); // mp --> framens container

//Display the window.
frame.pack();
frame.setVisible(true);

De sista två raderna "packar" framen så allting får plats, och till sist visas våran frame. Detta är det sista vi gör i programmet, när allt är "färdigmöblerat".

Hela programmet hittar du här.

3. Installera en IDE

Den IDE vi väljer att använda är Eclipse, en open source-lösning för progamvaruutveckling i bla Java. Läs mer om Eclipse på Wiki.

Ladda ner och installera

Väl inne på www.eclipse.org/downloads klickar Du på länken Eclipse IDE for Java Developers (85 MB) Ladda ner, packa upp på lämpligt ställe, tex: c:\program\eclipse . Efter uppackning är det installerat och klart. Det enda Du behöver göra är att skapa en genväg till eclipse.exe och lägga på skrivbordet eller snabbstartfältet.

Komma igång med HelloWorld

Vid en första start av Eclipse får Du frågan vart Du vill ha ditt workspace. Välj såklart vart Du vill, men jag valde c:\javaprogz. Det är där alla Dina skapade java-projekt hamnar senare.

Nästa steg är Welcome-fönstret. Där klickar Du på ikonen "Tutorials", väljer Create a HelloWorld-application. Sedan är det bara att följa steg-för-steg instruktionerna för att skapa projekt, skriva kod, kompilera och köra. Hur enkelt som helst!

2. Klasser, objekt och metoder

Java är ett Objektorienterat språk.

Detta innebär att ditt program ska kunna struktureras upp i olika objekt med direkt eller "tänkt" liknelse med verkligheten. Klasserna beskriver egenskaper och funktioner hos objektet.

Klassen "Bil" kan tex beskriva "färg" och "antal hästkrafter", och ha funktionerna "tuta" och "starta".

När man vill skapa en Bil, tex "minBil" så skapas ett objekt eller en "instans" av klassen. funktionerna hos objektet minBil kommer man åt genom punktoperatorn: minBil.starta() eller minBil.getAntalHästkrafter()

Ett objekt skapas genom någon av klassens konstruktorer och operatorn "new". Bil minBil = new Bil("röd", 150); vilket skapar en ny röd Bil med 150 hästKrafter. Det kan även finnas andra konstruktorer som tar fler argument samt en standardkonstruktor som inte tar några argument och skapar tex en ofärgad Bil utan hästKrafter; Bil minBil = new Bil();

Det anses som standard att alltid skapa "set" och "get"-funktioner hos egenskaperna. I java kallas egenskaperna klassvariabler och funktionerna kallas metoder.

För att ytterligare likna verkligheten, finns en hierarki som gör att klasser kan ärva egenskaper eller metoder från den överliggande klassen, superklassen. Våran klass Bil kan tex vara en subklass till Fordon och ha en systerklass Flyg. Flyg och Bil har en är-relation till klassen Fordon. Andra relationer kan vara har- eller känner till. Klassen Flyg har klassen Vinge och känner till klassen Passagerare.

Klassbiblioteket

Du behöver inte uppfinna hjulet på nytt varje gång, utan det finns färdiga klasser till det mesta och tillhörande dokumentation på sun's hemsida.

Du kan dessutom själv skapa klassbibliotek med klasser som du kan använda om flera gånger.

Utvecklingsmiljö - IDE

Eftersom det finns ganska mycket att välja mellan och inte alltid helt lätt att minnas exakt vad klasser, funktioner och variabler heter, kan det vara bra att ha ett hjälpmedel vid programutveckling. Där får Du hjälp med att överblicka dina projekt, klasser m.m och hjälp med alla funktioner som finns inom en klass bara genom att skriva .-operatorn till en instans.

Mer om just ett sådant hjälpmedel - en IDE, Integrated Development Environment i nästa kapitel.

1. Komma igång och ett första program

För att kunna göra ditt första program behöver Du:

1. Skriva ett javaprogram
2. Översätta eller "kompilera" programmet
3. Köra (exekvera) programmet

För att kunna kompilera programmet Du skrivit behöver du ladda ner Sun's JDK, som finns att ladda ner gratis på nätet. JDK står för Java Development Kit.

1. Skriva Programkoden

Det absolut första programmet gör inget avancerat, utan skriver bara ut lite text i ditt DOS, eller command-fönster:

class Prog1 {

public static void main(){

int i = 1;
String s1 = new String("Jag ar ditt ");
String s2 = new String("a program");

System.out.println(s1 + i + s2);
}

}

Dessa rader skriver Du in i ett vanligt textdokument och döper till Prog1.java, dvs filens namn samma som "klassen". För beskrivning av tex int och String, se ordlistan.

2. Kompilera koden

I Sun JDK, som Du såklart laddat ner och installerat finns det ett litet program som heter javac.exe .

När Du hittat katalogen ditt lilla program ligger i och bytt till den katalogen, skriver du:

c:\>C:\Program\Java\jdk1.6.0_11\bin\javac Prog1.java

Observera att jag för enkelhetens skull lagt min fil direkt under c:\
Du kan även ställa dig i bin-mappen och skriva hela sökvägen till din Prog1.java fil.

C:\Program\Java\jdk1.6.0_11\bin>javac C:\Prog1.java

3. Kör programmet


När Du lyckats kompilera Din kod ska det ha skapats en fil med samma namn som din klass och med filändelsen .class, dvs Prog1.class i samma katalog som java-filen (c:\).

För att köra programmet, skriv:

c:\>C:\Program\Java\jdk1.6.0_11\bin\java Prog1.class

Du får då - om allt fungerar - en utskrift på skärmen:

Jag ar ditt 1a program!!

Tadaaa!!! Du har skrivit, kompilerat och exekverat Ditt första java-program!!

En liten presentation

Varför JAVA-skola?

Tänkte börja lite smått med att presentera målet/syftet med denna blogg;

1. Har studerat java på högskola för många år sedan och behöver fräscha upp kunskaperna.
2. Ett uppslagsverk för kommande situationer (då jag glömt något igen:-)
3. En referens till ev. framtida arbetsgivare.
4. Ett trevligt tidsfördriv.
   

do-while - slingor

Denna slinga fungerar ungefär som while-slingan, men genomförs alltid minst EN gång:

int villkor = 0;
do
{

// Här görs något minst en gång...
i++; // i detta fall 10 ggr

} while(villkor<10);

Användbart om det som händer i slingan MÅSTE hända minst en gång för att villkoret ev. ska bli false, tex läsa från en fil eller ström.

for-slingan

Ack så viktig så fort man ska upprepa något. Den ser ut så här:

for(int i = 0; i<10; i++)
{
// Här görs något...
System.out.println("Nu är i = " + i);
}

Detta upprepar slingan 10 ggr, dvs med i mellan 0 och 9. När i=10 är i<10 falskt.

Ordlista

public
Klassen, variabeln eller metoden är synlig utifrån och inte bara i sin egen klass eller metod. main måste vara public.

private
Klassen, variabeln eller metoden är bara synlig inom sin egen klass eller metod.

static
Klassmetod. Metoden tillhör klassen och inte en instans av klassen. main-metoden är static.

String
En klass för att hantera text. Skapas tex genom String s = new String("Lite text...");
Innehåller många metoder för att manipulera text, tex s = s.toUppercase() som konverterar texten i s till STORA bokstäver.

Läs mer här.

int
En numerisk datatyp för lagring av 32-bitars heltal, max -2'147'483'648 till +2'147'483'647.

Upplägget

Meningen är att detta ska bli en liten javaskola i 10 steg, med sånt som jag tycker kan vara bra att kunna och för min egen skull gå igenom igen för att friska upp gamla kunskaper och även skaffa nya.

Exakt VAD de 10 stegen ska innehålla är inte spikat än, men det blir kanske ungefär såhär:

1. Komma igång
2. Klasser (ska kompletteras med UML-diagram)
   
3. IDE - Integrated Development Environment
   
4. GUI - Graphic User Interface
   
5. Events
6. Filer & arrayer
   
7. Klient/server-applikationer
8. JSP - Java Server Pages
   
9. Java i mobilen
   
10. Lite annat smått o gott...
    

Under ordlistan lägger jag successivt in nyckelord, typer, uttryck m.m som jag funderar över och som kan behöva en liten förklaring.

Slingor, olika while-, case-satser och liknande smått o gott lägger jag in under separata inlägg, så inte de 10 stegen blir för många, långa och "iväg-svävande".

Dessutom blir det lättare för mig och andra att hitta vad som man behöver ta en snabbkoll på.

GUIdemo - hela programmet

import java.awt.BorderLayout;
import java.awt.Choice;
import java.awt.Dimension;
import java.awt.FlowLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.border.TitledBorder;

public class GUIdemo {
// Create buttons, panels etc
//
private GUIdemo() {
//Create and set up the window.
JFrame frame = new JFrame("GUIdemo");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Create panels
JPanel mp = new JPanel(); // Main panel
JPanel bp = new JPanel(); // Button panel
JPanel np = new JPanel(); // North Panel
mp.setLayout(new BorderLayout());
bp.setLayout(new FlowLayout());
np.setLayout(new FlowLayout());
np.setBorder(new TitledBorder("North Panel"));
bp.setBorder(new TitledBorder("Buttonpanel"));
mp.setBorder(new TitledBorder("Main Panel"));

// Create buttons to button panel
bp.add(new JButton("Panelbutton1"));
bp.add(new JButton("Panelbutton2"));

mp.add(bp, BorderLayout.SOUTH);

// Add stuff to north panel
np.add(new JLabel("JLabel"));
np.add(new JButton("JButton"));

// Create Choice-list and add to np.
Choice ch = new Choice();
ch.add(new String("Choice"));
ch.addItem(new String("-list"));
np.add(ch);

// Create textarea
JTextArea ta = new JTextArea(10, 20);
ta.append("JTextArea\ninside a JScrollPane");
ta.setLineWrap(true);

JScrollPane scrPane = new JScrollPane(ta);
scrPane.setBorder(new TitledBorder("JScrollPane"));

// Add panels and labels to main panel
mp.add(np, BorderLayout.NORTH);
mp.add(bp, BorderLayout.SOUTH);
mp.add(new JLabel("East"), BorderLayout.EAST);
mp.add(new JLabel("West"), BorderLayout.WEST);
mp.add(scrPane, BorderLayout.CENTER);


// Add main panel to mainframe
frame.getContentPane().add(mp);

// Tweak the Frame
frame.setMinimumSize(new Dimension(300, 300));
frame.setLocation(400, 400);

//Display the window.
frame.pack();
frame.setVisible(true);
}

public static void main(String[] args) {
//Schedule a job for the event-dispatching thread:
//creating and showing this application's GUI.
javax.swing.SwingUtilities.invokeLater(new Runnable() {
public void run() {
GUIdemo g = new GUIdemo();
}
});
}
}