잉크 블로그 웹 샘플

아티클
06/13/2023

잉크 블로그 샘플 애플리케이션은 수동 입력 기능이 있는 관리형 UserControl 클래스를 만들고 Microsoft 인터넷 Explorer 제어하는 호스트를 만드는 방법을 보여 줍니다. 또한 이 샘플에서는 HTTP를 사용하고 서버에 잉크를 유지하여 네트워크를 통해 잉크 데이터를 보내는 한 가지 기술을 보여 줍니다.

참고

이 샘플을 실행하려면 ASP.NET 설치된 IIS(Microsoft 인터넷 정보 서비스)가 있어야 합니다. 컴퓨터에서 ASP.NET 애플리케이션을 실행하는 데 필요한 요구 사항을 컴퓨터에서 충족하는지 확인합니다.

참고

Microsoft Windows XP Tablet PC Edition Development Kit 1.7이 설치된 태블릿이 아닌 PC 컴퓨터에서 이 샘플을 실행하면 잉크 제목에 대한 텍스트 인식 기능이 작동하지 않습니다. 태블릿 PC SDK 1.7이 설치된 태블릿이 아닌 PC 컴퓨터에 인식기가 부족하기 때문에 이 문제가 발생합니다. 나머지 애플리케이션은 설명된 대로 수행됩니다.

개요

잉크 블로그 샘플은 잉크 사용 Weblog를 만듭니다. InkBlogWeb은 ASP.NET 애플리케이션입니다. 잉크 항목은 ASP.NET 페이지에서 참조되는 사용자 컨트롤을 통해 수행됩니다.

사용자 컨트롤은 태블릿 PC 플랫폼 구성 요소가 클라이언트 컴퓨터에 설치되어 있는지 여부를 검색합니다. 이 경우 사용자 컨트롤은 웹 페이지에 두 개의 잉크 사용 영역을 표시합니다. 하나는 블로그 항목의 제목을 입력하는 영역이고 다른 하나는 항목 본문에 대한 것입니다. 태블릿 PC 플랫폼 구성 요소가 설치되지 않은 경우 사용자에게 항목의 제목과 본문에 대한 표준 텍스트 상자 컨트롤이 제공됩니다.

사용자가 항목 만들기를 마치면 블로그 추가 단추를 클릭하면 저장소를 위해 웹 서버로 게시물이 전송됩니다. 서버에서 애플리케이션은 제목 텍스트와 게시 날짜뿐만 아니라 GIF(그래픽 교환 형식) 파일에 대한 참조를 저장합니다. 서버에도 저장된 GIF 파일에는 강화된 GIF 파일에 본문의 잉크 데이터가 포함되어 있습니다. 강화된 GIF 형식에 대한 자세한 내용은 HTML에 잉크 저장을 참조하세요.

InkBlog 솔루션에는 InkBlogControls 프로젝트와 InkBlogWeb 프로젝트라는 두 개의 프로젝트가 있습니다.

InkBlogControls 프로젝트

InkBlogControls 프로젝트는 웹 페이지에서 수동 입력을 사용하도록 설정하는 사용자 컨트롤에 대한 코드를 포함하는 UserControl 프로젝트입니다. 이 컨트롤의 코드인 InkArea 컨트롤은 InkArea.cs 파일에 있습니다.

클래스는 InkAreaUserControl 클래스에서 상속됩니다. 컨트롤의 InkArea 생성자는 도우미 메서드 CreateInkCollectionSurface를 호출합니다.

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);
}

메서드는 CreateInkCollectionSurfaceInkCollector 클래스의 instance 만들어 태블릿 PC 수동 입력 구성 요소를 클라이언트에서 사용할 수 있는지 여부를 결정합니다. 메서드에 대한 호출이 CreateInkCollectionSurface 성공하면 메서드는 Panel 개체를 컨트롤로 반환합니다.

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

수동 입력 플랫폼 파일을 찾을 InputArea 수 없어 생성자가 실패하면 컨트롤이 InkCollector 컨트롤이 아닌 TextBox 컨트롤로 인스턴스화됩니다. 그런 다음 생성자는 컨트롤의 크기를 부모 사용자 컨트롤의 크기로 지정하고 부모의 Controls 컬렉션에 추가합니다.

InkArea 컨트롤 클래스는 InkData, TextData 및 WebEnabled의 세 가지 흥미로운 공용 속성을 구현합니다.

