Condividi tramite

Guida introduttiva: Aggiunta di controlli HTML e gestione di eventi (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Ogni app necessita di controlli quali pulsanti, caselle di controllo ed elenchi a discesa. Le app di Windows Runtime che utilizzano JavaScript possono impiegare due tipi di controlli: controlli HTML intrinsechi e controlli della Libreria Windows per JavaScript. I controlli HTML intrinsechi sono quei controlli, ad esempio i pulsanti e le caselle di controllo, che fanno parte dello standard HTML.

In questa Guida introduttiva abbiamo focalizzato l'attenzione su come creare e usare i controlli HTML. Nell'argomento successivo, Guida introduttiva: Aggiunta di controlli e stili WinJS, viene descritto come creare e usare i controlli WinJS.

(Solo Windows) Osserva questa funzionalità in azione nella serie sulle funzionalità delle app: Interazione dell'utente: input tocco... e oltre e Interfaccia delle app di Windows Store, dall'inizio alla fine.

Prerequisiti

Che cos'è un controllo?

In molti modelli di programmazione di applicazioni, è necessario un controllo per visualizzare il contenuto o per interagire con esso. Poiché la maggior parte degli elementi HTML è in grado di visualizzare contenuto e di rispondere a svariati eventi, la distinzione tra un controllo e un elemento non è sempre chiara per le app di Windows Runtime scritte in JavaScript. Facciamo riferimento a quegli elementi e oggetti la cui funzione principale è fornire interattività come avviene con i controlli. Per un elenco di elementi e oggetti che rientrano in tale categoria vedere Controlli per funzione.

Aggiunta di un controllo HTML

Nell'app di Windows Runtime scritta in JavaScript è possibile usare qualsiasi controllo HTML.

Hh465402.wedge(it-it,WIN.10).gif Per aggiungere un controllo HTML

  • Per aggiungere un controllo HTML, aggiungi il codice HTML del controllo alla tua pagina, come nel caso di una comune pagina Web. In questo esempio viene creato un oggetto button:

    <button id="button1">An HTML Button</button>

    Ti consigliamo di assegnare un ID o un nome di classe al controllo in modo da poterlo recuperare e modificare in maniera semplice. Successivamente, quando ti mostreremo come collegare eventi, userai l'ID del pulsante per trovare il pulsante.

Il codice HTML di un controllo non è sempre semplice come quello di un pulsante. Per creare, ad esempio, un controllo slider, è possibile usare l'elemento di input input:

<input type="range" />

Per un elenco dei controlli HTML disponibili e del markup che puoi utilizzare per crearli, vedi l'elenco dei controlli.

Gestione di eventi

Ogni controllo fornisce eventi che consentono di rispondere alle azioni degli utenti. Il pulsante fornisce, ad esempio, un evento click che viene attivato quando un utente fa clic sul pulsante. Crea una funzione, chiamata gestore di eventi, per gestire gli eventi e quindi registrare il gestore di eventi con il controllo.

Per registrare un gestore di eventi esistono due modi. Uno di questi consiste nell'aggiunta di un gestore eventi al codice HTML impostando l'attributo dell'evento relativo al controllo sul nome di una funzione del gestore eventi JavaScript oppure su un'istruzione JavaScript. Per istruzioni per questo approccio, vedi Come impostare gestori eventi in modo dichiarativo.

L'altro modo che consente di registrare un gestore di eventi consiste nell'aggiungerlo a livello di codice.

Hh465402.wedge(it-it,WIN.10).gifPer registrare un gestore di eventi a livello di codice

  1. Crea il controllo e assegnagli un ID. In questo esempio viene creato un pulsante e gli viene assegnato un ID "button1".

    <button id="button1">An HTML button</button>

  2. Solo per questo esempio, crea un elemento paragrafo e assegnagli l'ID "button1Output". Lo userai per visualizzare informazioni relative all'evento clic sul pulsante.

    <p id="button1Output"></p>

  3. Nel codice JavaScript definisci un gestore eventi. La maggior parte dei gestori eventi accetta un solo argomento, un oggetto Event che contiene informazioni sull'evento. Altri eventi possono restituire altri tipi di oggetti informativi sugli eventi che forniscono informazioni specifiche in merito a un determinato evento.

    L'evento click fornisce un oggetto MouseEvent che contiene informazioni sull'evento come, ad esempio, quale pulsante del mouse è stato premuto e quale oggetto ha generato l'evento. L'esempio seguente crea un gestore eventi click che usa l'oggetto MouseEvent per ottenere le coordinate x e y del punto su cui l'utente ha fatto clic.

    L'evento click risponde anche all'interazione tramite tocco e tastiera. Gli esempi di questo argomento presuppongono che l'utente adoperi un mouse. Per altre informazioni sull'interazione con il tocco o dispositivi diversi, vedi l'argomento relativo alla risposta all'interazione utente.

    function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

  4. A questo punto è necessario collegare l'evento al controllo recuperandolo e chiamando addEventListener. La domanda è, quando è necessario recuperare il controllo? Potresti aggiungerlo in un punto qualsiasi del codice JavaScript, ma in questo caso potrebbe essere richiamato quando ancora non esiste.

    • Se aggiungi il controllo alla pagina iniziale della tua app, definita da default.html e default.js, usa la funzione WinJS.UI.processAll per registrare i gestori eventi. Tutti i modelli di Microsoft Visual Studio creano un file default.js che chiama WinJS.UI.processAll nel gestore eventi activated. Poiché si tratta di un metodo asincrono, il metodo WinJS.UI.processAll restituisce un oggetto Promise. Per collegare i tuoi gestori eventi, fornisci una funzione then o done per l'oggetto Promise restituito dalla funzione WinJS.UI.processAll e usa tale funzione per collegare i gestori eventi. Per altre informazioni sulle promesse, vedi l'argomento relativo alla programmazione asincrona in JavaScript.

      Questo esempio usa WinJS.UI.processAll per collegare il gestore eventi del pulsante.

      (function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, false);
                })
            );
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    // The click event handler for button1
    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();

      Per altre informazioni sul metodo WinJS.UI.processAll, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

    • Se stai aggiungendo il controllo a un controllo Page usa la funzione ready del controllo Page per collegare i gestori eventi (e usa querySelector invece di document.getElementById, come mostrato di seguito).

      Il controllo WinJS Page rappresenta un metodo per dividere i contenuti in unità modulari riusabili. La tua app può contenere uno o più controlli Page automaticamente, in base al modello di Visual Studio usato per crearla.

      Quando crei un controllo Page, questo include automaticamente una funzione ready che puoi usare per aggiungere un gestore eventi per il pulsante. Questo esempio mostra il codice JavaScript completo per un controllo Page che aggiunge un gestore eventi click a un pulsante.

      
// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
        }
    });
})();

      Nell'esempio precedente this fa riferimento all'oggetto pagina creato dalla chiamata WinJS.UI.Pages.define. Inoltre, button1Click: function(mouseEvent) {...} crea una proprietà, ovvero una funzione anonima, per tale oggetto pagina. Pertanto, this.button1Click (in button1.addEventListener("click", this.button1Click, false)) fa in effetti riferimento alla funzione button1Click:

      
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}

      Per altre informazioni sui controlli Page, vedi l'argomento relativo all'aggiunta di controlli Page.

    • Se vuoi aggiungere il controllo ai tuoi file HTML e JavaScript personalizzati, gestire l'evento DOMContentLoaded e usarlo per chiamare la funzione WinJS.UI.processAll. La registrazione dell'evento DOMContentLoaded può essere effettuata in un punto qualsiasi del codice, poiché l'oggetto document esiste già al momento dell'esecuzione del codice. Aggiungi una funzione then o done per l'oggetto Promise restituito dalla funzione WinJS.UI.processAll e usa tale funzione per collegare i gestori eventi.

Quando si esegue l'app e si seleziona il pulsante, vengono visualizzate le coordinate del punto di clic.

Osservazioni

Non usare URI JavaScript

Nel gestore eventi non usare le URI JavaScript perché l'app non le eseguirà. Se ad esempio si tenta una simile operazione, quando si seleziona il pulsante non viene attivato nessun evento:


<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

Questa limitazione è valida per il codice nel contesto locale dell'app (il codice incluso nel pacchetto dell'app) ma non per il codice di pagine Web esterne a cui si accede dall'app.

Uso di elementi form

In un tradizionale sito Web HTML controlli e altri elementi di input sono in genere contenuti in un elemento form. Gli elementi form vengono usati per passare i dati al server. Poiché la maggior parte della programmazione per un'app tipica è basata su client, non è solitamente necessario usare un elemento form.

Uso di livelli trasparenti

È prassi comune usare un livello trasparente a schermo intero, ad esempio un elemento div, per individuare determinate interazioni dell'utente o per visualizzare animazioni. Tuttavia, la copertura di un controllo HTML con un livello trasparente può rallentare la risposta del controllo all'interazione dell'utente. Per preservare la velocità di risposta dei controlli HTML, evita di sovrapporvi un livello trasparente.

Riepilogo e passaggi successivi

Hai imparato come creare controlli HTML e collegare gestori eventi.

Imparerai a usare i nuovi controlli WinJS forniti per le app di Windows Runtime scritte in JavaScript leggendo la Guida introduttiva: Aggiunta di controlli e stili WinJS.

Per altre informazioni sui controlli specifici vedere l'elenco dei controlli.

Esempi

Argomenti correlati

Codifica delle app di base

Guida introduttiva: Aggiunta di controlli e stili WinJS

Elenco dei controlli