在Tridion功能区中使用Usercontrol创建按钮

Question

我创建了一个usercontrol,它有两个按钮,一个在另一个下面

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ViewItemsGroup.ascx.cs" Inherits="SDL.Examples.UI.Controls.ViewItemsGroup" %>
<%@ Import Namespace="Tridion.Web.UI" %> 
<c:RibbonItemsGroup runat="server"  ID="RibbonItemsGroup">   
  <c:RibbonButton runat="server" CommandName="ViewStaging" Title="View in Staging" Label="View In Staging" IsSmallButton="true" ID="ViewStagingBtn" />   
  <c:RibbonButton runat="server" CommandName="ViewLive" Title="View in Live" Label="View in Live" IsSmallButton="true" ID="ViewLiveBtn" /> 
</c:RibbonItemsGroup> 

在extension.config中,我引用了usercontrol,如下所示.

<ext:extension assignid="ViewItemsGroup" groupid="EditGroup" name="View" pageid="HomePage" insertbefore="PublishGroup">  
  <ext:group>~/Controls/ViewItemsGroup.ascx</ext:group> 
  <ext:dependencies>      
    <cfg:dependency>My.Theme</cfg:dependency>
  </ext:dependencies>  
  <ext:apply>    
    <ext:view name="DashboardView">   
      <ext:control id="DashboardToolbar" /> 
    </ext:view>   
    <ext:view name="PageView">   
      <ext:control id="ItemToolbar" />  
    </ext:view>  
  </ext:apply>
</ext:extension> 

1. 我是否还需要在extension.config中包含我的按钮详细信息(在ID之类的usercontrol中提到)？是否需要添加到<ext:command> ---- </ext:command> 任何其他地方.

2. 创建的usercontrol,我只是放在extension.config,.js中,并在我的extension.config文件中引用ascx.我是否需要将usercontrol放在任何其他文件夹中？

Answer 1

1. 在extension.config中,指定ext:dependencies节点下ItemsGroup的依赖项.这应该指向cfg:group您引用命令集的位置,而命令集又指向您的JavaScript文件.您需要正确地创建这些引用,否则SDL Tridion UI框架将不知道在哪里可以找到您的代码.系统就像我们无法施展魔法一样,也没有水晶球.

2. 对于用户控件也是如此,如果您不将其与其他扩展文件(如配置,JavaScript和CSS)放在一起,UI框架将如何找到它.您在ext:group节点中指定放置位置的位置.例如,~/Controls/MyItemsGroup.ascx您将它放在Controls扩展的根目录中的子目录中.

您的配置应该看起来像这样,依赖关系指向您在resources节点下面指定的组:

<ext:ribbontoolbars>
  <ext:add>
    <ext:extension assignid="MyGroup" ...>
      <ext:group>~/Controls/MyItemsGroup.ascx</ext:group>
      <ext:dependencies>
        <cfg:dependency>My.Commands</cfg:dependency>
      </ext:dependencies>
      ...
    </ext:extension>
  </ext:add>
</ext:ribbontoolbars>

然后在你的控制,你在它的属性直接引用的命令,这是JavaScript命令在其下_isAvailable及_isEnabled方法等.控制将是这样的:

<c:RibbonItemsGroup runat="server" ID="MyItemsGroup">
  <c:RibbonButton runat="server" 
                  CommandName="MyBtn" 
                  Title="My Title" Label="My Label" 
                  IsSmallButton="true" ID="MyId" />
  ...
 </c:RibbonItemsGroup>

最后,实现按钮命令的JavaScript将在其命名空间中使用CommandName:

Type.registerNamespace("Extensions");

Extensions.MyBtn = function Extensions$MyBtn() {
  Type.enableInterface(this, "Extensions.MyBtn");
  this.addInterface("Tridion.Cme.Command", ["MyBtn"]);
};

Extensions.MyBtn.prototype._isAvailable = function MyBtn$_isAvailable(selection) {
  return true;
};

Extensions.MyBtn.prototype._isEnabled = function MyBtn$_isEnabled(selection) {
  return this._isAvailable(selection);
};

Extensions.MyBtn.prototype._execute = function MyBtn$_execute(selection) {
  // this is where your code comes
};