Can I fly high in the Sky?

Never say never.

导航

自定义Template，向其中添加新的panel

Posted on 2015-03-25 10:01  lsr_flying  阅读(431)  评论(0)  编辑  收藏  举报

参考网站：https://www.devexpress.com/Support/Center/Example/Details/E2690

 

思路：

新建一个DefaultTemplate:

     

 

在新建的Template中进行自定义，在需要自定义的位置，加入PlaceHolder控件，这里加入的是XafUpdatePanel。这里以在右边加入一个XafUpdatePanel为例。

1  <td id="Right" width="250px" style="vertical-align: top">
2        <cc3:XafUpdatePanel ID="UPRight" runat="server"/>
3  </td>

界面如下：

 

为了实现能隐藏/显示Panel的功能，可以在Panel的左边加入一个分隔符。代码加入分隔符。

1  <td id="RS" style="width: 6px; border-bottom-style: none; border-top-style: none"  class="dxsplVSeparator_<%= BaseXafPage.CurrentTheme %> dxsplPane_<%=BaseXafPage.CurrentTheme %>">
2      <div id="RSB" class="dxsplVSeparatorButton_<%=BaseXafPage.CurrentTheme%>" onmouseover="OnMouseEnter('RSB')" onmouseout="OnMouseLeave('RSB')" onclick="OnClick('Right','RSI')">
3               <div id="RSI" style="width: 8px;" class="dxWeb_splVCollapseForwardButton_<%=BaseXafPage.CurrentTheme %>">
4                </div>
5       </div>
6 </td>

这里介绍下该段语句的简单用法，onMouseEnter()和OnMouseLeave()传入的是id号为“RSB"的div元素的id，OnClick()第一个参数记录的是要隐藏的td元素的id号，在本例中，XafUpdatePanel位于id号为"Right"的元素中，通过隐藏该元素，即可隐藏Panel。ID为”RSI"的div元素放置的时隐藏/显示符号。“〉"为dxWeb_splVCollapseForwardButton。"<"为dxWeb_spVCollapseBackwardButton。请根据分隔符的位置设置。

 

同理，设置左边的PlaceHolder的代码如下：

 1 <td id="leftPanel" width="250px" style="vertical-align: top">
 2      <cc3:XafUpdatePanel ID="UPLeft" runat="server"/>
 3 </td>
 4 <td id="RL" style="width: 6px; border-bottom-style: none; border-top-style: none"
 5     class="dxsplVSeparator_<%= BaseXafPage.CurrentTheme %> dxsplPane_<%= BaseXafPage.CurrentTheme %>">
 6    <div id="RLT" class="dxsplVSeparatorButton_<%= BaseXafPage.CurrentTheme %>" onmouseover="OnMouseEnter('RLT')"
 7         onmouseout="OnMouseLeave('RLT')" onclick="OnClick('leftPanel', 'RLI',true)">
 8            <div id="RLI" style="width: 8px;" class="dxWeb_splVCollapseBackwardButton_<%= BaseXafPage.CurrentTheme %>">
 9            </div>
10    </div>
11 </td>

 

完成Template的自定义工作后，要通过属性将新添加的XafUpdatePanel暴露出来。在CustomMainGISTemplate.ascx.cs中的类中添加代码如下：

 1         #region Expose DefineControls
 2         public System.Web.UI.Control RightPlaceHolder
 3         {
 4             get { return UPRight; }
 5         }
 6         public System.Web.UI.Control LeftPlaceHodler
 7         {
 8             get { return UPLeft; }
 9         }
10         #endregion

 

注意，ASP.NET与WinForm在引用自定义模板的时候，有些许区别。在应用程序初始化时，默认页面就是Default.aspx。模板页（.ascx）是通过嵌入到Default.aspx中来实现的。因此，外部方法一般得通过Default.aspx文件的访问来获取customTemplate.ascx中的控件。这一点得注意。

