Mürekkep Blogu Web Örneği

Mürekkep Blogu örnek uygulaması, mürekkep oluşturma yeteneğine sahip ve Microsoft Internet Explorer'da bu denetimi barındıran yönetilen bir UserControl sınıfının nasıl oluşturulacağını gösterir. Örnek ayrıca HTTP kullanarak bir ağda mürekkep verileri göndermeye ve bir sunucuda mürekkep kalıcı hale getirmek için tek bir teknik gösterir.

Genel bakış

Mürekkep Blogu örneği, mürekkep özellikli bir Web günlüğü oluşturur. InkBlogWeb ASP.NET bir uygulamadır. Mürekkep girişi, ASP.NET sayfasından başvuruda bulunan bir kullanıcı denetimi aracılığıyla gerçekleştirilir.

Kullanıcı denetimi, Tablet PC platform bileşenlerinin istemci bilgisayarda yüklü olup olmadığını algılar. Bu durumda, kullanıcı denetimi kullanıcıya Web sayfasında iki mürekkep etkin alan sunar: biri blog girdisi için bir başlık oluşturmak ve diğeri girişin gövdesi için. Tablet PC Platformu bileşenleri yüklü değilse, kullanıcıya girişin başlığı ve gövdesi için standart bir metin kutusu denetimi verilir.

Kullanıcı girdiyi oluşturmayı tamamladığında, blog ekle düğmesine tıklar ve gönderi depolama için Web sunucusuna gönderilir. Uygulama sunucuda başlık metnini ve gönderme tarihini ve grafik değişim biçimi (GIF) dosyasına başvuruyu kaydeder. Sunucuya da kaydedilen GIF dosyası, gövdeden gelen mürekkep verilerini güçlendirilmiş bir GIF dosyasında içerir. Daha fazla bilgi için geliştirilmiş GIF biçimi hakkında bkz. HTML'de Mürekkep Depolama.

InkBlog çözümünde iki proje vardır: InkBlogControls projesi ve InkBlogWeb projesi.

InkBlogControls Projesi

InkBlogControls projesi, Web sayfasında mürekkep oluşturmayı etkinleştiren kullanıcı denetiminin kodunu içeren bir UserControl projesidir. Bu denetimin kodu olan InkArea denetimi InkArea.cs dosyasındadır.

InkArea Sınıfı, UserControl sınıfından devralır. InkArea kontrolü için oluşturucu, CreateInkCollectionSurfaceadlı bir yardımcı yöntemi çağırır.

public InkArea()
{
    // Standard template code

    try
    {
        inputArea = CreateInkCollectionSurface();
    }
    catch (FileNotFoundException)
    { 
        inputArea = new TextBox();
        ((TextBox)inputArea).Multiline = true;
    }

    inputArea.Size = this.Size;

    // Add the control used for collecting blog input
    this.Controls.Add(inputArea);
}

CreateInkCollectionSurface yöntemi, InkCollector sınıfının bir örneğini oluşturmaya çalışarak Tablet PC mürekkep oluşturma bileşenlerinin istemcide kullanılabilir olup olmadığını belirler. CreateInkCollectionSurface yöntemine yapılan çağrı başarılı olursa, yöntem denetim olarak bir Panel nesnesi döndürür.

protected Control CreateInkCollectionSurface()
{
    try
    {
        Panel inkPanel = new Panel();
        inkPanel.BorderStyle = BorderStyle.Fixed3D;
        inkCollector = new InkCollector(inkPanel);
        ((InkCollector)inkCollector).Enabled = true;
        return inkPanel;
    }
    catch
    {
        throw;
    }
}

Mürekkep oluşturma platformu dosyaları bulunamadığından oluşturucu başarısız olursa, InputArea denetimi InkCollector denetimi yerine TextBox denetimi olarak oluşturulur. Oluşturucu daha sonra denetimi üst kullanıcı denetiminin boyutuna boyutlandırıp üst kullanıcının Denetimler koleksiyonuna ekler.

