How to build a complex Web UI application with multiple views?

Question

I am going to build complex application having many different views. Imagine for example eshop solution. There can be a lot of different views:

• Contact page wi

Answer 1

You can use the route library combined with templates to greatly automate the process.

In urls.dart you will define the routes that the app will handle. app.dart will setup the route listener. Lastly, app.html will hold a page container that will automatically switch the page component (through the use of template instantiation).

With this structure set up, page navigation can be handled through regular anchor tags instead of calling custom functions to change the page.

In order to add a new page you will have to do the following:

1. Add a new route in urls.dart
2. Create a new WebComponent in the pages/ folder
3. Add a new conditional template for the page in app.html

Below you can see an example of an app that handles a home page and a contact page:

urls.dart:

library urls;

import 'package:route/url_pattern.dart';

final homeUrl = new UrlPattern(r'/');
final contactUrl = new UrlPattern(r'/contact');

app.dart:

import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'package:route/client.dart';
import 'urls.dart' as urls;
import 'package:web_ui/watcher.dart' as watchers;  

// Setup the routes to listen to    
void main() {
  var router = new Router()
  ..addHandler(urls.homeUrl, showPage)
  ..addHandler(urls.contactUrl, showPage)  
  ..listen();
}

// Change the page that we are on
void showPage(String path) {
  watchers.dispatch();
}

app.html

Edit: I've removed the step where app.dart has to define its own pages. Instead, templates check to see if the URL path matches the UrlPattern defined in urls.dart. This should simplify things a bit more.