Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Hello MVC

This sample demonstrates how to apply the MVC design pattern in your web application.

It is demonstrated by displaying the content of a directory.

It is for demonstration only. It is generally not safe to display the content of the server's file system.


In this application, the model is a list of instances of FileInfo. Each of them provides the information about a file or a directory:

class FileInfo {
  final String name;
  final bool isDirectory;

  FileInfo(, this.isDirectory);


The view is implemented as a RSP page: listView.rsp.html. It will be compiled as a closure called listView, which will be called by the controller, as described below, to display the result. Here is a snippet of it.

<table border="1px" cellspacing="0">
[for info in infos]
    <td><img src="[=info.isDirectory ? 'file.png': 'directory.png']"/></td>


The role of the control, helloMVC, is to prepare the model for rendering. As shown here, the preparation is done asynchronously. It is very important for scalability.

Future helloMVC(HttpConnect connect) {
  //1. prepare the model
  final curdir = Directory.current;
  List<FileInfo> list = [];
  return curdir.list().listen((fse) {
    list.add(new FileInfo(fse.path, fse is Directory));
  }).asFuture().then((_) {
    //2. forward to the view
    return listView(connect, path: curdir.path, infos: list);