Slide Personalizzati

Ci sto lavorando

Obiettivo: Creare una classe che mi permetta passando come argomenti al costruttore il path delle tre immagini ripettivamente del pomello, del trak di fondo e qello di scorrimento.

 

Il progetto è così strutturato: una classe per testare il tutto MySlider, poi una che assembla i componenti, una che disegna il pomello e ne controlla lo spostamento, una per disegnare il trak di scorrimento, una per quello do fondo.

 

La casse che richiama MySlid la classe che crea gli slider personalizzati

 3 import java.awt.Color;
 4 import javax.swing.*;
 5  
 7 public class MySlider extends javax.swing.JFrame {
 8       
 9     public MySlider() {        
10         setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
11         getContentPane().setLayout(null);              
12         setSize(1300, 600);
13         setLocationRelativeTo(null);
14         getContentPane().setBackground(Color.LIGHT_GRAY);
15         
16         
17       MySlid myd0 = new MySlid("/image/drag03.png","/image/drag10.png","/image/drag10dx.png");
18       MySlid myd1 = new MySlid("/image/drag03.png","/image/drag10dx.png");
19  
23         myd0.setLocation(30, 40);       
24         myd1.setLocation(30, 120);
25         
29         getContentPane().add(myd0);        
30         getContentPane().add(myd1);        
34                    
35         setVisible(true);
36     }    
37  
38     public static void main(String args[]) {
           //Impostazione Look ed feel - collassato
63         java.awt.EventQueue.invokeLater(new Runnable() {
64             public void run() {
65                  new MySlider();            
66             }
67         });
68     }               
69 }

 

Discussione:

Come si nota la classe MySlid ha due costruttori uno con tre argomenti ed uno con due. In ordine sono il percorso (path) dell'immagine che rappresenterà il pomello di scorrimento, il secondo la trak di scorrimento, la parte a sinistra del pomello man mano che questo scorre sulla destra cambia di aspetto, il terzo la trak di fondo. Il secondo costruttore accetta solo due argomenti viene praticamente omesso il strak di scorrimento.

 

La classe MySlid

 3 import javax.swing.JButton;
 4 import javax.swing.JComponent;
 5 
 6 
 7 public class MySlid extends JComponent{  
 8     private String po,sx,dx;
 9     private int pH,pW,lun,dW,dH;
10     private MyIcon myc;
11     private TrakSx tsx;
12     private TrakDx tdx;
13     private int xpm;
14    
15     //Costruttore per solo pometto e trak  
16     public MySlid(String a, String c){
17         po=a; dx=c;
18         inizializza(0);
19     }
20     //Costruttore per pomello, trak e e barra espandibile
21     public MySlid(String a, String b, String c){
22         po=a; sx=b; dx=c;        
23          inizializza(1);            
24     } 
25     
26     private void inizializza(int flg){      
27         //Trak nera
28         tdx = new TrakDx(dx);        
29         dW=tdx.getTrkW();
30         dH=tdx.getTrkH();
31         
32         //Trak arancio   
33         if(flg==1){       
34             tsx = new TrakSx(sx);                 
35         }
36 
37         //Pomello
38         myc = new MyIcon(po,dW);
39         pW=myc.getPomW();
40         pH=myc.getPomH();
41         if(flg==1){      
42             myc.addPropertyChangeListener(new java.beans.PropertyChangeListener() {
43                 public void propertyChange(java.beans.PropertyChangeEvent evt) {
44                     String pro=evt.getPropertyName();
45                     if(pro=="foreground"){
46                         xpm=myc.getMpos();
47                         tsx.setTrakW(xpm);
48                     }
49                 }
50             });
51         }
52         
53         tdx.setLocation(pW/3,(pH-dH)/2 );
54         if(flg==1)tsx.setLocation(pW/3,(pH-dH)/2);
55         
56         this.add(myc);        
57         if(flg==1) this.add(tsx);                     
58         this.add(tdx);
59         
60         lun=dW+(pW*2/3)+5;
61         this.setSize(lun, pH);
62     }
63     public int getAlign(){
64         return(pW/3);
65     }
66     
67     public void setPosition(int x, int y){
68         this.setLocation(x-(pW/3), y);
69     }
70 }      

 

