CODEWITHSUNDEEP
htmlbrowserbrowser-historydart
Rui Vieira
Rui Vieira

Reputation: 5328

How to effectively handle browser history (namely the back button) in Dart?

Is there any facility to help dealing with state and the back button in Dart's standard library? Or would I need to emulate a Javascript solution to implement navigation through a web application's state?

I intend to apply this to a personal project so browser compatibility is not an issue (ie an HTML5-only solution would be fine).

Many thanks.

Upvotes: 6

Views: 2454

Answers (2)

Justin Fagnani
Justin Fagnani

Reputation: 11171

HTML5 defines new APIs for manipulating history, letting you change the location without reloading the window. There's a great article on Dive Into HTML5 that shows how to emulate multi-page navigation in a single-page app using the history API. It's easily translatable to Dart.

Here's the article: http://diveintohtml5.info/history.html

And here's the Dart docs for History: http://api.dartlang.org/docs/continuous/dart_html/History.html

In a single-page app with navigation, the way I generally set up my client-side code is similar to how a RoR or Django app, or Dart http server for that matter, is setup on the server:

  1. Define a set of matchers that work against the window location
  2. Map the matchers to functions that show a virtual page or some other location

Then to make it a seamless experience:

  1. Give all anchors an href for bookmarking, but add an onclick handler to invoke a function that pushes history state, and preventDefault to prevent a reload.
  2. On initial page load, read the URL and send it to the map in (2)

Sample:

main() {
  // handle the back button
  window.on.popState.add((_) => showPage());
}

showPage() {
  String path = window.location.pathname;
  if (path == '/') {
    showFrontPage();
  } else if (DETAIL_PAGE_URL.hasMatch(path)) {
    String id = DETAIL_PAGE_URL.firstMatch(path).group(1);
    showDetailPage(i);
  }
}

showFrontPage() {
  //... code to build a link to a detail page
  detailAnchor.on.click.add((MouseEvent e) {
    window.history.pushState(null, detail.title, detail.url);
    e.preventDefault();
    showDetailPage(detail);
  }, false);
}

Upvotes: 5

Nicolas François
Nicolas François

Reputation: 777

Like as javascript,you can easily get the hash anchor in url with

var hash = window.location.hash;

The association between the hash and the action up to you.

Upvotes: 1

Related Questions