接下来就是要定义一个外部访问接口，供XAF自动调用。

1     public interface InterfaceCustomGISTemplate:IFrameTemplate
2     {
3         Control RightPlaceHolder { get; }
4         Control LeftPlaceHodler { get; }
5     }

 

因为上一段讨论的原因，需要在Default.aspx.cs文件中，实现该接口，才可以让其它方法访问自定义的XafUpdatePanel。从而实现初始化等工作。

 1 public partial class Default : BaseXafPage,InterfaceCustomGISTemplate
 2 {
 3 //......
 4     #region Expose CustomControl 
 5     public Control RightPlaceHolder
 6     {
 7         get { return TemplateContent is customMainGISTemplate ? ((customMainGISTemplate)TemplateContent).RightPlaceHolder : null; }
 8     }
 9     public Control LeftPlaceHodler
10     {
11         get { return TemplateContent is customMainGISTemplate ? ((customMainGISTemplate)TemplateContent).LeftPlaceHodler : null; }
12     }
13     #endregion
14 }

 

接下来，就可以通过实现一个controller来完成在对应的XafUpdatePanel上添加控件并初始化等操作。XAF提供了一个CustomizeTemplateViewControllerBase<T>类，以帮助用户完成对自定义模板的初始化工作。用户只需继承该基类，并实现对应的接口即可。

具体代码如下：

 1 public partial class GISInfoController : CustomizeTemplateViewControllerBase<InterfaceCustomGISTemplate>
 2 {
 3 //......
 4 protected override void AddControlsToTemplateCore(InterfaceCustomGISTemplate template)
 5         {
 6             Control rightPlaceHolder = template.RightPlaceHolder;
 7             if (rightPlaceHolder == null) return;
 8             this.rightPanel = CreatePanel("rightPanel","InformationPanel");
 9             licMsg = new LiteralControl("Used to show information or other related operation");
10             this.rightPanel.Controls.Add(licMsg);
11             rightPlaceHolder.Controls.Add(rightPanel);
12 
13             Control leftPlaceHolder = template.LeftPlaceHodler;
14             if (leftPlaceHolder == null) return;
15             this.leftPanel = CreatePanel("leftPanel", "DeviceSelectPanel");
16             mainTV = new DevExpress.Web.ASPxTreeView.ASPxTreeView();
17             mainTV.Nodes.Add("Add node");
18             leftPanel.Controls.Add(mainTV);
19             leftPlaceHolder.Controls.Add(leftPanel);
20 
21 
22         }
23 
24         protected override void RemoveControlsFromTemplateCore(InterfaceCustomGISTemplate template)
25         {
26             Control rightPlaceHolder = template.RightPlaceHolder;
27             if (rightPlaceHolder == null) return;
28             rightPlaceHolder.Controls.Remove(rightPanel);
29             rightPanel = null;
30             licMsg = null;
31 
32             Control leftPlaceHolder = template.LeftPlaceHodler;
33             if (leftPlaceHolder == null) return;
34             leftPlaceHolder.Controls.Remove(leftPanel);
35             leftPanel = null;
36             mainTV = null;
37         }
38 
39         protected override void UpdateControls(View view)
40         {
41             licMsg.Text = licMsg.Text+string.Format("\nCurrent View Caption is:{0}", view.Caption);
42         }
43 
44         protected override void UpdateControls(object currentObject)
45         {
46  
47         }
48 
49 }

 

最后，就是要把当前使用的默认模板替换成当前模板，具体在Global.asax中完成。

 1 public class Global : System.Web.HttpApplication
 2 {
 3 //......
 4  protected void Session_Start(Object sender, EventArgs e)
 5         {
 6             WebApplication.SetInstance(Session, new RMFSystemAspNetApplication());
 7             WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath = "Template/customMainGISTemplate.ascx";
 8 //......
 9 
10             WebApplication.Instance.Setup();
11             WebApplication.Instance.Start();
12         }
13 }

 

生成界面如下：