Discussione:

I due costruttori raccolgono i rispettivi path alle immagini e lasciano al metodo inizializza il lavoro da fare. Se verrà passato il parametro 0 verranno istanziate solo le classi pomello (MyIcon) e la trak di fondo (TrakDx). Se si passa il falg 1 allora inizializza istanzierà tutte e tr le classi quindi anche il trak di scorrimento. Si rammenta che l'ordine in cui verranno visualizzati i tre oggetti è dettato dall'ordine in cui vengono aggiunti al controlPane del componente. This si riferisce alla classe MySlid di cui richiama implicitamente il contentPane righe 56-58. L'ordine in cui vengono istanziate le classi deve essere necesariamente quello riportato, in quanto uno ha bisogno dei dati da prelevare dall'altro. La classe TrakSx (tsx) verrà addizionata solo se si è usato il costruttore a tre argomenti.

Cosa accade dalla riga 38 alla 51?

Appena creato l'ogetto myc (MyIcon) si recuperano le dimensioni del pomello e poi (sempre se siamo al caso a tre) gli associamo un ascoltatore che sia attento ad intercettare eventuali cambiamenti di proprietà della classe. Perchè abbiamo la necessità di far aumentare la larghezza della traccia di scorrimento in modo che segua il pomello nel suo spostamento verso destra e farla diminuire quando questo si sposta verso sinistra.

Se andiamo a sbirciare nella classe MyIcon vedremo che questa verrà associata ad un ascoltatore che andrà ad intercettare quando il mouse dragherà (mauseDragged). Quando riceve l'evento, tra le altre cose andrà a modificare una proprietà della JLabel, ricordo che la classe MyIcon non estende un JComponent come le altre ma un JLabel proprio per avere a disposizione una proprietà, nel nostro caso ho scelto il cambio di colore del foreground (colore del testo) che alternativamente viene cambiato da nero a bianco e da bianco a nero vedi il metodo setFore().

 43         addMouseMotionListener(new MouseAdapter(){
 44             public void mouseDragged(MouseEvent evt){
 45                 nw=evt.getX();
 46                 //Mantieni la posizione del puntatore rispetto ai bordi
 47                 mvx=nw-dx;
 48                 //Blocca agli estremi
 49                 max=(pomWidth/3)+trakdWidtht-((pomWidth*2)/3);
 50                 if(mvx<0)mvx=0;
 51                 if(mvx>max)mvx=max;
 52                 movePom(mvx,yMrg);
 53                 setFore();
 54             }
 55         });         

 

 57     private void setFore(){
 58         if(std==0){
 59             std=1;
 60             this.setForeground(Color.black);
 61         }else{
 62             std=0;
 63             this.setForeground(Color.white);        
 64         }
 65         
 66     } 

 

Quindi ogni qualvolta sposteremo il pomello verrà modificata la proprirtà foreground e di conseguenza verrà lanciato un messagio di propertyChange, questo verrà intercettato nella classe MySlid dall'ascoltatore di cui parlavamo che una volta allertato dell'avvenuta modifica di proprietà (alias spostamento del pomello) andrà a modificare la lunghezza del JComponent che disegna la traccia di scorrimento. Tornando a MySlid nelle righe 46-48 leggerà la nuova posizione del mouse (la x) (xpm=myc.getMpos();) e la userà per settare la larghezza della traccia di scorrimento (tsx.setTrakW(xpm);). Nelle righe 45-48 viene lettta la larghezza e l'altezza della traccia di fondo da TrakDx si invia la larghezza a MyIcon che la userà per determinare i finecorsa, poi viene calcolata la posizione della traccia di fondo e se prevista la posizione della traccia di scorrimento. Una particolarità il metodo setPosition, si poteva utilizzare quello a disposizione e cioè setLocation ma quello avrebbe allineato gli slider inizio pomello ma poichè i pomelli potrebbero avere dimensione molto diverse usando setPosition ci troveremo le trak di fondo tutte allineate a prescindere dalla dimensione dei pomelli.

 