InkData 속성은 읽기 전용이며 클라이언트가 수동 입력을 지원하는 경우 직렬화된 잉크 데이터에 대한 액세스를 제공합니다. 클라이언트가 수동 입력을 지원하지 않는 경우 InkData 속성은 빈 문자열을 가져옵니다. InkData 속성은 도우미 메서드 SerializeInkData를 호출하여 클라이언트가 수동 입력을 지원하는지 확인합니다.

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 Ink 개체를 가져올 때 InkCollector로 캐스팅해야 합니다. 이 Control로 선언되어 있기 때문 inputArea 입니다. Ink 개체에 스트로크가 포함된 경우 잉크 데이터는 바이트 배열에 inkDataBytes GIF로 저장됩니다( PersistenceFormat 열거형 값을 사용하여 지정됨). 그런 다음 메서드는 바이트 배열을 Base64로 인코딩된 문자열로 변환하고 이 문자열을 반환합니다.

클라이언트가 인식을 수행할 수 있다고 가정하면 속성은 TextData 잉크 데이터를 필기 인식기로 전달하는 RecognitionResult 개체를 반환합니다. 클라이언트가 잉크를 인식하지 못하면 다음 코드와 같이 텍스트 상자 내용이 반환됩니다.

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

속성은 TextData 다음 코드에 표시된 도우미 메서드 를 RecognizeInkData호출하여 인식을 수행합니다. 인식 엔진이 시스템에 RecognizeInkData 있으면 메서드는 RecognitionResult 개체의 TopString 속성이 포함된 문자열을 반환합니다. 엔터티를 정의하지 않은 경우 빈 문자열을 반환합니다.

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 클라이언트 컴퓨터에서 수동 입력이 지원되는지 여부를 나타내는 읽기 전용 부울 값입니다.

컨트롤 클래스의 InkArea 또 다른 중요한 공용 멤버는 메서드입니다 DisposeResources . 이 메서드는 내부적으로 메서드를 Dispose 호출하여 사용자 컨트롤에서 활용하는 모든 리소스가 정리되도록 합니다. 컨트롤을 사용하는 모든 애플리케이션은 InkArea 컨트롤 사용을 DisposeResources 완료할 때 메서드를 호출해야 합니다.

InkBlogWeb 프로젝트

InkBlogWeb 프로젝트는 블로깅 기능을 제공하기 위해 컨트롤을 InkArea 참조하는 웹 설정 배포 프로젝트입니다. 웹 설정 배포 프로젝트에 대한 자세한 내용은 웹 설치 프로젝트 배포를 참조하세요.

블로깅 샘플을 구현하는 두 개의 .aspx 파일인 Default.aspx 및 AddBlog.aspx가 있습니다. Default.aspx는 InkBlogWeb 애플리케이션의 기본 페이지입니다. 이 페이지의 코드 숨김 파일은 Default.aspx.cs입니다. 이 페이지에서는 새 블로그 항목 양식이 포함된 페이지에 대한 링크를 제공하고 기존 블로그 항목을 표시합니다. 이 프로세스는 나중에 새 블로그 항목 양식 페이지 AddBlog.aspx를 검사한 후 설명합니다.

AddBlog.aspx 및 코드 숨김 파일인 AddBlog.aspx.cs에는 새 블로그 항목을 만들기 위한 논리 및 사용자 인터페이스 코드가 포함되어 있습니다. AddBlox.aspx는 다음 예제와 같이 HTML OBJECT 요소를 사용하여 InkBlogControls 프로젝트에서 만든 InkArea 컨트롤 클래스의 두 인스턴스를 참조합니다. 한 instance id inkBlogTitle 특성이 있고 다른 하나는 inkBlogBody의 ID 특성을 줍니다.

InkBlogControls.dll 어셈블리는 참조하는 .aspx 페이지와 동일한 디렉터리에 있어야 합니다. 웹 설치 프로그램 배포 프로젝트는 배포 프로젝트에 "InkBlogControls의 기본 출력" 항목이 있는 것으로 입증된 대로 이 경우를 확인합니다.

타이틀 컨트롤의 높이가 48픽셀에 불과하여 타이틀의 잉크 한 줄 입력을 용이하게 합니다. 본문 컨트롤은 296픽셀 높이로 여러 줄 또는 드로잉의 더 큰 블로그 항목을 위한 공간을 확보합니다.

InkArea 컨트롤은 표준 HTML BUTTON 요소의 onclick 이벤트 처리기를 통해 클라이언트 쪽 스크립트 함수인 AddBlog에 연결됩니다.

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

페이지에는 BlogTitleText, BlogBodyText 및 BlogBodyInkData라는 세 가지 숨겨진 INPUT 요소가 포함된 HTML 양식도 있습니다. 이 양식은 블로그 항목 데이터를 서버에 다시 게시하는 데 사용됩니다. AddBlog.aspx는 양식에 대해 정의된 포스트백 처리기입니다.