InkArea denetim sınıfı üç ilginç genel özellik uygular: InkData, TextData ve WebEnabled.

InkData özelliği salt okunurdur ve istemci mürekkeplemeyi destekliyorsa, seri hale getirilmiş mürekkep verilerine erişim sağlar. İstemci mürekkep oluşturma özelliğini desteklemiyorsa, InkData özelliği boş bir dize alır. InkData özelliği, istemcinin mürekkep oluşturmayı desteklenip desteklemediğini belirlemek için SerializeInkData yardımcı yöntemini çağırır.

protected String SerializeInkData()
{
    Debug.Assert(InkEnabled, null, "Client must be ink-enabled");

    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    // Serialize the ink
    if (ink.Strokes.Count > 0) 
    {
        byte[] inkDataBytes = ink.Save(PersistenceFormat.Gif);
        return Convert.ToBase64String(inkDataBytes);
    }

    // Default to returning the empty string.
    return String.Empty;
}

SerializeInkData yönteminde, Ink nesnesi elde edilirken InkCollector'a dönüştürme işlemi gereklidir çünkü inputAreaDenetimolarak bildirilir. Mürekkep nesnesi herhangi bir vuruş içeriyorsa, mürekkep verileri inkDataBytes bayt dizisine GIF olarak kaydedilir (PersistenceFormat numaralandırma değeri kullanılarak belirtilir). Yöntemi daha sonra bayt dizisini Base64 ile kodlanmış bir dizeye dönüştürür ve bu dizeyi döndürür.

İstemcinin tanıma işlemini gerçekleştirebildiği varsayıldığında, TextData özelliği, mürekkep verilerini bir el yazısı tanıyıcıya aktarıp işleyerek elde edilen RecognitionResult nesnesini döndürür. İstemci mürekkep farkında değilse, metin kutusu içeriği aşağıdaki kodda gösterildiği gibi döndürülür.

public string TextData
{
    get
    {
        if (this.WebEnabled) 
        {
            return RecognizeInkData();
        }
        else
        {
            return ((TextBox)inputArea).Text;
        }
    }
}

TextData özelliği, tanımayı gerçekleştirmek için aşağıdaki kodda gösterilen RecognizeInkDatayardımcı yöntemini çağırır. Tanıma altyapıları sistemde mevcut olduğunda, RecognizeInkData yöntemi RecognitionResult nesnesinin TopString özelliğini içeren bir dize döndürür. Aksi takdirde boş bir string döndürür.

protected String RecognizeInkData()
{
    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    if (ink.Strokes.Count > 0) 
    {

        // Attempt to create a recognition context and use it to
        // retrieve the top alternate.
        try 
        {
            RecognizerContext recognizerContext = new RecognizerContext();
            RecognitionStatus recognitionStatus;
            recognizerContext.Strokes = ink.Strokes;
            RecognitionResult recognitionResult = recognizerContext.Recognize(out recognitionStatus);
            if (recognitionStatus == RecognitionStatus.NoError) && ( null != recognitionResult) )
            {
                return recognitionResult.TopString;
            }
        }
        catch (Exception)
        {
            // An exception will occur if the client does not have
            // any handwriting recognizers installed on their system.
            // In this case, we default to returning an empty string. 
        }
    }

    return String.Empty;
}

InkEnabled özelliği, istemci makinede mürekkep kullanımının desteklenip desteklenmediğini gösteren salt okunur bir Boole değeridir.

InkArea denetim sınıfının bir diğer önemli genel üyesi de DisposeResources yöntemidir. Bu yöntem, kullanıcı denetimi tarafından yararlanılan tüm kaynakların temizlendiğinden emin olmak için dahili olarak Dispose yöntemini çağırır. InkArea denetimini kullanan tüm uygulamalar, denetimi kullanmayı bitirdiğinde DisposeResources yöntemini çağırmalıdır.

