Metro Style Apps – Data Binding – Prima Parte

Da diverso tempo ormai Microsoft fornisce ai programmatori .net potenti meccanismi per la gestione del Data Binding e con l’introduzione delle tecnologie WPF e Silverlight tale feature è stata ulteriormente potenziata con la possibilità ad oggi di gestire il Data Binding in modo dichiarativo. Ciò porta un enorme vantaggio nella progettazione di interfacce grafiche passive basate sul concetto di netta separazione della UI dalle regole di business.

Le Metro Style Apps sviluppate con Javascript ed HTML5 sono perfettamente in linea con questo meccanismo, vediamo come ipotizzando di voler sviluppare un’applicazione che visualizzi i dati relativi ad una lista di contatti.

Tra un attimo vedremo due esempi di codice in modo da comprendere le differenze tra una UI che non utilizza il meccanismo di Data Binding dichiarativo ed una che invece ne fa comodo uso.

Innanzitutto creaimo una nuova Metro Style App selezionando come template di progetto Windows Metro Style > Navigation Application (che nel mio caso ho chiamato: Sample.MetroStyle.JavaScript.DataBind).

Creiamo poi nella directory “js”, del progetto, un’ulteriore directory di nome “data” in essa un file “.js” di nome “dataSourceContacts.js”. (all’interno del quale a breve definiremo le strutture che conterranno i dati del nostro modello).

Il nome utilizzato per i file e per le directory non ha nessun influenza sul databinding e sul suo funzionamento.

Per il nostro primo esempio il file “dataSourceContacts.js” sarà così definito

(function () {
    "use strict";

    var contacts = [
        {
            name: "Marco Siniscalco",
            country: "Italy",
            phone: "Phone 1",
            msn: "msn.account@hotmail.com",
            skype: "skype.name"
        },
        {
            name: "Mario Rossi",
            country: "Italy",
            phone: "Phone 2",
            msn: "msn2.account@hotmail.com",
            skype: "skype.name"
        },
        {
            name: "Jane Smit",
            country: "California",
            phone: "Phone 3",
            msn: "msn3.account@hotmail.com",
            skype: "skype.name"
        }
    ];

    WinJS.Namespace.define("Contacts", contacts);

})();

In questo modo abbiamo definito un oggetto JSON, come insieme di contatti, e lo abbiamo registrato con la funzione WinJS.Namespace.define con il nome Contacts.

Ora immaginiamo di voler creare una pagina html che visualizzi le informazioni di un determinato contatto. Innanzitutto aggiungiamo una nuova pagina html di nome “contact.html” (creeremo ovviamente anche i relativi file .css e .js o in alternativa creeremo un item di tipo Page Control che si occuperà di creare tutte le risorse a noi necessarie) alla quale ci ricordiamo di aggiungere un riferiemento al file “dataSourceContacts.js”.
Nel corpo del file “contact.html” aggiungeremo poi il seguente codice HTML contenente una serie di input testuali.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contact</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    <link href="/css/contact.css" rel="stylesheet">
    <script src="/js/views/contact.js"></script>
    <script src="/js/data/dataSourceContacts.js"></script>
</head>
<body>
    <div class="contact fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to contact</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            
            <div>
                <h2>Contact info</h2>
                <input id="contactName" type="text" />
                <input id="country" type="text" />
                <input id="phone" type="text" />
                <input id="msn" type="text" />
                <input id="skype" type="text" />
            </div>

        </section>
    </div>
</body>
</html>

Ora per questo primo esempio, nell’ottica di non far uso del Data Binding dichiarativo, avremo nel file “contact.js” il seguente listato di codice dove grazie alla funzione “viewContact” viene recuperato il contatto presente in testa alla lista Contacts per compilare programmaticamente la form con le sue informazioni

(function () {
    "use strict";

   function viewContact(index) {

        var contact = Contacts[index];
        contactName.value = contact.name;
        country.value = contact.country;
        phone.value = contact.phone;
        msn.value = contact.msn;
        skype.value = contact.skype;
    };

    function ready(element, options) {

       viewContact(0);
    }

    WinJS.UI.Pages.define("/html/contact.html", {
        ready: ready,
        updateLayout: updateLayout
    });

})();

eseguendo l’applicazione e navigando alla pagina contact.html avremo a video il seguente risultato

Metro Style Apps - Data Binding - Esempio 1

Ora per ottenere lo stesso risultato senza dover valorizzare a mano il contenuto di ogni singolo campo di testo possiamo aggiungere su ognuno di questi l’attributo data-win-bind in modo da specificare che quel determinato capo è legato ad una determinata property relativa al nostro modello di dati che dovrà essere opportunamente bindato alla UI.

Vediamo le modifiche da apportare ai nostri file per ottenere l’effetto desiderato. Innanzitutto marchiamo i nostri campi con l’attributo data-win-bind in questo modo

<h2>Informazioni Contatto</h2>
<div id="divContact">
 <input id="contactName" type="text" data-win-bind="value: name" />
 <input id="country" type="text" data-win-bind="value: country" />
 <input id="phone" type="text" data-win-bind="value: phone" />
 <input id="msn" type="text" data-win-bind="value: msn" />
 <input id="skype" type="text" data-win-bind="value: skype" />
</div>

in pratica tramite l’attributo data-win-bind stiamo specificando a quale property del modello dati è legato il campo di testo e non solo ma anche quale attributo del campo dovrà essere valorizzato con tale informazione.

Per quanto riguarda il nostro file “/js/views/contact.js” dovremo modificare solo il corpo della funzione “viewContact” come mostrato di seguito

   function viewContact(index) {
        var contact = Contacts[index];
        WinJS.Binding.processAll(divContact, contact);
    };

In pratica la funzione WinJS.Binding.processAll si preoccupa di effettuare l’associazione di tutti i controlli presenti all’interno del div “divContact” (che funge da root) che utilizzano l’attributo data-win-bind con i relativi valori del modello dati.

Conclusioni

Abbiamo visto come agganciare i dati del nostro modello alla UI dell’applicazione in un caso estremamente semplice… nel prossi post analizzeremo come aggiornare l’interfaccia grafica dell’applicazione nel caso in cui lo stato del nostro modello dovesse cambiare poi successivamente analizzeremo un esempio di Data Binding più complesso 🙂

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...