2010-10-21 9 views
10

Estaba estudiando el patrón de diseño Modelo-Vista-Controlador y entiendo el concepto detrás del patrón teóricamente, pero quería echar un vistazo a cómo uno realmente lo pondría en práctica.
Wikipedia menciona Wt - Web toolkit, CppCMS y algunas otras implementaciones estándar que usan el patrón sin embargo no he estado familiarizado con estos, y solo esperaba y estarán realmente agradecidos si alguien puede proporcionar algún código de muestra (con suerte C++) que implementa el patrón y explica la teoría del patrón que se pone en práctica.Model View Controller Patrón de diseño Código Ejemplo

Respuesta

21

Aquí está un ejemplo rápido que hice (no probé la compilación, que me haga saber si hay errores):

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; 
}; 

Haciendo caso omiso de la aplicación del botón, básicamente, este programa va a utilizar GraphGUI para mostrar una gráfico que cambiará cuando se presione un botón. Digamos que es un gráfico de barras y se hará más alto.

Dado que el modelo es independiente de la vista (el botón), y el controlador maneja la comunicación entre los dos, esto sigue el patrón MVC.

Cuando se hace clic en el botón, el controlador modifica el modelo a través de la función onButtonClicked, que la clase Button sabe que debe llamar cuando se hace clic.

La belleza de esto es que el modelo y la vista son completamente independientes, la implementación de cada uno puede cambiar drásticamente y no afectará al otro, el controlador podría simplemente tener que hacer algunos cambios. Si el modelo en este caso calculó algún resultado basado en algunos datos de la base de datos, al hacer clic en el botón podría ocurrir, pero la implementación del botón no tendría que cambiar.O bien, en lugar de decirle al controlador cuándo se produce un clic, tal vez le pueda decir al controlador cuando el botón está desactivado. Los mismos cambios se aplican al modelo, independientemente de lo que haya desencadenado los cambios.

+1

En MVC, la vista generalmente no tiene conocimiento del controlador. Típicamente, el Controlador debería conocer el Modelo y la Vista, y debería proporcionar a la Vista la instancia apropiada del Modelo. El Modelo, como usted mencionó, no sería consciente de la Vista. –

+0

@ Matt, robdev: El modelo no tiene conocimiento de la vista, pero el Modelo puede intimidar la Vista de actualización en sus datos ... (uso típico del patrón Observor) –

+0

@Matt, bueno, veo su punto, pero en este ejemplo la vista no t explícitamente saber sobre el controlador. Se le acaba de dar un puntero a objeto y función y dice "quienquiera que sea, me acaban de hacer clic! Llame a su función", y entonces se llama a OnButtonClicked(). – robev

2

Se puede diseñar un editor de texto simple basado en MVC. Piense en la clase string como modelo, donde se almacenan los datos. Podríamos tener una clase llamada SimpleTextView que muestra el texto en el string adjunto, tal como está. Una clase llamada KeyboardEventHandler puede actuar como el controlador. El controlador notificará a la vista sobre nuevos eventos de teclado. La vista a su vez modifica el modelo (como agregar o eliminar texto). Los cambios en el modelo se reflejan en todas las vistas adjuntas. Por ejemplo, podría haber otra vista llamada HtmlView adjunta al objeto string manipulado desde SimpleTextView. Si el usuario ingresa etiquetas HTML válidas en el SimpleTextView, el HtmlView mostrará la salida formateada - en tiempo real.

1

Hay un par de ejemplos completos de MVC, más discusión, en el capítulo 2 de una introducción a la programación en Python 3.x que escribí (no he completado el capítulo 3, etc.), que el proyecto ha estado en hielo por algún tiempo - La comunidad de Python realmente me gusta el enjambre enojado de las abejas cuando descubrí que Python quizás no era adecuado para el desarrollo a gran escala, por lo que se hizo difícil obtener comentarios sensibles). Está disponible en formato PDF desde Google Docs. No sé qué tan bien se correlaciona con las implementaciones de MVC comunes. Me preocupaba sobre todo transmitir la idea general. . :-)

Saludos & HTH,

PS: Hay un buen índice de contenidos en el archivo PDF, pero Google Docs no lo demuestra. Debería usar dl y usar Foxit o Acrobat u otro visor de PDF. Creo que hay un TOC visualizable por separado en Google Docs, sin embargo, no se han verificado y no recuerdo si se actualizó.

PPS: ¡He olvidado mencionar que el ejemplo de procesamiento de imágenes MVC cerca del final tiene una bonita foto de Lena Söderberg! :)

1

Código es el mejor enfoque para comprender y aprender Modelo Vista Controlador:

Aquí está un ejemplo sencillo JS (de 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; 

Aquí es una entrada detallada en C/C++ Model-View-Controller Explained in C++

MVC

Cuestiones relacionadas