GUI 扩展 - TabPage 未加载 JS答案

【问题标题】：GUI Extension - TabPage not loading JSGUI 扩展 - TabPage 未加载 JS
【发布时间】：2012-05-24 15:38:53
【问题描述】：

我正在向组件编辑屏幕添加一个新选项卡。我的标签显示正常，但 JavaScript 没有加载。我想在选项卡中写出当前组件的 URI。我感觉我的 JavaScript 方法的命名不正确或与配置不匹配，但真的不知道如何从 JavaScript 端说“你好”。

我使用了 Tridion CME 中的 InfoTab View（下面的代码示例）和 PowerTools ItemXml 来获得灵感 - 但没有运气。

在 JS 中让 hello world 工作的最少方法集是什么？

解决方案

根据 Rob 的建议添加了依赖项节点。然后日志显示 js 文件正在加载。

HelloTab.js

Type.registerNamespace("RC");

RC.HelloTab = function RC$HelloTab$HelloTab(element) {
    console.log('Constructor');
    Tridion.OO.enableInterface(this, "RC.HelloTab");
    this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};

RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
    console.log('init');
    $log.debug('init');
    this.callBase("Tridion.Controls.DeckPage", "initialize");
    $evt.addEventHandler($display.getItem(), "load", this.getDelegate(this.updateView));
};

RC.HelloTab.prototype.select = function HelloTab$select()
{
    console.log('select');
    this.callBase("Tridion.Controls.DeckPage", "select");
    this.updateView();
};

RC.HelloTab.prototype.updateView = function HelloTab$updateView()
{
    console.log('update');
    if (this.isSelected()) 
    {
        console.log('selected')           
    }
};

Tridion.Controls.Deck.registerPageType(RC.HelloTab, "RC.HelloTab");

HelloTab.config

<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
               xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
                             xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
               xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">

  <resources cache="true">
    <cfg:filters />
    <cfg:groups>
      <cfg:group name="RC.HelloTab" merge="always">
        <cfg:fileset>
          <cfg:file type="script">/HelloTab.js</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles />
  <extensions>
    <ext:dataextenders/>
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions/>        
        <ext:contextmenus/>
        <ext:lists />
        <ext:tabpages>
          <ext:add>
            <ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
              <ext:control>~/HelloTab.ascx</ext:control>
              <ext:pagetype>RC.HelloTab</ext:pagetype>
              <ext:dependencies>
                <cfg:dependency>RC.HelloTab</cfg:dependency>
              </ext:dependencies>
              <ext:apply>
                <ext:view name="ComponentView">
                  <ext:control id="MasterTabControl"/>
                </ext:view>
              </ext:apply>
            </ext:extension>
          </ext:add>
        </ext:tabpages>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands/>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
    <navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
    <editurls/>
    <listdefinitions />
    <itemicons/>
    <theme>
      <path>theme/</path>
    </theme>
    <customconfiguration />
  </settings>
</Configuration>

原文：

HelloTab.config

<resources cache="true">
    <cfg:filters />
    <cfg:groups>
      <cfg:group name="RC.HelloTab" merge="always">
        <cfg:fileset>
          <cfg:file type="style">{ThemePath}/HelloTab.css</cfg:file>
          <cfg:file type="script">/HelloTab/HelloTab.js</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles />
  <extensions>
    <ext:dataextenders/>
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions/>        
        <ext:contextmenus/>
        <ext:lists />
        <ext:tabpages>
          <ext:add>
            <ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
              <ext:control>~/HelloTab.ascx</ext:control>
              <ext:pagetype>HelloTab</ext:pagetype>
              <ext:apply>
                <ext:view name="ComponentView">
                  <ext:control id="MasterTabControl"/>
                </ext:view>
              </ext:apply>
            </ext:extension>
          </ext:add>
        </ext:tabpages>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands/>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
    <navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
    <editurls/>
    <listdefinitions />
    <itemicons/>
    <theme>
      <path>theme/</path>
    </theme>
    <customconfiguration />
  </settings>

JavaScript：

Type.registerNamespace("RC.HelloTab");

RC.HelloTab = function HelloTab(element)
{
    Tridion.OO.enableInterface(this, "RC.HelloTab");
    this.addInterface("Tridion.Controls.DeckPage", [element]);
};

RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
    $log.event("RC.HelloTab", "RC.HelloTab init");
    this.callBase("Tridion.Controls.DeckPage", "initialize");
    document.write("something else");
    var item = $display.getItem();
    if (item)
    {
        if (item.isLoaded())
        {
            this._showInfo();
        }
        else
        {
            item.load();
        }
    }
};

