Makale Özeti

Bu makalemde genellikle Content Management uygulamalarında kullanılması gereken ve ihtiyaç duyulan bir web RichTextBox bileşeninin nasıl yazılacağı üzerine tartışacağız.

Makale

         Merhabalar,

         Bu makalemde genellikle Content Management uygulamalarında kullanılması gereken ve ihtiyaç duyulan bir web RichTextBox bileşeninin nasıl yazılacağı üzerine tartışacağız.

         Bu tarz bir bileşenler pahalı component setlerinde olabildiği gibi FreeTextBox gibi bedava olarakda dağıtılabiliyor.

         Kullanıcının üzerinde değişiklik yapabileceği bir kontrol oluşturmak için CONTENTEDITABLE="true" özelliğini content taşıyabilen web nesnelerine eklemeniz yeterlidir. Örnek olarak div ve body i gösterebiliriz. Biz bu uygulamamızda div nesnesine ekleyeceğiz. Neneye bu property'i ekledikten sonra nesne içinde bulunan editable content i değiştirebilmek için bazı javascript fonksiyonlarına gerek duyacağız. Bu fonksiyonlar ve yaptıkları işler aşağıdaki listede yer almaktadır.

         
callFormatting('bold') Seçili text'i bold yapmak için kullanılacak
callFormatting('italic') Seçili text'i yatık yapmak için kullanılacak
callFormatting('underline') Seçili text'i alt çizgili yapmak için kullanılacak
callFormatting('justifyleft') Seçili text'i sola yaslamak için kullanılacak
callFormatting('justifycenter') Seçili text'i ortalamak için kullanılacak
callFormatting('justifyright') Seçili text'i sağa yaslamak için kullanılacak
clearDocument() Dökümanı temizlemek için kullanılacak
callFormatting('open') Döküman açmak için için kullanılacak
callFormatting('saveas') Dökümanı kaydetmek için kullanılacak
callFormatting('cut') Seçili text'i kesmek için kullanılacak
callFormatting('copy') Seçili text'i kopyalamak için kullanılacak
callFormatting('paste') Seçili text'i yapıştırmak için kullanılacak
callFormatting('undo') Seçili text'i geri almak için kullanılacak
callFormatting('redo') Seçili text'i ileri almak için kullanılacak
callFormatting('CreateLink') Seçili text'i bir adrese linklemek için kullanılacak
callFormatting('UnLink') Seçili text'in linkini kaldırmak için kullanılacak
callFormatting('insertOrderedList') Seçili text'i sıralı listeye eklemek için kullanılacak
callFormatting('InsertUnorderedList') Seçili text'i listeye eklemek için kullanılacak
callFormatting('indent') Seçili text'i içeri girmek için kullanılacak
callFormatting('outdent') Seçili text'i dışarı çekmek için kullanılacak
function changeFont() Seçili text'in fontunu değiştirmek için kullanılacak
changeFontSize() Seçili text'in boyutunu değiştirmek için kullanılacak
changeFontColor() Seçili text'in fontunun rengini değiştirmek için kullanılacak
changeBackColor() Seçili text'in arkaplan rengini değiştirmek için kullanılacak
insertImage() Seçili text'e resim eklemek için kullanılacak
         Şimdi ise çağıracağımız bu metodların içeriklerinin nasıl yazıldığına bakalım

            function callFormatting(formatstring)
            {
                        document.execCommand(formatstring);
                        return  false;
            }
            function clearDocument()
            {
                        oEditor.innerText='';
                        return  false;
            }
            function changeFont()
            {
                        document.execCommand("FontName", false, document.getElementById('slFont').value));
                        return  false;
            }
            function changeFontSize()
            {
                        document.execCommand("FontSize", false, document.getElementById('slFontSize').value));
                        return  false;
            }
            function changeFontColor()
            {
                        document.execCommand("ForeColor", false, document.getElementById('slFontColor').value));
                        return  false;
            }
            function changeBackColor()
            {
                        document.execCommand("BackColor", false, document.getElementById('slBackColor').value);
                        return  false;
            }
            function insertImage()
            {
                        oEditor.focus();
                        oEditor.document.execCommand("InsertImage",false,document.getElementById('insertImageCtrl').value);
                        return  false;
            }


         Gördüğünüz gibi burada document ın execCommand metodunu kullanarak işlemlerimizi yaptırıyoruz. Bizim için bu metod hayati önem taşıyor. Şidiye kadar bir ContentEditabl nesnenin nasıl oluşturulacağını ve nasıl değiştirileceğini gördük. Şimdi ise isterseniz birazdaha programatik atarafa bunu nasıl yapableceğimize bakalım.

