Makale Özeti

Bu makalemde sizlerle birlikte Windows 8 üzerinde HTML ve Javascript kullanarak bir Hello World uygulamasının nasıl yapılacağını ve bir MetroStyle uygulamada ne gibi dosyalar bulunduğunu inceleyeceğiz.

Makale

Bu makalemde sizlerle birlikte Windows 8 üzerinde HTML ve Javascript kullanarak bir Hello World uygulamasının nasıl yapılacağını ve bir MetroStyle uygulamada ne gibi dosyalar bulunduğunu inceleyeceğiz.

Öncelikle Windows 8 üzerine kurduğumuz Visual Studio'yu açıyoruz. Hemen Ardından File->New->Project'i seçiyoruz. Açılan ekranda sol taraftaki treeview içerisinden Other Languages altından Javascript'i ve sonrasında ise Windows Metro Style'ı seçiyoruz. Burada karşımıza 5 çeşit proje şablonu geliyor. Bu proje şablonlarının farklılıklarına bu makale serimin bir önceki makalesinde değinmiştim. Biz temel bir uygulama yapacağımız için Blank App'ı seçiyoruz ve Ok tuşuna basarak ilk uygulamamızı oluşturuyoruz:

 

Uygulamamızı oluşturduğumuzda karşımıza çıkacak dosyaları solution explorer'dan inceleyelim.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldJavaScript</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- HelloWorldJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Dosyaya baktığımızda dosyanın genellikle kullanmış olduğumuz html dosyalardan bir farkı olmadığını görüyoruz, en tepede dosyanın doctype olarak HTML5 deklare edildiğini görüyoruz. Bunun dışında WinJS kütüphanesine olan referansları ve her sayfa için farklı oluşturmuş olmamız tavsiye edilen js ve css dosyalarını görüyoruz. Uygulamamız bu haliyle çalışmaya hazır. Uygulamamızı çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsünü görüyoruz:


Şimdi ise ilk formumuzu yapmaya başlayalım. Sayfaya bir label, bir textbox ve de bir button ekliyoruz, daha sonrasında bir span ekleyerek Hello World mesajını içerisinde göstereceğiz. Bunun için html kodumuzu aşağıdaki gibi modifiye ediyoruz:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldJavaScript</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- HelloWorldJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <label>Ad Soyad : </label>
    <br />
    <input type="text" id="txtNameSurname" />
    <br />
    <input type="button" id="btnSubmit" value="Merhaba De" />
    <br />
    <span id="spanContent"></span>
</body>
</html>

Şimdi ise uygulamamızı çalıştırdığımızda aşağıdaki gibi bir görüntü elde ediyoruz. Burada dikkat ederseniz textbox'ımızı html olarak tanımlamamıza karşın uygulamamızda Metro Style textbox olarak gözükmesidir. Kontroller arası bu çevrim otomatik olarak yapılmaktadır.

Tabii ki kodumuz şu anda çalışmayacaktır. Kodumuzu çalıştırmak için Javascript dosyamızda bazı değişiklikler yapmamız gerek. Javascript dosyamızın orjinal hali aşağıdaki gibidir:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(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());
        }
    };

    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().
    };

    app.start();
})();

 

Bir önceki makalemde uygulama state'lerinden bahsetmiştim. Bu js dosyasına baktığınızda ise uygulamanın hangi state'ten aktif state geçtiğine dair bir if sınamasını görüyoruz. Yani uygulamamız sıfırdan açılırken farklı birşeyler yaptırırken suspend moddan aktif moda geçiyorsa farklı birşeyler yaptırmak mümkün olacaktır. Şimdi ise butona basıldığında textbox'taki değeri okuyup span'ın içerisine yazacak javascript kodumuzu yazalım. Burada yazacağımız kod html kodlama yaparken yazdığımız javascript kodunun birebir aynısı olacaktır.

Javascript dosyasında loaded isminde bir fonksiyon yazıp bunu app.onactivated metodunun içerisinde çağırarak istediğimiz işlemin yapılmasını sağlıyoruz. loaded fonksiyonunun içeriğini aşağıda görebilirsiniz:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(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());
            loaded();
        }
    };

    function loaded()
    {
        var btn = document.getElementById('btnSubmit');
        btn.addEventListener('click', function () {
            var txt = document.getElementById('txtNameSurname');
            var spn = document.getElementById('spanContent');
            spn.innerHTML = 'Merhaba ' + txt.value;
        });
    }

    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().
    };

    app.start();
})();

Şimdi ise uygulamamızı çalıştırıp, ismimizi yazıp butona bastığımızda başarıyla çalıştığını göreceğiz.

Dikkat ederseniz uygulamadaki button textbox gibi kontroller tamamen sol tarafa bitişik gözüküyor bu da görüntüyü bozuyor. Birazcık padding vermek için css dosyasını kullanabiliriz. Bunun için default.css dosyasına gidip body nesnesinin stiline padding:5px tanımlamasını yapabiliriz.