Freigeben über

Zusammenwirken von JavaScript und C++ im Beispiel zum Reise-Optimierer von Bing Maps

  • Artikel

Der Reise-Optimierer von Bing Maps verwendet JavaScript, um die Benutzeroberfläche und C++ für die Reiseoptimierung zu definieren. In diesem Dokument wird beschrieben, wie die JavaScript- und C++-Teile am Beispiel des Reise-Optimierers von Bing Maps zusammenwirken. Es wird beschrieben, wie die JavaScript-Komponente die C++-Komponente initialisiert und Daten an sie sendet und wie die C++-Komponente Daten zurück an die JavaScript-Komponente sendet. Die einzelnen JavaScript- und C++-Komponenten werden ausführlich in den Dokumenten Verwenden von JavaScript im Beispiel zum Reise-Optimierer von Bing Maps und Verwenden von C++ im Beispiel zum Reise-Optimierer von Bing Maps beschrieben.

Hinweis

Die Dateien default.html, default.css und default.js werden als lokaler Kontext bezeichnet, da diese Dateien zwar auf Windows-Runtime, einschließlich des benutzerdefinierten Windows-Runtime in C++, verweisen können, jedoch nicht auf das Internet zugreifen können. Die Dateien web.html, web.css und web.js werden als Webkontext bezeichnet, da diese Dateien zwar auf das Internet, nicht aber auf Windows-Runtime zugreifen können. Der Webkontext definiert außerdem die Benutzeroberfläche.

Hinweis

Den Beispielcode zu diesem Dokument finden Sie im Abschnitt über das Codebeispiel für den Reise-Optimierer von Bing Maps.

In diesem Artikel

  • Initialisieren der C++-Komponente über JavaScript

  • Senden von Daten an die C++-Komponente

  • Empfangen von Daten von der C++-Komponente

  • Migration von ActiveX

  • Nächste Schritte

Initialisieren der C++-Komponente über JavaScript

Der lokale Kontext deklariert Variablen, die die C++-Komponente und den aktuellen Reiseoptimierungsvorgang darstellen.

// The C++ component.
var tripOptimizer = null;

// The current asynchronous trip optimization.
var asyncOperation = null;

Die optimizerLoad-Funktion, die während der App-Initialisierung aufgerufen wird, erstellt das TripOptimizer-Objekt.

function optimizerLoad() {
    "use strict";
    tripOptimizer = new TripOptimizerComponent.TripOptimizer();
}

Windows-Runtime kann das TripOptimizer-Objekt suchen und laden, da das JavaScript-Visual Studio-Projekt einen Verweis auf das C++-Projekt enthält.

[Nach oben]

Senden von Daten an die C++-Komponente

Im Dokument Verwenden von JavaScript im Beispiel zum Reise-Optimierer von Bing Maps wird beschrieben, wie der Webkontext und der lokale Kontext miteinander kommunizieren. Wenn der Benutzer die Schaltfläche Routenplan abrufen oder Abbrechen auswählt, sendet der Webkontext eine Meldung an den lokalen Kontext, um die entsprechende TripOptimizer-Methode in der C++-Komponente aufzurufen. Wenn der Benutzer beispielsweise die Schaltfläche Routenplan abrufen auswählt, sendet der Webkontext die Zeichenfolge "optimizeTrip" als Teil der Meldung an den lokalen Kontext. Wählt der Benutzer Abbrechen aus, sendet der Webkontext die Zeichenfolge "cancel". Der folgende Code zeigt, wie der lokale Kontext diese Meldungen vom Webkontext empfängt.

function receiveMessage(message) {
    "use strict";
    // Verify event origin.
    if (message.origin !== "ms-appx-web://microsoft.sdksamples.tripoptimizer.js") {
        return;
    }

    var data = JSON.parse(message.data);
    if (data.invoke === "load") {
        optimizerLoad();
    } else if (data.invoke === "optimizeTrip") {
        optimizerOptimizeTrip(
            data.locations,
            data.travelMode,
            data.optimize,
            data.bingMapsKey,
            data.alpha,
            data.beta,
            data.rho,
            data.iterations,
            data.parallel);
    } else if (data.invoke === "cancel") {
        optimizerCancel();
    } else if (data.invoke === "alert") {
            // Show message dialog.            
            new Windows.UI.Popups.MessageDialog(data.message).showAsync().then();
    }
}

Die optimizerOptimizeTrip-Funktion leitet die Parameter vom Webkontext an die C++-Komponente weiter.

