Xpages: Referencing css and js resources in a theme

Question

I am extending the Bootstrap theme in my applications. I want to include some css and js files via the theme.

I have tried putting the resources on the server in a folder. i have tried placing the resources in a "KendoUI" in the applications Web-Content folder. It appears that neither of these approaches work. When I open an Xpage in the application, it does not appear to have loaded anything.

If I put the resources directly in the Xpage I can see that the files are there (via Chrome).

Is there a mistake in my syntax in the theme?

As an aside, css files can added to the Resources under styles, and js can be added to script libraries under Code. We also can put resources in the WebContent folder using package explore. What is the different between these two places to put resources?

 <!--

    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>

Answer 1

Every resource has his own resource tag. My CSS and JS in subfolders under 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>

Answer 2

Depending on which version of the Extension Library you're using, you may need to double-check your reference to the Bootstrap 3 theme, which went from Bootstrap3.2.0 to Bootstrap3 (for more seamless upgrading between versions), introduced in 9.0.1 v16.

As Frank has outlined in his answer, they're just resources you can point at; so if you're dumping your Kendo UI assets into a folder in WebContent, treat that as the "root" of the application, and it's path relative from there.

I don't believe it "matters" (per se), whether you put your assets into the Code/Resources design element interface versus into the WebContent (e.g.- via Package Explorer), but I prefer to dump libraries and frameworks into WebContent, so as to keep the Code and Resources sections "free of clutter", so to speak. It also means that should you switch to a dependency management solution (bower or others), that relative pathing won't change much if at all.

Make sure to use the corresponding resource tag structure, just as Frank outlined; you seem to be doing this for your block with the "Kendo Grid Resources File System" comment, but seem to have strayed above that in the block with the "Kendo Grid Resources Web Content" comment. *note: I didn't notice on first read that you're using a resources block for those