MVC MouseEvent Verständnis

[yugox]

Hallöchen!
Mein Vorhaben:
Ich würde gerne das sich die Hintergrundfarbe von Buttons ändert, wenn man mit der Maus auf denen ist(Hovereffekt), allerdings in einem MVC-Prinzip. Leider komme ich noch nicht so ganz mit dem MVC und Observer in JAVA klar.
Was habe ich hier falsch gemacht, bzw. was fehlt:

Model:

package model;
import java.awt.Color;
import java.util.Observable;

public class Model extends Observable{
   
    private Color backgroundColor;
    private Color ForegroundColor;
   
    public void mouseHoverEffect()
    {
        this.setColor(Color.WHITE, new Color(200,28,26));
        setChanged();
        notifyObservers(this);
    }
   
    public void setColor(Color backgroundColor, Color ForegroundColor)
    {
        this.backgroundColor = backgroundColor;
        this.ForegroundColor = ForegroundColor;
    }
   
    public Color getbackgroundColor()
    {
        return backgroundColor;
    }
   
    public Color getforegroundColor()
    {
        return ForegroundColor;
    }
}

View:

package view;

import java.awt.BorderLayout;

public class rexxGUI extends JFrame {

    /**
     * Declarations.
     */
    private JPanel contentPane;
    private JButton btn_dumps = new JButton("Button1");
    private JButton btn_changeCust = new JButton("Button2");
    private JButton btn_dblist = new JButton("Button3");
    private JButton btn_settings = new JButton("Button4");

    public static final String MOUSEOVER = "MOUSEOVER";
    /**
     * Create the frame.
     */
    public rexxGUI() {
        setForeground(Color.WHITE);
        setBackground(Color.BLACK);
        setIconImage(Toolkit.getDefaultToolkit().getImage("*****"));
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("GUI");
        setBounds(100, 100, 276, 184);
        contentPane = new JPanel();
        contentPane.setBackground(Color.WHITE);
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(contentPane);
        GridBagLayout gbl_contentPane = new GridBagLayout();
        gbl_contentPane.columnWidths = new int[]{0, 0};
        gbl_contentPane.rowHeights = new int[]{0, 0, 0, 0, 0};
        gbl_contentPane.columnWeights = new double[]{0.0, Double.MIN_VALUE};
        gbl_contentPane.rowWeights = new double[]{0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE};
        contentPane.setLayout(gbl_contentPane);   
       
        /**
         * Buttons Settings
         */
        btn_dumps.setFocusPainted(false);
        btn_dumps.setActionCommand(rexxGUI.MOUSEOVER);       
        btn_dumps.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        btn_dumps.setForeground(Color.WHITE);
        btn_dumps.setBackground(new Color(200,26,28));
        btn_dumps.setPreferredSize(new Dimension(250, 30));
        GridBagConstraints gbc_btn_dumps = new GridBagConstraints();
        gbc_btn_dumps.insets = new Insets(0, 0, 5, 0);
        gbc_btn_dumps.gridx = 0;
        gbc_btn_dumps.gridy = 0;
        contentPane.add(btn_dumps, gbc_btn_dumps);
               
        btn_changeCust.setFocusPainted(false);
        btn_changeCust.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        btn_changeCust.setForeground(Color.WHITE);
        btn_changeCust.setBackground(new Color(200,26,28));
        btn_changeCust.setPreferredSize(new Dimension(250, 30));
        GridBagConstraints gbc_btn_changeCust = new GridBagConstraints();
        gbc_btn_changeCust.insets = new Insets(0, 0, 5, 0);
        gbc_btn_changeCust.gridx = 0;
        gbc_btn_changeCust.gridy = 1;
        contentPane.add(btn_changeCust, gbc_btn_changeCust);
       
        btn_dblist.setFocusPainted(false);
        btn_dblist.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        btn_dblist.setForeground(Color.WHITE);
        btn_dblist.setBackground(new Color(200,26,28));
        btn_dblist.setPreferredSize(new Dimension(250, 30));
        GridBagConstraints gbc_btn_dblist = new GridBagConstraints();
        gbc_btn_dblist.insets = new Insets(0, 0, 5, 0);
        gbc_btn_dblist.gridx = 0;
        gbc_btn_dblist.gridy = 2;
        contentPane.add(btn_dblist, gbc_btn_dblist);
       
        btn_settings.setFocusPainted(false);
        btn_settings.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
        btn_settings.setForeground(Color.WHITE);
        btn_settings.setBackground(new Color(200,26,28));
        btn_settings.setPreferredSize(new Dimension(250, 30));
        GridBagConstraints gbc_btn_settings = new GridBagConstraints();
        gbc_btn_settings.insets = new Insets(0, 0, 5, 0);
        gbc_btn_settings.gridx = 0;
        gbc_btn_settings.gridy = 3;
        contentPane.add(btn_settings, gbc_btn_settings);
    }
   
    /**
     * get Buttons
     */
    public JButton getBtn_dumps() {
        return btn_dumps;
    }
    public JButton getBtn_changeCust() {
        return btn_changeCust;
    }
    public JButton getBtn_dblist() {
        return btn_dblist;
    }
    public JButton getBtn_settings() {
        return btn_settings;
    }

}

Controller:

package controller;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.Observable;
import java.util.Observer;

import view.rexxGUI;
import model.Model;

public class controller implements Observer, ActionListener{

    private Model model;
    private rexxGUI view;
   
    public controller(Model model, rexxGUI view)
    {
        this.model = model;
        this.view = view;
       
        model.addObserver(this);
        view.getBtn_dumps().addActionListener(this);
    }
   
    @Override
    public void actionPerformed(ActionEvent ae) {
        switch (ae.getActionCommand())
        {
        case rexxGUI.MOUSEOVER:
            model.mouseHoverEffect();
            break;
        }
    }

    @Override
    public void update(Observable arg0, Object arg1) {
        if(arg1 instanceof Model)
        {
            view.getBtn_dumps().setBackground(((Model)arg1).getbackgroundColor());
            view.getBtn_dumps().setForeground(((Model)arg1).getforegroundColor());

        }
    }
}

main:

package main;

import java.awt.EventQueue;

import view.rexxGUI;

public class main {

    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    rexxGUI main = new rexxGUI();
                    main.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }
}

Ich danke euch für die Hilfe und wenn es euch nichts ausmacht und ihr kurz Zeit habt, wäre ich auch über eine Erklärung und/oder Tipps sehr dankbar!

LG

 

[JStein52]

Was habe ich hier falsch gemacht, bzw. was fehlt

