Rendering pages using Dart

Question

I'm learning Dart, and I'm trying to display a form that sends the user data to another page. I'm using the "route" package. Here is my code in "bin":

import 'urls.dart';
import 'package:route/server.dart';
import 'package:route/pattern.dart';
import 'dart:io';

main() {
  HttpServer.bind('127.0.0.1', 8000).then((server) {
    var router = new Router(server)
      ..serve(homeUrl).listen(serverHome)
      ..serve(validateUrl, method: 'POST').listen(serverValidate)
      ..defaultStream.listen(serverNotFound);
  });
}

serverHome(req) {
  print("Server side");
}

serverValidate(req) {

}

serverNotFound(req) {

}

And here is what I have in "web":

library client;
import 'dart:html';
import 'package:route/client.dart';
import 'urls.dart';
void main() {
  /*
  querySelector("#sample_text_id")
      ..text = "Click me!"
      ..onClick.listen(reverseText);
      */ 
/*  var router = new Router()
    ..addHandler(homeUrl, showForm)
    ..addHandler(validateUrl, validateForm)
    ..listen();
    */ 
}

void showForm(String path) {
  print("Showing form");
  querySelector("#sample_text_id")
        ..text = "Click me!"
        ..onClick.listen(reverseText);
}

void validateForm(String path) {
  print("Validate");
}
void reverseText(MouseEvent event) {
  var text = querySelector("#sample_text_id").text;
  var buffer = new StringBuffer();
  for (int i = text.length - 1; i >= 0; i--) {
    buffer.write(text[i]);
  }
  querySelector("#sample_text_id").text = buffer.toString();
}

How do I display my form (experiment3.html) and the validation page (validate.html), as well as access the form input in the validation page?

Answer 1

You can add HTML to your page like

String myForm = new DocumentFragment.html('''
  <form id='myForm'>
    <input type='text' ....
    ....
    <input type='submit'>
  <form/>''')

querySelector('#form_parent')
    ..children.clear()
    ..add(myForm);

querySelector('#myForm').onSubmit.listen((e) {
  // handle form input (validation)
  // send data
});

I haven't used the router yet and can't help you there. You can later just add another view the same way because children.clear() removes all children before new HTML is added.