function optimizerOptimizeTrip(locations, travelMode, optimize, bingMapsKey, alpha, beta, rho, iterations, parallel) {
    "use strict";
    asyncOperation = tripOptimizer.optimizeTripAsync(locations, travelMode, optimize, bingMapsKey,
        alpha, beta, rho, iterations, parallel);

Mit diesem Beispiel wird außerdem die asyncOperation-Variable festgelegt. Diese Variable wird festgelegt, damit der Vorgang abgebrochen werden kann, wenn der Benutzer Abbrechen auswählt.

function optimizerCancel() {
    "use strict";
    if (asyncOperation !== null) {
        asyncOperation.cancel();
    }
}

Hinweis

Die TripOptimizer::OptimizerTripAsync-Methode in der C++-Komponente wird von JavaScript als TripOptimizer.optimizerTripAsync verfügbar gemacht (der erste Buchstabe wird den Standard-JavaScript-Namenskonventionen entsprechend in einen Kleinbuchstaben geändert).

[Nach oben]

Empfangen von Daten von der C++-Komponente

Die TripOptimizer::OptimizerTripAsync-Methode in der C++-Komponente verhält sich asynchron. Daher muss der JavaScript-Teil der App in der Lage sein, die Daten zu verarbeiten, sobald diese verfügbar sind. Der JavaScript-Teil verwendet Zusicherungen, um zu reagieren, wenn ein asynchroner Vorgang abgeschlossen wird, einen Fehler auslöst oder den Status meldet. Im folgenden Beispiel wird gezeigt, wie die optimizerOptimizeTrip-Funktion die Abschluss-, Fehler- und Statusrückrufe für den Aufruf von TripOptimizer::OptimizeTripAsync definiert.

function optimizerOptimizeTrip(locations, travelMode, optimize, bingMapsKey, alpha, beta, rho, iterations, parallel) {
    "use strict";
    asyncOperation = tripOptimizer.optimizeTripAsync(locations, travelMode, optimize, bingMapsKey,
        alpha, beta, rho, iterations, parallel);

    asyncOperation.then(
        function (result) {
            if (result !== null) {
                // If the result contains certain keys, then we know that the results contain
                // the optimize route.
                if (result.size === 2 && result.hasKey("locations") && result.hasKey("displayNames")) {
                    routeCallback(result);
                }
                    // Otherwise, we know that the component is asking us to resolve ambiguous locations.
                else {
                    locationsCallback(result);
                }
            }
            asyncOperation = null;
        },
        function (error) {
            if (error.description === "Canceled") {
                canceledCallback();
            }
            else {
                errorCallback("Error: " + error.message);
            }
            asyncOperation = null;
        },
        function (progress) {
            progressCallback(progress);
        }
        );
}

Beachten Sie, dass die C++-Komponente den aktuellen Vorgang abbricht, wenn der Benutzer Abbrechen auswählt. Die Laufzeit ruft den Fehlerhandler für den Vorgang auf. Sie legt das description-Feld des Fehlers auf "Abgebrochen" fest, um anzugeben, dass das Ergebnis auf den Abbruch zurückzuführen ist. Weitere Informationen zum Umgang mit asynchronen Vorgängen in JavaScript finden Sie unter Asynchronous programming.

Wenn der lokale Kontext den Status oder das Ergebnis eines asynchronen Vorgangs empfängt, leitet er die Ereignisdaten an den Webkontext weiter, sodass dieser die Benutzeroberfläche aktualisieren kann. Beispielsweise sendet die progressCallback-Funktion die Zeichenfolge "progressCallback" als Teil der Meldung, die sie an den Webkontext sendet.

// Event handler for progress notifications from the Windows Runtime component.
function progressCallback(info) {
    "use strict";
    var message = { "invoke": "progressCallback", "message": info };
    window.parent.frames.mapFrame.postMessage(JSON.stringify(message), "*");
}

Im folgenden Beispiel wird die receiveMessage-Funktion für den Webkontext veranschaulicht. Diese Funktion empfängt Meldungen vom lokalen Kontext.

// Receives a message from the local context.
function receiveMessage(message) {
    "use strict";
    // Verify event origin.
    if (message.origin !== "ms-appx://microsoft.sdksamples.tripoptimizer.js") {
        return;
    }

    var data = JSON.parse(message.data);
    if (data.invoke === "progressCallback") {
        progressCallback(data.message);
    } else if (data.invoke === "locationsCallback") {
        locationsCallback(JSON.parse(data.locationOptions));
    } else if (data.invoke === "routeCallback") {
        routeCallback(data.locations, data.displayNames);
    } else if (data.invoke === "canceledCallback") {
        canceledCallback();
    } else if (data.invoke === "errorCallback") {
        errorCallback(data.message);
    }
}

Für die Meldung "progressCallback" ruft der Webkontext die progressCallback-Funktion auf, die die Benutzeroberfläche aktualisiert, um die Statusmeldung anzuzeigen.

// Event handler for progress notifications from the control.
function progressCallback(message) {
    "use strict";
    // Set message.
    progressMessageText.innerHTML = message;
}

[Nach oben]

Migration von ActiveX

Informationen darüber, wie Sie von der ActiveX-Version des Reise-Optimierer von Bing Maps zu einer Windows Store-App migrieren, finden Sie unter Migrieren von vorhandenem Code im Beispiel zum Reise-Optimierer von Bing Maps.

[Nach oben]

Nächste Schritte

In diesem Artikel wurde erläutert, wie mit JavaScript und C++ eine vollständige App im Windows Store erstellt wird. Verwenden Sie ggf. eine C++-Komponente zusammen mit der JavaScript-App, um Code zu nutzen, den Sie bereits geschrieben und getestet haben, und um die Leistung zu verbessern.

[Nach oben]