06/11/2015 12

DevExtreme İle İlk Uygulama

Bu yazıda sizlere Devextreme ile örnek bir uygulama nasıl oluşturulur ve derlenir onu anlatacağım. Bu yazıda basit bir Merhaba Dünya Yazdıracağız ve Bazı nesnelerin kullanımını tanıyacağız. Daha önceki yazımızda DevExtreme kurulumundan bahsetmiştik ve birtane uygulama açmıştık. O uygulama üzerinden geliştirme yapacağız.
Visual Studionun Admin Yetkisi ile Açıldığından Emin Olun... Admin Yetkisiyle açma işlemi : Kısayola Sağ tıklayın - Özellikler deyin - Uyumluluk Sekmesinden En altta Bu programı Yönetici olarak çalıştır seçeneğini seçin ve Uygula tamam Deyin. Artık o uygulama sürekli Admin yetkisi isteyecektir.
Şimdi Sayfamıza Bir textbox ve buton atalım. Aşağıdaki resimde Gösterildiği gibi... [caption id="attachment_1407" align="aligncenter" width="702"]Dev Extreme Proje Oluşturma Thekodprogram Şimdi Bu sayfamızda gördüğünüz gibi textbox ve butonumuzu attık burada önemli nokta ikinci satırdaki
yapısına dokunmuyoruz çünkü bu sayfanın üst ve alt menusudur. Buraya daha sonraları dokunacağız ve kendimize uygun şekilde düzenleyeceğiz.[/caption] Kodlarımızı bende buraya yapıştırayım buradan devam edelim
Gördüğümüz gibi textbox ve butonumuz aslında bir div yapısı. bu ifadeleri DevExtreme div yapılarını içerisindeki nesnelere dönüştüren bir yapıya sahip... Gelelim şimdi butona tıklama olayına... Butona tıklama olayı için bizim ilk olarak butonun içine bu olayları tanımlamamız gerekir . yani data-bind alanını butonun olayları değerleri ile doldurmalıyız.   Yukarıdaki butonun div clasını aşağıdaki ile değiştirdiğimizde artık butonun click olayına atama yapmış oluyoruz
Şimdi peki bu buton tıkla nedir? O ise bizim home.js içindeki tanımlamamız gereken alandır. Şimdi Home.jsye gidelim ve bu nesnemizi tanımlayıp içerisine tıklama olayında çalışacak olan fonksiyonu yazalım. Bu arada txbox içinde bir event tanımlayalım ki hem onunda bir iki eventini görelim hemde gösterilecek bir deger oluşturalım.Evet aşağıdaki kod ilede bizim kullanacağımız textboxumuzu oluşturduk.
Sırada arka planda çalışacak olan JavaScript kodlarımızı oluşturma var. Aşağıda ise yukarıda tanımladığımız nesneleri JavaScript ile nasıl oluşturduğumuz var. Bu kodlar home.js dosyasının tamamını içeriğidir
Application1.home = function (params) {

    var deger = "";

    var viewModel = {
     //bizim viewModel nesnemiz yani ekranda çalışacak olan nesneleri oluşturur
        txtTusaBasilmaOlayi: "keyup",
        txtDegerinDegismeOlayi: function (data) {
            deger = data.value;

        },

        ButonTikla: function () {
                  alert(deger);
        },

    };

    return viewModel; // oluşturulan ekran yazdırılıyor
};
Bunuda hallettiğimize göre gelelim programın çalıştığını görmeye. Programı Çalıştırma işlemimiz normal tarayıcıda olmaktadır. taraytıcıda oldugu içinde yazdığımız javascript kodları tarayıcının yorumladığı gibi çalışır. Aslında telefondada aynı şekilde yorumlanır arada bazı görsel olarak farklılıklar olabilir tabiiki. Aşağıdaki resimde projemizin çalıştığının resmidir : [caption id="attachment_1408" align="aligncenter" width="1135"]DevExtreme Projesi Thekodprogram Sol tarafta gördüğünüz üzere aynı proje android windows phone içinde derlenebiliyor ve çalıştırılabiliyor...[/caption]   Evet bunuda hallettiğimiz göre gelelim projeden apk almaya Solution Explorer'dan Projeye Sağ Tıklayıp Build Native Packages Diyoruz ve Açılan ekranda hangi cihazlar için yükleme oluşturacağımızı seçiyoruz. Ben android seçtim şimdilik. Daha sonra Gerekli alanları doldurup Sertifika oluşturmamız gerekmektedir. Sertifika oluşturabilmek için Visual Studioyu Admin Yetkisi ile çalıştırmamız gerekiyor. Sertfika oluşturduktan sonra projeyi Build ediyoruz ve Projenin içindeki bin Klasöründeki Debug veya Release içinden apk mızı alabiliyoruz. İlk projemiz hayırlı olsun. İyi çalışmalar Burak Hamdi Tufan    
Tags

Share this Post



Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment.

Comments

    There is no comment. Be the owner of first comment...