diff options
Diffstat (limited to 'files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html')
| -rw-r--r-- | files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html new file mode 100644 index 0000000000..dd1af0a361 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html @@ -0,0 +1,126 @@ +--- +title: Templates +slug: Mozilla/Tech/XUL/XUL_Tutorial/Templates +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +<h3 id=".ED.85.9C.ED.94.8C.EB.A6.BF" name=".ED.85.9C.ED.94.8C.EB.A6.BF">템플릿</h3> +<p>이 절에서는 데이터로부터 요소를 생성시키는 방법에 대해 살펴보고 갑니다.</p> +<h4 id=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1" name=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1">요소의 생성</h4> +<p>XUL 에는 RDF 파일 혹은 내부 데이터 소스에 의한 RDF 로부터 공급되는 데이터로부터 요소를 생성하는 기능이 있습니다. Mozilla 에서는 북마크나 히스토리 혹은 메일 메세지등의 여러 가지의 데이터 소스가 제공되고 있습니다. 이것들에 대한 자세한 것은 다음 절에 취급합니다.</p> +<p>보편적으로, 트리 항목(treeitem)이나 메뉴 항목(menuitem)등의 요소가 데이터로부터 생성되게 됩니다. 그렇지만, 필요하면 다른 요소에 이용하는 일도 가능합니다. 그렇게 말한 요소가 보다 유용이 되는 것은 특수한 상황에 있어야하지만 트리나 메뉴에는 긴 코드를 필요로 하므로 우선은 그러한 요소에 대하고 나서 시작합니다.</p> +<p>RDF 데이터에 근거한 요소의 생성을 가능하게 하기 위해서는, 생성되는 요소 마다 복제되는 것 같은 단순한 템플릿을 줄 필요가 있습니다. 요컨데, 최초의 요소만을 주어 두어 나머지의 요소는 그것을 바탕으로 구축시키는 것입니다.</p> +<p>템플릿은 template 요소에 의해 작성됩니다. 그 중에 구축되는 각 요소에 대해 이용하고 싶은 요소를 둡니다. template 요소는 구축되는 요소를 포함하게 되는 요소내에 둘 필요가 있습니다. 예를 들면 트리의 경우, template 요소를 tree 요소내에 둡니다.</p> +<p>예를 보는 편이 빠를 것입니다. 간단한 예로서 탑 레벨의 각 북마크에 대응하는 버튼을 작성해 봅시다. Mozilla 에는 북마크 데이터 소스가 있으므로 데이터의 취득에는 그것을 이용합니다. 이 예에서는 버튼을 작성하는 대상으로 탑 레벨의 북마크(혹은 북마크 폴더)만을 취득합니다. 아래층의 북마크에 대해서는 트리나 메뉴등의 계층을 표시하는 요소가 필요하게 됩니다.</p> +<p>내부의 RDF 데이터 소스를 참조하는 것 같은 이 예나 다른 것은 chrome URL 로부터 읽혔을 경우에 대해서만 유효합니다. 안전상의 이유로부터 Mozilla 에서는 다른 소스로부터 남을 수 있는 데이터 소스에의 액세스는 할 수 없게 되어 있습니다.</p> +<p>이 예를 실제로 보기 위해서(때문에)는, chrome 패키지를 작성해 파일을 거기로부터 읽어들이게 할 필요가 있습니다. chrome URL 를 브라우저의 URL 필드에 입력합니다.</p> +<p>Example 9.2. 1: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </template> +</vbox> +</pre> +<p>여기에서는, 각 탑 레벨의 북마크에 대응하는 버튼을 포함한 세로 줄의 박스가 작성됩니다만, 위에 보여지듯이, template 요소는 button 요소를 1개만 포함하고 있습니다. 이 버튼이 생성할 필요가 있는 모든 버튼의 바탕으로 됩니다. 화면으로부터 알듯이, 각 북마크에 대응하는 일련의 버튼이 작성되고 있습니다.</p> +<p>이 예의 윈도우를 연 채로 해서 브라우저로 북마크를 추가해 보세요. 일련의 버튼이 즉시 갱신되는 것을 알 수 있습니다.(다만, 윈도우에 한 번 포커스를 댈 필요가 있을지도 모릅니다).</p> +<p>템플릿 자체는 세로 줄의 박스내에 놓여져 있습니다. 박스에는 템플릿을 이용하기 위한 2개의 특별한 속성이 주어지고 있어 이용하는 데이터를 어디에서 얻는지를 지정하고 있습니다. 우선 datasources 속성입니다만, 이것은 RDF 데이터 소스를 요소 생성에 있어서의 데이터 공급원으로 하는 경우에 이용합니다. 이 경우 rdf:bookmarks 가 이용됩니다. 이것은 북마크 데이터 소스라고 짐작이 되겠지요. 이 데이터 소스는 Mozilla 가 제공하는 것입니다. 당신 자신에 의한 데이터 소스를 이용하고 싶은 경우는, 아래의 예에 나타나고 있듯이 datasources 속성에 RDF 파일의 URL 를 지정합니다.</p> +<pre><box datasources="chrome://zoo/content/animals.rdf" + ref="http://www.some-fictitious-zoo.com/all-animals"> + +</pre> +<p><br> + 공백 캐릭터로 나눠지는 것으로 한 번에 복수의 데이터 소스를 속성으로 지정할 수도 있습니다. 이것은 복수의 소스로부터의 데이터를 표시시키고 싶은 경우에 이용할 수 있습니다.</p> +<p>다음에 ref 속성에는 데이터 소스내의 어디에서 데이터를 취득하는지를 지정합니다. 위의 북마크의 경우, 북마크 계층에 있어서의 루트를 지시하는 값 NC:BookmarksRoot 가 이용되고 있습니다. 여기로 지정 가능한 값은 이용하는 데이터 소스에 의존합니다. 당신 자신에 의한 데이터 소스를 이용하는 경우, 지정하는 값은 RDF 의 Bag, Seq, Alt 몇개의 요소에 있어서의 about 속성의 값에 대응하는 것이 됩니다.</p> +<p>이것들 2개의 속성을 위의 박스에 나누어주는 것으로 템플릿으로부터의 요소의 생성이 가능하게 됩니다. 다만, 템플릿내의 요소는 다른 방법으로 선언될 필요가 있습니다. 위의 예로 보여지듯이, button 요소에는 uri 속성이 주어지고 있고 label 속성의 값이 통상과 다른 것이 되어 있습니다.</p> +<p>템플릿내에 있어서의 속성값은 데이터 소스로부터 값을 취득해야 하는 것을 지시하기 때문에 'rdf:'로 시작됩니다. 전의 예에서는 label 속성이 이것에 해당합니다. 속성값의 나머지의 부분은 데이터 소스내의 name 프롭퍼티를 참조합니다. [역주：The remainder of the value refers to the name property is the datasource. 문법적으로 이상한 느낌이지만, 문중의 'property is ...'는 'property in ...'의 오타라고 생각된다. ] 그것은 데이터 소스로 이용되고 있는 이름 공간 URL 에 프롭퍼티명을 부가한 것으로 구성되어 있습니다. 여기를 이해할 수 없는 경우는 전 장의 마지막 부분을 읽어 봐 주세요. 거기에 RDF 내의 리소스가 어떤 형태로 참조될지가 진술되고 있습니다. 여기에서는 북마크명 밖에 이용하지 않았습니다만, 그 밖에도 여러 가지의 필드를 이용할 수 있습니다.</p> +<p>버튼의 label에는 북마크명을 설정하고 싶었기 때문에, 버튼의 label 속성은 이 특별한 URI 로 설정되어 있습니다. URI 를 button 요소의 임의의 속성이나 다른 요소의 속성으로 설정할 수도 있었습니다. 이러한 속성의 값은 데이터 소스 - 여기에서는 북마크 데이터 소스 - 로부터 공급되는 데이터로 옮겨집니다. 그 결과, 버튼의 label는 북마크명이 되는 것입니다.</p> +<p>아래의 예에서는 데이터 소스를 이용해 버튼에 있어서의 다른 속성을 어떻게 설정 할 수 있는지를 나타내고 있습니다. 물론, 데이터 소스에는 적절한 리소스가 주어지고 있는 것으로 합니다. 만약 속성에 대응하는 리소스가 눈에 띄지 않는 경우, 그 속성의 값은 캐릭터 라인이 됩니다.</p> +<pre><button class="rdf:http://www.example.com/rdf#class" + uri="rdf:*" + label="rdf:http://www.example.com/rdf#name"/> + crop="rdf:http://www.example.com/rdf#crop"/> + +</pre> +<p><br> + 보듯이 다른 데이터 소스로부터 공급되는 속성을 이용해 동적으로 요소의 리스트를 생성시킬 수가 있습니다.</p> +<p>내용 생성을 시작하는 장소의 요소는 uri 속성으로 지정합니다. 보다 이전의 내용의 생성은 한 번 잘른 것인데 비해 내부의 내용은 각각의 리소스에 대해 생성됩니다. 이 점에 대해서는 트리에 대한 템플릿의 작성에 대해 말할 때에 자세하게 살펴보기로 하겠습니다.</p> +<p>이러한 기능을 템플릿을 포함한 컨테이너 - 여기에서는 박스 - 에 부가하는 것으로써, 외부의 데이터로부터 여러 가지의 흥미를 끄는 내용 리스트를 생성시킬 수가 있습니다. 물론, 템플릿내에는 복수의 요소를 두어도 어느 요소에도 고유의 RDF 참조를 줄 수가 있습니다. 아래에 그 예를 나타냅니다.</p> +<p>Example 9.2. 2: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <vbox uri="rdf:*"> + <button label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <label value="rdf:http://home.netscape.com/NC-rdf#URL"/> + </vbox> + </template> +</vbox> +</pre> +<p><br> + 이 예는 각 북마크에 대해 버튼과 label를 가지는 세로 줄의 박스를 생성합니다. 버튼은 북마크명, label는 URL 를 가지게 됩니다.</p> +<p>생성되는 새로운 요소는 XUL 내에 직접 기록된 요소와 기능적으로는 아무런 바뀔 것은 없습니다. 템플릿에 의해 생성되는 모든 요소에 대해 리소스를 특정하는 id 속성이 주어집니다. 이것을 이용해 리소스를 특정할 수 있습니다.</p> +<p>아래의 예와 같이 같은 속성에 복수의 리소스치를 공백 캐릭터로 단락지어 지정할 수도 있습니다. 리소스 구문의 상세입니다.</p> +<p>Example 9.2. 3: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" + flex="1"> + <template> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/> + </template> +</vbox> +</pre> +<h4 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95">템플릿 구축 방법</h4> +<p>요소가 데이터소스의 속성을 가질 때, 그 요소는 템플릿으로부터 구축되는 것을 의미합니다. 내용이 구축될지 어떨지는 template 태그는 아니고, datasources 속성으로 정해지는 것에 주의해 주세요. 이 속성이 존재할 때, 빌더로 불리는 오브젝트가 요소에 부가됩니다. 이 오브젝트가 템플릿으로부터의 내용 생성의 역할을 하게 됩니다. JavaScript 로부터는 builder 속성으로부터 빌더객체에 액세스 할 수가 있습니다. 통상, 내용 생성이 자동적으로 행해지지 않을 때에 빌더에 내용의 재생성을 실시하게 하고 싶은 경우를 제외하면, 이 필요성은 없을 것입니다.</p> +<p>빌더에는 2 종류가 있습니다. 1개는 대부분의 경우에 이용되는 내용 빌더로 불려지고 또 하나는 트리에 대해서만 이용되는 트리빌더입니다.</p> +<p>내용 빌더는 template 요소내의 내용을 꺼내 항목 마다 복제합니다. 예를 들면, 위의 예로 유저가 10 개의 북마크를 가지고 있는 경우, 10 개의 label 요소가 생성되어 vbox 요소의 아이 요소로서 추가되겠지요. 문서 트리의 주사에 DOM 함수를 사용하면, 이러한 요소를 찾아내 프롭퍼티를 조사할 수 있습니다. 이러한 요소는 표시되는 한편, template 요소 자체는 문서 트리내에는 존재하는 것의 표시는 되지 않습니다. 더욱, 각 label의 id 속성은 그 항목의 RDF 리소스로 설정됩니다.</p> +<p>내용 빌더는 항상 uri="rdf:*" 가 지정되었는데로부터 생성을 개시합니다. uri 속성이 요소 트리에 대해 하위의 요소에게 줄 수 있는 경우, 상위의 요소는 한 번 밖에 작성되지 않습니다. 아래의 예에서는 hbox 가 1개 작성되어 그 내용은 항목 마다 생성되는 label로 채워질 수 있게 됩니다.</p> +<pre><template> + <hbox> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/> + </hbox> +</template> +</pre> +<p>데이터소스 속성을 가지는 요소내에 존재하지만 템플릿의 외측에 있는 내용도 표시됩니다. 이와 같이, 템플릿에 대해 정적인 내용과 동적인 내용을 혼합할 수가 있습니다.</p> +<p>한편, 트리빌더는 항목 마다 DOM 요소를 생성할 것은 없습니다. 그 대신 필요가 생길 때에 RDF 데이터소스로부터 데이터를 직접 취득합니다. 트리는 몇천줄의 항목을 표시하는 것이 되고 있으므로 이 편이 효율적인 것입니다. 셀의 하나하나에 대해서 요소를 생성하는 것은 비용이 너무 비싸게 듭니다. 다만, 트리에서는 텍스트 밖에 표시할 수 없습니다. [역주：8.1 절 「트리」에서는 트리는 화상도 내용으로서 포함할 수 있다고 기록되고 있다. ] 더욱, 요소는 생성되지 않기 때문에 트리의 셀에 대한 스타일에 CSS 프롭퍼티를 이용하는 것은 통상의 방법에서는 할 수 없습니다.</p> +<p>트리빌더는 트리에 대해서만 이용됩니다. 다른 요소에서는 콘텐츠빌더만 이용됩니다만, 이것은 특히 문제가 되는 것이 아닙니다. 메뉴등의 다른 요소에는 그러한 다수의 항목을 표시하는 것은 상정되어 있지 않기 때문입니다. 내용빌더를 트리에 이용하는 일도 가능하여 treeitem 요소와 관련하는 요소가 항목 마다 작성됩니다.</p> +<h4 id=".EB.A3.B0" name=".EB.A3.B0">룰</h4> +<p>전에 언급한 예에 있어서 화상에서는 3번째의 버튼에는 하이픈만이 표시되고 있는 것을 알 것입니다. 이것은 북마크의 리스트에 있어서의 separator 입니다. 지금까지의 이용과 같이 RDF 북마크 데이터 소스도 마치 통상의 북마크와 같게 separator를 공급합니다. separator의 리소스에 대해서는 사실은 버튼의 대신에 작은 틈새를 두고 싶었습니다만. 즉, 통상의 북마크와 separator에 대해 다른 종류의 내용을 작성시키고 싶은 것입니다.</p> +<p>이것을 실시하려면 rule 요소를 이용합니다. 작성시키고 싶은 요소의 종류 마다 룰을 정의합니다. 여기의 예에서는 북마크에 대한 룰과 separator에 대한 룰이 필요하게 됩니다. 어느 룰을 어느 RDF 리소스에 적용할까는 rule 요소에 나누어주는 속성에 의해 정해집니다.</p> +<p>어느 룰을 데이터에 적용할까를 주시하는 과정에 대해서는 각 rule 요소에 대해 합치할지 어떨지가 차례로 조사할 수 있습니다. 즉, 룰을 정의하는 차례가 중요하게 됩니다. 먼저 정의되고 있는 룰이 다음에 정의되고 있는 룰보다 우선됩니다.</p> +<p>다음의 예는 이전의 예에 2개의 룰을 더한 것입니다.</p> +<p>Example 9.2. 4: 소스</p> +<pre><window + id="example-window" + title="Bookmarks List" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + + <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"> + <spacer uri="rdf:*" height="16"/> + </rule> + + <rule> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + + </template> + </vbox> + +</window> +</pre> +<p>2개의 룰을 이용하는 것으로써, 템플릿내의 내용은 선택적으로 생성되게 됩니다. 최초의 rule 요소에서는 rdf:type 속성으로 보여지도록, 북마크 separator가 선택됩니다. 후의 룰에서는 rule 요소에 어떤 속성도 나누어주어지지 않기 때문에, 모든 데이터가 일치합니다.</p> +<p>rule 태그에 놓여진 모든 속성이 일치 조건에 이용됩니다. 이 경우, 북마크 데이터 소스는 separator인가 어떤가를 구별할 수 있듯이 rdf:type 프롭퍼티를 공급하고 있습니다. 이 속성은, RDF 북마크 데이터 소스에 대해, separator에 대한 고유의 값으로 설정됩니다. 이것에 의해 separator가 아닌 것이라는 구별을 붙일 수 있게 됩니다. 동일한 기법은 RDF 의 Description 요소에게 줄 수 있고 있는 임의의 속성에 대해 적용할 수가 있습니다.</p> +<p>위의 예의 최초의 룰로 주어지고 있는 특별한 URL 값은 separator에게 이용되는 것입니다. 즉, separator에 대해서는 최초의 룰에 따라 16 픽셀의 틈새를 비우는 spacer 요소가 생성됩니다. separator가 아닌 모든 요소에 대해서는 최초의 룰에 일치하지 않고 후의 룰에 따르게 됩니다. 후의 룰에서는 속성이 일절 지정되어 있지 않기 때문에 모든 데이터에 일치하게 됩니다. 이것은 물론, 나머지의 데이터에 대해서 실시하고 싶었던 것입니다.</p> +<p>하나 더, RDF 네임스페이스( rdf:type )으로부터 속성을 꺼내고 싶었기 때문에 네임스페이스 선언을 window 태그에 부가할 필요가 있었던 것에 깨닫았을 것입니다. 이것을 해 두지 않으면 속성은 XUL 네임스페이스에 포함되는 것이라고 보여져 버립니다. 물론 거기에는 존재하지 않기 때문에, 룰은 합치하지 않게 됩니다. 자기 부담의 네임스페이스의 속성을 이용하는 경우도 룰에 일치시키기 위해서는 이름 공간 선언이 필요하게 됩니다.</p> +<p>2번째의 룰이 제거되었을 때에 무엇이 일어날까는 상상이 붙겠지요. 그 결과는 다만 separator 1개가 표시되는 것만으로 있어, 북마크는 합치하는 룰이 없기 때문에 표시되지 않습니다.</p> +<p>간단하게 말하면, rule 요소에 나누어주어진 모든 속성이 RDF 리소스의 대응하는 속성에 일치할 때 룰이 일치한다고 하는 것입니다. RDF 파일의 경우는 리소스는 Description 요소가 됩니다.</p> +<p>다만, 소수의 예외가 있습니다. 속성 id, rdf:property, rdf:instanceOf 에는 일치시킬 수가 없습니다. 어쨌든, 자기 부담의 속성을 자기 부담의 네임스페이스에서 준비하면 끝나는 것이므로, 문제가 되는 것은 없을 것입니다.</p> +<p>최초의 룰이 존재하지 않는 템플릿에 대해서는, 실제는 속성을 가지지 않는 다만 하나의 룰이 지정되고 있는 것이라고 되는 것에 주의해 주세요.</p> +<p>다음절에서는 트리에 대한 템플릿의 이용을 살펴보고 갑니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Introduction_to_RDF" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees_and_Templates">다음 »</a></p> +</div><p></p> |