StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use the <a href="http://pub.dartlang.org/packages/route" rel="noreferrer">route</a> library combined with templates to greatly automate the process.</p> <p>In <code>urls.dart</code> you will define the routes that the app will handle. <code>app.dart</code> will setup the route listener. Lastly, <code>app.html</code> will hold a page container that will automatically switch the page component (through the use of template instantiation).</p> <p>With this structure set up, page navigation can be handled through regular anchor tags instead of calling custom functions to change the page.</p> <p>In order to add a new page you will have to do the following:</p> <ol> <li>Add a new route in <code>urls.dart</code></li> <li>Create a new WebComponent in the <code>pages/</code> folder</li> <li>Add a new conditional template for the page in <code>app.html</code></li> </ol> <p>Below you can see an example of an app that handles a home page and a contact page:</p> <p><strong>urls.dart:</strong> </p> <pre class="lang-dart prettyprint-override"><code>library urls; import 'package:route/url_pattern.dart'; final homeUrl = new UrlPattern(r'/'); final contactUrl = new UrlPattern(r'/contact'); </code></pre> <p><strong>app.dart:</strong> </p> <pre class="lang-dart prettyprint-override"><code>import 'dart:html'; import 'package:web_ui/web_ui.dart'; import 'package:route/client.dart'; import 'urls.dart' as urls; import 'package:web_ui/watcher.dart' as watchers; // Setup the routes to listen to void main() { var router = new Router() ..addHandler(urls.homeUrl, showPage) ..addHandler(urls.contactUrl, showPage) ..listen(); } // Change the page that we are on void showPage(String path) { watchers.dispatch(); } </code></pre> <p><strong>app.html</strong> </p> <pre class="lang-html prettyprint-override"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample app</title> <link rel="stylesheet" href="app.css">  <link rel="components" href="pages/xhomepage.html"> <link rel="components" href="pages/xcontactpage.html"> </head> <body>   <div class="pages"> <template instantiate="if urls.homeUrl.matches(window.location.pathname)"> <x-home-page></x-home-page> </template> <template instantiate="if urls.contactUrl.matches(window.location.pathname)"> <x-contact-page></x-contact-page> </template> </div>  <script type="application/dart" src="app.dart"></script> <script src="packages/browser/dart.js"></script> </body> </html> </code></pre> <p><strong>Edit:</strong> I've removed the step where app.dart has to define its own pages. Instead, templates check to see if the URL path matches the UrlPattern defined in urls.dart. This should simplify things a bit more.</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