Tags: , , , , , | Categories: Programlama, Tanıtım, Web Uygulaması Posted by okutbay on 23.09.2007 02:13 | Yorumlar (0)
Microsoft® Silverlight™ Web için zengin etkileşimli uygulamalar ve .NET tabanlı medya deneyimlerinin yeni neslini sunan tüm tarayıcı ve platformlar için geliştirilmiş bir eklentidir.

Silverlight , mevcut web uygulamaları ile entegre olabilen AJAX, VB, C#, Python ve Ruby destekleyen esnek bir programlama modeli sunmaktadır.
MacOS ve Windows üzerinde çalışan tüm ana tarayıcı uygulamalarına yüksek kaliteli videonun hızlı ve düşük maliyetle sunumu destekler.

Silverlight teknolojisini kullanan sayfaları tarayınızıda görebilmniz için Silverlight eklentisini bilgisayarınıza kurmanız yeterlidir. Şu an 1.0 sürümü olan eklentinin 1.1 Alpha sürümü de hali hazırda denenmektedir.

Eğer siz de Silverlight uygulaması geliştirmek isterseniz bu sefer de Silverlight SDK edinmeniz gerekmektedir. SDK içinden çıkan "silverlight.js" dosyası silverlight teknolojisini kullanabilmeniz için asgari gerekliliktir. Bu dosya silverlight öğelerini göstermek istediğiniz tüm sayfaların <head> bölümüne eklenmelidir.

Aşağıdaki örnekte js klasörü altında bulunan silverlight.js dosyasının sayfa eklenişi gösterilmektedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Silverlight Deneme</title>
<script type="text/javascript" src="js/Silverlight.js"></script>
</head>
<body>
</body>
</html>

Bundan sonra silverlight nesnelerini barındıracak div bölümünü tanımlamak ve tanımlanan bu div bölümü içinde gösterilecek silverlight nesnesinin javascript kullanılarak oluşturulması gerekecektir.

<div id="slhost"></div>
<script type="text/javascript">
var parentElement = document.getElementById(`slhost`);
createsl();
</script>

Yurakıdaki örnekte slhost adına sahip bir div ve bu div tagi ile etkileşerek silverlight nesnesini oluşturacak javascript metoduna çağrı oluşturuldu. Bu metodu doğrudan burada yazmak yerine oluşturacağımız ayrı bir dosya içine yerleştirdik ve buradan sadece createsl metoduna çağrı yaptık. createsl metodumuz şöyle bir metod olmalıdır.

function createsl()
{
Silverlight.createObject("myxaml.xaml", parentElement, "mySilverlightPlugin",{width:`800`, height:`600`, inplaceInstallPrompt:true, background:`#fff`, isWindowless:`false`, framerate:`24`, version:`1.0`}, {onError:null, onLoad:null}, null);
}

createsl metodu silverlight.js içindeki .createObject metodunu çağırarak silverlight nesnesini oluşturmaktadır. Fonksiyon incelenirse parametreler ile işlenecek xaml dosyası, nesnenin yerleştirileceği div (parentElement), genişlik, yükseklik, silverlight kurulu olmadığı zaman nesne yerinde kurulum uyarısının görüntülenip görüntülenmeyeceği, zemin rengi, saniyedeki çerçeve sayısı, silverlight versiyonu gibi değerler tanımlanmıştır. Bu metodu "CreateSilverlight.js" dosyası içine yazıp javascriptlerimizin bulunduğu js klasörüne yerleştirdikten sonra ilk örneğimizde silverlight.js dosyasını eklediğimiz gibi bu dosyayı da ekleyerek tanıtmamız gerekir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Silverlight Deneme</title>
<script type="text/javascript" src="js/Silverlight.js"></script>
<script type="text/javascript" src="js/CreateSilverlight.js"></script>
</head>
<body>
<div id="slhost"></div>
<script type="text/javascript">
var parentElement = document.getElementById(`slhost`);
createsl();
</script>
</body>
</html>



Artık silverlight nesnelerini createsl metodu içinde tanımlamış olduğumuz XAML dosyası içinde oluşturmaya başlayabiliriz.

Bağlantılar:

Official Site
http://www.microsoft.com/silverlight/

Microsoft portal site for the Silverlight development community
http://www.silverlight.net/

Diğer Faydalı bağlantılar:
http://www.silverlightcream.com/
http://www.wynapse.com/

Klavyeleriniz şen ola... 
 

