Merhaba arkadaşlar, son yazımda sizlere Html 5 ve Xaml hakkında bazı noktalardan bahsetmiştim, bunların avantajları ve dezavantajlarından bahsetmiştim, bu hafta da Windows 8 JavaScript ile örnek bir uygulama yapacağız ve sizlere Windows 8 JavaScript ile uygulama geliştirirken sizler için faydalı olabilecek birkaç site ismi vereceğim.
Evet ilk olarak, proje taslaklarından Windows 8 JavaScript Navigation uygulaması açıyoruz. Yapacağımız uygulamada basit olarak bir kullanıcı girişi olacak ve kullanıcı girdiğinde kullanıcıya ait kişisel bilgiler gösterilecek. Bu uygulama en basit seviyede olacak isterseniz yapacağınız eklemeler ile uygulamayı daha da geliştirebilirsiniz. Burada amaç JavaScript ile olan deneyimimizi geliştirmek.
Projeyi açtıktan sonra bir adet Html sayfası ekliyoruz. 'home.html' sayfasına bir adet yazı,bir adet şifre bir adet de düğme inputları ekliyoruz. Daha sonra 'default.html' sayfasında gövdenin arka plan rengini 'burlywood' olarak değiştiriyoruz. Son olarak sayfanın kodları aşağıdaki gibi gözükecektir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App7</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- App7 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>
</head>
<body style="background-color:burlywood">
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
<!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div> -->
</body>
</html>
Bu kısımda giriş aşamasının tasarımın yapmış olduk. Şimdi de giriş yaptıktan sonla yönlendireceğimiz sayfanın tasarımını yapalım. Bunun için de 5 satırlık 2 sütunluk bir adet tablo atıyoruz ve kullanıcı adı, syadı vs. gibi kişisel bilgileri buraya yazıyoruz. Gövdenin hemen altına da bir adet resim atıyoruz ve buraya da kullanıcının resmini kaynak olarak gösteriyoruz. Kullanıcı girişi doğru ise otomatik olarak sayfa buraya yönlendirilecek ve kullanıcıya ait bilgiler gösterilecektir. Bunun için kullanıcı girişi olan sayfanın JavaScript kodlarını yazalım şimdi de.
Bu kısımda 'home.html' sayfasına ait olan kodlar yazılacağından bu kodları 'home.js' dosyasının içine yazacağız. Bu kısımda sayfa ile tanıtıldığındaki kod bloğunun içerisine attığımız giriş yapma düğmesini tanıtıyoruz ve buna ait olan tıklanma olayını tanımlıyoruz. Daha sonra da bu metodu alt kısıma yazıyoruz. Metodun içinde kullanıcı adı ve şifreyi değer olarak alıyoruz ve bu kullanıcı adı ve şifre istediğimiz değerlere eşit ise 'page.html' sayfasına yani kullanıcıya ait olan bilgileri içeren sayfaya yönlendiriyoruz. Eğer giriş yalnışsa bir adet uyarı gösteriyoruz. Kodlar son olarak aşağıdaki gibi olmalı:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var girisyap = document.getElementById("girisyap");
girisyap.addEventListener("click", buttonClickHandler, false);
}
});
function buttonClickHandler(eventInfo) {
var kullaniciadi = document.getElementById("kullaniciadi").value;
var sifre = document.getElementById("sifre").value;
if (kullaniciadi == "admin" & sifre == "123") {
WinJS.Navigation.navigate("page.html", "test parametresi");
}
else {
Windows.UI.Popups.MessageDialog("kullanıcı adı: admin, şifre: 123 olmalı!").showAsync();
}
}
})();
Programın ekran görüntüleri aşağıdaki gibi olacaktır:
Şimdi de sizlere faydalı olabilecek birkaç faydalı siteden bahsetmek istiyorum. Bunların başında Microsoft'un sitesi olan Msdn geliyor. Burada örnek projelerden faydalı bilgilere rahatça erişebilirsiniz:
http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx
Yine aşağıdaki linkten Microsoft'un yayınladığı ücretsiz e-kitaba erişip indirebilir ve bilginizi genişletebilirsiniz:
http://blogs.msdn.com/b/deva/archive/2013/05/07/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx
Diğer güzel bir site ise CodeProject. Buradan da temel bilgilere erişebilmeniz mümkündür:
http://www.codeproject.com/Articles/338916/Windows-8-JavaScript-Metro-Application-Getting-Sta
Aşağıdaki siteden de örnek proje bulabilir bilgi edinebilirsiniz, örnek proje olarak rss reader nasıl yapılır görebilirsiniz:
http://html5center.sourceforge.net/Building-a-Windows-8-App-with-HTML5-How-to-create-a-small-RSS-reader-in-30min-Part-One
Bu haftalık anlatacaklarım bu kadar. İyi kodlamalar...
Orçun acaba javascript dersleri adı altında video çekemez misin seri halinde ? Biz de faydalansak uzun zamandır siteyi takip ediyorum oldukça yararlı konularda bilgi veriyorsun. emeğine sağlık.
YanıtlaSilinşaat
Akıllı telefon ile kazanmanın bir diğer yolu, telefonunuzdaki uygulamaları indirip açarak puan kazanabileceğiniz FeaturePoints kullanmaktır. Hem iOS hem de Android için kullanılabilir. PayPal'ı kullanarak ödeme yapabilir veya Amazon, iTunes veya mevcut diğer hediye kartlarıyla ödüllendirilebilirsiniz. Bu yöntemleri bu şaşırtıcı siteden öğrendim https://internettenparakazanma.info/
YanıtlaSil