ASP.NET 移动控件模板集和模板化控件

最新推荐文章于 2024-11-07 09:39:08 发布

jelink

最新推荐文章于 2024-11-07 09:39:08 发布

阅读量1.7k

点赞数

分类专栏： WAP 文章标签： asp.net alignment server stylesheet mobile filter

WAP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ASP.NET 移动控件

模板集和模板化控件

ASP.NET 提供了模板化控件，这种控件公开若干模板属性，开发人员可以应用这些属性来标记语言目标。这些模板在控件呈现期间插入到适当的位置。例如，有用于 List 控件的模板，如页眉和页脚模板。有了这一功能，就可以根据不同的设备，在运行时对控件的外观进行大量的自定义。

ASP.NET 移动控件扩展了此模型，并引入了模板集的概念。模板集是由模板组成的集合。但是，单个模板化控件可能引用多个模板集，而每个模板集都具有不同的特定于设备的条件。

模板集的呈现条件

模板化控件的每个模板集都包含在 <Choice> 元素中，而该元素驻留在共享的 <DeviceSpecific> 元素内。

运行时，按顺序计算 <DeviceSpecific> 元素中的选项。第一个匹配的 <Choice> 元素用于特定于设备的内容。如果选中的选项包含模板，控件将使用这些模板。如果没有找到模板，或者指定的选项都不适用，则控件以默认的呈现方式呈现。

根据设计，不能以编程方式更改当前窗体的 StyleReference 属性，然后立即切换到另一窗体并希望控件以新的样式设置呈现。由于样式模板是在引用 StyleReference 属性之前加载的；因此，编程更改不过是马后炮。

特定于控件的呈现

模板模式中的控件呈现行为是特定于控件的。有些控件（如 List 和 ObjectList）可能从提供的模板呈现它们的所有内容。有些控件则可能将特定模板的内容添加到它们的默认内容中。例如，如果为 Form 控件指定并选择了页眉或页脚模板，则该模板中包含的标记将被添加到窗体内容中，分别作为页眉或页脚。

设置模板化控件的属性

设置模板中的控件属性比设置不在模板中的控件属性稍微费点事。您必须获取对命名容器的引用，并使用 FindControl 方法查找链接控件，然后才可以设置属性。下面的示例简要阐释了这些概念。

[C#]
void Page_Load(Object sender, EventArgs e) {

  // Iterate through the controls in the form.
  foreach(Control c in Form1.Controls)   {

      if(c.GetType().ToString() ==
      "System.Web.UI.MobileControls.TemplateContainer")     {
      // Get the link control.
      Control ctrl = c.FindControl("myLink");

      if (ctrl != null)       {
        // Set the text and url properties.
        ((System.Web.UI.MobileControls.Link)ctrl).Text = "Home Page";
        ((System.Web.UI.MobileControls.Link)ctrl).NavigateURL = 
          "http://www.microsoft.com/china";
      }
    }
  }
}

模板集和样式

StyleSheet 控件中的样式可能还包含模板集。因此可以有多个模板化控件，它们引用同一样式，使用相同的模板集，而且提供与样式所提供的封装相同的优点。有关阐释模板集的示例，请参见 ASP.NET 移动控件快速入门。

样式模板与样式属性的比较

如样式文档中所述，可以从父级继承样式，也可以显式设置 StyleReference 属性，或通过聚合继承样式。但是，使用模板时不存在层叠效果。除非使用样式表中的模板，否则无法从父级样式模板中获得一个模板。

与设备无关的模板

任何模板化控件都可以有与设备无关的模板。要指定与设备无关的模板，请使用不带显式 Filter 属性的 <Choice> 元素。指定与设备无关的选项时，它必须始终是最后声明的选项，以便在没有任何其他选项适用于目标设备时选择它。

窗体控件中的模板用户界面

在一些高级方案中，动态实例化和添加模板很有用。下面的代码示例在 Init 事件处理程序中添加模板。

[C#]
<%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" Debug="true"%>
<script runat="server">
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;
   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>
<body>
   <mobile:Form id="Form1" runat="server" OnInit="Form_Init">
   </mobile:Form>
</body>

使用特定于设备的模板时的特殊注意事项

混合使用特定于设备的标记语言与移动控件时，必须基于移动控件呈现的内容来确保一致性。混合使用特定于设备的标记和与设备无关的标记时，不支持智能检测和匹配。

例如，在下面的部分代码示例中，请注意第一个 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> 标记。

这种情况下，由于 Label 控件不从第一个 Panel 控件继承对齐方式，因此它为自己的对齐方式生成一个 <p> 标记。但是，此情况下不能添加 <p> 标记。这种情况并不常见，通过以下方式可以解决此问题：将 Label 控件标记为仅当目标设备不是基于 WML 的设备时可见，并在模板中指定 Label 控件的文本。