圖形用戶界面擴展 - TabPage不加載JS

我正在添加一個新的選項卡到組件編輯屏幕。我的標籤顯示正常，但JavaScript未加載。我想在選項卡中寫出當前組件的URI。我有一種感覺，我的JavaScript方法的命名不正確或與配置匹配，但真的不知道如何從JavaScript端說'你好'。圖形用戶界面擴展 - TabPage不加載JS

我使用了Tridion CME的InfoTab視圖（代碼示例如下）以及PowerTools ItemXml的靈感 - 但沒有運氣。

JS中獲取hello世界的最小方法是什麼？

解決方案

新增羅布的建議的依賴節點。日誌然後顯示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是2012/5/24 5： 22時26分PM

w3wp.exe的信息：0：（634734770029374585）CachedJssControlResources：最後修改時間爲類型editors_hellotab_hellotab_ascx是2012/5/24下午5點22分26秒

來源

2012-05-24 robrtc

你應該爲第二部分提出一個單獨的問題，或者混淆答案。 –

我認爲你的問題是你錯過了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 
};

另一種方法是檢查使用Chrome開發者工具，你希望你的Javascript出現在頁面上，轉到腳本選項卡並在使用搜索框開發人員工具來搜索你的名字空間。

希望這會有所幫助。

來源

2012-05-25 07:28:28

我其次 - 缺少的依賴可能是問題。此外，「功能」之後列出的名稱僅對調試非常有用。但是當你在查看調用堆棧時，看到名稱空間和類是非常有用的 - 所以我建議你遵循命名空間$ class $方法的標準。 –

是的，添加缺少的依賴關係後，我的js文件被加載。但是，現在我仍然無法讓js方法寫入控制檯日誌。 – robrtc

你使用什麼瀏覽器？ Console.log在IE中不起作用。 –

的確，缺少對資源文件組的依賴性。這就是爲什麼js不在網頁上。順便說一句，有兩種方法可以讓依賴性：

請在內線的依賴：擴展節點（如羅布建議）
如果您HelloTab.ascx有背後的代碼，你可以使用ControlResources屬性類定義

[ControlResources（「RC.HelloTab」）]
公共類HelloTab
{}

一些附加註釋：

建議使用registerNamespace的方法是僅定義命名空間對象，但不定義類本身。所以在提供的代碼中，應該只有Type.registerNamespace("RC");
Tridion.OO.enableInterface用於定義類的唯一接口名稱並設置API函數以在該類上使用OO可能性。對於這個調用實際上可以調用addInterface方法。接口名稱可以是任何字符串，應該是唯一的。通常，我們使用具有完整命名空間的類的名稱。所以在這種情況下，原始版本是正確的 - Tridion.OO.enableInterface(this, "RC.HelloTab");。

來源

2012-05-25 08:21:01

感謝鮑里斯的信息。我仍然在努力讓js工作。你能看到我的更新嗎？ – robrtc

圖形用戶界面擴展 - TabPage不加載JS

回答

相關問題