Yan taraftaki ClassDiagram'da gözüktüğü gibi Button properties nesnemiz oluşturulacak olan buttonların propertylerini taşımaktadır. Bu propertyler resmin bulunduğu url ve buttonun sistemde gözüküp gözükmeyeceği bilgisidir. Buttons nesnesi ise Tüm buttonlarımızı taşımaktadır tüm buttonlarımız bir property olarak button nesnesini refere etmektedir. Buttons nesnesi ise RTB(RichtextBox) nesnemizde bir property olarak bulunmaktadır.

Şimdi isterseniz ButtonProperties nesnesini inceleyelim.
 
Imports System.ComponentModel
<AttributeUsage(AttributeTargets.Property)> _
Public Class ButtonProperties
    Private mVisible As Boolean
    Private mImageUrl As String
    <NotifyParentPropertyAttribute(True)> _
    Public Property Visible() As Boolean
        Get
            Return mVisible
        End Get
        Set(ByVal Value As Boolean)
            mVisible = Value
        End Set
    End Property
    <NotifyParentPropertyAttribute(True)> _
    Public Property ImageUrl() As String
        Get
            Return mImageUrl
        End Get
        Set(ByVal Value As String)
            mImageUrl = Value
        End Set
    End Property
    Public Sub New(ByRef pImageUrl As String, ByRef pVisible As Boolean)
        mVisible = pVisible
        mImageUrl = pImageUrl
    End Sub
    Public Sub New()
        mVisible = False
        mImageUrl = ""
    End Sub
End Class

          Gördüğünüz gibi yukarıda sadece butonun görünür olup olmadığı bilgisi ve resim yolu tutulmaktadır. Şimdi ise Buttons nesnesini inceleyelim. Bu classda ise nesnemizde bulunacak tüm buttonlar peoperty olarak sunulmaktadır.
 

Private mBold As ButtonProperties = New ButtonProperties("images/bold.gif", True)
<TypeConverter(GetType(ExpandableObjectConverter)), NotifyParentPropertyAttribute(True)> _

    Public Property Bold() As ButtonProperties
        Get
            Return mBold
        End Get
        Set(ByVal Value As ButtonProperties)
            mBold = Value
        End Set
    End Property
         Yukarıda sadece bir örneği verilen propertyden kontrolümüzde bulunacak her button için oluşturulur.

         RichTextBox bileşenini yazmaya başlayalım bu bileşenimizde bulunacak propertyler ve görevleri aşağıda listelenmiştir.

