# Object Orient Programming-Course2 Week3-1:MVC Pattern
###### tags: `OOP` `Coursera`
<style>
.red {
color: red;
}
</style>
<style>
.blue {
color: blue;
}
</style>
<style>
.green {
color: green;
}
</style>

## MVC pattern
The MVC pattern stands for **Model, View and Control**. Everytime you see a user interface, you'll consider a MVC pattern.

digraph obj{
	node[shape=record];
	rankdir="LR";
	nodesep=0.8
	Modal [label = "{<f0> Modal}"];
    View [label = "{<f0> View}"];
    Controller [label = "{<f0> Controller}"];
     
     
    
    View->Controller [style="normal",dir="forward",arrowhead="normal",arrowtail="normal",headlabel="  ",taillabel="Uses "]
    
    Modal->View [style="normal",dir="forward",arrowhead="normal",arrowtail="normal",headlabel="Observer pattern  ",taillabel="Updates " minlen = 6]
    
    Controller->Modal   [style="normal",dir="forward",arrowhead="normal",arrowtail="normal",headlabel="  ",taillabel="Modifies  "];
    
}

* Modal: The modal contains the underlying data and logic that users want to see and manipulate
* View: The view gives a user a way to see the modal, or at least parts of it(as observer pattern shown)
* The view may conclude many different views, the modal has to **update the view *accordingly*** which is done by **Observer pattern**
* View passes requests to change the modal by **Controller**.

### Java code for MVC

import java.util.* //for observable, a package for implementing observer pattern
public class StoreOrder extends Observable{
    private ArrayList<String> itemList;
    private ArrayList<BigDecimal> priceList;
    
    public StoreOrder(){
        itemList = new ArrayList<String>();
        priceList = new ArrayList<BigDecimal>();
    }
    
    public String getItem(int itemNum)
    {
        return itemList.get(itemNum);
    }
    
    public BigDecimal getPrice(int itemNum)
    {
        return priceList.get(itemNum);
    }
    
    public ListIterator<String> getItemList(){
        ListIterator<String> itemIt = itemList.listIterator();
        return itemIt;
    }
    
    public ListIterator<BigDecimal> getPriceList() {
        ListIterator<BigDecimal> priceIt = priceList.listIterator();
        return priceIt;
    }
    
    public void deleteItem(int itemNum)
    {
        itemList.remove(itemNum);
        priceList.remove(itemNum);
        setChanged();
        notifyObservers();
    }
    
    public void addItem(int barcode)
    {
        //look for price in database by Barcode
        //look for name in database by Barcode
        //add name to itemList
        //add price to priceList
        
        setChanged();
        notifyObservers();
    }
    
    public void changePrice(int itemNum, BigDecimal newPrice){
        priceList.set(itemNum, newPrice);
        setChanged();
        notifyObservers();
    }

}

import java.util.*;
import javax.swing.JFrame;
//..etc

public class OrderView extends JPanel implements Observer, ActionListener{
    //Controller
    private OrderController controller;
    
    //User Interface Elements
    private JFrame frame;
    private JButton changePriceBtn;
    private JButton deleteItemBtn;
    private JTable groceryList;
    private JLabel totalLabel;
    //..etc
    
    private void createUI(){
        deleteItemBtn = new JButton("Delete Item");
        add(deleteItemBtn);
        
        //Add listener. e.g.:
        deleteItemButton.addActionListener(this);
 
 }
    public void update(Observable s, Object arg)
    display(((StoreOrder)s).getItemList(), ((StoreOrder)s).getItemList());
    public OrderView(OrderController controller){
        this.controller = controller;
        createUI();
    }
    
    public display(){ArrayList<BigDecimal> itemList, ArrayList<BigDecimal> priceList}{
    //code to display order
    }
    
    public void actionPerformed(ActionEvent event){
        if(event.getSource() == deleteItemBtn){
            controller.deleteItem(groceryList.getSelectedRow());
        }
        else if(event.getSource() == changePriceBtn)
        {
            BigDecimal newPrice = new BigDecimal(newPriceField.getText);
            controller.changePrice(groceryList.getSelectedRow(), newPrice);
        }
        
    }
}

public class OrderController{
    private StoreOrder storeOrder;
    private OrderView orderView;
    
    public OrderController(StoreOrder storeOrder, OrderView orderView){
        this.storeOrder = storeOrder;
        this.orderView = orderView;
    }
    
    public deleteItem(int itemNum){
        storeOrder.deleteItem(itemNum);
    }
    
    public void changePrice(int itemNum, BigDecimal newPrice){
        storeOrder.changePrice(itemNum, newPrice);
    }
}

### Model-View Controller Pattern Components:
* The **Model** contains the underlying data, state, and logic that the user want to see and manipulate.
* The **View** presents the model information to the user in the way they expect it and allows them to interact with it.
* The Controller interprets the user's interaction with elements in the view and modified the model itself.

### Ungraded assignment
#### Assignment Topic:

You have been asked by a local coffee shop to create a system that allows managers to see, edit and add employee information. You have decided to create them a web application. They have informed you that they may decide to grow and expand later on and would like the system to be flexible to expansion. In this case the MVC pattern should be used.

Create a UML class diagram that displays the basic MVC pattern for this web application. The system should keep track of an **employee’s name, ID number, job title and salary**. The controller should be able to get the employee model’s properties (getter methods) and change the properties (setter methods). The view should only display employee info.