Devexpress – AspxCloudControl Örnek

Posted: 05 Mayıs 2011 in DevExpress

03.05

Devexpress AspxCloudControl u elimizde hazır bulunan bir cloud datasını ekrana basmak için kullandığımız bir devex kontrolüdür.

Örnekte bir blog sitesindeki tag leri aspx cloud control ü kullanarak nasıl ekrana çıkartacağımız gösterilmiştir.
İlk olarak Visual Studio yu açarak, Yeni bir Web Project oluşturuyoruz. Proje içinde; öncelikle Tag adında bir class oluşturup Name,DisplayName,Count adında üç property ekliyoruz.

Sonra default.aspx içerisine devexpress CloudControl u sürükleyip bırakıyoruz. Default.aspx.cs içerisine gelip, Yeni bir tag tipinde generic list oluşturup, içine tag elemanlarını ekliyoruz. Bu elemanların count propertylerinin birbirinden farklı olması cloud controlün görünümünü etkileyen asıl unsurdur. Daha sonra CloudControl ün TextField alanını “DisplayName” , NameField alanını “Name”, NavigateUrlField alanını “Name” , NavigateUrlFormatString alanını  “http://www.yilmazyavuz.com/yyblog/index.php/tag/{0}/” , ValueField alanını “Count” şeklinde atıyoruz. Burdaki alanlardan önemli olan TextField , ValueField ve NavigateUrlField alanları bu alanlar :

TextField : Önyüzde gösterilecek olan yazı,
ValueField: Önyüzde gösterilecek olan yazıyı boyutlandırmak için kullanılacak değer.
NavigateUrlField : Önyüzde gösterilecek olan elemanın gideceği adres yada NavigateUrlFormatString de belirtilen stringin içerisine yerleştirilecek değer.
NavigateUrlFormatString : içinde sadece {0} alanının NavigateUrlField değeriyle doldurulacağı string.Format yazımı ile aynı olan değer.

Son olarak oluşturduğumuz generic tag  listesini aspxCloudControl ün DataSource özelliğine atıyoruz, ve databind methodunu çağırıyoruz.

Böylece nurtopu gibi bir tag cloud umuz olmuş oluyor .

Örnekte anlatılanların koda dökülmüş hali aşağıdadır.

default.aspx :

01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Blog.DevexTagCloud._Default" %>
02.
03.<%@ Register Assembly="DevExpress.Web.v9.1, Version=9.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
04.Namespace="DevExpress.Web.ASPxCloudControl" TagPrefix="dxcc" %>
05.
06.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
07.
08.<html xmlns="http://www.w3.org/1999/xhtml" >
09.<head runat="server">
10.<title></title>
11.</head>
12.<body>
13.<form id="form1" runat="server">
14.<div>
15.<dxcc:ASPxCloudControl ID="ASPxCloudControl1" runat="server">
16.</dxcc:ASPxCloudControl>
17.</div>
18.</form>
19.</body>
20.</html>

default.aspx.cs :

01.using System;
02.using System.Collections.Generic;
03.
04.namespace Blog.DevexTagCloud
05.{
06.public partial class _Default : System.Web.UI.Page
07.{
08.protected void Page_Load(object sender, EventArgs e)
09.{
10.List<Tag> myTags = new List<Tag>(10);
11.myTags.Add(new Tag("DevExpress",20));
12.myTags.Add(new Tag("Csharp",25));
13.myTags.Add(new Tag("Asp.Net",15));
14.myTags.Add(new Tag("Mono",5));
15.myTags.Add(new Tag("Objective-C",2));
16.myTags.Add(new Tag("Telerik",1));
17.myTags.Add(new Tag("Wcf",2));
18.myTags.Add(new Tag("TXTextControl",0));
19.
20.ASPxCloudControl1.NameField = "Name";
21.ASPxCloudControl1.TextField = "DisplayName";
22.ASPxCloudControl1.ValueField= "Count";
23.ASPxCloudControl1.NavigateUrlField = "Name";
24.ASPxCloudControl1.NavigateUrlFormatString = "http://www.yilmazyavuz.com/yyblog/index.php/tag/{0}/";
25.
26.ASPxCloudControl1.DataSource = myTags;
27.ASPxCloudControl1.DataBind();
28.}
29.}
30.}

Tag.cs :

01.namespace Blog.DevexTagCloud
02.{
03.public class Tag
04.{
05.public Tag(string name, int count)
06.{
07.DisplayName = name;
08.Name = name.ToLower();
09.Count = count;
10.}
11.
12.public int Count { get; set; }
13.public string DisplayName { get; set; }
14.public string Name { get; set; }
15.}
16.}

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s