2010-10-21 15 views
10

Studiowałem wzorzec projektowy Model-widok-kontroler i rozumiem teoretycznie koncepcję tego wzoru, ale chciałem się przekonać, jak można go zastosować w praktyce.
Wikipedia wspomina o wt - Web Toolkit, CppCMS i kilku innych standardowych implementacjach, które używają wzorca, ale nie byłem im obcy i miałem nadzieję, że będzie naprawdę wdzięczny, jeśli ktoś może dostarczyć przykładowy kod (mam nadzieję, że C++) która implementuje wzór i wyjaśnia teorię wzorców, które są wprowadzane w życie.Widok modelu Kontroler Wzór projektu Kod Przykład

Odpowiedz

21

Oto krótki przykład zrobiłem (nie spróbować kompilacji go, daj mi znać, jeśli nie ma błędów):

class Button; // Prewritten GUI element 

class GraphGUI { 
public: 
    GraphGUI() { 
     _button = new Button("Click Me"); 
     _model = new GraphData(); 
     _controller = new GraphController(_model, _button); 
    } 
    ~GraphGUI() { 
     delete _button; 
     delete _model; 
     delete _controller; 
    } 

    drawGraph() { 
     // Use model's data to draw the graph somehow 
    } 
    ... 

private: 
    Button*    _button; 
    GraphData*   _model; 
    GraphController*  _controller; 
}; 

class GraphData { 
public: 
    GraphData() { 
     _number = 10; 
    } 
    void increaseNumber() { 
     _number += 10; 
    } 
    const int getNumber() { return _number; } 
private: 
    int _number; 
}; 

class GraphController { 
public: 
    GraphController(GraphData* model, Button* button) { 
     __model = model; 
     __button = button; 
     __button->setClickHandler(this, &onButtonClicked); 
    } 

    void onButtonClicked() { 
     __model->increaseNumber(); 
    } 

private: 
    // Don't handle memory 
    GraphData* __model; 
    Button*  __button; 
}; 

Ignorując realizację Buttona, w zasadzie ten program użyje GraphGUI do wyświetlania wykres, który zmieni się po naciśnięciu przycisku. Powiedzmy, że to wykres słupkowy i będzie on wyższy.

Ponieważ model jest niezależny od widoku (przycisk), a kontroler obsługuje komunikację między nimi, jest to zgodne ze wzorem MVC.

Po kliknięciu przycisku sterownik modyfikuje model za pomocą funkcji onButtonClicked, o której klasa Button ma znać, gdy zostanie wywołana po kliknięciu.

Piękno tego jest takie, że model i widok są całkowicie niezależne, ich implementacja może drastycznie się zmienić i nie wpłynie na inne, sterownik może po prostu dokonać kilku zmian. Jeśli model w tym przypadku obliczył pewien wynik na podstawie niektórych danych bazy danych, kliknięcie przycisku mogło spowodować to, ale implementacja przycisku nie musiałaby się zmienić.Lub, zamiast powiedzieć kontrolerowi, kiedy pojawia się kliknięcie, może może powiedzieć kontrolerowi, gdy przycisk jest umiejscowiony. Te same zmiany są stosowane do modelu, niezależnie od tego, co spowodowało zmiany.

+1

W MVC Widok zwykle nie jest świadomy kontrolera. Zazwyczaj kontroler byłby świadomy Modelu i Widoku i dostarczał Widokowi odpowiednią instancję Modelu. Model, o którym wspomniałeś, byłby nieświadomy widoku. –

+0

@ Matt, robdev: Model nie jest świadomy widoku, ale Model może intymować widok aktualizacji w swoich danych .. (typowe użycie wzorca obserwatora) –

+0

@Matt, cóż, widzę twój punkt, ale w tym przykładzie widok nie robi ' t jawnie wiedzieć o kontrolerze. Podaje on po prostu wskaźnik obiektu i funkcji i mówi "kimkolwiek jesteś, zostałem po prostu kliknięty! Zadzwoń do swojej funkcji", a następnieButtonClicked() jest wywoływana. – robev

2

Prosty edytor tekstu można zaprojektować na podstawie MVC. Pomyśl o klasie string jako modelu, w którym przechowywane są dane. Możemy mieć klasę o nazwie SimpleTextView, która wyświetla tekst w dołączonej do niej string takiej, jaka jest. Klasa o nazwie KeyboardEventHandler może działać jako kontroler. Kontroler powiadomi widok o nowych zdarzeniach klawiatury. Widok z kolei modyfikuje model (jak dołączanie lub usuwanie tekstu). Zmiany w modelu są odzwierciedlane we wszystkich widokach z nim związanych. Na przykład może istnieć inny widok o nazwie HtmlView dołączony do obiektu string zmanipulowany z poziomu SimpleTextView. Jeśli użytkownik wprowadzi poprawne znaczniki HTML w kodzie SimpleTextView, wyświetli sformatowane wyjście - w czasie rzeczywistym.

1

Istnieje kilka pełnych przykładów MVC plus dyskusja, w rozdziale 2 wstępu do programowania w Pythonie 3.x, który napisałem (nie ukończyłem jeszcze 3 itd., Że projekt był na lodzie od jakiegoś czasu - Społeczność Pythona naprawdę lubi gniewną chmarę pszczół, gdy odkryłem, że napisałem, że Python prawdopodobnie nie nadawał się do rozwoju na dużą skalę, więc trudno było uzyskać sensowną informację zwrotną). Jest dostępny w formacie PDF od Google Docs. Nie wiem, jak dobrze jest on mapowany do typowych implementacji MVC, głównie chodziło mi o ogólną koncepcję. . :-)

Cheers & HTH,

PS: Jest ładny spis treści w pliku PDF, ale Google Docs nie pokazać. Musisz użyć dl i użyć Foxit lub Acrobata lub innej przeglądarki PDF. Wydaje mi się, że w Dokumentach Google istnieje osobna widoczna wartość TOC, ale nie sprawdzono i nie pamiętam, czy zaktualizowano.

PPS: Zapomniałem wspomnieć, że przykład przetwarzania obrazu MVC pod koniec ma ładne zdjęcie Leny Söderberg! :)

1

Code jest najlepszym sposobem, aby zrozumieć i nauczyć Model-View-Controller:

Oto prosty przykład JS (od Wiki)

/** Model, View, Controller */ 
var M = {}, V = {}, C = {}; 

/** Model stores data */ 
M.data = "hello world"; 

/** View controls what to present */ 
V.render = (M) => { alert(M.data); } 

/** Controller bridges View and Model */ 
C.handleOnload =() => { V.render(M); } 

/** Controller on Windows OnLoad event */ 
window.onload = C.handleOnload; 

Oto szczegółowy słup w C/C++ Model-View-Controller Explained in C++

MVC

Powiązane problemy