Ora passiamo a commentare la classe più complessa la MyIcon

  3 import java.awt.Color;
  4 import java.awt.Graphics;
  5 import java.awt.Graphics2D;
  6 import java.awt.Shape;
  7 import java.awt.event.MouseAdapter;
  8 import java.awt.event.MouseEvent;
  9 import java.awt.geom.Ellipse2D;
 10 import java.net.*;
 11 import javax.swing.*;
 12 
 13 public class MyIcon extends JLabel{
 14     private ImageIcon pom;
 15     private int xMrg=0,yMrg=0,mvx,max,maxlu;
 16     private int xPom=xMrg ,yPom=yMrg;
 17     private int dx,ex,nw;
 18     private int pomWidth,pomHeigh;
 19     private int trakdWidth;
 20     private int std=0,ssx;
 21    
 22   
 23     Shape shape = null; 
 24      
 25     public MyIcon(String po, int ww){
 26         trakdWidth=ww;     
 27         //Carica le immagini
 28         pom = createImageIcon(po);        
 29                
 30         //Prendi le dimensioni        
 31         pomWidth=pom.getIconWidth();
 32         pomHeigh=pom.getIconHeight();         
 33         
 34         maxlu=trakdWidth+((pomWidth*2)/3)+5;
 35         this.setBounds(0, 0, maxlu, pomHeigh);
 36       
 37         addMouseListener(new java.awt.event.MouseAdapter() {
 38             public void mousePressed(java.awt.event.MouseEvent evt) {
 39                 ex=evt.getX();
 40                 dx=ex-xPom;
 41             }
 42         });
 43         addMouseMotionListener(new MouseAdapter(){
 44             public void mouseDragged(MouseEvent evt){
 45                 nw=evt.getX();
 46                 //Mantieni la posizione del puntatore rispetto ai bordi
 47                 mvx=nw-dx;
 48                 //Blocca agli estremi
 49                 max=(pomWidth/3)+trakdWidth-((pomWidth*2)/3);
 50                 if(mvx<0)mvx=0;
 51                 if(mvx>max)mvx=max;
 52                 movePom(mvx,yMrg);
 53                 setFore();
 54             }
 55         });        
 56     }
 57     private void setFore(){
 58         if(std==0){
 59             std=1;
 60             this.setForeground(Color.black);
 61         }else{
 62             std=0;
 63             this.setForeground(Color.white);        
 64         }
 65         
 66     }
 67     private void movePom(int x, int y){
 68         //L stato corrente del pomello e immagazzinato in variabili final (costanti)
 69         //per evitare ripetute chiamate dello stesso metodo
 70         final int CURR_X = xPom;
 71         final int CURR_Y = yPom;
 72         final int CURR_W = pomWidth;
 73         final int CURR_H = pomHeigh;
 74         final int OFFSET = 1;
 75 
 76         if ((CURR_X!=x) || (CURR_Y!=y)) {
 77 
 78             // IL pomello si sta movendo, ridisegna il background
 79             // sopra la vecchia posizione del pomello. 
 80             repaint(CURR_X,CURR_Y,CURR_W+OFFSET,CURR_H+OFFSET);
 81                        
 82             // Aggiorna le coordinate.
 83             xPom=x;
 84             yPom=y;
 85 
 86             // Ridisegna il pomello nella nuova posizione.
 87             repaint(xPom, yPom, 
 88                 pomWidth+OFFSET, 
 89                 pomHeigh+OFFSET);
 90         }
 91     }
 92     @Override 
 93     public void paintComponent(Graphics g) {
 94         super.paintComponent(g);
 95         Graphics2D g2d =(Graphics2D)g;
 96         shape=new Ellipse2D.Float(xPom,yPom,pomWidth,pomHeigh);        
 97         pom.paintIcon(this, g2d, xPom, yPom);
 98     }
 99     
100     @Override
101     public boolean contains(int x, int y) {
102         return shape.contains(x,y);
103     }
104     public int getPomW(){
105         return(pomWidth);
106     } 
107     public int getPomH(){
108         return(pomHeigh);
109     }
110     public int getMpos(){
111         ssx=xPom+(pomWidth/2);
112         return(ssx);
113     }
114     private ImageIcon createImageIcon(String path) {
115          URL imgURL = getClass().getResource(path);
116          if (imgURL != null) {
117              return new ImageIcon(imgURL);
118          } else {
119              System.err.println("Non è possibile trovare il file: " + path);
120            return null;
121         }
122      }
123 }  

 

