CSLA ile Web Projesi yapmak (Part 1)

Merhabalar bu makalede Rockford Lhotka'ın yazmış oldugu bir framework olan CSLA.NET ile bir web projesinin tamamını sizinle paylaşmaya çalışacağım. CSLA.NET ile ilgili herşeyi aslında http://www.lhotka.net/cslanet/ sitesinden temin edebilirsiniz. Gelelim asıl mimariye. Bu CSLA ile neler yapabiliriz hadi başlayalım.

Architecture 'un oluşturulması:

Distributed Architecture
Nesneye dayali programlama genis bir konu. Ve simdi hangi architecture kullansak diye bir soru sorsak, herkes kafasında farkli bir yapiyla cevap vermeye calisacaktir. Oluşturacagimiz yapi cercevesinde amacimiz bütün .net uygulamalari icin kullanabilecegimiz bir yapi olustumak olacaktir. Kodlamaya başlanmadan once oluşturulacak bu Physical ve Logical modeller bizim birlikte daha yararli ve hizli bir çözüm oluşturmamizi sagliyacaktir.

The 5-Layer Logical Architecture
Boyle bir architecture yaratilirken asil amac butun .net technolojilerinin ayni yapiyi kullanabilmesidir. Amacimiz Windows, Web ve Web Service interfaceleri icin desteklenen, mantikli, birlestirilmis bir nesneye- dayali yapi olusturmak olacaktir.

Presentation:
Aslinda ilk bakista Presentation layer ile UI layer birbirinin aynisi gibi gorunebilir, sonucta ikiside kullanıcılar icin Graphical User Interface dir. Browser kullaniciya bazi gorseller sunar ve kullanıcının girdigi degerleri toplar. Burada yazilmasi gereken kod output’u olusturmak yada girilen inputu toplamamaktır. Bu iki işlemde esasinda web server tarafinda yapilir, client kullanici bu yapilan işlemlerden bihaberdir. Elbette Javascript vb. client side çalisir. Ama guvenilir degildir. Presentation layer, UI layerden sadece fiziksel bir şekilde ayriliyor. Tam olmasa da kullanıcının gordugu ekranların olustugu kısım aslında bir nevi.

UI:
UI layer, kullanıcılarin isteklerini karsilamakla yukumlu bir katmandir.
Butun webforms, winForms, server- side operations vb.. bu katman icersinde gerceklerstirilir. Aslinda ham verinin işlenecegi, bir alt katman olan Business Logic Layer’a da gerekli veriler buradan yollanir.

Business Logic Layer (BLL):
Bu katman aslında olusturulacak application un iskeletini olusturuyor olacak. Bütün data dogrulama, business kurallari, çalistirma, isletme, bu kisimda gerceklestirilir.

Data Access Layer (DAL):
Data Access Layer ile data managment asındaki iletisim insert, update, remove operasyonlarina erişebilmektir. Aslında data access layer datayi yönetmez yada datayi saklamaz, gorevi sadece business layer ile database arasinda bir köprü saglamaktir.

Data Storage And Management :
Ve son katman, database serverlarin (SQL/Oracle…) ve web serviceler uzerinden ulasilabilen diger applicationlarin bulundugu kısımdır.

Yani kısacası kullanacagimiz logical architecture ve Framework design asagidaki gibi olusacaktir.

Biz projemiz icin kullanilacak mimariyi kısa hatlariyla tanimaya calistik. Ve şimdi bir web projesi icin bu mimariyi nasil uygulamamiz gerektigini asagidaki figurede daha detayli bir sekilde gorecegiz.





Web tabanli programlarda, en iyi performansi saglayabilmek icin phsical katlari en azami sayiya getirmemiz gerekir. Buna ragmen performansla birlirlikte, ölceklenebilirlik ve guvenliğinde en üst seviyede olmasi lazim. Presentation kısmı phsical olarak zaten clientin makinesi olacaği icin onu ayri bir katman olarak ayiralim, ama UI, Business Logic ve Data access layerları aynı makine ve ayni process de kosabilirler. Ve eger kucuk bir application olusturulacaksa. Database Managment Layer da ayni makineda tutulabilir. Eger daha Secure bir web configurasyonu yaratmak istiyorsak logical architecturemız asagidaki gibi olacaktir.

