2016-07-09 12 views
1

私のアプリケーションでBootstrapテーマを拡張しています。私はいくつかのCSSとjsファイルをテーマに含めたいと思っています。Xpages:テーマのCSSとjsリソースを参照する

私はリソースをサーバーのフォルダに入れようとしました。 私はリソースをアプリケーションWeb-Contentフォルダの "KendoUI"に配置しようとしました。これらのアプローチのどちらも機能していないようです。アプリケーションでXpageを開くと、何もロードされていないように見えます。

私がリソースをXpageに直接入れると、ファイルがそこにあることがわかります(Chrome経由)。

テーマの構文に間違いがありますか?

cssファイルはスタイルの下でリソースに追加でき、jsはコードの下のスクリプトライブラリに追加できます。また、package exploreを使用してWebContentフォルダにリソースを配置することもできます。これらの2つの場所の間でリソースを配置するのにはどのような違いがありますか?

<!-- 

    Use this pattern to include resources (such as style sheets 
    and JavaScript files that are used by this theme. 

    --> 

<theme 
    extends="Bootstrap3.2.0" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd"> 

<!-- Kendo Grid Resources Web Content--> 
<resources> 
     <styleSheet href="KendoUI/styles/kendo.common.min.css"></styleSheet>  
     <script target="xsp" src="KendoUI/js/jquery.min.js" clientSide="true" type="text/x-javascript"/> 
     <script target="xsp" src="KendoUI/js/kendo.all.min.js" clientSide="true" type="text/x-javascript"/> 
</resources>  

<!-- Kendo Grid Resources File System-->  
<resource> 
<content-type>application/x-javascript</content-type> 
<href>/.ibmxspres/domino/KendoUI/js/jquery.mim.js</href> 
</resource> 



    <control> 
     <name>ViewPanel.Disable.Header.Footer</name> 
     <property 
      mode="override"> 
      <name>viewStyle</name> 
      <value>width:99%</value> 
     </property> 
     <property> 
      <name>headerEndStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>headerStartStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>headerStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>footerStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>footerStartStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>footerEndStyle</name> 
      <value>display: none;</value> 
     </property> 
     <property> 
      <name>viewStyleClass</name> 
      <value>xspDataTableViewPanel</value> 
     </property> 
     <property> 
      <name>dataTableStyleClass</name> 
      <value>xspDataTable</value> 
     </property> 
     <property> 
      <name>headerRowStyleClass</name> 
      <value>xspDataTableHeaderRow</value> 
     </property> 
     <property> 
      <name>bodyRowStyleClass</name> 
      <value>xspDataTableBodyRow</value> 
     </property> 
     <property> 
      <name>bodyCellStyleClass</name> 
      <value>xspDataTableBodyCell</value> 
     </property> 
     <property> 
      <name>unreadMarksClass</name> 
      <value>xspDataTableRowUnread</value> 
     </property> 
     <property> 
      <name>readMarksClass</name> 
      <value>xspDataTableRowRead</value> 
     </property> 
     <property> 
      <name>captionStyleClass</name> 
      <value>xspDataTableViewPanelCaption</value> 
     </property> 
    </control> 
</theme> 

答えて

3

すべてのリソースには、それぞれ独自のリソースタグがあります。これはあなたが使用している拡張ライブラリのバージョンによってはWebContent \ Libsの

<!-- fontawesome css--> 
    <resource> 
     <content-type>text/css</content-type> 
     <href>libs/fontawesome/css/font-awesome.min.css</href> 
    </resource> 

<resource> 
     <content-type>application/x-javascript</content-type> 
     <href>libs/moment/min/moment.min.js</href> 
    </resource> 
+1

フランクに感謝します。私が指摘したように、2つの問題がありました.XSPプロパティで修正されたテーマを設定していませんでした。それはたくさんの助けになりました。 :) –

1

下のサブフォルダ内の私のCSSやJSは、あなたがにBootstrap3.2.0から行ってきましたブートストラップ3テーマにあなたの参照を二重チェックする必要があるかもしれませんBootstrap3(バージョン間のシームレスなアップグレード用)、introduced in 9.0.1 v16

As Frank has outlined in his answer hereのように、それらはあなたが指すことができるリソースです。したがって、剣道UIアセットをWebContentというフォルダにダンプする場合は、アプリケーションの「ルート」として扱います。そこからの相対パスです。

アセットをコード/リソースのデザイン要素のインターフェイスに入れようと、アセットをWebContent(例えば、パッケージエクスプローラ経由)に入れても、私はそれを信じていませんフレームワークをWebContentに変更し、コードセクションとリソースセクションを「混乱のない状態」にしておくことができます。また、依存関係管理ソリューション(bowerなど)に切り替えると、相対パスがあまり変化しないということも意味します。

Frankが概説したように、対応する resourceタグ構造を使用するようにしてください。あなたは "Kendo Grid Resources File System"コメントであなたのブロックにこれをやっているようですが、 "Kendo Grid Resources Web Content"コメントのブロックの上に迷っているようです。 * note:最初に、resourcesブロックを使用していることに気がつかなかった

+0

エリック、情報ありがとう。非常に役立ちます。すべてが今働いています。 –

+0

あなたはそれがすべて整理されてうれしいです。その不思議な 'styleSheet'タグ(例えば、'

関連する問題