Her Tür Bilginin Adresi Bilgiye ulaşılan en kısa yol…Alakalı Yazılar
Kendo UI’yi size şöyle anlatabilirim. Bir iş aldınız diyelim. Patronunuz size öyle bir uygulama yapacaksınız ki tüm cep telefonu platformlarında çalışacak. Hiçbir sorun çıkmayacak diyor.
Eğer daha önce Kendo UI ve onun gibi teknolojileri duymadıysanız yapamayacağınızı düşünerek çok üzülür ve belki de istifa dilekçesi vermenize gerektirecek kadar güven kaybına yol açan bir durumu yaşardınız. Ya da offlaya puflaya her platform için ayrı ayrı günlerce uğraşarak projenizi bitirir. Ama sizde biterdiniz. Fakat bu yazıyı okuyorsanız şanslısınız.
Evet.. Öyle bir uygulama yapacağız ki. Android olsun, IOS olsun, Windows Phone olsun, Symbian olsun tüm platformlarda çalışabilecek bir uygulama. Üstelik de son teknolojiler kullanılarak..
Kendo UI den bahsedeyim.. İçinde bulunan zengin Jquery ve JavaScript kütüphanesiyle hangi platformdan girilirse girilsin bunu algılayan ve ona göre tepki veren bir teknoloji. Web teknolojisinin ressamı diyebileceğimiz büyüleyici bir yapı…
Eğer biraz HTML ve Script bilginiz varsa, rahatlıkla basit, kullanışlı, işe yarar uygulamalar geliştirebileceğiniz kullanışlı kütüphanelerden biri. Üstelik hiç bir şekilde CSS hazırlamadan. Yani dış görünümü ile ilgilenmeden…
Şimdi bir uygulama geliştirerek ne işi yaradığına bir bakalım.
Örneğimiz: Basit bir Hesap Makinesi.
Kullandığımız Teknolojiler: HTML5 + JavaScript + Kendo UI
Alttaki komutları yazdığımızda gördüğünüz gibi basit bir hesap makinesi yapmış oluyoruz. Peki bu Cep telefonlarında nasıl gözüküyor. Şimdi bunun sonucuna bakalım.
<!DOCTYPE html>
<html>
<head>
<title>Ali Demirci Hesap Makinesi v1.0</title>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script src="console.js"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="button-events" data-title="Button Events">
<ul data-role="listview" data-style="inset">
<li>
<input type="text" id="a" maxlength="4" size="6" />
1. Sayıyı Giriniz:
</li>
<li>
<input type="text" id="b" maxlength="4" size="6" />
2. Sayıyı Giriniz:
</li>
<li>
<input type="text" id="c" size="8" />
Sonuç:
</li>
</ul>
<a onclick="myFunction('sum')" data-role="button" style="display: block; margin: 2em; text-align: center;">Toplama işlemi için tıklayınız</a>
<a onclick="myFunction('subtract')" data-role="button" style="display: block; margin: 2em; text-align: center;">Çıkarma işlemi için tıklayınız</a>
<a onclick="myFunction('imp')" data-role="button" style="display: block; margin: 2em; text-align: center;">Çarpma işlemi için tıklayınız</a>
<a onclick="myFunction('bolum')" data-role="button" style="display: block; margin: 2em; text-align: center;">Bölme işlemi için tıklayınız</a>
<a onclick="myFunction('kuvvet')" data-role="button" style="display: block; margin: 2em; text-align: center;">İlk sayının İkinci sayıya kuvveti(ilk sayı üzeri ikinci sayı) işlemi için tıklayınız</a>
<script>
function myFunction(state)
{
var item = parseInt(document.getElementById("a").value);
var item2 = parseInt(document.getElementById("b").value);
var sonuc2=1;
switch (state)
{
case "sum":
var sonuc = item+item2;
document.getElementById("c").value=sonuc.toString();
break;
case "subtract":
var sonuc = item-item2;
document.getElementById("c").value=sonuc.toString();
break;
case "imp":
var sonuc = item*item2;
document.getElementById("c").value=sonuc.toString();
break;
case "bolum":
var sonuc = item/item2;
document.getElementById("c").value=sonuc.toString();
break;
case "kuvvet":
for (i=0; i<item2; i++)
{
sonuc2=sonuc2*item;
}
var sonuc = item/item2;
document.getElementById("c").value=sonuc2.toString();
break;
case "karakok":
var sonuc = item/item2;
document.getElementById("c").value=sonuc.toString();
break;
}
}
</script>
<style scoped>
.km-root .console {
background-color: transparent;
border: 0;
margin: 1.4em 1em;
overflow: hidden;
height: auto;
}
</style>
<style scoped>
#forms input:not([type=checkbox]):not([type=radio]),
#forms select,
#forms .k-dropdown
{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
</style>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Gördüğünüz gibi oldukça modern bir görünüme sahip…
Dosya İndirme Linki: Projeyi indirmek için tıklayınız
Merhaba nasılsınız;
Bizde şirket Mobil Projelerinde kullanmak üzere Kendo UI satın aldık ama bir türlü işin içinde çıkamadık.
Örnekleri arasında MVC razor ile yapılmış hiçbir örnek uygulama yok.
Bütün örnekler htm örnekleri.
Acaba siz bu konuda yardımcı olabilirmisiniz.
Bu konuda fazla çalışmam olmadı. Uzun bir süredir bitirme projemle ilgileniyorum. Kendo UI gelişmekte olan bir yapı. Daha önce stajımı yaptığım Hacettepe Teknokent’de ExtremeBir adlı bir şirkette basit bir uygulama yaparak çeşitli cihazlarda test imkanı yapma şansı bulmuş ve gayet de başarılı bir yapı olduğu kararına varmıştım. Fakat dediğiniz türde bir örnek çalışmam olmadı. Üzgünüm
hocam iyi günler
kendi ui ile ilgili birkaç örnek video çekebilir misiniz?
ben yapıyorum, bazısı oluyor bazısı olmuyor.
özelllikle mvc 4 te kendimi geliştirmek istiyorum. razor da.