인쇄나 인쇄 미리보기 템플릿에 문서의 내용을 위한 용기 엘레멘트를 생성하고 참조한다.
|
Script | 없다. |
| HTML | 없다. | |
| XML | <LAYOUTRECT id=idVal /> |
LAYOUTRECT 엘레멘트들은 인쇄나 인쇄 미리보기할 때 페이지 상에서 디스플레이되는 내용의 스타일을 갖는 지역(area)으로 정의된다. 인쇄 템플레이트에서 LAYOUTRECT 엘레멘트들은 템플레이트의 인쇄될수 있는 지역이 정의된 DEVICERECT 엘레멘트들에 포함된다. DEVICERECT은 여러개의 LAYOUTRECT 엘레멘트를 포함 할 수 있다.
LAYOUTRECT 엘레멘트는 인쇄 템플레이트를 생성하는데 사용된다. 이 엘레멘트가 웹페이지 상에 표현될 때 인쇄 템플레이트 밖에서는 대부분의 기능성이 불활성화된다.
인쇄 템플레이트은 전형적으로 그 속에 인쇄나 인쇄미리보기에서 원본 문서가 표현될 수 있도록 LAYOUTRECT들을 포함한다. 순차적인 여러개 중 제일 먼저나오는 LAYOUTRECT은 contentSrc 속성으로 원본 내용을 정의한다. contentSrc는 디스플레이된 현재의 문서가 원본으로 사용된다는 의미로 문자열 "document"로 설정되거나 다른 원본 문서의 주소(URL)가 지정될 수 있다. LAYOUTRECT 엘레멘트도 현재의 LAYOUTRECT을 완성시키기 위햐여 계속되는 원본을 나타내는 다른 LAYOUTRECT을 지정하는 nextRect 속성을 가질 수 있다. 마지막 것을 제외하고 각각의 LAYOUTRECT은 nextRect 속성으로 순서에서 다음 LAYOUTRECT을 지정할 수 있다.
인쇄 템플레이트는 일반적으로 길이가 다양한 문서들을 처리한다. 다양한 내용의 처리를 위하여 충분한 LAYOUTRECT 엘레멘트들을 가지고 있어야 한다. 이를 달설하기 위하여 원본 문서가 로딩이 완료되면 onlayoutcomplete 이벤트로 각 LAYOUTRECT을 처리하도록 스크립트로 LAYOUTRECT들을 탄력적으로 생성하는 방법이 사용된다. 이 이벤트처리자는 contentOverflow 속성을 점검하여야 한다. contentOverflow 속성이 true이면 이벤트처리자는 새로운 인식자(id)로 새로운 LAYOUTRECT을 생성하고 onlayoutcomplete 이벤트처리자는 nextRect 속성으로 순서에서 다음 LAYOUTRECT 엘레멘트로 지정한다. onlayoutcomplete 이벤트는 한 LAYOUTRECT 엘레멘트에서 한번 이상 발생될 수 있으므로 한번 호출된 후에 다시 발생되지 않게 하기위해서는 취소하여야 한다.
LAYOUTRECT 엘레멘트는 width와 height 속성들이 지정된 페이지의 스타일을 가져야 한다. 이 두 속성들의 디폴트 값은 0이다. 인쇄 템플레이트는 marginBottom, marginLeft, marginRight, marginTop, pageWidth와 pageHeight를 포함한 TemplatePrinter 비헤이버를 참조하여 현재 페이지 설정 정보를 획득할 수 있다. LAYOUTRECT 스타일은 fontFamily, fontWeight등 원본에 있는 스타일을 다시 지정할 수 없다.
LAYOUTRECT 엘레멘트를 사용하기 위해서는 import 처리 문장을 사용하여 XML(Extensible Markup Language) 이름자리(namespace)를 정의하여야 한다. 예를들면 이름자리 'IE'를 위하여
<IMPORT implementation="#default" namespace="IE">
이 이름자리를 이용하여 LAYOUTRECT 엘레멘트를 사용할 때는
<IE:LAYOUTRECT ... / >
LAYOUTRECT 엘레멘트는 종료태그가 없고 XML 문법에따라 태그종료(>) 전에 슬래시(/)로 닫는다.
설명을 위한 예제
|
|
<HTML xmlns:IE>
<IMPORT namespace="IE" implementation="#default">
<STYLE type='text/css'>
.layoutstyle{ border:solid;margin:10;width:800;height:60em;}
.pagestyle { border:1 solid blue;margin:5;width:800;height:60em;}
</STYLE>
<DIV id="pagecontainer">
<IE:DEVICERECT id="page1" media="print" class="pagestyle">
<IE:LAYOUTRECT id="LRect1" border="1" borderColor="#ff0000"
contentsrc="http://trio.co.kr/webrefer/css2/sample.html" marginHeight="5" marginWidth="5"
onlayoutcomplete="OnRectComplete()" nextRect="LRect2" class="layoutstyle"/>
</IE:DEVICERECT>
</DIV>
<SCRIPT>
index=1;
var oObj;
function OnRectComplete(){
if (event.contentOverflow==true){
document.all('LRect'+index).onlayoutcomplete=null;
newHTML='<IE:DEVICERECT id="page'+(index+1)+'" media="print" class="pagestyle">';
newHTML+='<IE:LAYOUTRECT id="LRect'+(index+1)+'" onlayoutcomplete="OnRectComplete()" ';
newHTML+='nextRect="LRect'+(index+2)+'" class="layoutstyle" />';
newHTML+='</IE:DEVICERECT>';
pagecontainer.insertAdjacentHTML('beforeEnd',newHTML);
if (index==1){
sborder.innerText=LRect1.border;
sborderColor.innerText=LRect1.borderColor;
// scontentDocument.innerText=LRect1.contentDocument;
scontentSrc.innerText=LRect1.contentSrc;
smarginHeight.innerText=LRect1.marginHeight;
smarginWidth.innerText=LRect1.marginWidth;
snextRect.innerText=LRect1.nextRect;
}
index++;
}
}
str='';
for (i=1;i< document.all.length;i++){
if (document.all[i].nodeName=='LAYOUTRECT') str+='i='+i+' '+document.all[i].nodeName+' id='+document.all[i].id;
}
document.write('<P align=center><FONT color=blue>'+str+'</FONT></P>');
</SCRIPT>
|
| style | script |
|---|---|
| {background-attachment:val} | obj.style.backgroundAttachment[=val] |
| ⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다. | |
| {right:val} | obj.style.right[=val] |
| ⇒ 개체 체계도상 오른쪽 개체와의 거리를 반환하거나 설정한다. | |
| {zoom:val} | obj.style.zoom[=val] |
| ⇒ 개체의 확대 배율을 반환하거나 설정한다. | |
| 이벤트 | 설명 |
|---|---|
| onlayoutcomplete | 원본 문서로부터 내용을 현재의 LayoutRect 개체에 채워넣기가 끝나고 인쇄하거나 인쇄미리보기를 실행하면 발생된다. |