Seth Ladd: tutorial su Form, Web Components e interazione client-server

Di - 7 June 2013 - in
Post image for Seth Ladd: tutorial su Form, Web Components e interazione client-server

Dal blog di +Seth Ladd, Dart Dev Rel presso Google, arriva un tutorial su Dart nel quale viene presentato uno scenario molto comune per gli sviluppatori web: la gestione dei valori ricevuti in input da una form. Il tutorial, di cui riportiamo la traduzione integrale, copre diversi ambiti di Dart: l’interazione client-server, l’allestimento di un server HTTP, i Web Components — elementi HTML personalizzabili che agevolano lo sviluppo dell’interfaccia grafica — e la gestione delle richieste da una form.

L’articolo originale è disponibile sul blog di Seth Ladd.


Dart può essere utilizzato sia lato client che lato server. Questo articolo mostra come:

  • sviluppare una form come elemento personalizzato
  • abbinare i campi di input ad un oggetto Dart
  • sviluppare un server HTTP in Dart
  • gestire ed analizzare i dati ricevuti dalla form

Per ulteriori esempi, in altri contesti e con maggiori dettagli, si può consultare la serie di video clip Dart Tutorials. Il codice utilizzato in questo articolo è disponibile sull’account GitHub di Seth Ladd.

Step 1: Installare la libreria Web UI

Modificare il file puybspec.yaml (utilizzato da pub, il gestore di pacchetti).

dependencies:
    browser: any
    web_ui: any

Step 2: Creare la classe per il modello

Questa classe serve per il nostro business object. Essendo abbinata alla form, dobbiamo renderla observable.

library person;

import 'package:web_ui/web_ui.dart';

@observable
class Person {
  String firstName;
  String lastName;
  double age = 0.0;  // not an int because web ui loves doubles
}

Step 3: Creare l’elemento HTML personalizzato

Questo elemento personalizzato, reso utilizzabile nel browser grazie a Web UI, è una sovrastruttura di una form che ne semplifica la riusabilità. L’elemento è abbinato ad una istanza di Person, la nostra classe per il modello. La struttura di questo elemento è contenuta nel tag <template>.

<element name="person-form" constructor="PersonForm" extends="div">
  <template>
    <div id="message"></div>
    <form method="post">
      <input type="text" bind-value="person.firstName" name="firstName">
      <input type="text" bind-value="person.lastName" name="lastName">
      <input type="number" bind-value-as-number="person.age" name="age">
      <input type="submit">
    </form>
  </template>
  <script type="application/dart" src="personform.dart"></script>
</element>

Step 4: Codice Dart per l’elemento personalizzato

Se un elemento personalizzato necessita di un comportamento personalizzato, lo si può implementare in Dart. Ogni tag degli elementi personalizzati che vengono usati in una pagina sono istanze della classe corrispondente. Nel ciclo di vita di un elmento, inserted() è il metodo chiamato quando l’elemento viene aggiunto al DOM. I campi person e action vengono rispettivamente inizializzati dall’attributo specificato e dai dati generati dall’utilizzo del tag.

In questo caso, disabilitiamo il comportamento di default dell’azione submit così da non causare il caricamento della pagina. Per inviare i dati immessi nella form utilizziamo una HttpRequest, e aggiorniamo il <div> contenuto nel nostro elemento personalizzato con il testo del responso.

import 'package:web_ui/web_ui.dart';
import 'person.dart';
import 'dart:html';

class PersonForm extends WebComponent {
  Person person;
  String action;

  inserted() {
    FormElement form = host.query('form');
    form.action = action;

    form.onSubmit.listen((Event e) {
      e.preventDefault();

      HttpRequest.request(form.action,
            method:form.method,
            sendData:new FormData(form))
          .then((HttpRequest req) {
            host.query('#message').text = req.responseText;
          })
          .catchError((e) => print(e));
    });
  }
}

Step 5: Importare ed utilizzare l’elemento personalizzato

Per importare il nostro elemento personalizzato utilizziamo il tag <link>. Per utilizzarlo, aggiungiamo l’attributo is="person-form" ad un <div>. Una istanza di person (creata nello step successivo) viene abbinata al nostro elemento, l’attributo action è utilizzato per impostare il tipo di azione.

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="parse_form_submit.css">
    <link rel="import" href="personform.html">
  </head>
  <body>
    <h1>Forms</h1>

    <div action="http://localhost:8888/submit" is="person-form" person="{{person}}"></div>

    <script type="application/dart" src="parse_form_submit.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Step 6: Il codice principale dell’app

L’unica cosa di cui ha bisogno quest’app è una istanza di Person. L’istanza qui definita è visibile sulla paigna, ed è la stessa utilizzata nell’elemento personalizzato visto nello Step 5 (person="{{person}}"). Il metodo main() è vuoto poiché tutte le funzioni sono gestite da Web UI.

import 'person.dart';

Person person = new Person();

main() { }

Step 7: Il server

La libreria dart:io ci aiuta a scrivere applicazioni lato server da riga di comando. Utilizziamo le funzioni built-in per un server HTTP per ricevere le richeiste di tipo POST, convertire i dati ricevuti in oggetti di tipo Map, abilitare gli headers CORS (così da permettere al server di accettare richieste provenienti da origini diverse), e restituire i dati originali in forma String.

import 'dart:io';

main() {
  HttpServer.bind('0.0.0.0', 8888).then((HttpServer server) {
    server.listen((HttpRequest req) {
      if (req.uri.path == '/submit' && req.method == 'POST') {
        print('received submit');
        HttpBodyHandler.processRequest(req).then((HttpBody body) {
          print(body.body.runtimeType); // Map
          req.response.headers.add('Access-Control-Allow-Origin', '*');
          req.response.headers.add('Content-Type', 'text/plain');
          req.response.statusCode = 201;
          req.response.write(body.body.toString());
          req.response.close();
        });
      }
    });
  });
}

Sommario

Ta da! Abbiamo appena utilizzato Dart per creare una form ed incapsularla in un web component. Dopodiché abbiamo scritto un server in Dart per analizzare i dati ricevuti e restituire un semplice responso. Assicuratevi di dare uno sguardo al codice completo (alcune parti sono state escluse qui) utilizzato per questo post. È questo il massimo che possiamo fare? Probabilmente no, probabilmente vogliamo sviluppare un vero e proprio framework lato server, su pub.dartlang.org ce ne sono alcuni pronti ad essere consultati.


Fonte | Seth Ladd’s Blog: Forms, HTTP servers, and Web Components with Dart

Leave a Reply

Claudio d'Angelis Articolo scritto da

Programmatore e studente di Informatica, appassionato di musica, web e sistemi UNIX. Collabora con Googlab dall'Ottobre 2012.

Contatta l'autore

Previous post:

Next post: