Scriviamo un applicazione client/server JDBC

(Prima Parte)

Stefano Carfagna
Contributore, BETA

Iniziamo la serie di articoli con una breve descrizione delle problematiche che affronteremo. Il linguaggio Java permette la creazione di applicazioni che possono essere eseguite in un browser: le applet. Verranno create due applicazioni una sul lato client (l'applet) ed una sul lato server : la prima permetterà di visualizzare, editare ed inserire nuove informazioni; la seconda soddisferà delle richieste (lettura e scrittura) in arrivo un canale di comunicazione (socket) e aggiornerà un database SQL.

Figura 1

Procederemo così nella descrizione dei singoli elementi che verranno di volta in volta creati per presentare nell'epilogo dell'articolo l'unione delle parti.

Creazione di un pannello con bordo

Il primo componente necessario è un pannello che visualizzi un bordo sul contorno e si ridisegni utilizzando il "double buffering" per minimizzare l'effetto di sfarfallamento. Iniziamo riscrivendo il metodo "paint" del componente.

  /**
   * ridisegna il componente
   */
  public void paint(Graphics g) {
      // paint ereditato 
      super.paint(g);
     
      // disegna il rettangolo di bordo 
      drawRect(g);
  }

  /**
   * disegna un rettangolo di bordo
   */
  protected void drawRect(Graphics g) {       
    // prende le dimensioni
    Dimension d = getSize();    
    
    // disegna il bordo 
    g.setColor(Color.lightGray);
    g.drawRect(0, 0, d.width-1, d.height-1);
    g.drawRect(1, 1, d.width-3, d.height-3);

    g.setColor(Color.gray);
    g.drawRect(2, 2, d.width-5, d.height-5);
 
    g.setColor(Color.black);
    g.drawRect(3, 3, d.width-7, d.height-7);    
  }

  // immagine temporanea dell'area ridisegnabile
  // utile per il double buffering 
  Image offscreen;

  /**
   * il componente deve essere ridisegnato ed il layout 
   * ricalcolato.
   */
  public void invalidate() {
      // ...
      super.invalidate();
      // l'immagine temporanea deve essere ricalcolata
      offscreen = null;
  }

  /**
   * Vecchio metodo update
   */
  public void update(Graphics g) {
      g.setColor(getBackground());
      g.fillRect(0, 0, getSize().width, getSize().height);
      g.setColor(getForeground());

      paint(g);
  }

  /**
   * riscrittura del metodo update :
   *  - evita di cancellare il background prima del ridisegno
   *  - disegna prima in una immagine di buffer e poi nel 
   *    contesto grafico del componente
   */
  public void update(Graphics g) {
      // crea l'immagine di buffer se non è impostata 
      if (offscreen == null) {
         offscreen = createImage(getSize().width, getSize().height);
      }

      // prende il contesto grafico dell'immagine di buffer
      Graphics og = offscreen.getGraphics();
      
      // cancella l'area disegnabile dell'immagine di buffer
      og.setColor(getBackground());
      og.fillRect(0, 0, getSize().width, getSize().height);
      og.setColor(getForeground());

      // imposta il clipping dell'area ridisegnabile
      og.setClip(0, 0, getSize().width, getSize().height);

      // chiama il paint 
      paint(og);
      
      // disegna l'immagine dell'area ridisegnabile nel contesto 
      // grafico associato al componente
      g.drawImage(offscreen, 0, 0, null);
      
      // libera le risorse usate per il contesto grafico 
      // dell'immagine
      og.dispose();      
  }

Figura 2

Creazione di un menu personalizzato

Sfruttando ancora l'ereditarietà scriviamo un semplice menu ad albero che ci permetta di selezionare le opzioni della nostra applicazione lato client. Il nuovo componente accetterà come parametro nel suo costruttore un array di stringhe rappresentanti le voci del menù.

  // costruttore
  public SMenu(String[] items);

  "Menu A"
  " Sub A1"
  " Sub A2"
  "  Sub A2-1"
  "Menu B"
  " Sub B1"

Figura 3

  /* conta gli spazio iniziali di una stringa
   */
  private int spaces(String item) {
    int space = 0;

    while (item.charAt(space) == ' ') {
      space++;
    }

    return space;
  }

  /* disegna la stringa della singola
   * voce del menu
   */
  private void menuItem(Graphics g, String item, int i, int h, int y) {
    // trim della stringa
    String tmp = item.trim();

    // conta gli spazi dell'item
    int space = spaces(item);

    // offset del menu sulle x
    int offX = WOFF + XGAP * space;

    // offset del menu sulle y
    int offY = y + HOFF + (HGAP * 2 + h) * i;

    // se sto disegnando la prima voce del menù
    // provoca un effetto ombra per evidenziare
    if (space == 0) {
      // ombra
      g.setColor(Color.orange);
      // disegna item
      g.drawString(tmp, offX - 1, offY - 1);
    }

    // disegna la stringa descrizione
    g.setColor(Color.black);
    // disegna item
    g.drawString(tmp, offX, offY);
  }

  /* disegna il rettangolo della singola
   * voce del menu correntemente evidenziata. Ne visualizza uno
   * più spesso in caso di pressione di un bottone del mouse.
   */
  private void menuRect(Graphics g, int i, int h) {
    // dimensioni
    final Dimension d = getSize();

    // offset del menu sulle x
    int offX = WOFF - HOFF / 2;

    // offset del menu sulle y
    int offY = HOFF + (HGAP * 2 + h) * i - HGAP;

    // dimension
    int dim = d.width - offX - 14 + HOFF / 2;

    // disegna la selezione
    if (i == hilightPos) {
      // pressed ?
      if (pressed) {
        // crea un effetto di evidenza del rettangolo
        // di selezione
        // bordo blue
        g.setColor(Color.blue);
        g.drawRect(offX - 1, offY - 1, dim + 2, HGAP * 2 + h + 2);
        // bordo grigio
        g.setColor(Color.gray);
        g.drawRect(offX - 2, offY - 2, dim + 4, HGAP * 2 + h + 4);
      }

      // arancione se premuto blue se selezionato
      g.setColor(pressed ? Color.orange : Color.blue);
      g.drawRect(offX, offY, dim, HGAP * 2 + h);
    }
  }

  /* disegna il menu
   */
  public void paint(Graphics g) {
    super.paint(g);

    // prende font metrics
    final FontMetrics fm = getFontMetrics(getFont());
    // prende l'altezza del font
    final int h = fm.getHeight();
    // calcola l'offset sulle y
    final int y = (fm.getAscent() + (h - (fm.getAscent() + \
    fm.getDescent())) / 2);

    // prende le dimensioni
    final Dimension d = getSize();

    /* disegna gli item
     * del menu
     */
    for (int i = 0; i < menu.length; i++) {
      // rettangolo di selezione
      menuRect(g, i, h);

      // disegna la stringa descrizione
      menuItem(g, menu[i],  i, h, y);
    }

    // disegna il bordo
    g.setColor(Color.lightGray);
    g.drawRect(0, 0, d.width-1, d.height-1);
    g.drawRect(1, 1, d.width-3, d.height-3);

    g.setColor(Color.gray);
    g.drawRect(2, 2, d.width-5, d.height-5);

    g.setColor(Color.black);
    g.drawRect(3, 3, d.width-7, d.height-7);
  }

Figura 4

Una sorgente è una qualsiasi classe che genera chiamate a metodi presenti in altre. La garanzia che il metodo di una classe in ascolto esita è data dalle interfacce. Nel nostro caso la sorgete è il menu stesso e la destinazione una classe al suo interno (inner class). Quest'ultima implementa i metodi che rappresentano l'interazione con il mouse :

  // mouse motion adapter
  private class MouseResponse extends MouseAdapter implements \
  MouseMotionListener

    // moved
    public void mouseMoved(MouseEvent e) {
      // prende font metrics
      final FontMetrics fm = getFontMetrics(getFont());
      // prende l'altezza del font
      final int h = fm.getHeight();

      // calcola la voce selezionata del menu
      int yPos = (e.getY() - HOFF) / (HGAP * 2 + h);

      // se la posizione è quella nelle voci del menu
      if (yPos < menu.length) {
        // prende l'item del menu selezionato
        String item = new String(menu[yPos]);

        // controlli che non sia il primo nodo
        if (item.charAt(0) != ' ') yPos = -1;

        // ridisegna il menu solo se
        // è cambiata la selezione
        if (yPos != hilightPos) {
          hilightPos = yPos;
          repaint();
        }
      }
    }

    // pressed
    public void mousePressed(MouseEvent e) {
      pressed = true;
      repaint();
    }

    // released
    public void mouseReleased(MouseEvent e) {
      if (hilightPos > 0) {
        // creazione dell'evento che indica la selezione di un item
      ActionEvent ae = new ActionEvent(SMenu.this, hilightPos, "SELECTED");
        // invio dell'evento agli ascoltatori
        fireActionEvent(ae);
      }

      pressed = false;
      repaint();
    }

    // exited
    public void mouseExited(MouseEvent e) {
      hilightPos = -1;
      repaint();
    }

    public ActionEvent(Object source, int id, String command)

      source  : l'oggetto che ha generato l'evento 
      id      : id per identificare l'evento
      command : descrizione dell'evento

  /* lista degli ascoltatori 
   * per gli eventi generati dal menu 
   */
  private Vector actionListeners = new Vector();

  /**
   * aggiunge un ascoltatore alla lista.
   * la sincronizzazione evita che durante la notifica di un evento
   * ci sia la variazione dell'elenco degli ascoltatori
   */
  public synchronized void addActionListener(ActionListener l) {
    actionListeners.addElement(l);
  }

  /**
   * rimuove un ascoltatore dalla lista.
   * la sincronizzazione evita che durante la notifica di un evento
   * ci sia la variazione dell'elenco degli ascoltatori
   */
  public synchronized void removeActionListener(ActionListener l) {
    actionListeners.removeElement(l);
  }

  /**
   * invia dell' evento agli ascoltatori.
   */
  protected void fireActionEvent(ActionEvent event) {
    // vettore copia degli ascoltatori
    Vector targets;
		
    // copia del vettore di ascoltatori sincronizzata 
    // evita che altri thread modifichino la lista degli ascoltatori
    // durante la creazione del clone
    synchronized (this) {
      targets = (Vector) actionListeners.clone(); 
    }
	
    // scorre tutti gli ascoltatori ed invia l'evento;
    // lavorando sulla copia della lista non c'è pericolo che un 
    // thread modifichi il vettore durante la notifica
    for (Enumeration e = targets.elements(); e.hasMoreElements() ;) {
      // prende ascoltatore
      final ActionListener l = (ActionListener) e.nextElement(); 
      
      // invia l'evento, chiamando il metodo di gestione 
      l.actionPerformed(event);
    }
  }  

Figura 5

Assembliamo il tutto

Terminiamo questo primo articolo presentando l'applet che utilizza i componenti creati. Sulla destra appare il menu; gli items sono i seguenti.

  
  // items
  String[] menuItems = {
    "Archivio",
    " Anagrafica",  
    " Ricerca",  
    "Altro",
    " About"
  };

- SAnagrafica : è un pannello per l'inserimento e la modifica dei dati.

Figura 6

- SRicerca : è un pannello per le ricerche.

Figura 7

- SAbout : visualizza informazioni sull'applet

Figura 8

I sorgenti di queste tre classi si possono trovare allegati alla fine dell'articolo. Essendo molto semplici non presenteranno alcuna difficoltà per il lettore.

  // pannello che contiene gli altri 
  private CardLayout  card       = new CardLayout(5, 5);
  private Panel       panel      = new Panel(card); 
    
  // pannelli delle opzioni del menù
  private SAnagrafica anagrafica = new SAnagrafica();
  private SRicerca    ricerca    = new SRicerca();
  private SAbout      about      = new SAbout();

  /**
   * Inizializza applet 
   */
  public void init() {        
    super.init();
        
    // crea menu nuovo menu 
    SMenu menu  = new SMenu(menuItems);
    // registra la classe che ascolterà gli eventi 
    // generati dal menu
    menu.addActionListener(new MenuActionAdapter());
    
    // crea un pannello con card layout
    panel = new Panel(card);
    panel.setBackground(Color.lightGray);
    
    // aggiunge i componenti al card layout 
    panel.add("1", anagrafica);
    panel.add("2", ricerca   );
    panel.add("3", about     );
                
    // imposta il border layout
    setLayout(new BorderLayout());

    // menu sulla sinistra
    add(BorderLayout.WEST,   menu );
    
    // pannelli al centro 
    add(BorderLayout.CENTER, panel); 
  }    

  // riceve e gestisce gli eventi generati dal componente
  // menu al momento che viene selezionato un item
  public class MenuActionAdapter implements ActionListener {
    public void actionPerformed(ActionEvent e) {
      switch (e.getID()) {          
        case 1 :         
          card.show(panel, "1");
          break;
          
        case 2 : 
          card.show(panel, "2");
          break;

        case 4 : 
          card.show(panel, "3");
          break;
      }
    }
  }

Conclusioni

Siamo cosi giunti alla fine di questa primo articolo. Abbiamo visto come si possono creare dei componenti ereditando da quelli base di Java ed abbiamo scritto la prima parte dell'applicazione lato client.
Se volete, potete fare il download dei sorgenti Java presenti in questo Numero ed evitare di riscriverli.
A seguito delle prove eseguite su Netscape 4.05 e su Explorer consigliamo all'utente che voglia provare l'applet l'utilizzo di "appletviewer.exe" fornito tra gli strumenti di base del JDK Sun.

Stefano Carfagna è Programmatore Java e contributore di BETA da questo Numero - È raggiungibile su Internet tramite l'indirizzo e-mail scxscx@hotmail.com.

Copyright © 1998 Stefano Carfagna, tutti i diritti sono riservati. Questo Articolo di BETA, insieme alla Rivista, è distribuibile secondo i termini e le condizioni della Licenza Pubblica Beta, come specificato nel file LPB.

BETA Rivista | Copertina | Sommario | InternetID | Informazioni | Browser
BETA Sul Web: http://www.beta.it