在 Tridion Ribbon 中使用 Usercontrol 创建按钮 [英] Creating Buttons using Usercontrol in Tridion Ribbon

问题描述

我创建了一个用户控件，用于将两个按钮置于另一个之下作为

I have created a usercontrol for having two buttons one below the other as

<%@ 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，如下所示.

In the extension.config i am refering to the usercontrol as shown below.

<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)?是否需要在中添加?---- </ext:command> 或任何其他地方.

创建的用户控件，我只是与 extension.config、.js 一起放置，并在我的 extension.config 文件中引用 ascx.我需要将我的用户控件放在任何其他文件夹中吗?

The usercontrol created, I am just placing along with the extension.config, .js and refering to ascx in my extension.config file. Do i need to place my usercontrol in any of the other folders?

推荐答案

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

1. In your extension.config, you specify the dependencies for the ItemsGroup under the ext:dependencies node. This should point towards your cfg:group where you reference a commandset which in turn points to your JavaScript files. You need to make these references correctly else the SDL Tridion UI framework won't know where to find your code. The system is just like us unable to perform magic and also does not come with a crystal ball.

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

Same goes for the user control, if you don't place it alongside your other extension files like the configuration, JavaScript and CSS, how would the UI framework be able to find it. The location of where you placed it, you specify in the ext:group node. For example ~/Controls/MyItemsGroup.ascx then you placed it in a sub directory Controls in the root of your extension.

您的配置应该如下所示，依赖项指向您在 resources 节点下指定的组:

Your configuration should look something like this then, with the dependencies pointing to the group you have specified above it under the resources node:

<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>

然后在您的控件中，您直接在其属性中引用该命令，这是 _isAvailable 和 _isEnabled 方法等的 JavaScript 命令.该控件将具有类似:

Then in your control, you reference the command directly in its attributes, this is the JavaScript command under which the _isAvailable and _isEnabled methods are etc. The control will have something like:

<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:

Lastly the JavaScript which implements your button command will then use the CommandName in its namespace:

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
};

这篇关于在 Tridion Ribbon 中使用 Usercontrol 创建按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！