제목 없음

DEXTFramework.NET Framework 2008 version 1.1.0.0

DEXTWebEditor 개발 환경 지원

DEXTFramework.NET 2008 프레임워크는 DEXT솔루션 제품의 개발 환경을 좀 더 쉽게 접근하기 위해서, 관련 웹서버컨트롤 및 템플릿을 지원합니다. DEXTWebEditor 개발 환경을 지원하기 위해서 프레임워크에는 웹서버컨트롤과 프로젝트 템플릿을 지원합니다.

지원 웹서버컨트롤

웹서버컨트롤	설명
WebEditor	DEXTWebEditor를 렌더링합니다.

주의) 프레임워크는 DEXTWebEditor 개발 환경을 지원하는 것이며, 이는 실제 프레임워크에는 DEXTWebEditor 제품이 포함되어 있지 않음을 알려드립니다.

아래 예제는 DEXTWebEditor와 DEXTUploadX를 함께 사용하여 웹에디터의 미디어 요소를 업로드하는 방법을 기준으로 설명합니다.

1. 웹사이트 혹은 웹응용프로그램을 생성하고 도구상자에서 WebEditor 컨트롤을 드래그하여 페이지에 적용시킵니다.

2. Codebase 프로파티에 DEXTWebEditor.cab 파일 웹경로를 설정합니다.

DEXTWebEditor ASPX 소스코드

                        <dfx:WebEditor ID="WebEditor1" runat="server"
    Height="320px" Width="100%" AuthKey="xxxxxxxxxx" Codebase="~/Cab/DEXTWebEditor.cab"
    Locale="CurrentCulture" TabVisibility="All" UseMedia="true"
    ShowMenubar="true" ShowToolbar="true" ShowWebEditorToolbarType="Minumum">
    <InitCompleteScript IncludeOnlyBody="True">
    // DEXTWebEditor가 로드된 후 동작할 자바스크립트 코드를 삽입하세요.
    </InitCompleteScript>
</dfx:WebEditor>
                        
                    

3. 첨부파일 추가 기능 및 DEXTWebEditor의 이미지와 같은 파일을 서버에 등록하기 위해서 XUploadManager 컨트롤을 추가합니다.

XUploadManager ASPX 소스코드

                        <td>첨부파일 </td>
<td>                            
    <dfx:XUploadManager ID="XUploadManager1" runat="server" 
	    Width="100%" Height="100px"	EnableAddFolderButton="False" EnableTransferButton="False"
	    ButtonVisible="False" ListViewFileStyle="LVFS_FILENAME" ListViewLineStyle="False"
	    StatusBarVisible="False" VisibleListViewFrame="False" 
	    DEXTUploadXUrl="http://localhost/Cab/DEXTUploadX.cab">
	<ErrorScript DetailErrorMessageArgumentName="sDetailMsg"
	    ErrorCodeArgumentName="nCode" ErrorMessageArgumentName="sMsg">
	    // 에러 메시지 출력
	    alert(nCode + "\r\n" + sMsg + "\r\n" + sDetailMsg);
	</ErrorScript>
	<TransferScript>
	    var winstyle="height=355, width=445, status=no, toolbar=no, menubar=no, location=no";
	    // 파일 전송 모니터 팝업 창을 보여줍니다.
	    var pop = window.open("./DocUpMonitorForm.aspx", null, winstyle);                
	    pop.focus();
	</TransferScript>
    </dfx:XUploadManager>
</td>
                        
                    

4. 등록 혹은 Submit 버튼을 클릭하면 웹에디터의 내용 및 이미지를 DEXTUploadX의 Upload Manager에 등록하고 DEXUploadX의 Transfer 함수를 사용하여 Upload Monitor로 전달합니다.

버튼 및 내용 등록위한 자바스크립트 소스

                        <input type="button" value="등록" onclick="submitDocument()" />
                        
                        // DEXTUploadX를 사용하여 웹에디터 내부의 미디어들을 업로드해야 합니다.
function submitDocument() {        
    try {
        var imgDataUrl = "http://" + location.host + "/DEXTWebEditorWebSite1/TempDir";
        var rtn = WebEditor1.GetPostDataInfo(imgDataUrl, 0, 1, 0).split("\u000b");
        
        if (rtn[0] == "1") {            
            var content = rtn[1];
            var imgCount = parseInt(rtn[2]);
            var filenames = null, guidnames = null;
            if (imgCount > 0) {
                filenames = rtn[3].split("\u000c");
                guidnames = rtn[4].split("\u000c");
            }
            
            for (i = 0; i < imgCount; i++) {
                XUploadManager1.AddFile(filenames[i], guidnames[i]);
            }
            
            // 모든 폼 정보를 입력합니다.
            // 템플릿에서는 각각의 폼 값에 대한 검증 절차는 생략합니다.
            XUploadManager1.AddFormItem("Writer", document.getElementById("writer").value);
            XUploadManager1.AddFormItem("Pwd", document.getElementById("pwd").value);
            XUploadManager1.AddFormItem("Subject", document.getElementById("subject").value);
            XUploadManager1.AddFormItem("Content", content);
            // Upload Monitor(DocUpMonitorForm.aspx)를 팝업으로 호출합니다.
            XUploadManager1.Transfer();
        } else alert("서버에 업로드 할 수 없는 환경입니다.");
    } catch (e) { alert(e.description); }
}
                        
                    

