public
Created

How to build a Web UI application with multiple views in Dart

  • Download Gist
app.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
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
Dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
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
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<!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
Dart
1 2 3 4 5 6
library contact;
 
import 'package:web_ui/web_ui.dart';
 
class ContactView extends WebComponent {
}
contact.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!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>
header.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<!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
Dart
1 2 3 4 5 6
library contact;
 
import 'package:web_ui/web_ui.dart';
 
class ProductsView extends WebComponent {
}
products.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.