InkBlogWeb Projesi

InkBlogWeb projesi, blog işlevselliği sağlamak için InkArea denetimine başvuran bir Web Kurulumu dağıtım projesidir. Web Kurulumu dağıtım projeleri hakkında daha fazla bilgi için bkz. Web Kurulumu Projesi'nin Dağıtımı.

Blog örneğini uygulayan iki .aspx dosyası vardır: Default.aspx ve AddBlog.aspx. Default.aspx, InkBlogWeb uygulamasının varsayılan sayfasıdır. Bu sayfanın arkasındaki kod dosyası Default.aspx.cs. Bu sayfa, yeni blog giriş formunu içeren sayfaya bir bağlantı sağlar ve mevcut blog girdilerini görüntüler. Bu işlem, AddBlog.aspx adlı yeni blog giriş formu sayfasının aşağıdaki incelemesinden sonra açıklanmaktadır.

AddBlog.aspx ve arka planda kod dosyası olan AddBlog.aspx.cs, yeni blog girdileri oluşturmaya yönelik mantık ve kullanıcı arabirimi kodunu içerir. AddBlox.aspx, aşağıdaki örnekte gösterildiği gibi HTML OBJECT öğesini kullanarak InkBlogControls projesinde oluşturulan InkArea denetim sınıfının iki örneğine başvurur. Örneğin birinde inkBlogTitle id özniteliği, diğerinde de inkBlogBody kimlik özniteliği vardır.

<OBJECT id="inkBlogTitle" classid="InkBlogControls.dll#InkBlog.InkArea" width="400" height="48" VIEWASTEXT>``</OBJECT>``<br/>``<OBJECT id="inkBlogBody" classid="InkBlogControls.dll#InkBlog.InkArea" width="400" height="296" VIEWASTEXT>``</OBJECT>

InkBlogControls.dll derlemesi, başvuruda bulunan .aspx sayfasıyla aynı dizinde bulunmalıdır. Web Kurulumu dağıtım projesi, bu durumun söz konusu olmasını sağlar; bu, Dağıtım Projesi'nde "InkBlogControls'ten birincil çıktı" öğesinin bulunmasıyla doğrulanmaktadır.

Başlık denetimi, başlık için tek bir mürekkep satırının girişini kolaylaştırmak için yalnızca 48 piksel yüksekliğindedir. Gövde kontrolü, birden çok satırdan oluşan daha büyük blog girişleri veya belki de çizimler için alan sağlamak amacıyla 296 piksel yüksekliğindedir.

InkArea denetimleri, standart HTML BUTTON öğesinin onclick olay işleyicisi aracılığıyla bir istemci taraflı betik işlevi olan AddBlog'a bağlanır.

<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>

Sayfada üç gizli INPUT öğesi içeren bir HTML formu da vardır: BlogTitleText, BlogBodyText ve BlogBodyInkData. Bu form, blog giriş verilerini sunucuya geri göndermek için kullanılır. AddBlog.aspx, form için tanımlanan geri gönderme işleyicisidir.

Microsoft JScript'te yazılan AddBlog işlevi<entity type="reg"/>- InkArea denetimlerinden blog verilerini ayıklar ve sonuçları sunucuya gönderir.

function AddBlog() 
{
    // Extract the blog's title data as ink and text
    form.BlogTitleText.value  = inkBlogTitle.TextData;
    
    // Extract the blog's body data as ink and text
    form.BlogBodyText.value = inkBlogBody.TextData;
    form.BlogBodyInkData.value = inkBlogBody.InkData;   

    form.submit();
}