AccessDirectoy Resimlerin okunacağı klasörün sunucudaki adresi bu property sayesinde belirlenir.
Buttons Buttonlarımızı tuttuğumuz property ToolBar'ımızın bir yansımasıdır.
InnerHTML Editor'un içinde yeralacak olan content'in kodunun saklandığı property
ToolBarBackground Buttonların bulunduğu ToolBar'ın arka plan renginin belirlendiği property
ToolBarBorderColor Buttonların bulunduğu ToolBar'ın çizgi renginin belirlendiği property
ToolBarBorderWidth Buttonların bulunduğu Toolbar'ın çizgi kalınlığının belirlendiği property
UploadDirectory Kontrolün içindeki resimlerin yükleneceği sunucu klasörünün belirlendiği property
UploadImagesAutomaticly Kontrolün içine eklenen resimlerin sunucya otomatik yüklenip yüklenmeyeceğinin belirlendiği property

         Bu kısımdan sonra ilk yazılacak kod sayfa içinde bulunacak olan JavaScriptlerin tutulduğu javascriptBuilder metodudur. Bu metod bize sayfada yer alması gereken javascript kodlarını döndürecektir. DahaSonrasında ise WebControl nesnesinin Render metodunu ezerek kişiselleştiriyoruz. Bu metodun mantığını inceleyecek olursak;
 

 
    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        Dim strBuilderMain As System.Text.StringBuilder = New System.Text.StringBuilder
 
        Me.Page.RegisterHiddenField("editorHtml", "")
        Me.Page.RegisterHiddenField("editorText", "")
 
        Dim lt As LiteralControl
 
        lt = New LiteralControl(JavascriptBuilder)
        lt.RenderControl(writer)
 
        lt = New LiteralControl("<table bordercolor=" & Me.BorderColor.Name & " border=" & Me.BorderWidth.ToString & " cellspacing=0 cellpadding=0 width=""" & Me.Width.ToString.Replace("px", "") & """><tr><td bgColor=""" & Me.mToolBarBackroundColor.Name & """ border=""" & Me.mToolBarBorderWidth.ToString & """>")
        lt.RenderControl(writer)
 
        If mButtons.Bold.Visible Then
            lt = New LiteralControl("<input type=""image"" src=""" & mButtons.Bold.ImageUrl & """ onclick="" return callFormatting('bold')"">" & vbNewLine)
            lt.RenderControl(writer)
        End If
          Render metodunda  kontrolümüzün içine yazılan content'in html ve text değerlerinin saklanacağı hidden field ları sayfaya register ediyoruz. Daha sonrasında ise toolbarın bulunacağı table'i oluşturuyor ve daha sonra Visible property'si true olan tüm kontroller LiteralControl olarak oluşturuluyor. Bu kod her button için tekrarladığından bu kısımda sadece ilk kısmı yazılmıştır. Kodlardan tamamına bakabilirsiniz.
 
strBuilder = New System.Text.StringBuilder
        strBuilder.Append("<div id=""oEditor"" style=""OVERFLOW: auto"" onblur=""editorHtml.value=oEditor.innerHTML;editorText.value=oEditor.innerText"" name=""oEditor"" CONTENTEDITABLE=""true"" ")
        strBuilder.Append("style=""")
        strBuilder.Append("BORDER-RIGHT:")
        strBuilder.Append(Me.BorderColor.Name)
        strBuilder.Append(" ")
        strBuilder.Append(Me.BorderStyle.ToString)
        strBuilder.Append(";")
        strBuilder.Append("BORDER-LEFT:")
        strBuilder.Append(Me.BorderColor.Name)
        strBuilder.Append(" ")
        strBuilder.Append(Me.BorderStyle.ToString)
        strBuilder.Append(";")
        strBuilder.Append("BORDER-TOP:")
        strBuilder.Append(Me.BorderColor.Name)
        strBuilder.Append(" ")
        strBuilder.Append(Me.BorderStyle.ToString)
        strBuilder.Append(";")
        strBuilder.Append("BORDER-BOTTOM:")
        strBuilder.Append(Me.BorderColor.Name)
        strBuilder.Append(" ")
        strBuilder.Append(Me.BorderStyle.ToString)
        strBuilder.Append(";")
        strBuilder.Append("WIDTH:")
        strBuilder.Append(Me.Width)
        strBuilder.Append(";")
        strBuilder.Append("COLOR:")
        strBuilder.Append(Me.ForeColor.Name)
        strBuilder.Append(";")
        strBuilder.Append("HEIGHT:")
        strBuilder.Append(Me.Height)
        strBuilder.Append(";")
        strBuilder.Append("BACKGROUND-COLOR:")
        strBuilder.Append(Me.BackColor.Name)
        strBuilder.Append(""">")
        strBuilder.Append(Me.mInnerHTML)
        strBuilder.Append("</div>")
 
        lt = New LiteralControl(strBuilder.ToString)
        lt.RenderControl(writer)
          Bu kısımda kontrolümüzün content'inin yazılacağı kısmı oluşturuyoruz ve focus'u kaybettiğinde biraz önce oluşturduğumuz hidden field'lara değerleri atamak için onblur eventına kodumuzu yazıyoruz. Tabiiki ContentEditable'ı unutmuyoruz.
 
      Public Function Text() As String
        Return Me.Page.Request.Form("editorText")
    End Function
    Public Function Html() As String
        Dim htmlText As String = Me.Page.Request.Form("editorHtml")
        If Me.mUploadImagesAutomaticly AndAlso Me.Page.Request.Files.Count > 0 AndAlso Me.Page.Request.Files(0).ContentLength > 0 Then
            Dim path As String
            Dim fl As String
            path = mUploadDirectory
            fl = Me.Page.Request.Files(0).FileName
 
            fl = Split(fl, "\")(UBound(Split(fl, "\")))
            Me.Page.Request.Files(0).SaveAs(Me.Page.Server.MapPath(path & "\" & fl))
            htmlText = htmlText.Replace(Me.Page.Request.Files(0).FileName, Me.mAccessDirectory & "/" & fl)
 
        End If
        Return htmlText
    End Function
         Bu metodlarda ise biraz önce oluşturduğumuz hidden field'lardan post olan dataları okuyor ve geriye string olarak döndürüyoruz. Ve Html metodunda resimlerı sunucuda belirtilmiş adrese kaydediyoruz.

         Bu makalenin sonucundaki bileşeni bir sayfada kullanımında ise aşağıdaki şekilde bir görüntü ortaya çıkmaktadır.



          Bu makaleninde sonuna geldik ve bileşenimizi yazdık.Umarım faydalı olmuştur.

oztamer@hotmail.com
tamer.oz@yazgelistir.com
oztamer@hotmail.com
Ornek Kodlar