marcojakob/app.css

## app.css
body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

#view-container {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#click_counter {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

button {
  font-size: 16pt;
  margin-bottom: 20px;
}

## app.dart
import 'dart:html';
import 'package:web_ui/web_ui.dart';

import 'contact.dart';
import 'products.dart';

void main() {
  // Add view navigation event handlers
  query('#show-contact-button').onClick.listen(showContactView);
  query('#show-products-button').onClick.listen(showProductView);
}

// Used to call lifecycle events on the current view
ComponentItem lifecycleCaller;

void showContactView(Event e) {
  removeCurrentView();

  ContactView contactView = new ContactView()
      ..host = new Element.html('<contact-view></contact-view>');

  lifecycleCaller = new ComponentItem(contactView)..create();
  query('#view-container').children.add(contactView.host);
  lifecycleCaller.insert();
}

void showProductView(Event e) {
  removeCurrentView();

  ProductsView productsView = new ProductsView()
      ..host = new Element.html('<products-view></products-view>');

  lifecycleCaller = new ComponentItem(productsView)..create();
  query('#view-container').children.add(productsView.host);
  lifecycleCaller.insert();
}

void removeCurrentView() {
  query('#view-container').children.clear();
  if (lifecycleCaller != null) {
    lifecycleCaller.remove();
  }
}

## app.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>A Complex Web UI Application</title>
    <link rel="stylesheet" href="app.css">

    <!-- import the header and footer components -->
    <link rel="components" href="header.html">
    <link rel="components" href="footer.html">

    <!-- import the view components -->
    <link rel="components" href="contact.html">
    <link rel="components" href="products.html">
  </head>
  <body>
    <header-component></header-component>

    <div id="view-container"></div>

    <button id="show-contact-button">show contact view</button>
    <button id="show-products-button">show products view</button>

    <footer-component></footer-component>

    <script type="application/dart" src="app.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

## contact.dart
library contact;

import 'package:web_ui/web_ui.dart';

class ContactView extends WebComponent {
}

## contact.html
<!DOCTYPE html>

<html>
  <body>
    <element name="contact-view" extends="div">
      <template>
        <h3>
          contact view
        </h3>
      </template>
      <script type="application/dart" src="contact.dart"></script>
    </element>
  </body>
</html>

## footer.html
<!DOCTYPE html>

<html>
  <body>
    <element name="footer-component" extends="div">
      <template>
        <div>
          my footer content
        </div>
      </template>
      <script type="application/dart">
        // Usually put in a seperate file footer.dart
        import 'package:web_ui/web_ui.dart';

        class FooterComponent extends WebComponent {
        }
      </script>
    </element>
  </body>
</html>

## header.html
<!DOCTYPE html>

<html>
  <body>
    <element name="header-component" extends="div">
      <template>
        <div>
          my header content
        </div>
      </template>
      <script type="application/dart">
        // Usually put in a seperate file header.dart
        import 'package:web_ui/web_ui.dart';

        class HeaderComponent extends WebComponent {
        }
      </script>
    </element>
  </body>
</html>

## products.dart
library contact;

import 'package:web_ui/web_ui.dart';

class ProductsView extends WebComponent {
}

## products.html
<!DOCTYPE html>

<html>
  <body>
    <element name="products-view" extends="div">
      <template>
        <h3>
          product view
        </h3>
      </template>
      <script type="application/dart" src="products.dart"></script>
    </element>
  </body>
</html>
	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	#view-container {
	width: 100%;
	height: 400px;
	position: relative;
	border: 1px solid #ccc;
	background-color: #fff;
	}

	#click_counter {
	font-size: 24pt;
	text-align: center;
	margin-top: 140px;
	}

	button {
	font-size: 16pt;
	margin-bottom: 20px;
	}
	import 'dart:html';
	import 'package:web_ui/web_ui.dart';

	import 'contact.dart';
	import 'products.dart';

	void main() {
	// Add view navigation event handlers
	query('#show-contact-button').onClick.listen(showContactView);
	query('#show-products-button').onClick.listen(showProductView);
	}

	// Used to call lifecycle events on the current view
	ComponentItem lifecycleCaller;

	void showContactView(Event e) {
	removeCurrentView();

	ContactView contactView = new ContactView()
	..host = new Element.html('<contact-view></contact-view>');

	lifecycleCaller = new ComponentItem(contactView)..create();
	query('#view-container').children.add(contactView.host);
	lifecycleCaller.insert();
	}

	void showProductView(Event e) {
	removeCurrentView();

	ProductsView productsView = new ProductsView()
	..host = new Element.html('<products-view></products-view>');

	lifecycleCaller = new ComponentItem(productsView)..create();
	query('#view-container').children.add(productsView.host);
	lifecycleCaller.insert();
	}

	void removeCurrentView() {
	query('#view-container').children.clear();
	if (lifecycleCaller != null) {
	lifecycleCaller.remove();
	}
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>A Complex Web UI Application</title>
	<link rel="stylesheet" href="app.css">

	<!-- import the header and footer components -->
	<link rel="components" href="header.html">
	<link rel="components" href="footer.html">

	<!-- import the view components -->
	<link rel="components" href="contact.html">
	<link rel="components" href="products.html">
	</head>
	<body>
	<header-component></header-component>

	<div id="view-container"></div>

	<button id="show-contact-button">show contact view</button>
	<button id="show-products-button">show products view</button>

	<footer-component></footer-component>

	<script type="application/dart" src="app.dart"></script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>
	library contact;

	import 'package:web_ui/web_ui.dart';

	class ContactView extends WebComponent {
	}
	library contact;

	import 'package:web_ui/web_ui.dart';

	class ProductsView extends WebComponent {
	}