A.R.O.G

Cem Yılmaz'ın saçma sapan çalışmalarından bir tanesi daha hala vizyonda. GORA faciyasından sonra AROG da tarihteki en kötü yapımlar arasına girmeye hak kazanacak sanırım. Filme gülmek için gitmek isteyenler bir kez daha düşünsün bence, gülmekten çok film boyunca verdiginiz paraya aciyorsunuz ve hüzün icersinde bir iki saat geciriyorsunuz. Gelelim filmdeki animasyonlara; gerçekten başarılı sahneler var, yok değil ama sırf bu animasyonları gormek içinde bunca eziyet çekilmez diye düşünüyorum. Gitmenizi kesinlikle tafsiye etmem. Ama yinede izlemek isteyenlere iyi seyirler..

Madagaskar 2

2005 yılının olay yaratan animasyon filmi madagaskar ikinci ve daha eğlenceli devamıyla yeniden beyaz perdeye girdi. Filmi geçen hafta izleme imkanı buldum. Gelmiş geçmiş en iyi animasyon filimlerinden biri olan madagaskarın ikincisi, birinci filmin kaldığı yerden devam ediyor. Ilk filmde New York hayvanat bahçesi sakinleri Alex, Marty, Melman, Gloria, Maurice, penguenler kendilerini devasa ada Madagaskar sahillerine çıkmış bulurlar. İkinci filmde New York'lu kahramanlarımız geri dönmek için yere çakılmış eski bir uçağı ele alır ve tamir ederler. Yolculuğa başladıktan sonra uçak afrika adasında düşer ve Madagaskar'ın ikinci filmi başlamış olur.New York’taki hayvanat bahçesinde doğup büyümüş kahramanlarımız, Afrika macerasında hayatlarında ilk kez kendi cinslerinden hayvanlarla karşılaşacaklar.

Madagaskar 2 Film Kadrosu

Yönetmen	Eric Darnell, Tom McGrath
Senaryo	Etan Cohen
Oyuncular	Yekta Kopan, Sacha Baron Cohen, Ben Stiller, Chris Rock, Jada Pinkett Smith, David Schwimmer, Cedric the Entertainer , Andy Richter
Filmin Türü	Animasyon / Komedi / Macera
Orijinal Adı	Madagaskar 2
Yapımcı Firma	Mireille Soria
Yapım Yılı	2008, ABD
Resmi Sitesi	http://www.madagascar-themovie.com/
Dağıtıcı Firma	UIP Filmcilik
Vizyon Tarihi	28 Kasım 2008

ASP.Net Seçili yazının başına yada sonuna karakter ekleme

Kısa tanımı başlıkta aslında ne yapmak istediğimizin "Seçili yazının başına yada sonuna karakter ekleme". Geçen bir arkadaşın sorması uzerine yaptıgım küçük bir javascript ve html kodlarıyla halledilebilen bir olay. Peki neden kullanacağız bunu, orasını bende tam bilmiyorum ama sanırım online sozlüklerde filan oluyor bu tarz şeyler. Neyse gelelim kod yapısına şimdi bir aspx sayfası yaratıyoruz ve javascripti yazıyoruz. Script bize seçilmiş olan kelimeyi ve cursorun pozisyonunu veriyor, bizede yapmak istedigimiz işlemi buraya yazmak kalıyor. Umarım yardımcı olur hepinize iyi kodlamalar...

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">

<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)

textEl.caretPos = document.selection.createRange().duplicate();
}
function MakeBold (textEl) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =caretPos.text.charAt(caretPos.text.length) ==
' ' ?caretPos.text + ' ' : '<b>' + caretPos.text + '<b>';
}
}
function MakeBkz(textEl) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =caretPos.text.charAt(caretPos.text.length) ==
' ' ?caretPos.text + ' ' : 'bkz.' + caretPos.text;
}
}
</SCRIPT>
</HEAD>
<BODY>
<form id="form1" runat="server">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" runat="server"
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="storeCaret(this);"
id="aTextArea"
>Emre Akyürek
</TEXTAREA>
<BR>
<INPUT TYPE="button" VALUE="Bold" id="btnBold"
ONCLICK="MakeBold(this.form.aTextArea);">
<INPUT TYPE="button" VALUE="Bkz" id="btnBkz"
ONCLICK="MakeBkz(this.form.aTextArea);">
</form>
</BODY>
</HTML>

Aranılan kelimeyi highlight yapmak

Aslında arama yaparken hep karşımıza cıkar, aradığımız kelime bulunduğunda bize daha ilgi çekici birşekilde yansıtılması. İşte bu yazıda c# ve asp .net kullanarak bu işlevi nasıl gerçekleştirebiliriz ona bakacağız.
Başlangıç olarak bizim bulunan kelimenin formatının ne olacagına karar vermemiz gerekiyor ben dolgu olarak satrı üstüne siyah yazı şeçtim. Aşağıdaki css dosyasını hazırlıyoruz.

<style type="text/css">
.highlight
{text-decoration:none;
font-weight:bold;
color:black;
background:yellow;}
</style>

Tabiki bunu biraz sonra kullanacagiz ama elimizde bulunsun şimdilik. Şimdi projemizi oluşturmaya başlayalım. Yeni bir web projesi aciyoruz ve Default.aspx sayfamıza bir tane TextBox bir tane Button ve son olarak bir tane Label atıyoruz. Sayfamızın Head kısmına yukarda gördüğümüz css stiliniz yerleştiriyoruz. Page tagında Strict="true" Buffer="true" Explicit="true" Debug="false" şeklinde yazıyoruz. Sayfanın tam hali aşağıdaki gibi.

<%@ Page Language="C#" AutoEventWireup="true" Strict="true" Buffer="true" Explicit="true" Debug="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.highlight
{text-decoration:none;
font-weight:bold;
color:black;
background:yellow;}
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginheight="0" >
<H3>Kelime Ara</H3>
<BR />
<form id="Form1" runat="server" method="post">
<asp:TextBox id="txtSearch" runat="server"/>
<asp:Button id="btnSearch" Text="Ara" runat="server" onclick="btnSearch_Click" /><br><br>
<asp:Label id="lblText" runat="server" Visible="true"/>
</form>
</body>
</html>

Sayfamızın Design kısmı bukadar. Şimdi Codebehind da neler yapacağız ona bakalım. Bir regex sayesinde aranmak istenen kelimeyi bulduğumuz zaman başına yazdığımız style ile bir span tagı ekliyoruz işlem bu kadar.


void Page_Load(Object Source, EventArgs E)
{
lblText.Text = "Arama Yapılacak Metin";
}
public string Highlight(string Search_Str, string InputTxt)
{
Regex RegExp = new Regex(Search_Str.Replace(" ", "").Trim(), RegexOptions.IgnoreCase);
return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
}
public string ReplaceKeyWords(Match m)
{
return "<span
class=highlight>" + m.Value + "</span>";
}
protected void btnSearch_Click(object sender, EventArgs e)
{
lblText.Text = Highlight(txtSearch.Text, lblText.Text);
}

Silverlight Fish Eye Menu yapımı

Silverlight ile sonunda bir projede çalıştım. Daha onceden pek fırsat bulamamıstım silverlight ile birşeyler geliştirmeye ama bu projeden sonra sanırım daha içli dışlı olacağım gibi gorunuyor. Aslında yapılmak istenen şey gayet basit. Bir resim dizisi var mouse ile uzerine gelinen resimler ekrana yaklasiyor ve tıkladığınız zaman sizi ilgili sayfaya yonlendiriyor hepsi bu.
Öncelikle yeni bir silverlight application oluşturalim ve oluşturduğumuz solutionda yeni bir Silverlight User Control ekleyelim ve ismini FishEyeMenu.xaml olaraktan değiştirelim. ve aşağıdaki kodu Xaml kısmına ekleyelim.
<UserControl x:Class="SilverlightApplication.FishEyeMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550"
Height="100" >
<Canvas x:Name="LayoutRoot">
<Canvas.Background>
<ImageBrush ImageSource="../images/cas.jpg"/>
</Canvas.Background>
</Canvas>
</UserControl>

Şimdi projemizde bulunan Page.xaml dosyasını aşagıdaki gibi değiştiriyoruz.