Calcolo della massima dimensione che dovrà avere

maxlu=trakdWidtht+((pomWidth*2)/3);

da riga 37 a 55 c'è i controllo del movimento del pomello. Si associano due ascoltatori il primo raccoglie la posizione del mouse al primo tocco, la pressione (mousePressed) ci interessa la distanza che il mause ha in questo istante dal bordo sinistro del pomello dx, ci riferiamo alle origini del JComponent (JLabel) di MYIcon, xpon è la x del pomello, ex la x del mouse.

dx=ex-xPom;

Questo ci servirà per conservare questa posizione relativa durante lo spostamento.

Il secondo ascoltatore è sensibile al trascinamento (mouseDragged) la nuova posizione che dovrà assumere il pomello sarà datada

mvx=nw-dx;

 

max=(pomWidth/3)+trakdWidth-((pomWidth*2)/3);

La y deve rimanere fissa a zero. Si da in pasto al metodo movePom. Segue il metodo setFore() che mi lancerà il cambio della proprietà foreground che come abbiamo visto prima, mi servirà per regolare la lunghezza della traccia a scorrimento. Questo metodo non fa altro che nodificare la proprieta foreground ricorsivamente nero, bianco, nero, bianco ecc

 

 57     private void setFore(){
 58         if(std==0){
 59             std=1;
 60             this.setForeground(Color.black);
 61         }else{
 62             std=0;
 63             this.setForeground(Color.white);        
 64         } 

 

Ora è la volta del metodo movePom. Per un approfondimento vedi qui. Riceve la nuova posizione x, y

 67     private void movePom(int x, int y){
 68         //L stato corrente del pomello e immagazzinato in variabili final (costanti)
 69         //per evitare ripetute chiamate dello stesso metodo
 70         final int CURR_X = xPom;
 71         final int CURR_Y = yPom;
 72         final int CURR_W = pomWidth;
 73         final int CURR_H = pomHeigh;
 74         final int OFFSET = 1;
 75 
 76         if ((CURR_X!=x) || (CURR_Y!=y)) {
 77 
 78             // IL pomello si sta movendo, ridisegna il background
 79             // sopra la vecchia posizione del pomello. 
 80             repaint(CURR_X,CURR_Y,CURR_W+OFFSET,CURR_H+OFFSET);
 81                        
 82             // Aggiorna le coordinate.
 83             xPom=x;
 84             yPom=y;
 85 
 86             // Ridisegna il pomello nella nuova posizione.
 87             repaint(xPom, yPom, 
 88                 pomWidth+OFFSET, 
 89                 pomHeigh+OFFSET);
 90         }
 91     }

 

La prima cosa importante è il definire final ossia non modificabili le variabili delle 4 coordinate in modo che la loro variazione possa provocare ripetute richiamate del metodo. I precedenti prove avevo infatti un tremendo sfarfallio e salti incontrollati dell'oggetto. Cosi il movimento è stabile e fluido.

Ma il cambiamento più importante è l'invocazione del metodo repaint. Questo metodo è definito da java.awt.Component ed è il meccanismo che consente di ridisegnare in modo programmatico la superficie di un determinato componente. Ha una versione no-arg (che ridisegna l'intero componente) e una versione multi-arg (che ripete solo l'area specificata). Questa area è anche nota come clip. Invocare la versione multi-arg di ridisegno richiede un piccolo sforzo in più, ma garantisce che il tuo codice non sprecherà cicli per ridisegnare le aree dello schermo che non sono state modificate.

Poiché stiamo impostando manualmente la clip, il nostro metodo movePom richiama il metodo Repaint non una volta, ma due volte. La prima invocazione dice a Swing di ridisegnare l'area del componente in cui si trovava il quadrato in precedenza (il comportamento ereditato utilizza il Delegato dell'interfaccia utente per riempire quell'area con il colore di sfondo corrente). La seconda invocazione dipinge l'area del componente dove il quadrato è attualmente . Un punto importante che vale la pena notare è che sebbene abbiamo invocato ridipingere due volte di fila nello stesso gestore di eventi, Swing è abbastanza intelligente da prendere quelle informazioni e ridipingere quelle sezioni dello schermo tutte in un'unica operazione di disegno. In altre parole, Swing non ridisegna il componente due volte di seguito, anche se è ciò che il codice sembra fare.

 

Un aspetto fantasrtico è quello di contenere l'area recettiva al mouse all'interno di una forma che possiamo definire noi. Normalmente quest'area è un rettangolo ma nel nostro caso l'abbiamo ridotta ad un cerchio che circoscrive il pomello in modo che potremo trascinarlo solo se entriamo dentro al cerchio. In una condizione normale potevamo trascinarlo anche cliccando agli angoli del quadrato circoscritto. Questo significa che se vessimo disegnato un contorno a forma di stella l'avremmo potuta trascinare solo cliccando all'imterno del suo corpo.

Per fare questo bisogna creare una forma (per noi il cerchio) nel metodo paintComponent naturalmente dovrà sovrapporsi perfettamente al pomello percui stesse coordinate e dimensioni.

 

92     @Override 
 93     public void paintComponent(Graphics g) {
 94         super.paintComponent(g);
 95         Graphics2D g2d =(Graphics2D)g;
 96         shape=new Ellipse2D.Float(xPom,yPom,pomWidth,pomHeigh);        
 97         pom.paintIcon(this, g2d, xPom, yPom);
 98     }

 

Poi bisogna sovrascrivere il metodo contains che il sistema usa per verificare se il mouse è all'interno dell'oggetto . Questo usa il metodo contains della forma shape e il mouse è all'interno di questa forma ritornerà true altrimenti false.

100     @Override
101     public boolean contains(int x, int y) {
102         return shape.contains(x,y);
103     } 

 

Per concludere ci sono tre metodi get per avere le relative informazioni.

 

La classe TrakSx

 3 import java.awt.Graphics;
 4 import java.awt.Graphics2D;
 5 import java.net.URL;
 6 import javax.swing.ImageIcon;
 7 import javax.swing.JComponent;
 8     
 9 public class TrakSx extends JComponent{
10      private  ImageIcon trak;
11      private int trakWidth,trakHeight;
12      
13      
14      public TrakSx(String str){
15          trak = createImageIcon(str);
16          trakWidth=trak.getIconWidth();
17          trakHeight=trak.getIconHeight(); 
18          this.setSize(40, trakHeight);
19      }
20      public void paintComponent(Graphics g) {
21          super.paintComponent(g);
22          Graphics2D g2d =(Graphics2D)g;       
23          trak.paintIcon(this, g2d, 0, 0);       
24      }
25      
26      public void setTrakW(int ww){
27          this.setSize(ww, trakHeight);
28      }
29      
30      private ImageIcon createImageIcon(String path) {
31         URL imgURL = getClass().getResource(path);
32         if (imgURL != null) {
33             return new ImageIcon(imgURL);
34         } else {
35             System.err.println("Non è possibile trovare il file: " + path);
36           return null;
37        }
38     }           
39 } 

 

La classe TrakDx

 3 import java.awt.Graphics;
 4 import java.awt.Graphics2D;
 5 import java.net.URL;
 6 import javax.swing.ImageIcon;
 7 import javax.swing.JComponent;
 8 
 9 public class TrakDx extends JComponent{
10      private  ImageIcon trak;
11      private int trakWidtht,trakHeight;
12 
13      public TrakDx(String str){
14          trak = createImageIcon(str);
15          trakWidtht=trak.getIconWidth();
16          trakHeight=trak.getIconHeight(); 
17          this.setSize(trakWidtht, trakHeight);
18      }
19      public void paintComponent(Graphics g) {
20          super.paintComponent(g);
21          Graphics2D g2d =(Graphics2D)g;       
22          trak.paintIcon(this, g2d, 0, 0);       
23      }
24      public int getTrkW(){
25         return(trakWidtht);
26      }
27      public int getTrkH(){
28         return(trakHeight);
29      }        
30      private ImageIcon createImageIcon(String path) {
31         URL imgURL = getClass().getResource(path);
32         if (imgURL != null) {
33             return new ImageIcon(imgURL);
34         } else {
35             System.err.println("Non è possibile trovare il file: " + path);
36           return null;
37        }
38     }           
39 } 
        

 

Le altre classi dovrebbero essere intuitive.