Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
How to build a Web UI application with multiple views in Dart
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 {
}
<!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>
<!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>
library contact;
import 'package:web_ui/web_ui.dart';
class ProductsView extends WebComponent {
}
<!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>
@evanbleiweiss

It seems like products.dart line 1 should read library products and not library contact

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.