<UserControl x:Class="SilverlightApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550" Height="100">
<Canvas x:Name="LayoutRoot"></Canvas>
</UserControl>

Şimdi sıra geldi geldi C# kodlarını yazmaya. Öncellikle Page.xaml.cs dosyasına gidiyoruz ve default constructor u aşağıdaki gibi değiştiriyoruz.

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
FishEyeMenu fishEyeMenu = new FishEyeMenu();
LayoutRoot.Children.Add(fishEyeMenu);
}
}

Ve düzenlememiz gereken son kısım elbette FishEyeMenu.xaml.cs, aslında butun olay burada gerceklestiriliyor. Şimdi aşağıdaki kodları yazıyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.Windows.Browser;
namespace SilverlightApplication
{
public partial class FishEyeMenu : UserControl
{
private static String[] IMAGES = {
"images/image1.png",
"images/image2.png",
"images/image3.png",
"images/image4.png",
"images/image5.png",
"images/image6.png",
"images/image7.png" };

private static String[] URLs = {
"Customer.aspx","BusinessPartner.aspx", "Catalog.aspx","ShippingOrderList.aspx","User.aspx",
"InProcessOrders.aspx",
"MainPage.aspx" };

private static double MARGIN = 15;
private static double IMAGE_WIDTH = 48;
private static double IMAGE_HEIGHT = 48;
private static double MAX_SCALE = 3;
private static double MULTIPLIER = 60;
private List<Image> _images = new List<Image>();

public FishEyeMenu()

{
InitializeComponent();
addImages();
this.MouseMove += new MouseEventHandler(FishEyeMenu_MouseMove);
this.MouseLeave += new MouseEventHandler(FishEyeMenu_MouseLeave);
this.MouseLeftButtonDown += new MouseButtonEventHandler(FishEyeMenu_MouseLeftButtonDown);
}

private void FishEyeMenu_MouseLeave(object sender, MouseEventArgs e)

{
this.Cursor = Cursors.Arrow;
}

private void FishEyeMenu_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{
try
{
Image myImage = (Image)e.OriginalSource;
string currentUrl = HtmlPage.Document.DocumentUri.ToString();
int index = currentUrl.LastIndexOf("/");
String url = currentUrl.Substring(0, index + 1);
url = url + myImage.Tag.ToString();
HtmlPage.Window.Navigate(new Uri(url));
}
catch
{}
}
void FishEyeMenu_MouseMove(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Hand;
for(int i = 0 ; i < _images.Count; i++){
Image image = _images[i];
double imageScale = MAX_SCALE -
Math.Min(MAX_SCALE - 1,
Math.Abs(e.GetPosition(this).X - ((double)
image.GetValue(Canvas.LeftProperty) +
image.Width / 2)) / MULTIPLIER);
resizeImage(image, IMAGE_WIDTH * imageScale, IMAGE_HEIGHT * imageScale,
i, IMAGES.Length);
image.SetValue(Canvas.ZIndexProperty,
(int) Math.Round(IMAGE_WIDTH * imageScale));
}
}
private void addImages(){
for(int i = 0; i < IMAGES.Length; i++){
string url = IMAGES[i];

Image image = new Image();
image.Source = new BitmapImage(new Uri(url, UriKind.Relative));
image.Tag = URLs[i];
resizeImage(image, IMAGE_WIDTH, IMAGE_HEIGHT, i, IMAGES.Length);
LayoutRoot.Children.Add(image);
_images.Add(image);
}

}

private void resizeImage(Image image, double imageWidth, double imageHeight, int index, int total){
image.Width = imageWidth;
image.Height = imageHeight;
image.SetValue(Canvas.TopProperty, Height / 2 - image.Height / 2);
image.SetValue(Canvas.LeftProperty, Width / 2 + (index - (total -1) / 2) * (MARGIN + IMAGE_WIDTH) - image.Width / 2);
}

}

}

Bu işlemi tamamladıktan sonra fish eye menümüz hazırlanmış oluyor. Kodların tektek ne işe yaradıklarını anlatmadım ama hangi kodun ne işe yaradığını bilmek isterseniz bana mail atın açıklamaya çalışırım. Umarım yardımcı olur hepinize iyi kodlamalar.