Microsoft JScript<엔터티 type="reg"/>-으로 작성된 AddBlog 함수는 InkArea 컨트롤에서 블로그 데이터를 추출하고 결과를 서버에 게시합니다.

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();
}

데이터가 서버에 도착하면 AddBlog.aspx.cs의 코드는 Page_Load 이벤트 처리기를 확인하여 HttpRequest 개체의 Form 속성에 데이터가 포함되어 있는지 확인합니다. 이 경우 현재 시스템 시간에 따라 파일 이름을 만들고, 양식 데이터를 세 개의 문자열 변수에 넣고, 다음 코드와 같이 잉크 데이터가 포함된 GIF 파일과 HTML 파일에 데이터를 씁니다.

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);

도우미 메서드에 대한 자세한 내용은 샘플 소스 코드를 참조하세요.

샘플 실행

태블릿 PC SDK 1.7은 기본적으로 잉크 블로그 웹 샘플을 설치합니다. 샘플을 실행하려면 인터넷 Explorerhttps://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Windows Server 2003을 실행하는 경우 컴퓨터 이름을 "localhost"로 대체합니다.

참고

컴파일된 웹 샘플은 SDK에 대한 기본 설치 옵션으로 설치되지 않습니다. 사용자 지정 설치를 완료하고 "미리 컴파일된 웹 샘플" 하위 옵션을 선택하여 설치해야 합니다.

Microsoft Visual Studio<엔터티 type="reg"/> .NET에서 프로젝트를 열고 빌드한 다음 IIS를 실행하는 별도의 컴퓨터에 배포하여 샘플을 실행할 수도 있습니다.

예제 문제 해결

샘플을 실행하거나 호스팅할 때 어려움을 일으킬 수 있는 세 가지 영역은 권한 및 인식입니다.

사용 권한

샘플에는 새 블로그 항목을 만들려고 하는 계정에 대한 가상 루트 폴더 내의 쓰기 권한이 필요합니다. 기본적으로 태블릿 PC SDK 1.7에 제공된 샘플의 컴파일된 버전에는 이 요구 사항을 충족하도록 설정된 올바른 권한이 있습니다.

제공된 웹 설정 배포 프로젝트를 사용하여 샘플을 빌드하고 배포하는 경우 InkBlogWeb 가상 루트(예: C:\InetPub\WWWRoot\InkBlogWeb)가 가리키는 파일 시스템 폴더에 %MACHINENAME%\Users 그룹 쓰기 액세스 권한을 부여해야 합니다. 사용자 그룹에는 IIS에서 사용하는 익명 계정이 포함되어 있으므로 ASP.NET 애플리케이션이 새 블로그 항목을 파일 시스템에 쓸 수 있습니다. 대안은 가상 루트에 대한 익명 액세스를 제거하고 인증을 강제하는 것입니다.

인식

블로그 제목에서 잉크를 인식하려면 필기 인식기를 설치해야 합니다. Windows XP 태블릿 PC 버전이 아닌 운영 체제가 있지만 태블릿 PC SDK 1.7이 설치된 컴퓨터에서 InkBlog 애플리케이션에 액세스하는 경우 InkArea 컨트롤에서 잉크를 작성할 수 있지만 인식 엔진은 존재하지 않으며 블로그 항목에 대한 제목은 표시되지 않습니다. 하지만 본문의 잉크 콘텐츠는 여전히 나타납니다.

머신 구성

컴퓨터에 ASP.NET 및 .NET Framework 설치한 다음 IIS를 제거 및 다시 설치한 경우 스크립트 맵이 중단되고 ASP.NET 작동하지 않습니다. 이 경우 ASP.NET IIS 등록 도구(Aspnet_regiis.exe -i)를 사용하여 ASP.NET 스크립트 맵을 복구할 수 있습니다.

Inkcollector
웹의 잉크
잉크 데이터 형식
System.Windows.Forms.UserControl 클래스

다음을 통해 공유

잉크 블로그 웹 샘플

개요

InkBlogControls 프로젝트

InkBlogWeb 프로젝트

샘플 실행

예제 문제 해결

사용 권한

인식

머신 구성

피드백

추가 리소스

다음을 통해 공유

잉크 블로그 웹 샘플

개요

InkBlogControls 프로젝트

InkBlogWeb 프로젝트

샘플 실행

예제 문제 해결

사용 권한

인식

머신 구성

관련 항목

피드백

추가 리소스