Bu yazıyı ilk değerlendiren siz olun

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , , , , , | Categories: Programlama Posted by okutbay on 29.05.2007 07:01 | Yorumlar (0)
ASP.NET uygulamalarımızda AJAX özellikleri kullanmak istersek ilk yapmamız gereken gerekli dosyaları bilgisayarımıza kuracak programı indirmek ve çalıştırmaktır.

Bu programı indirmek için www.asp.net sitesinin download bölümü ziyaret edebilirsiniz...

Visual Studio 2005 ya da Visual Web Developer ile yeni bir web projesi oluşturun. Bu projeyi oluştururken "ASP.NET AJAX-Enabled Web Application" şablonunu kullanınız.

Bu şablonu kullanmadan mevcut bir asp.net projenize uygulamak isterseniz ise yapmanız gerekenler şunlardır:
1- Projenize "System.Web.Extensions" namespace'i referans olarak ekleyin.
2-ASP.NET AJAX-Enabled Web Application şablonunda yer alan web.config ayarlarını eksiksiz olarak kopyalayın.

Artık AJAX teknolojisini web uygulamalarınız içinde zahmetsizce kullanabilirsiniz.

Kullanabildiğimizi test etmek için basit bir uygulama geliştirelim.

Oluşturduğunuz projede bulunan default.aspx dosyanıza tasarım görünümünde 3 adet label ve 1 adet buton kontrolünü yerleştirin. Aralarına da <hr> tagi yazarak birbirlerinde görüntü olarak ayrılmasını sağlayın. Webformun kod bölümüne geçip Page_Load olayına label kontrollerin text özelliklerine o anki zamanı yazdıracak kodu ekleyin.

Kodunuz şu şekilde görünmelidir:

    1 protected void Page_Load(object sender, EventArgs e)

    2 {

    3     Label1.Text = DateTime.Now.ToString();

    4     Label2.Text = DateTime.Now.ToString();

    5     Label3.Text = DateTime.Now.ToString();

    6 }


Uygulamayı test etmek için browserınızda görüntüleyin. Butona tıkladığınızda 3 label kontrolününde tıklama zamanını gösterdiğini görün.

Şu ana kadar yaptıklarımız klasik bir ASP.NET uygulamasında yapmamız gerekenlerdi. Yavaş yavaş uygulamıza AJAX unsurlarını ekleyelim.

Visual Studio Toolbox AJAX Extensions bölümünden sayfanın üst bölümüne bir adet scriptmanager kontrolü sürükleyip bırakın. Daha sonra Label2 kontrolünün yanına bir adet UpdatePanel kontrolünü sürükleyip bırakın. Sonrasında Label2 ve Button1 kontrollerini bu UpdatePanel içine sürükleyip bırakın.

İşte ilk AJAX uygulamanızı yaptınız. Uygulamaya browserda gözatıp çalışmasını görün. Butona tıkladığınızda sadece UpdatePanel içinde bir PostBack gerçekleşecek ve sadece Label2 kontrolü güncel zamanı gösterecektir.

Eğer buton update panel içinde yer almasaydı postback tüm sayfa için gerçekleşecek ve sayfanın tamamı yeniden yüklenecekti. Bu durumda sadece update paneli güncellemek için update paneli ilgili butonun tıklanma olayını dinleyecek şekilde ayarlamamız gerekir. Böylece sadece ilgili updatepanel içinde bir postback gerçekleşecektir.

Buton kontrolünün UpdatePanel dışına alınması sonrasında Update Panel için yapılması gereken ilave:

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>


Böylece UpdatePanel içinde yer almayan bir kontrolün tetiklenmesi ile de UpdatePaneli güncellemiş oluruz.

default.aspx sayfamızın son hali

    1 using System;

    2 using System.Data;

    3 using System.Configuration;

    4 using System.Collections;

    5 using System.Web;

    6 using System.Web.Security;

    7 using System.Web.UI;

    8 using System.Web.UI.WebControls;

    9 using System.Web.UI.WebControls.WebParts;

   10 using System.Web.UI.HtmlControls;

   11 

   12 namespace WebApplication1

   13 {

   14     public partial class _Default : System.Web.UI.Page

   15     {

   16         protected void Page_Load(object sender, EventArgs e)

   17         {

   18             Label1.Text = DateTime.Now.ToString();

   19             Label2.Text = DateTime.Now.ToString();

   20             Label3.Text = DateTime.Now.ToString();

   21         }

   22     }

   23 }

Klavyeleriniz şen ola...

1 kişi tarafından 3.0 olarak değerlendirildi

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5