Veriler sunucuya ulaştığında, AddBlog.aspx.cs içindeki kod httpRequest nesnesinin Form özelliğinin herhangi bir veri içerip içermediğini görmek için Page_Load olay işleyicisini denetler. Bu durumda, geçerli sistem saatini temel alan bir dosya adı oluşturur, form verilerini üç dize değişkenine yerleştirir ve aşağıdaki kodda gösterildiği gibi verileri bir HTML dosyasına ve varsa mürekkep verilerini içeren bir GIF dosyasına yazar.

if ( (String.Empty != inkBody) )
{           
    // Use helper method to create a GIF image file from ink data 
    CreateGif(imagePath, fileName, inkBody);
    
    // Create an HTML fragment to reference the image file
    content = "<img src=\"Blogs/Images/" + fileName + ".gif\"></img>";
}                
else 
{
    // If no ink data is available create an HTML fragment that contains
    // the blog's text directly.
    content = "<P>" + textBody + "</P>";
}

// Use helper method to create the blog web page on the server
CreateHtm(blogPath, fileName, blogTitle, content);

Yardımcı yöntemler hakkında daha fazla ayrıntı için örnek kaynak koduna bakın.

Örneği Çalıştırma

Tablet PC SDK 1.7, Mürekkep Blogu Web örneğini varsayılan olarak yükler. Örneği çalıştırmak için Internet Explorer'da https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. konumuna gidin. Windows Server 2003 çalıştırıyorsanız, bilgisayarınızın adını "localhost" olarak değiştirin.

Ayrıca projeyi Microsoft Visual Studio<entity type="reg"/> .NET'te açıp oluşturarak ve ardından IIS çalıştıran ayrı bir bilgisayara dağıtarak da çalıştırabilirsiniz.

Örnekle ilgili sorunları giderme

Örneği çalıştırırken veya barındırırken zorluk yaratabilecek üç alan izinler ve tanımadır.

İzinler

Örnek, yeni bir blog girdisi oluşturmaya çalışan hesap için sanal kök klasör içinde yazma izinleri gerektirir. Varsayılan olarak, Tablet PC SDK 1.7'de sağlanan örneğin derlenmiş sürümü bu gereksinimi karşılayacak şekilde ayarlanmış doğru izinlere sahiptir.

Sağlanan Web Kurulumu dağıtım projesini kullanarak örneği derleyip dağıtırsanız, %MACHINENAME%\Users grubuna InkBlogWeb sanal kökü tarafından işaret edilen dosya sistemi klasörüne yazma erişimi vermeniz gerekir (örneğin, C:\InetPub\WWWRoot\InkBlogWeb). Kullanıcılar grubu IIS tarafından kullanılan Anonim hesabı içerir ve böylece ASP.NET uygulamasının yeni blog girdilerini dosya sistemine yazmasına olanak sağlar. Alternatif olarak sanal köke anonim erişimi kaldırabilir ve kimlik doğrulamasını zorlayabilirsiniz.

Tanıma

Blog başlığındaki mürekkepleri tanımak için el yazısı tanıyıcıların yüklenmesi gerekir. InkBlog uygulamasına Windows XP Tablet PC Edition dışında bir işletim sistemi olan ancak Tablet PC SDK 1.7 yüklü olan bir bilgisayardan erişirseniz, InkArea denetimlerinde mürekkeple yazabilirsiniz, ancak tanıma altyapıları mevcut olmaz ve blog girdileriniz için başlık gösterilmez. Ancak gövdedeki mürekkep içeriği hala görünür durumda.

Makine Yapılandırması

ASP.NET ve .NET Framework'ü bir bilgisayara yüklediyseniz ve ardından IIS'yi kaldırıp yeniden yüklerseniz, betik eşlemeleri bozulacak ve ASP.NET çalışmaz. Böyle bir durumda, ASP.NET IIS Kayıt aracıyla (Aspnet_regiis.exe -i) ASP.NET betik eşlemelerini onarabilirsiniz.

İlgili konular

InkCollector

Web'de Mürekkep

Mürekkep Veri Biçimleri

System.Windows.Forms.UserControl Sınıfı