RC.HelloTab.prototype.select = function HelloTab$select()
{
    this.callBase("Tridion.Controls.DeckPage", "select");

    if (this.properties.itemChanged)
    {
        this._showInfo();
        this.properties.itemChanged = false;
    }
};
RC.HelloTab.prototype._showInfo = function HelloTab$_showInfo()
{
    var item = $display.getItem();
    var html = "<h1>title</h1>";
    $dom.setOuterHTML($("#title"), html);
    document.write('another uri=' + item.ID);
};

RC.HelloTab.prototype._onItemChanged = function HelloTab$_onItemChanged()
{
    if (this.isSelected())
    {
        this._showInfo();
    }
};

Tridion.Controls.Deck.registerPageType(RC.HelloTab, "HelloTab");

Tridion.Web.Trace：

w3wp.exe 信息：0 : (634734775171817068) CachedJssControlResources：HelloTab 类型的 LastModifiedTime 是 5/24/2012 5:22:26 PM

w3wp.exe 信息：0 : (634734770029374585) CachedJssControlResources：类型 editors_hellotab_hellotab_ascx 的 LastModifiedTime 是 5/24/2012 5:22:26 PM

【问题讨论】：

你应该为第二部分提出一个单独的问题，否则会混淆答案。

标签： tridion

【解决方案1】：

我认为您的问题是您缺少 ext:extension 元素中的依赖项元素。

<ext:dependencies>
    <cfg:dependency></cfg:dependency>
</ext:dependencies>

像这样添加：

<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
          <ext:control>~/HelloTab.ascx</ext:control>
          <ext:pagetype>HelloTab</ext:pagetype>
          <ext:dependencies>
                <cfg:dependency>RC.HelloTab</cfg:dependency>
          </ext:dependencies>
          <ext:apply>
            <ext:view name="ComponentView">
              <ext:control id="MasterTabControl"/>
            </ext:view>
          </ext:apply>
</ext:extension>

如果您使用的是 Chrome，您可以将一些 console.log 语句（如果是 IE，则为警报）放入您从接口实现的每个方法中作为测试并放在文件顶部。例如：

console.log('Hello: File loaded');

您的代码与我最近编写的 GUI 扩展之间的一个区别是您的构造函数名称不包含命名空间。

我希望它会被调用：

RC.HelloTab = function RC$HelloTab$HelloTab(element)
{
    console.log('Constructor');
    Tridion.OO.enableInterface(this, "RC.HelloTab.HelloTab"); //Also was missing NS here
    this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};

另一种检查方法是在您希望显示 Javascript 的页面上使用 Chrome 开发人员工具，转到脚本选项卡并使用开发人员工具中的搜索框搜索您的命名空间。

希望这会有所帮助。

【讨论】：

我支持这个 - 缺少依赖可能是问题所在。此外，“function”之后列出的名称仅对调试有用。但是当您查看调用堆栈时，同时查看命名空间和类确实非常有用 - 所以我建议您遵循命名空间$class$method 的标准。
是的，添加缺少的依赖项后，我的 js 文件已加载。但是，现在我仍然无法让 js 方法写入控制台日志。
Chrome - Console.log 确实有效，我得到了构造函数日志输出 - 但随后在 js 中的 registerPageType 中断。如果我更改 registerPageType 使其不会中断，那么我的控制台输出不会被命中。
找到解决方案，添加元素而不是“HelloTab”。哇——这太难了！ :) this.addInterface("Tridion.Controls.DeckPage", [element]);
抱歉，我是从关于 SDL Tridion 世界的教程中得到的，它在我的情况下是有效的。也许它不同，因为我正在实现一个命令，而你正在做一个 DeckPage

【解决方案2】：

确实，缺少对具有资源文件的组的依赖。这就是页面上没有js的原因。顺便说一句，有两种方法可以建立依赖关系：

在 ext:extension 节点中建立依赖关系（如 Rob 建议的那样）
如果你的 HelloTab.ascx 有代码，你可以使用 ControlResources 属性来定义类

[ControlResources("RC.HelloTab")]
公共类 HelloTab
{}

一些额外的 cmets：

推荐的使用registerNamespace 的方法是只定义命名空间对象，而不是类本身。所以在提供的代码中，应该只有Type.registerNamespace("RC");
Tridion.OO.enableInterface 用于定义类的唯一接口名称并设置 API 函数以在类上使用 OO 可能性。这个调用实际上使得调用addInterface 方法成为可能。接口名称可以是任何字符串，它应该是唯一的。通常，我们使用具有完整命名空间的类的名称。所以在这种情况下，原始版本是正确的 - Tridion.OO.enableInterface(this, "RC.HelloTab");。

【讨论】：

感谢鲍里斯的信息。我仍然很难让 js 正常工作。你能看到我上面的更新吗？