ATLAS, Refresh’siz Uygulamalar -1

ATLAS, Refresh’siz Uygulamalar -1

26.11.2006 00:00:00

Bu makalemizde son zamanlar da adını çok duyduğumuz bir ATLAS teknolojisini inceleyeceğiz. AJAX web uygulama geliştiriciler için çok önemli ve heyecan verici bir gelişme olmasına rağmen getirdiği bazı sınırlamaları ve zorlukları da vardı. Tarayıcı tipine göre farklı DOM objeleri tanımlamak, uygulamayı geliştirebilmek için ileri sayılabilecek düzeyde JavaScript kodu yazmak gibi... ATLAS bu kısıtlamaları ve zorlukları ortadan kaldırdığı gibi, aynı zamanda nesne tabanlı bir ortam olan .NET Framework’ün nimetlerinden de faydalanmamızı sağladı.

Puan:

Kaynak:MSAkademik

Atlas teknolojisi kısaca Ajax’ın kolaylaştırılıp .net’ e uygulanmış kolay halidir. Atlas teknolojisi visual studio ’ya eklenen bir Javascript kütüphanesidir

Şimdi isterseniz Atlas Teknolojisini kuralım… Atlas uygulamalarını çalıştırmanız için ilk olarak aşağıdaki componenti

http://www.microsoft.com/downloads/details.aspx?FamilyId=B01DC501-B3C1-4EC0-93F0-7DAC68D2F787&displaylang=en kuralım.

Programı indirdikten sonra kurmaya geçelim

2. adımda atlas içeriklerini yükleyip yüklemeyeceğini sorar. Onaylayıp next’ e tıklarız.

Son olarak kurulum tamamlanır. Artık geriye kalan tek şey .net de bir proje açıp Refresh’siz uygulamaları yazmaya başlamak.

Bunun için ilk olarak visual studio da yeni bir proje oluşturmak. Projeyi oluştururken dikkat etmemiz gereken en önemli husus Projeyi oluştururken “Atlas” Web Site Template’ i ile başlatmak.

Projemizi oluşturduktan sonra artık bir örnek ile atlasın nimetlerini görelim! Bunun için “Atlas” Web Site ile oluşturduğumuz projenin HTML kodlarını inceleyelim.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

<div>

</div>

</form>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<references>

</references>

<components>

</components>

</page>

</script>

</body>

</html>

Farklı olarak gördüğümüz gibi bir script menager eklenmiş bu bizin yazacağımız kodu kontrol edecek.

Dilerseniz artık örneğimize geçelim. İlk olarak sayfamıza bir adet datagrid ekleyelim.

Datagrid’in paging özelliğini açalım ve gridimizi biraz renklendirelim. Projemizde datagrid’in sayfaları içerinde gezinirken sayfamızın refresh etmeden geçtiğini göreceğiz. Tasarım zamanına döndüğümüzde sayfamıza bir adet ScriptMenager eklendiğini göreceksiniz.

Artık isterseniz datagridimizde görüntüleyeceğimiz kayıtları görüntüleyecek sub’ımızı yazalım.

Default.aspx.vb sayfası içerisine aşağıdaki kodları yazalım.

Imports System

Imports System.Data

Imports System.Data.SqlClient

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

KayitGetir()

End Sub

Private Sub KayitGetir()

Dim Cnn As New SqlConnection("Data Source=localhost; Database=northwind; uid=sa; pwd=")

Dim Da As New SqlDataAdapter("Select * from customers", Cnn)

Dim Ds As New DataSet

Da.Fill(Ds, "t")

GridView1.DataSource = Ds.Tables(0)

GridView1.DataBind()

End Sub

‘ Projemizde kayıtları görüntülemeyi tekrar tekrar yazmak yerine bir sub halinde yazdık.

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

GridView1.PageIndex = e.NewPageIndex

KayitGetir()

End Sub

End Class

Projemizi test etmek için dilerseniz projemizi başlatalım. Projemizi başlattığımızda sayfalar arasında geçiş yaparken sayfaların refresh ederek gidip geldiğini göreceksiniz.

Evet bizi rahatsız eden bu refresh’den kurtulmak için, artık sayfamızın html kısmına gerekli kodları yazalım ve refresh’siz dünyaya merhaba diyelim J Bunun için atlas’ın UpdatePanel özelliğinden yararlanacağız.

<atlas:UpdatePanel ID="Customers" runat="server" RenderMode="Inline">

Grid buraya gelecek

</ContentTemplate>

</atlas:UpdatePanel>

Default.aspx özelliğini aşağıdaki gibi düzenleyelim

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

<br />

<div>

<atlas:UpdatePanel ID="Customers" runat="server" RenderMode="Inline">

<ContentTemplate>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" BackColor="White"

BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Names="Verdana"

Font-Size="X-Small" GridLines="Vertical">

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

</div>

</form>

</references>

</components>

</page>

</script>

</body>

</html>

Evet artık her şey hazır, design tarafına dikkat ederseniz grid etrafında bir panel daha geldi. Son olarak projemizi çalıştıralım ve artık sayfamızın refresh etmeden kayıtları getirdiğini göreceğiz J

Umarım faydalı bir makale olmuştur makalenin devamında görüşmek üzere

Puan: