3.3 웹메일 구성

2009-07-09 17:22:39

3.3 웹메일 구성

1) 웹메일 기본필터
2) 웹메일 문서의 style 적용
3) 전자우편 편집 필터
4) 전자우편 목록 필터
5) 전자우편 보기 필터
6) 주소록 검색하기

인트라셀의 웹메일 사용자는 동일한 웹 구성을 이용하게 됩니다. 웹메일 디자인 관련 이미지는 인트라셀의 "html/segio/msg/"하위에 위치합니다.

1) 웹메일 기본필터

맨위로

가. $#m...#; 필터코드

웹메일 서비스를 구성하는데 사용되는 필터코드입니다. 다음은 전자우편을 구성하는 웹필터 전역에서 사용할 수 있는 하위 예약어와 기능을 요약한 내용입니다.

웹메일 필터 전연에서 사용가능한 예약어어

$#m.composesize#;

$#m.signature0#;

$#m.signature1#;

$#m.name#;

$#m.mboxusage#;

$#m.mboxdata#;

$#m.diskquota#;

→ 최대 편집 가능한 새편지 용량(Mbyte단위) 설정치를 표시합니다.

→ 사용자의 첫 번째 서명을 표시합니다.

→ 사용자의 두 번째 서명을 표시합니다.

→ 메일서비스의 구체적 이름표시(보낸편지함, 편지쓰기, ... 등)

→ 메일서비스 사용 용량 비율 (%)

→ 메일서비스 사용 용량

→ 사용자에게 허가된 디스크 용량

위 하위예약어는 새편지 쓰기, 웹메일 프론트페이지, 웹메일의 레이아웃을 결정하는 쉘 등에서 사용할 수 있습니다. 다음은 편지함이 열린 상태에서만 사용할 수 있는 예약어로서 주로 편지함의 목록보기와 편지읽기 등의 화면구성에 사용됩니다.

편지 목록보기, 편지 읽기에서 사용하는 예약어어

$#m.mboxselect#;

$#m.mails#;

$#m.newmail#;

$#m.id#;

$#m.data#;

$#m.pages#;

$#m.pageno#;

$#m.totalmails#;

→ 메일박스를 선택할 수 있도록 표시

→ 현재 목록에 표시된 메일 수

→ 읽지 않은 메일 수

→ 현재 열린 편지함의 아이디

→ 편지함의 용량

→ 편지함 목록의 페이지 수

→ 현재 페이지 번호

→ 편지함의 전체 메일 수

다음 필터는 편지함의 목록보기에서만 사용할 수 있습니다.

편지함의 목록보기에서만 사용되는 예약어

$#m.querybox#;

$#m.queryfield#;

$#m.m_seek#;

$#m.m_move#;

$#m.m_remove#;

$#m.m_allread#;

$#m.list#;

$#m.pagemenu#;

→ 검색어 입력창

→ 검색 필드 선택창

→ 찾기 메뉴버튼

→ 옮기기 메뉴버튼 $#m.boxselect#; 의 선택창에서 고른 편지함으로 이동

→ 삭제하기 메뉴버튼

→'모두 읽은 것으로 처리'메뉴버튼 ex)$#m.m_allread#,모두 읽음으로;

→ 편지함 편지 목록표시

→ 편지함 페이지 메뉴표시

다음은 편지읽기, 편지쓰기 필터에서만 사용할 수 있는 필터입니다.

편지읽기, 편지쓰기 필터에만 사용되는 예약어

$#m.mailno#;

$#m.art_up#;

$#m.art_dn#;

$#m.to#;

$#m.cc#;

$#m.bcc#;

$#m.from#;

$#m.m_reply#;

$#m.m_forward#;

$#m.m_print#;

$#m.m_up#;

$#m.m_down#;

$#m.m_del#;

$#m.subject#;

$#m.ctype#;

$#m.charset#;

$#m.date#;

$#m.time#;

$#m.context#;

$#m.file#;

$#m.received#;

$#m.mailname#;

→ 현재 읽고 있는 편지의 편지수

→ 윗 편지 읽기 메뉴

→ 아래편지 읽기 메뉴

→ 수신 주소

→ 참조 주소

→ 숨은 참조 주소

→ 보낸이 주소

→ 답변달기 메뉴버튼

→ 포워딩 메뉴버튼

→ 인쇄하기 메뉴버튼

→ 윗 편지 읽기 메뉴버튼 → 아래 글 읽기 메뉴버튼

→ 지우기 메뉴버튼

→ 제목 표시

→ 컨텐츠 타입 표시

→ 문자셋 표시

→ 작성일자 표시

→ 작성시간 표시

→ 본문 표시

→ 첨부파일 표시

→ 수신 경로 정보 표시

→ 편지작성 이름표시 (개인마다 환경설정에서 지정함)

$#m...#; 필터는 웹메일 서비스를 구성하는 웹필터에서만 사용됩니다. 일반영역의 html 문서에서는 $#u...#; 관련 필터에서 일부 관련 기능을 제공하고 있습니다.

$#m.querybox#; 구문은 질의어를 입력할 수 있는 "<input ...>"구문으로 치환됩니다. $#b.querybox#;구문과 비슷한 적용방법으로 사용가능합니다.

다. $#load,#mail......#; 요약목록 표시

편지목록의 일부를 웹메일 전용필터 문서에 표시할 때 사용합니다. 작동방식은 게시판의 요약목록을 표시하는 기능인 "$#brief#;"와 유사합니다.

형식) $#load,'#mail?cmd=brief&opt="[OPTION]"'#;

OPTI0N = [편지함예약어],style=[목록표시스타일],l=[목록수],lh=[목록의 tr 높이]

예) $#load,'#mail?cmd=brief&opt='inbox,style="file:Title///50:Date//35:mailto",l=5,lh=25'#;

→ 받은편지함

목록표시형식을 다음의 방법으로 지정할 수 있습니다.

1. 각 <td>~</td> 값은 콜론(":")으로 구분합니다. LIST_TD1: LIST_TD2:

2. 각 td 셀의 특성치는 다음 순서에 의해 슬래시(/)로 구분하여 정리합니다.

필드네임/헤드라인이름/가로넓이가중치(100이하)/문자길이제한.

* 없는 항목에 대해서는 연속으로 슬래시(/)를 입력합니다.

3. 예) file:Title///50:Date//35:mailto

기본):title

목록표시 스타일에서 사용할 수 있는 필드네임은 다음과 같습니다. 넓이가중치와 제한문자열길이 정렬방식 등은 기본 값을 표시하고 있습니다.

필드네임	넓이 가중치	제한문자열	정렬방식	설명	비고
title	100	30		제목
date	30		center	작성일시
file	15		center	첨부파일 (파일아이콘)
from	50	30		발신자 주소
mailto	50	30		발신/수신 주소
to	50	30		수신자 대표주소

편지 요약목록에 표시될 필드의 정보는 "<td>~</td>"태그 구문의 셀로 치환되며 각 셀의 넓이는 총합에 비례하는 넓이로 지정됩니다. 넓이 가중치는 128이내에서 지정합니다.

라. $#addr#;

$#addr;구문은 메일주소록 관련 예약어로서 다음의 종류가 있습니다.

$#addr.query#; → 검색 쿼리로 입력된 문자열;

ex) <input name="query" value="$#addr.query#;" />

$#addr.m_seek#; → 검색 (아이콘 표시)

$#addr.name#; → 주소록 폴더 이름 표시

$#addr.data[]#; → 주소 구성 데이터의 자바스크립트 배열(편집화면에서 사용함)

2) 웹메일 문서의 style 적용

맨위로

웹메일 구성시 전용 웹필터의 HTML은 게시판에서와 같이 Style을 정의하여 사용하도록 합니다. 다음은 CSS 스타일을 적용한 HTML 문서의 예입니다.

<tr>

다음은 웹메일의 HTML에 지정된 클래스에 대한 요약내용입니다.

클래스 네임	용도설명	비고
cell4name	입력 폼에서 입력항목의 이름을 위치시키는 td
cell4value	편지읽기에서 "여름<summer@sm.kseek.com>" td
cell4input	입력을 위한 셀( input의 경계선은 none 임)
cell4textarea	편지쓰기에서 본문 편집을 위한 td
cell4list	편지, 주소록 등의 목록에서 일반 리스트 구성 td
cell4last	편지, 주소록 등의 목록에서 마지막 리스트에서의 td
cell4ltop	편지목록에서 항목 표시줄 구성 th
cell4headline	주소록 관리에서 목록의 헤드라인 구성 th
cell4pages	편지목록에서 Page 표시하는 셀
cell4title	cell4name보다 상위 개념의 이름을 위치시키는데 사용.

다음은 일부 class에 대한 CSS style 적용의 사례입니다.

.cell4name { border-style:outset; border-width:1px; padding:'0,3,1,3'; }

.cell4input{ border-style:inset; border-width:1px; padding:'0,0,0,0'; }

.inputcell { border-style:none; border-width:1px; padding:'0,0,0,0'; }

.cell4list { height:20;border-bottom:solid 1px; paddind:'0,4,1,4'; }

.cell4list { height:20;border-bottom:solid 3px #f0f0f0; }

</style>

웹메일 서비스를 구성하는 전용필터는 'filter/mail/'에 위치하며 웹메일과 관련된 CSS파일, SHELL 파일은 "html/segio/msg/" 하위에 위치합니다.

3) 전자우편 편집 필터

맨위로

"segio/mail/mail_edit.html"은 전자우편 편집필터입니다. 신규 편지, 답장 편지, 포워딩 편지 등의 편집 화면을 구성합니다. 포워딩과 답장쓰기는 기존 메일의 본문, 첨부파일 등을 표시하도록 하여야 합니다. 다음은 전자우편 편집필터에 의한 편지쓰기 윈도의 그림입니다.

다음은 전자우편 편집필터의 자바스크립트의 요약내용입니다.

var file_count=1;

function address_browser(){

url='$#m.href.addr4mail#;';

w=window.open(url,'address_win','width=600,height=400,scrollbar=1,resizable=0');

return (false);

}

function set_rcpt(no, value){

var ele=null;

if(no==1)ele=document.getElementById('to');

if(no==2)ele=document.getElementById('cc');

if(no==3)ele=document.getElementById('bcc');

if(ele!=null)ele.value=value;

}

function plus_filefield(form)

{

if(file_count>5)return false;

file_count++;

str = '<br /><input type="file" name="file" style="width:99%" />';

ffield=document.getElementById("filefield");

ffield.innerHTML+=str;

return false;

}

"address_broser()" 함수와 "set_rcpt()" 함수는 전자우편주소록으로부터 주소를 검색하는데 중요한 역할을 하며 전자우편주소록과 관련된 "filter/mail/addr_rcpt.html"에 포함된 자바스크립트와 매우 긴밀하게 연관되어 있습니다. "plus_filefield()"함수는 첨부파일의 수를 늘리는 기능을 합니다. 다음의 두 함수는 본문내용의 Text, HTML 간의 토글을 구현한 것입니다.

var html_mode =1;

function set_editor_init(hmode)

{

c0ntext=document.getElementById("context");

p_div=document.getElementById("editor_position_div");

ctype=document.getElementById("ctype");

if(!ctype||!p_div||!context)return false;

p_div.innerHTML='<textarea name="context" id="context">' +context.value+'</textarea>';

if(hmode){

ctype.value="text/html";

editor_init("context");

} else { ctype.value="text/plain"; }

return false;

}

function change_editor()

{

html_mode=html_mode?0:1;

set_editor_init(html_mode);

}

다음은 전자우편 편집필터의 HTML 요약내용입니다.

<html>

<head>

<title>SEGIO Webmail Service</title>

<style>

#context { width:100%;height:400px;border: none 0;word-break:break-all; }

</style>

</head>

$#m.name#;

수신(to) <input name="to" id="to" value="$#m.to#;" />

<img src="$#m.icon,m_getaddr.gif#;" 0nclick="return address_browser();"

style="cursor:pointer;" />

참조(cc) <input name="cc" id="cc" value="$#m.cc#;" />

숨은참조(bcc) <input name="bcc" id="bcc" value="$#m.bcc#;" />

편지제목 <input name="subject" value="$#m.subject#;" class="input" />

$#if i.htmlmail#;

편집형식

Html<input type="radio" name="checktype" 0nclick="change_editor();" checked="true" />

Text<input type="radio" name="checktype" 0nclick="change_editor();" />

$#fi#;

</select>

<input name="save2sentbox" type="checkbox" value="ON" checked="true" /> 보낸편지저장

<input name="ctype" id="ctype" type="hidden" value="$#if

i.htmlmail#;text/html$#else#;text/plain$#fi#;" />

<textarea name="context" id="context">$#m.context#;</textarea>

</div>

서명 <pre>$#m.signature0#;<hr />$#m.signature1#;</pre>

첨부($#m.composesize#;MB) <div id="filefield" name="filefield">

</form>

</body>

</html>

4) 전자우편 목록 필터

맨위로

가. "segio/mail/mail_list.html"파일은 전자우편 목록필터로 게시판의 목록필터와 유사합니다. 전자우편 목록필터는 편지함의 편지목록을 페이지 단위로 보여줍니다. 다음은 편지목록의 예입니다.

편지함을 열면 전자우편 목록이 나타나며 편지 삭제, 편지함 이동, 검색, 전체목록 다시보기 등의 기능이 지원됩니다. 다음은 전자우편 목록필터에서 사용하는 자바스크립트입니다.

function reverse_check(tform) {

var i,j;

var checked=tform.reverse_ck.checked;

for(i=1,j=tform.elements.length;i<j;i++){

var ele=tform.elements[i];

if(ele.name=="normal_ck"){ele.checked = checked?!ele.checked:checked;}

}

return;

}

</script>

다음은 전자우편 목록필터의 요약내용입니다. 실제문서에는 레이아웃 구성을 위한 <div>, <talbe>, <tr>, <td> 등의 태그 구문이 다수 포함되어 있습니다.

<html>

<head>

<title>SEGIO Webmail Service</title>

</head>

<img src="/segio/msg/ic_mail.gif" /> $#m.name#;

$#m.m_remove#; $#m.mboxselect#; $#m.m_move#; Mail:$#m.mails#; $#m.m_list#;

<div>$#m.list,style=""#;</div>

$#m.pagemenu#;

$#m.m_remove#; $#m.mboxselect#; $#m.m_move#; Mail:$#m.mails#; $#m.m_list#;

</form>

</body>

</html>

나. $#m.list...#; 구문은 편지함의 편지 목록을 나타낼 때 사용하며 다음과 같은 형식으로 style 옵션을 주어야 합니다.

$#m.list,style="no/번호/20:file/파일:title/편지제목//35:readck/읽음:from/발신:to/수신:date/일시"#;

"to"항목은 보낸 편지함에서만 유효하며 "from"항목은 나머지 편지함에서만 유효합니다.

5) 전자우편 보기 필터

맨위로

"mail_view.html"파일은 전자우편 보기필터로 게시판의 보기필터와 유사합니다. 전자우편 보기필터는 다음 그림에서와 같이 전자우편을 읽는 용도로 사용됩니다.

다음은 전자우편 보기필터의 요약내용입니다. 실제 내용에는 레이아웃 구성을 위한 <div>, <table>과 관련된 태그들이 많이 포함됩니다.

<html>

<head>

<title>SEGIO Webmail Service</title>

</head>

<body>

$#m.name#; <img src="/segio/msg/segio_logo.gif" />

$#m.m_del#; $#m.mboxselect#; $#m.m_move#; $#m.m_reply,답장#; $#m.m_forward#;

$#m.m_print,인쇄#; $#m.m_down#; $#m.m_list#; $#m.m_up#;

Subject: $#m.subject#;

From: $#m.from#;

To: $#m.to#;

Cc: $#m.cc#;

Bcc: $#m.bcc#;

<b>Properties:

본문 Content-type: $#m.ctype#;;Charset=$#m.charset#;  Date:$#m.date#;

</div>

Disposition: $#m.file#;

<div id="context_view" class="cell4context"> $#m.context#;</div>

$#m.m_del#; $#m.mboxselect#; $#m.m_move#; $#m.m_reply,답장쓰기#;

$#m.m_forward#; $#m.m_print,인쇄#; $#m.m_down#; $#m.m_list#; $#m.m_up#;

</form>

</body>

</html>

전자우편은 통상 다른 메일서버를 경유해서 도착하는 경우가 많다. 일부 메일서버는 악의적인 스팸메일을 보내기도 하는데 경유지를 확인할 필요가 있을 경우 다음과 같은 자바스크립트를 포함시킴으로써 관리자로 하여금 전자우편의 경유지를 확인하도록 할 수 있습니다.

$#if l.lv==9#;

vis=false;

function received_view()

{

rec=document.getElelmentById("div_received");

view=document.getElelmentById("property_view");

if(view&&rec)view.innerHTML='<br />'+rec.innerHTML;

return;

}

</script>

<div id="div_received" style="visibility:hidden;position:absolute;">$#m.received#;</div>

$#fi#;

"$#m.received#;"는 전자우편의 경유지 정보로 치환됩니다. 위의 자바스크립트 구성을 활용하면 보이지 않는 영역에 경유지 정보를 표시한 다음 사용자가 “경로”라는 텍스트를 클릭하면 자바스크립트가 보이는 영역에 경유지 정보를 표시하도록 합니다.

6) 주소록 검색하기

맨위로

메일을 발송할 때 주소록을 검색하여 수신, 참조, 숨은 참조를 지정할 수 있습니다. 다음은 주소록을 검색할 수 있도록 제공되는 팝업 윈도우입니다.

그림에서 굵은 선으로 표시된 왼쪽과 나머지 오른쪽은 프레임으로 나뉘어 각각 "maddr_rcpt.html", "maddr_seek.html"의 메일전용필터에 의해 구성됩니다.

댓글달기

make_title('/segiohelp.brd?shell=none','쎄지오 매뉴얼 게시판');

3.3 웹메일 구성

1) 웹메일 기본필터

맨위로

가. $#m...#; 필터코드

다. $#load,#mail......#; 요약목록 표시

라. $#addr#;

2) 웹메일 문서의 style 적용

맨위로

3) 전자우편 편집 필터

맨위로

4) 전자우편 목록 필터

맨위로

가. "segio/mail/mail_list.html"파일은 전자우편 목록필터로 게시판의 목록필터와 유사합니다. 전자우편 목록필터는 편지함의 편지목록을 페이지 단위로 보여줍니다. 다음은 편지목록의 예입니다.

나. $#m.list...#; 구문은 편지함의 편지 목록을 나타낼 때 사용하며 다음과 같은 형식으로 style 옵션을 주어야 합니다.

5) 전자우편 보기 필터

맨위로

6) 주소록 검색하기

맨위로