StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've put together a little example of how I currently do it (hope we will soon see a larger <em>best practice</em> example application for this):</p> <p><strong>For the complete source code of this example see <a href="https://gist.github.com/marcojakob/5451636">gist: How to build a Web UI application with multiple views in Dart</a></strong></p> <h2>Main Application</h2> <ul> <li><em>app.html</em> - Contains the main application layout, instantiates the <em>header</em> and <em>footer</em> component and creates a container for the views. </li> <li><em>app.dart</em> - Handles navigation events and replaces the view inside the view container (see below)</li> <li><em>app.css</em></li> </ul> <h2>Web Components</h2> <h3>Header and Footer</h3> <ul> <li><em>header.html</em> - Web Component for header</li> <li><em>footer.html</em> - Web Component for footer</li> </ul> <h3>Views</h3> <ul> <li><em>contact.html</em> - Web Component for the Contacts View</li> <li><em>contact.dart</em> - Dart file containing ContactsView class</li> <li><em>products.html</em> - Web Component for the Products View</li> <li><em>products.dart</em> - Dart file containing ProductsView class </li> </ul> <h2>Switching Between Views</h2> <p>The standard way to <a href="http://www.dartlang.org/articles/web-ui/spec.html#instantiation">instantiate Web Components</a> is by using <code><x-foo></x-foo></code> in <strong>HTML</strong>. As we have different views, we will have to instantiate the Web Components inside our <strong>Dart</strong> code. Doing this we have to manually call the Web Components lifecycle methods. This is not straight forward and might be improved in the future (see <a href="https://github.com/dart-lang/web-ui/issues/93">Issue 93</a> which also contains some exmples).</p> <p>Here is how you can switch views (source of <code>app.dart</code>):</p> <pre class="lang-dart prettyprint-override"><code>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 methods on the current view ComponentItem lifecycleCaller; /// Switches to contacts view 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(); } /// Switches to products view void showProductView(Event e) { removeCurrentView(); ProductsView productsView = new ProductsView() ..host = new Element.html('<products-view></products-view>'); lifecycleCaller = new ComponentItem(productsView); lifecycleCaller.create(); query('#view-container').children.add(productsView.host); lifecycleCaller.insert(); } void removeCurrentView() { query('#view-container').children.clear(); if (lifecycleCaller != null) { // Call the lifecycle method in case the component needs to do some clean up lifecycleCaller.remove(); } } </code></pre> <p>And here is the source for <code>app.html</code>:</p> <pre class="lang-dart prettyprint-override"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Complex Web UI Application</title> <link rel="stylesheet" href="app.css">  <link rel="components" href="header.html"> <link rel="components" href="footer.html">  <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> </code></pre> <p><strong>Note</strong>: I had to import the view components via <code><link rel="components" href="contact.html"></code> even though I do not directly reference it in the HTML file.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload