템플릿 집합 및 템플릿 기반 컨트롤

아티클
08/20/2008

업데이트: 2007년 11월

ASP.NET에서는 컨트롤의 콘텐츠와 레이아웃을 정의하는 다양한 템플릿 속성을 노출하는 템플릿 기반 컨트롤을 제공합니다. 이러한 템플릿은 컨트롤을 렌더링하는 동안 적절한 위치에 삽입됩니다. 예를 들어, List 컨트롤에는 머리글 및 바닥글 템플릿이 삽입됩니다. 이 기능을 사용하면 런타임에 컨트롤의 모양을 장치에 따라 사용자 지정할 수 있습니다.

ASP.NET 모바일 컨트롤은 이 모델을 확장하여 템플릿 집합이라는 개념을 소개합니다. 템플릿 집합은 템플릿 컬렉션입니다. 그러나 단일 템플릿 기반 컨트롤은 장치별 조건이 각각 다른 템플릿 집합을 여러 개 참조할 수 있습니다.

템플릿 집합의 렌더링 기준

템플릿 기반 컨트롤의 각 템플릿 집합은 공유 <DeviceSpecific> 요소 내의 <Choice> 요소에 포함되어 있습니다. 런타임에 <DeviceSpecific> 요소의 선택 항목은 순서대로 평가되며 일치하는 첫 번째 <Choice> 요소가 장치별 내용에 사용됩니다. 선택한 항목에 템플릿이 있으면 컨트롤에 템플릿이 사용되고, 템플릿이 없거나 지정된 선택 항목이 적절하지 않은 경우 컨트롤은 기본 태그를 렌더링합니다.

장치 독립적 템플릿

모든 템플릿 기반 컨트롤은 장치 독립적인 템플릿을 사용할 수 있습니다. 장치 독립적인 템플릿을 지정하려면 <Choice> 요소를 사용할 때 명시적인 Filter 특성을 설정하지 않습니다. 장치 독립적인 선택 항목(지정된 경우)은 대상 장치에 적용할 다른 선택 항목이 없는 경우 선택되도록 항상 맨 마지막에 선언되어야 합니다.

컨트롤별 렌더링

템플릿 모드에 있는 컨트롤의 렌더링 동작은 컨트롤에 따라 다릅니다. List 및 ObjectList 같은 일부 컨트롤은 제공된 템플릿의 모든 내용을 렌더링하고, 다른 컨트롤은 특정 템플릿의 내용을 해당 컨트롤의 기본 내용에 추가할 수도 있습니다. 예를 들어, Form 컨트롤에 대해 머리글 또는 바닥글 템플릿이 선택되어 있는 경우 템플릿에 포함된 태그는 각각 머리글 또는 바닥글로 폼 내용에 추가됩니다.

템플릿 기반 컨트롤의 속성 설정

템플릿에서 컨트롤 속성을 프로그래밍 방식으로 설정하려면 명명 컨테이너에 대한 참조를 얻고 FindControl 메서드를 사용하여 컨트롤을 찾아야 합니다. 그런 다음 해당 속성을 설정합니다. 다음 예제에서는 이 방법을 보여 줍니다.

참고:
스타일시트 정보는 StyleReference 속성을 프로그래밍 방식으로 변경하기 전에 로드되므로 코드에서 해당 정보를 변경해도 아무런 영향을 주지 않습니다.

void Page_Load(Object sender, EventArgs e)
{
    // Iterate through the controls in the form.
    foreach(Control c in Form1.Controls)
    {
        if(c.GetType()) == typeof(TemplateContainer)
        {
            // Get the link control.
            Link ctrl = (Link)c.FindControl("myLink");
            if (ctrl != null)
            {
                // Set the text and url properties.
                ctrl.Text = "Home Page";
                ctrl.NavigateURL = "https://www.microsoft.com";
            }
        }
    }
}

템플릿 집합 및 스타일

StyleSheet 컨트롤의 스타일에는 템플릿 집합이 포함되어 있을 수도 있습니다. 따라서 같은 스타일을 참조하고, 같은 템플릿 집합을 사용하며, 해당 스타일에서 제공하는 동일한 캡슐화 이점을 활용하는 여러 개의 템플릿 기반 컨트롤을 사용할 수 있습니다. 템플릿 집합을 보여 주는 예제는 ASP.NET 모바일 컨트롤 퀵 스타트를 참조하십시오.

스타일 템플릿과 스타일 속성 비교

