Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View app.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;
}
View app.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 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();
}
}
View app.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 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>
View app.css
1 2 3 4 5 6
library contact;
 
import 'package:web_ui/web_ui.dart';
 
class ContactView extends WebComponent {
}
View app.css
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>
View app.css
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>
View app.css
1 2 3 4 5 6
library contact;
 
import 'package:web_ui/web_ui.dart';
 
class ProductsView extends WebComponent {
}
View app.css
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>

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.