5. DocUpMonitorForm.aspx 페이지에서는 XUploadMonitor 컨트롤을 등록하고 다음과 같이 설정합니다.

XUploadManager ASPX 소스코드

                        <dfx:XUploadMonitor ID="XUploadMonitor1" runat="server" Height="100%" Width="100%"
	DEXTUploadXUrl="http://localhost/Cab/DEXTUploadX.cab"
	EnableAddFileButton="False" EnableAddFolderButton="False"
	EnableDeleteButton="False" EnableDragDrop="False">
	<ErrorScript DetailErrorMessageArgumentName="sDetailMsg"
		ErrorCodeArgumentName="nCode" ErrorMessageArgumentName="sMsg">
		// 에러 메시지 출력
		alert(nCode + "\r\n" + sMsg + "\r\n" + sDetailMsg);
	</ErrorScript>
	<InitScript>
		XUploadMonitor1.CodePage = 65001;
		// 업로드 서버 로직을 수행하는 페이지를 지정합니다.
		XUploadMonitor1.UploadURL = "http://" + location.host + "/DEXTWebEditorWebSite/WriteOk.aspx";
		XUploadMonitor1.Items = opener.XUploadManager1.Items;
		XUploadMonitor1.Properties = opener.XUploadManager1.Properties;
		XUploadMonitor1.CheckAutoCloseWindow = true;		        
		XUploadMonitor1.EnableEmptyFileUpload = true;
		// WritOk.aspx로 전송합니다.
		XUploadMonitor1.Transfer();
	</InitScript>
</dfx:XUploadMonitor>
                        
                    

6. 서버측 업로드 로직을 처리할 페이지를 작성(WriteOk.aspx.cs)합니다.

WriteOk.aspx / WriteOk.aspx.cs 소스코드

                        <!-- EnableViewState="false" EnableViewStateMac="false" 로 설정을 해주어야 합니다. -->
<%@ Page Language="C#" AutoEventWireup="true"
    EnableViewState="false" EnableViewStateMac="false"
    CodeFile="WriteOk.aspx.cs" Inherits="WriteOk" %>
                            
                        
                        protected void Page_Load(object sender, EventArgs e)
{
    // 아래 코드는 샘플 코드입니다.

    // 본문 포맷에 맞추어 utf8코드 페이지로 세팅하여 줍니다.
    Request.ContentEncoding = System.Text.Encoding.UTF8;

    // baesUrl은 업로드 경로입니다.
    string baseUrl = "~/TempDir/";
    string baseDir = this.Server.MapPath(baseUrl);
    if (!Directory.Exists(baseDir)) Directory.CreateDirectory(baseDir);

    // WriteDocForm.aspx 페이지에서 정해진 앨리어스명을 받아 들입니다.
    string alias = Request.Form["DEXTUploadX_Alias"] ?? string.Empty;
    string[] aliasTokens = alias.Split(new char[1] { ',' }, StringSplitOptions.RemoveEmptyEntries);        
    // 본문 내용은 이미지와 같은 미디어 파일들이 앨리어스명으로 변환된 상태입니다.
    StringBuilder contentSb = new StringBuilder(Request.Form["Content"] ?? string.Empty);

    int fCount = Request.Files.Count;
    if (fCount > 0)
    {
        int mediaIndex = 0;

        for (int i = 0; i < fCount; i++)
        {
            HttpPostedFile hpfile = Request.Files[i];               
            
            if (hpfile.ContentLength > 0)
            {
                // 본문에 상응하는 파일들이 나중에 추가가 되었으므로 총 파일 수에서
                // 앨리어스 처리된 파일 수를 뺀 값부터 본문용 파일 인덱스가 됩니다.
                if (i >= (fCount - aliasTokens.Length))
                {
                    hpfile.SaveAs(Path.Combine(baseDir, Path.GetFileName(hpfile.FileName)));
                    // 본문의 앨리어스명을 실제 파일명으로 변경합니다.
                    contentSb.Replace(aliasTokens[mediaIndex], Path.GetFileName(hpfile.FileName));
                    mediaIndex++;
                }
                else
                {
                    // 첨부파일들은 바로 저장합니다.
                    hpfile.SaveAs(Path.Combine(baseDir, Path.GetFileName(hpfile.FileName)));
                }                    
            }
        }
    }
    
    // 문서를 저장하는 루틴을 수행하도록 합니다.
    ...
}
                        
                    

7. 페이지를 빌드한 후 결과

브라우저 출력 화면

지원 프로젝트 템플릿
위의 과정은 설치시 제공되는 템플릿을 통하여 소스코드를 자세히 살펴볼 수 있습니다.

프로젝트 템플릿

DEXTUploadWebEditor 제품에 대한 자세한 설명은 DEXTUploadWebEditor 매뉴얼을 참고하십시오.