Xpages:让FullCalendar使用引导主题

时间:2017-01-30 23:34:54

标签: fullcalendar xpages

Per的答案是解决方案的重要组成部分。为了完整起见,我最终不得不这样做。

首先,我必须解决Per提到的AMD问题。

然后我必须修改我的Xpage以确保以正确的顺序加载正确的库。其中一些是通过反复试验完成的。

我必须将资源聚合设置设置为true,但仅适用于此设计元素。我不明白为什么。

然后我需要添加2个js库和一个css库。必须首先加载时刻库并使用head标签。接下来我必须加载fullcalendar.min.js文件但不使用headTag而是使用简单脚本,然后使用样式标记使用fullcalendar的css。

这样做一切顺利。下面是代码,下面是我的主题.....

设计代码:           

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<div class="cal"></div>

   <xp:this.resources>
    <xp:headTag tagName="script">
         <xp:this.attributes>
             <xp:parameter name="type" value="text/javascript" />
             <xp:parameter name="src" value="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

    <xp:panel id="CalendarContainer"></xp:panel>
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[$(document).ready(function() {
    var calCon = $(".cal");
    calCon.fullCalendar({});
})]]></xp:this.value>
    </xp:scriptBlock>

</xp:view>

主题代码:

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

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

<resource>
    <content-type>application/x-javascript</content-type>
    <href>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>

 --><resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>

 <resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>

<resource>
    <content-type>application/x-javascript</content-type>
    <href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>

</theme>

=============================================== ===================

我想在我的Xpages应用程序中使用FullCalendar

只要我不使用标准主题,此代码就可以使用。所以“webstandard”和“platform default”都没有问题,但是Bootstrap不起作用,也没有扩展bootstrap的主题(见下文)

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

<resource>
    <content-type>application/x-javascript</content-type>
    <href>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>

 --><resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>

 <resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>

<resource>
    <content-type>application/x-javascript</content-type>
    <href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>

</theme>

当我尝试使用我的主题时,我收到此错误:

Uncaught TypeError: calCon.fullCalendar is not a function

我尝试将我需要在我的主题中使用的js / css按照需要使用的顺序放置,但这也不起作用。

我在许多应用程序中使用scoBootstrap,并且不希望在需要日历的应用程序中使用它。我的javascript必须有一些共存的方式......

以下是Xpage的代码:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 

    <xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="true" />
     </xp:this.properties>

    <div class="cal"></div>

<xp:this.resources>
   <xp:headTag tagName="script">
             <xp:this.attributes>
                 <xp:parameter name="type" value="text/javascript" />
                 <xp:parameter name="src" value="KendoUI/js/jquery.min.js" />
             </xp:this.attributes>
         </xp:headTag>
    <xp:headTag tagName="script">
         <xp:this.attributes>
             <xp:parameter name="type" value="text/javascript" />
             <xp:parameter name="src" value="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
     <xp:headTag tagName="script">
         <xp:this.attributes>
             <xp:parameter name="type" value="text/javascript" />
             <xp:parameter name="src" value="FullCalendar/fullcalendar.min.js" />
         </xp:this.attributes>
     </xp:headTag>
        <xp:headTag tagName="script">
             <xp:this.attributes>
                 <xp:parameter name="type" value="text/javascript" />
                 <xp:parameter name="src" value="FullCalendar/fullcalendar.min.js" />
             </xp:this.attributes>
         </xp:headTag>
         <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources> 

    <xp:panel id="CalendarContainer"></xp:panel>
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[$(document).ready(function() {
    var calCon = $(".cal");
    calCon.fullCalendar({});
})]]></xp:this.value>
    </xp:scriptBlock>

</xp:view>

1 个答案:

答案 0 :(得分:1)

FullCalendar使用AMD加载。 Dojo和AMD加载冲突,因此从fullcalendar.min.js中删除AMD部分。

更改源的第一部分:

Scanner s = new Scanner(System.in);
String a = number.nextLine();
System.out.println(a.length());

到此:

!function(t){"function"==typeof define&&define.amd?define