Windows 8 Metro and RemObjects SDK for JavaScript

January 16, 2012 in Data Abstract, JavaScript

Windows 8 (currently in beta) introduces a new Metro UI that marc already talked about a while back. Metro apps can be written with .NET, native C++ and also with JavaScript.

What that means is that users of Data Abstract or RemObjects SDK have the choice of two development platforms and languages to create Windows 8 applications: either our .NET library or our new JavaScript library.

This blog post here is about my first Metro web application that calls our famous Mega Demo sample server, using our new RemObjects SDK for JavaScript.

I’ll explain step by step:

Preparation

Get the Win8 Developer Preview, install it and run Visual Studio.

From the main menu, choose New Project -> JavaScript -> Blank Application.

Add the RemObjectsSDK.js and the MegaDemoLibrary_intf.js to the project’s /js/ folder.

Editing default.html

Add script tags to the head to include our JavaScript files, add a text area tag to the body (this will be our log window).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinWebApp1</title>
 
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
 
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <script src="/js/RemObjectsSDK.js"></script>
    <script src="/js/MegaDemoLibrary_intf.js"></script>
</head>
 
<body>
    <textarea id="log" rows="10"></textarea>
</body>
 
</html>

Editing default.js

Define the alert function (which we might need for error messages) and add the service creation/method calling code to the onmainwindowactivated function.

function () {
 
    'use strict';
 
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);
 
    window.alert = function (msg) { log.value += "alert: " + msg; }
    WinJS.Application.onmainwindowactivated = function (e) {
 
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
 
            log.value = "trying...\n";
            var msg = new RemObjects.SDK.JSONMessage();
            var ch = new RemObjects.SDK.HTTPClientChannel("http://192.168.0.163:8099/JSON");
            var svc = new MegaDemoService(ch, msg);
            svc.Sum(1, 2, function (res) {
                log.value += "1 + 2 = " + res;
            }, RemObjects.UTIL.showError);
 
            // TODO: startup code here
 
        }
    }
    WinJS.Application.start();
 
})();

That’s it. Run the project and enjoy the fact that 1 + 2 = 3 — in a glorious Windows 8 Metro application.

Comments are closed.