tridion - GUI 拡張機能 - TabPage が JS をロードしない

Question

コンポーネント編集画面に新しいタブを追加しています。タブは正常に表示されますが、JavaScript が読み込まれません。現在のコンポーネントの URI をタブに書き出したいと思います。JavaScript メソッドの命名が正しくないか、構成と一致していないと感じていますが、JavaScript 側から「こんにちは」と言う方法が本当にわかりません。

Tridion CME の InfoTab View (以下のコードサンプル) と PowerTools ItemXml をインスピレーションとして使用しましたが、うまくいきませんでした。

hello world を機能させるための JS のメソッドの最小セットは何ですか?

解決

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

score 3 · Accepted Answer

あなたの問題は、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 拡張との違いの 1 つは、コンストラクター関数名に名前空間が含まれていないことです。

私はそれが呼ばれることを期待します：

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

確認するもう 1 つの方法は、JavaScript が表示されると予想されるページで Chrome 開発者ツールを使用し、[スクリプト] タブに移動して、開発者ツール内の検索ボックスを使用して名前空間を検索することです。

お役に立てれば。

score 2 · Accepted Answer

実際、リソースファイルを含むグループへの依存関係は失われています。そのため、ページに js が存在しませんでした。ところで、依存関係を作成するには 2 つの方法があります。

ext:extension ノードで依存関係を作成します (Rob が提案したように)
HelloTab.ascx のコードビハインドがある場合は、クラス定義に ControlResources 属性を使用できます。

[ControlResources("RC.HelloTab")]
public class HelloTab
{}

いくつかの追加コメント:

推奨される使用方法registerNamespaceは、名前空間オブジェクトのみを定義し、クラス自体は定義しないことです。したがって、提供されたコードには、Type.registerNamespace("RC");
Tridion.OO.enableInterfaceクラスの一意のインターフェイス名を定義し、クラスで OO の可能性を使用するように API 関数を設定するために使用されます。この呼び出しにより、実際にaddInterfaceメソッドを呼び出すことができます。インターフェイス名は任意の文字列にすることができ、一意である必要があります。通常、完全な名前空間を持つクラスの名前を使用します。したがって、この場合、元のバージョンは正しかった - Tridion.OO.enableInterface(this, "RC.HelloTab");.

tridion - GUI 拡張機能 - TabPage が JS をロードしない

2 に答える 2

Related

Reference