부모로부터 스타일을 상속받거나, StyleReference 속성을 명시적으로 설정하거나, 집계를 통해 스타일을 상속할 수 있습니다. 그러나 템플릿을 사용하면 단계적 효과는 없습니다. 부모 스타일 템플릿에서 템플릿을 가져오려면 스타일시트에서 템플릿을 사용해야 합니다. 자세한 내용은 스타일을 참조하십시오.

동적으로 추가된 템플릿

일부 고급 시나리오에서는 템플릿을 동적으로 인스턴스화하고 추가하면 유용합니다. 다음 코드 예제에서는 Init 이벤트 처리기에 템플릿을 추가합니다.

<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script >
    private void Form_Init(object sender, System.EventArgs e)
    {
        DeviceSpecific devSpecific = new DeviceSpecific();

        // Create the choice tag.
        DeviceSpecificChoice devChoice = 
            new DeviceSpecificChoice();
        devChoice.Filter = "isHTML32";

        // Create the template.
        ITemplate myTemplate = 
            new CustomTemplate("HeaderTemplate");

        // Create the templateContainer.
        TemplateContainer container = new TemplateContainer();
        myTemplate.InstantiateIn(container);

        // Create the tree.
        devChoice.Templates.Add("HeaderTemplate", myTemplate);
        ((IParserAccessor)devSpecific).AddParsedSubObject(devChoice);
        ((IParserAccessor)form1).AddParsedSubObject(devSpecific);
    }
    public class CustomTemplate : ITemplate
    {
        String strWhichTemplate;

        public CustomTemplate(String strTemplate)
        {
            strWhichTemplate = strTemplate;
        }

        public void InstantiateIn(Control container)
        {
            if (strWhichTemplate == "HeaderTemplate")
            {
                System.Web.UI.MobileControls.Label lb =
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "Header Template";

                System.Web.UI.MobileControls.Command cmd = 
                    new System.Web.UI.MobileControls.Command();
                cmd.Text = "heLLo";

                container.Controls.Add(lb);
                container.Controls.Add(cmd);
            }
            else if (strWhichTemplate == "FooterTemplate")
            {
                System.Web.UI.MobileControls.Label lb = 
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "FooterTemplate";
                container.Controls.Add(lb);
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <mobile:form id="form1"  OnInit="Form_Init">
  </mobile:form>
</body>
</html>

장치별 템플릿을 사용할 때 특별히 고려할 사항

장치별 태그 언어와 모바일 컨트롤을 혼합하는 경우에는 모바일 컨트롤에서 렌더링하는 대상에 따라 일관성을 유지해야 합니다. 장치별 태그와 장치 독립적 태그가 혼합된 경우에는 자동 검색 및 적용 기능이 지원되지 않습니다.

예를 들어, 아래의 코드 예제에서 첫 번째 Panel 컨트롤과 Label 컨트롤에 대한 alignment 설정을 보십시오.

<mobile:Panel runat=server alignment="right">
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate>
      <table columns="2" align="LR">
        <tr><td>
    </ContentTemplate>
  </Choice></Devicespecific>
</mobile:panel>

<Mobile:Label id="label1" runat=server Text="HELLO, HOW ARE YOU?" 
    alignment="left">
</Mobile:Label>
<mobile:Panel runat=server>
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate></td><td>
    </ContentTemplate>
  </Choice>
</DeviceSpecific> 
</mobile:panel>

WML <p> 요소는 기본 이외의 맞춤을 렌더링하는 데 사용됩니다. 위의 예제에서 두 번째 Label 컨트롤은 WML <td> 요소 안에 있고, 두 번째 Label 컨트롤에 대해 생성된 <p> 요소는 <td> 요소 안에 있으므로 브라우저에서 제대로 렌더링되지 않습니다.

이 경우 Label 컨트롤은 첫 번째 Panel 컨트롤에서 맞춤이 상속되지 않으므로 맞춤에 대해 <p> 태그를 생성합니다. 그러나 이런 경우에는 <p> 태그를 추가할 수 없습니다. 일반적인 상황은 아니지만 대상 장치가 WML 기반인 아닌 경우 Label 컨트롤을 볼 수 있도록 표시하고 Label 컨트롤의 텍스트를 템플릿 안에 지정하면 문제를 해결할 수 있습니다.

임의의 장치별 태그

어떤 경우에는 특정 장치 또는 장치 형식에 대해 임의의 태그를 삽입할 수 있습니다. 이를 위해 ASP.NET 모바일 웹 페이지에서는 Panel 컨트롤에 내용 템플릿을 제공합니다. 선택한 항목에 내용 템플릿이 있는 경우 컨트롤은 일반적인 내용 대신 템플릿을 사용하여 렌더링됭니다.