Xpages：让FullCalendar与引导主题一起工作 [英] Xpages: Getting FullCalendar to work with a bootstrap theme
问题描述
首先，我必须解决Per提到的AMD问题。
然后，我不得不修改我的Xpage，以确保正确的库以正确的顺序加载。其中一些是通过试验和错误完成的。
我必须将资源聚合设置设置为true，但仅限于此设计元素。我不明白为什么。
然后我需要添加2个js库和一个css库。时刻库必须首先加载并使用头标签。接下来，我必须加载fullcalendar.min.js文件，但不是使用headTag，而是使用简单脚本，然后使用style标记使用fullcalendar的css。
这样做一切正常。下面是代码，下面是我的主题.....
设计代码：
< xp：this.properties>
< xp：参数名称=xsp.resources.aggregatevalue =true/>
< / xp：this.properties>
< div class =cal>< / div>
< xp：this.resources>
< xp：headTag tagName =script>
< xp：this.attributes>
< xp：parameter name =typevalue =text / javascript/>
< xp：参数名称=srcvalue =FullCalendar / moment.min.js/>
< / xp：this.attributes>
< / xp：headTag>
< xp：script src =FullCalendar / fullcalendar.min.js
clientSide =true>
< / xp：script>
< 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>
主题代码：
<！ -
使用此模式可以包含资源（例如样式表
和此主题使用的JavaScript文件。
- >
< 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 / s tyles / 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 =平台：/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不是函数
我试图把我需要使用的js / css放在我的主题中，按照它们需要使用的顺序，但是这也不起作用。
我在许多应用程序中使用scoBootstrap，并且不希望 在需要日历的应用程序中使用它。必须有一些方法让我的javascript共同生活......
以下是Xpage的代码：
<？xml version =1.0encoding =UTF-8？>
< xp：view xmlns：xp =http://www.ibm.com/xsp/core>
< xp：this.properties>
< xp：参数名称=xsp.resources.aggregatevalue =true/>
< / xp：this.properties>
< div class =cal>< / div>
< xp：this.resources>
< xp：headTag tagName =script>
< xp：this.attributes>
< xp：parameter name =typevalue =text / javascript/>
< xp：parameter name =srcvalue =KendoUI / js / jquery.min.js/>
< / xp：this.attributes>
< / xp：headTag>
< xp：headTag tagName =script>
< xp：this.attributes>
< xp：parameter name =typevalue =text / javascript/>
< xp：参数名称=srcvalue =FullCalendar / moment.min.js/>
< / xp：this.attributes>
< / xp：headTag>
< xp：headTag tagName =script>
< xp：this.attributes>
< xp：parameter name =typevalue =text / javascript/>
< xp：parameter name =srcvalue =FullCalendar / fullcalendar.min.js/>
< / xp：this.attributes>
< / xp：headTag>
< xp：headTag tagName =script>
< xp：this.attributes>
< xp：parameter name =typevalue =text / javascript/>
< xp：parameter name =srcvalue =FullCalendar / fullcalendar.min.js/>
< / xp：this.attributes>
< / xp：headTag>
< 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>
FullCalendar使用AMD加载。 Dojo和AMD加载冲突，因此将AMD部分从fullcalendar.min.js中删除。
更改源代码的第一部分：
！function（t）{function== typeof define&& define.amd？define
对此：
！function（t）{函数== typeof define&& false？define
Per's answer was a big part of the solution. For completeness here is what I ended up having to do.
First, I had to fix the AMD problem that Per mentioned.
Then I had to modify my Xpage to make sure that the proper libraries were loaded in the proper order. Some of this was done with trial and error.
I had to set the resource aggregation setting to true, but only for this design element. I do not understand why.
Then I needed to add 2 js libraries and one css library. The moment library had to be loaded first and by using a the head tag. Next I had to load the fullcalendar.min.js file but NOT using the headTag but a simple script, and then the css for fullcalendar using the style tag.
Doing this everything worked. Below is the code, and below that is my theme.....
Design code:
<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>
Theme code:
<!--
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>
==================================================================
I want to use FullCalendar in my Xpages applications.
This code will work, as long as I don't use my standard theme. So "webstandard" and "platform default" are no problem, but Bootstrap doesn't work, nor my theme which extends bootstrap (see below)
<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>
When I try to use my theme I get this error:
Uncaught TypeError: calCon.fullCalendar is not a function
I tried putting the js/css that I need to use in my theme, in the order that they need to be used, but this didn't work either.
I use the scoBootstrap throughout many applications, and don't want to not use it in applications that need a calendar. There must be some way for my javascript to live together...
Here is the code for the 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>
FullCalendar uses AMD loading. Dojo and AMD loading conflicts so remove the AMD part from fullcalendar.min.js.
Change the first part of the source from this:
!function(t){"function"==typeof define&&define.amd?define
to this:
!function(t){"function"==typeof define&&false?define
这篇关于Xpages：让FullCalendar与引导主题一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
