Démarrage rapide : publication et abonnement à des messages par appui (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Grâce à la fonctionnalité de proximité, une simple action par appui vous permet de publier des messages et de vous abonner à ces derniers entre deux appareils, mais aussi d’écrire des balises statiques à destination d’un appareil. Si deux appareils s’approchent à 3 ou 4 centimètres l’un de l’autre, la fonctionnalité de proximité envoie une notification au système. Cette rubrique vous montre comment utiliser la proximité pour publier un message ou s’y abonner.

Objectif: Publiez et abonnez-vous à des messages à l’aide d’un geste d’appui dans le cadre de la fonctionnalité de proximité.

Prérequis

Microsoft Visual Studio Express 2012 pour Windows 8

Instructions

1. Créer un nouveau projet et activer la fonctionnalité de proximité

Ouvrez Visual Studio Express 2012 pour Windows 8, puis sélectionnez Nouveau projet dans le menu Fichier. Dans la section Javascript, sélectionnez Application vide. Attribuez à l’application le nom ProximityMessages, puis cliquez sur OK.
Ouvrez le fichier Package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez Proximité pour activer cette fonctionnalité. Fermez et enregistrez le fichier manifeste.

2. Ajouter une interface utilisateur HTML

Ouvrez le fichier Default.html et ajoutez le code HTLML suivant à la section <body>.


<table>
    <tr>
        <td style="width: 500px;vertical-align: top">
            <button id="publishMessageButton">Publish Message</button>
            <input type="text" id="messageText" />
            <button id="subscribeForMessageButton">Subscribe For Message</button><br />
            <button id="stopPublishingMessageButton">Stop Publishing Message</button>
            <button id="stopSubscribingForMessageButton">Stop Subscribing For Message</button><br />
            Enter a message and click "Publish Message". On another computer, click
            "Subscribe For Message". Enter proximity to transmit the message.
        </td>
        <td><div id="messageDiv" style="width: 500px;vertical-align:top"></div></td>
    </tr>
</table>

3. Ajouter du code d’initialisation

La classe ProximityDevice est utilisée pour publier des messages et pour s’abonner à des messages entre des appareils se trouvant à proximité. Le code de cette étape crée une instance de la classe ProximityDevice et associe des fonctions qui seront ajoutées dans des étapes ultérieures, en tant que gestionnaires d’événements pour les événements de clic des boutons HTML. Une fonction de raccourci, id, est incluse pour fournir un accès pratique à la fonction getElementById. La fonction d’initialisation est appelée lorsque l’application démarre. Elle reçoit une référence à l’appareil de proximité par défaut, qui sera utilisée pour publier et pour s’abonner aux messages. Elle ajoute aussi les gestionnaires d’événements pour les boutons.

Ouvrez le dossier js. Ouvrez le fichier Default.js et remplacez la fonction activated par défaut par le code suivant.

var proximityDevice;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        
        initializeProximitySample();

        WinJS.UI.processAll();
    }
};

function id(elementId) {
    return document.getElementById(elementId);
}
    
function initializeProximitySample() {
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.getDefault();

    if (proximityDevice) {
        id("publishMessageButton").addEventListener("click", publishMessage);
        id("subscribeForMessageButton").addEventListener("click", subscribeForMessage);
        id("stopSubscribingForMessageButton").addEventListener("click",
            stopSubScribingForMessage);
        id("stopPublishingMessageButton").addEventListener("click",
        stopPublishingMessage);
    }
    else {
        id("messageDiv").innerHTML += "Failed to initialize proximity device." +
             "Your device may not have proximity hardware.<br />";
    }
}

4. Ajouter des gestionnaires d’événements de clic

Dans cette étape, vous ajoutez le code pour les événements de clic des boutons HTML. Le code du gestionnaire d’événements pour le bouton publishMessageButton appelle la méthode publishMessage pour publier un message vers les appareils à proximité. Le code du gestionnaire d’événements pour le bouton subscribeToMessageButton appelle la méthode subscribeToMessage pour recevoir les éventuels messages publiés par un appareil à proximité. Dans cet exemple, seuls les messages identifiés en tant que type Windows.SampleMessage sont reçus. Vous devez toujours utiliser le préfixe Windows. pour les types de message de proximité publiés à l’aide de la méthode publishMessage. Pour simplifier cet exemple, il n’y a publication ou abonnement que pour un seul message à la fois. Vous pouvez publier et vous abonner à plusieurs messages en même temps.

Vous pouvez également publier des URI à l’aide de la méthode PublishUriMessage ou des données binaires à l’aide de la méthode PublishBinaryMessage. Pour obtenir la liste des types de message qui peuvent être publiés à l’aide de la méthode PublishBinaryMessage, voir PublishBinaryMessage(String, IBuffer).

Dans le fichier Default.js, ajoutez le code suivant après la fonction initializeProximitySample.

var publishedMessageId = -1;
var subscribedMessageId = -1;

function publishMessage() {
    // Stop publishing the current message.
    if (publishedMessageId != -1) {
        proximityDevice.stopPublishingMessage(publishedMessageId);
    }

    publishedMessageId =
    proximityDevice.publishMessage("Windows.SampleMessage", id("messageText").value);
}

function subscribeForMessage() {
    // Only subscribe for the message one time.
    if (subscribedMessageId === -1) {
        subscribedMessageId =
    proximityDevice.subscribeForMessage("Windows.SampleMessage", messageReceived);
    }
}

function messageReceived(device, message) {
    id("messageDiv").innerHTML += "Message received: " + message.dataAsString + "<br />";
}

function stopSubscribingForMessage() {
    proximityDevice.stopSubscribingForMessage(subscribedMessageId);
}

function stopPublishingMessage() {
    proximityDevice.stopPublishingMessage(publishedMessageId);
}

5. Exécuter l’application

Pour voir l’application en action, exécutez-la sur deux appareils dont la fonctionnalité de proximité est activée. Entrez un message et cliquez sur le bouton Publish Message sur un des appareils. Cliquez ensuite sur le bouton Subscribe For Message sur l’autre appareil et effectuez un geste tactile sur les deux appareils.

Important

Les instructions de cette rubrique de démarrage rapide doivent être effectuées sur deux appareils. Pour les scénarios qui impliquent une action d’appuyer, chaque appareil doit être doté de la technologie appropriée, par exemple la communication en champ proche (NFC) par ondes radio. Si vous ne possédez aucun matériel prenant en charge l’action d’appuyer pour la proximité, comme la communication en champ proche (NFC) par ondes radio, vous pouvez utiliser le pilote de proximité proposé à titre d’exemple dans le cadre des exemples du WDK (Windows Driver Kit). Ce pilote peut vous servir à simuler une action d’appuyer sur une connexion réseau entre deux appareils Windows. Pour plus d’informations sur le téléchargement du Windows Driver Kit (WDK), voir Windows Driver Kit (WDK). Après avoir installé le WDK et les exemples, vous trouverez l’exemple de pilote de proximité dans le répertoire src\nfp, là où vous avez installé les exemples WDK. Reportez-vous au fichier NetNfpProvider.html, dans le répertoire src\nfp\net, pour obtenir des instructions sur la création et l’exécution du simulateur. Une fois le simulateur démarré, celui-ci s’exécute en arrière-plan tandis que votre application de proximité opère au premier plan. Pour que la simulation de l’action par appui fonctionne, votre application doit se trouver au premier plan.