Also entweder hast du es geschickt versteckt, aber ich würde sagen es fehlt mal schlicht das du deinem Button einen ActionListener zuweist ! (addActionListener(...);

Edit: Ok, es ist dir tatsächlich gelungen dies gut zu verstecken. Aber dann gleich die nächste Frage, wo wird ein controller-Objekt erzeugt ? Denn in dieser Klasse hast du ja das addActionListener(...)

 

[JStein52]

wo wird ein controller-Objekt erzeugt ?

Und dann gleich die nächste Frage: wo erzeugst du ein Model-Objekt ? Und wenn du das hast: Wo setzt du denn die Vorder- und Hintergrundfarben des Buttons

 

[yugox]

Hach, hast mich voll erwischt Die Erzeugungen wurden gelöscht, ohne das es mir auffiel

Aber wie funktioniert das mit dem MouseEntered und Exited, wie realisiere ich das mit dem Aufbau am Besten? Hatte an sowas gedacht:

@Override
public void mouseEntered(MouseEvent me) {
switch (me.getActionCommand())
{
case rexxGUI.MOUSEOVER:
model.mouseHoverEffect();
break;
}
}

Aber das geht scheinbar nicht mit ActionCommand, weil es keine Action ist und eine MouseCommand gibts ja nicht.

Edit: Ich habe das nun so gelöst, allerdings wird die Aktion immer für alle Buttons ausgelöst, ich möchte aber das es nur für den Button ausgelöst ist, auf den man gerade drauf ist und ich weiß nicht genau wie man das beim MouseEvent genau abfragen kann.

public class controller implements Observer, ActionListener, MouseListener{

    private Model model;
    private rexxGUI view;
  
    public controller(Model model, rexxGUI view)
    {
        this.model = model;
        this.view = view;
      
        model.addObserver(this);
      
        //view.getBtn_dumps().addActionListener(this);
        view.getBtn_dumps().addMouseListener(this);
        view.getBtn_changeCust().addMouseListener(this);
    }
  
    @Override
    public void actionPerformed(ActionEvent ae) {
        switch (ae.getActionCommand())
        {
        case rexxGUI.MOUSEOVER:
            model.mouseHoverEffect();
            break;
        }
    }

    @Override
    public void update(Observable arg0, Object arg1) {
        if(arg1 instanceof Model)
        {
            view.getBtn_dumps().setBackground(((Model)arg1).getbackgroundColor());
            view.getBtn_dumps().setForeground(((Model)arg1).getforegroundColor());
            view.getBtn_changeCust().setBackground(((Model)arg1).getbackgroundColor());
            view.getBtn_changeCust().setForeground(((Model)arg1).getforegroundColor());

        }
    }

    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

    @Override
    public void mouseEntered(MouseEvent me) {
            model.mouseHoverEffect();
    }

    @Override
    public void mouseExited(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

    @Override
    public void mousePressed(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

    @Override
    public void mouseReleased(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }
}

 

[JStein52]

und eine MouseCommand gibts ja nicht.

Wieso gibt es das nicht ? Ich denke das was du brauchst ist ein MouseListener. Google mal danach

 

[yugox]

Ein MouseListener habe ich ja (Kann man im Code dadrüber sehen) und die methode funktioniert auch, allerdings wird sie dann für beide Buttons ausgelöst und ich möchte aber das sie für jeweils den Buttons ausgelöst wird, auf den man gerade ist. Mir fehlt einfach die Switch-Abfrage auf die ich gerade nicht komme So z.B.
@Override
public void mouseEntered(MouseEvent me) {
switch (me.getButton())
{
case rexxGUI.get_Btn_dump():
model.mouseHoverEffect();
break;
}
}

 

[JStein52]

Bin gerade unterwegs und kann nicht nachschauen, aber im MouseEvent ("me" bei dir) steht doch sicher auch die Quelle des Events drinnen

Edit: bestimmt gibt es getSource() ?!
Edit: mit getButton fragst du übrigens ab welcher der Mouse-Buttons evtl. gedrückt wurde !

 

[yugox]

ja es gibt getSource(). Ich wollte es auch über getButton machen, aber wie übergebe ich denn den gedrückten MouseButton? Hatte es schon versucht mit:

    @Override
    public void mouseEntered(MouseEvent me) {
        switch (me.getButton())
        {
        case rexxGUI.getBtn_dumps():
            model.mouseHoverEffect();
            break;
        }
    }

Aber das geht ja nicht. Ich weiß nicht genau wie ich das von der class rexxGUI übergeben soll, hab da eigentlich schon die Getter, aber ich kann das nicht für die Abfrage benutzen, bzw, ich setze es falsch ein

 

[JStein52]

Das ist doch in deiner Controller-Klasse ? Du vergleichst:
- me.getSource() == view.getBtn_dumps() //evtl. musst du noch auf JComponent casten oder so

 

[JStein52]

Was möchtest du eigentlich ? Ich habe verstanden wenn die Maus über einen Button (am Bildschirm !) bewegt wird soll sich die Farbe ändern. Dann hast du ja nichts mit me.getButton() am Hut denn da sind die Maus-Buttons (links, rechts) gemeint !

 

[yugox]

Jaa ansich schon, aber das funktioniert nicht beim switch, hatte ja auch schon:

 @Override
    public void mouseEntered(MouseEvent me) {
        switch (me.getButton())
        {
        case view.getBtn_dumps():
            model.mouseHoverEffect();
            break;
        }
    }

und dann steht da ich soll den Typen zum (int) changen ôô und wenn ich statt getButton(), getSource() nehme steht da: Cannot switch on a value of type Object. Only convertible int values, strings or enum variables are permitted.

Also über

     @Override
        public void mouseEntered(MouseEvent me) {
           if(me.getSource() == view.getBtn_dumps())
            {
               model.mouseHoverEffect();
            }
        }

geht es, aber die methode es wird auf beide buttons statt auf den einen ausgeführt. Mir wäre es glaube ich auch lieber wenn es über switch case gehen könnte, statt ganz viele elseif abfragen

 

[InfectedBytes]

getButton sagt nunmal nur aus welche Maus-Taste gedrückt wurde. Aber du willst überhaupt keine Maustaste drücken sondern nur wissen über welchen JButton dein Mauszeiger ist.
Maus Button != JButton

 

[JStein52]

Geht deshalb auf beide Buttons:

    @Override
    public void update(Observable arg0, Object arg1) {
        if(arg1 instanceof Model)
        {
            view.getBtn_dumps().setBackground(((Model)arg1).getbackgroundColor());
            view.getBtn_dumps().setForeground(((Model)arg1).getforegroundColor());
            view.getBtn_changeCust().setBackground(((Model)arg1).getbackgroundColor());
            view.getBtn_changeCust().setForeground(((Model)arg1).getforegroundColor());

        }
    }

Dann musst du die Unterscheidung halt dort drin machen.

Edit: ein Observer überwacht ja eigentlich ein Objekt. Bei dir überwacht er aber zwei. Dann musst du halt in deinem Controller die Objekte unterscheiden, z.B. indem du irgendwie die Information über die Event-Quelle in die update-Methode rüberrettest.

 

[yugox]

Oh man hätte nicht gedacht das ein MouseEvent so kompliziert ist, wenn man es alles trennen möchte. Ich werde es mal versuchen und schauen ob ich das irgendwie hinbekomme.

@InfectedBytes, ja mein Ziel war es das sich der Background des Buttons ändert, wenn man mit der Maus "drüberfährt(hover)" ohne etwas zu drücken.

@JStein52, ich danke dir sehr für deine Hilfe, Geduld und Unterstützung, so macht lernen gleich viel mehr Spaß

 

[JStein52]

Ich werde es mal versuchen und schauen ob ich das irgendwie hinbekomme.

Du kannst dir ja im Controller eine zusaetzliche Instanzvariable machen:

private JButton observedButton = null;

In der MouseEntered und MouseExited schreibst du dort jeweils mit me.getSource() den aktuellen Button rein.
In der update()-Methode guckst du ob observedButton != null ist und setzt dafür deine Farben.
Anschliessend wird observedButton = null gesetzt.

 

[JStein52]

Ach und nochwas: eine Unterscheidung der Buttons (dein switch, bzw. if elseif ...) brauchst du ja auch nur wenn du bei den Buttons verschiedene Dinge machen willst. Solange du das gleiche machst ist es doch egal welcher der beiden es denn nun ist

 

[yugox]

Danke dir für den Tipp JStein52 Ich habe das nun wie folgt gemacht:

public class controller implements Observer, ActionListener, MouseListener{

    private Model model;
    private rexxGUI view;
    private JButton observedButton = null;
  
    public controller(Model model, rexxGUI view)
    {
        this.model = model;
        this.view = view;
      
        model.addObserver(this);
      
        //view.getBtn_dumps().addActionListener(this);
        view.getBtn_dumps().addMouseListener(this);
        view.getBtn_changeCust().addMouseListener(this);
    }
  
    @Override
    public void actionPerformed(ActionEvent ae) {
        switch (ae.getActionCommand())
        {
        case rexxGUI.MOUSEOVER:
            model.mouseHoverEffect();
            break;
        }
    }

    @Override
    public void update(Observable arg0, Object arg1) {
        if(this.observedButton != null)
        {
            this.observedButton.setBackground(((Model)arg1).getbackgroundColor());
            this.observedButton.setForeground(((Model)arg1).getforegroundColor());
            this.observedButton = null;
        }
    }

    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

     @Override
        public void mouseEntered(MouseEvent me) {
         if(this.observedButton == null)
         {
            this.observedButton = (JButton) me.getSource();
            model.mouseHoverEffect();

         }
         }

    @Override
    public void mouseExited(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

    @Override
    public void mousePressed(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }

    @Override
    public void mouseReleased(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }
}

ist das so okay oder könnte ich dort etwas verbessern?

LG


EDIT:
Was sagst Du allgemein zu der MVC Struktur, ist es so okay oder sollte man z.B. den Observer irgendwo anders hinpacken?

 

[JStein52]

Du könntest in der mouseEntered die Abfrage ob der observedButton == null ist weglassen. Einfach setzen und gut ist. Oder gibt das Konflikte die ich gerade nicht sehe ?

 

[yugox]

Stimmt, nee es gibt keine Konflikte

 

[XyMorgan]

Das MVC-Pattern ist hier meines Erachtens etwas misslich implementiert.

Was ist Model, wer Controller und was die View?

Controller -> dein Controller implements Observer
Model -> dein Model extends Observable
View? sind/ist eigentlich dein JButton

Abfolge:

Button wartet auf Mouse Entered und Exited -> MouseListener ändert Model -> Model ruft notifyObservers auf -> Controller Überwacht dein Model und wartet auf notify vom Model -> Controller ändert Button

Daher würde ich beim mouseHooverEffect direkt den passenden JButton mitgeben und im Model notifyObserver(JButton) aufrufen.

Dann kannst im update(Observable o, Object arg) o auf Model casten und arg auf den JButton (evtl. Instanz prüfen). Du übergibst an den Observer quasi 2 mal das Model.

 

[yugox]

Hmm,
wie sollte man das denn dann am Besten implementieren?
Welche Abfolge wäre denn am "sinnvollsten"?

 

[yugox]

Noch eine Frage, macht es Sinn z.B. alle Methoden in der Klasse Model zu schreiben die dann Observable extended oder doch eher mehrere Klassen die Observable extenden.

z.B.
public class MouseEffects extends Observable{}
public class TextEffects extends Observable{}
public class FrameEffects extends Observable{}
etc.?

 

[XyMorgan]

Du hast Quasi einen SuperObserver gebaut. Einerseits überwacht dein Controller das Modell, andererseits deine GUI.

Hier wird MVC mit Observerpattern gemixxt. Eigentlich soll sich die View anpassen, wenn das Model geändert wird. Daher würde normalerweise

1) MVC strict

- Die GUI der Observer auf das Model sein.
- Der Controller das Model als Reaktion auf MouseEntered ändern
- Das Model die GUI informieren, dass sich die Daten im Modell geändert haben.

Dein Controller würde nur MouseListener sein und den Entered/Exited-Event verarbeiten, dann die Daten im Model aktualisieren und anschließend deine GUI informiert, dass sich die Daten geändert haben.

Oder,

2) MVC mit Controller zwischen Modell und View
- Die GUI implementiert den MouseListener und informiert den Controller
- Der Controller ändert das Model
- Der Controller überwacht das Model
- Der Controller passt die GUI an als Reaktion auf die Änderung im Modell

Dein deine GUI verarbeitet die Events selbst und ruft den Controller auf, dieser ändert das Model und durch die Änderung des Models informiert er sich selbst als Observer und passt die GUI (View) an.

Beides hat Vor und Nachteile.

 

[XyMorgan]

Sry, auf deine Frage noch die Antwort

Kommt ganz drauf an, wie gesagt, denke dein Beispiel ist wenig notwendig. Normalerweise würde für sowas keiner MVC oder nen Observer benutzen, du arbeitest ja mit Swing, das selbst schon auf MVP (quasi MVC, M combined VC) aufgebaut ist. Hier ändert man im MouseListener direkt die View vom Button.

Sinn macht der Aufwand mit Controllern etc. erst wen du Beispielsweise Tabellen mit Werten füllen willst. Und die Logik (zumindest einen Teil davon) im Model haben willst. Dann wäre deine Tabelle der Observer, dein Controller würde neue Daten im Model ablegen und das Model würde die Tabelle neu rendern.
So könnte man 2 Tabellen als Observer auf ein Model setzen und gleichzeit nach Änderung der daten im Model die Tabellen neu rendern. Oder eine Tabelle pro Model.

Und wie gesagt, SWing arbeitet selbst quasi nach diesem Konzept. Wenn du im TableModel was änderst wird die View der Tabelle über den in der Tabelle integrierten quasi-Controller neu gerendert.

 

[yugox]

Vielen Dank für die ausführliche Erklärung @XyMorgan !
Ich werde mir das nochmal genau anschauen und überlegen was am meisten Sinn macht.

Am Ende soll schon eine GUI entstehen, mit mehreren Panels und so einigen Methoden. Das mit dem Layout war zum größten Teil sehr hilfreich um ein besseres Verständnis für den Observer und den Aufbau der MVC-Struktur zu bekommen. Deswegen wollte ich auch wissen woran ich am Besten weiß wo der Observer hin soll(sprich wo er am meisten Sinn macht), da ich auch die Panels switchen muss und bei Knopfdrücken einige Methoden ausgeführt werden,etc.