Xpagesブートストラップアップロードコントロール

Question

私はアプリケーションにブートストラップスタイルのファイルアップロードコントロールを含める必要があります。ファイルの添付ファイルは、「添付ファイル」と呼ばれるrichtextfieldのドキュメントに格納されます。 Javaを使用してフィールドを保存する。

私はOliver Busseが行ったWebサイトと同様のサイトを見てきましたが、今は自分のリンクを見つけることができません。

最終的にカスタムコントロールが必要です。

私はWebContentフォルダにbootstrapfileinput4フォルダを追加しました。

私は次のXPageのコードを実行すると、私はエラーを取得します。

のXPageコード：私が使用している

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xc="http://www.ibm.com/xsp/custom"> 
<xp:this.data> 
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument> 
</xp:this.data> 
<xp:this.resources> 
<xp:script src="/jQueryXSnippet.js" clientSide="true"></xp:script> 
</xp:this.resources> 
<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script> 
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" /> 

<xp:scriptBlock id="scriptBlockInitFile"> 
<xp:this.value> 
<![CDATA[ 
$(document).ready(
function() { 
$('input[type=file]').fileinput({ 
previewFileType: "image", 
browseClass: "btn btn-primary", 
browseLabel: "Browse", 
browseIcon: '<i class="glyphicon glyphicon-plus"></i>', 
removeClass: "btn btn-danger", 
removeLabel: "Delete", 
removeIcon: '<i class="glyphicon glyphicon-trash"></i>', 
uploadClass: "btn btn-info", 
uploadLabel: "Upload", 
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>', 
}); 
} 
); 
]]> 
</xp:this.value> 
</xp:scriptBlock> 
<xc:ccLayoutBootstrap> 
<xp:this.facets> 
<xp:panel xp:key="facetMiddle"> 
<xp:br></xp:br> 
<div class="page-header"> 
<h1> 
FileInput 
<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small> 
</h1> 
</div>  
<xp:fileUpload id="fileUpload1" 
value="#{document1.fileAttachment}"> 
<xp:this.attrs> 
<xp:attr name="accept" value="image/*" /> 
</xp:this.attrs> 
</xp:fileUpload> 
<xp:br></xp:br> 
<xp:fileDownload rows="30" id="fileDownload1" 
displayLastModified="true" value="#{document1.fileAttachment}" 
hideWhen="true" allowDelete="true"> 
</xp:fileDownload>  
<xp:button value="Save Document" id="button1" styleClass="btn btn-primary"> 
<xp:eventHandler event="onclick" submit="true" refreshMode="complete"> 
<xp:this.action> 
<xp:actionGroup> 
<xp:saveDocument></xp:saveDocument> 
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage> 
</xp:actionGroup> 
</xp:this.action> 
</xp:eventHandler> 
</xp:button> 
<xp:br></xp:br> 
</xp:panel> 
</xp:this.facets> 
</xc:ccLayoutBootstrap> 
</xp:view> 

リンク：

Bootstrap UI for XPages File Upload component

Answer 1

私はそれがAMDローダーの問題だと思います。 fileinput.jsがAMDを使用しているかどうか確認し、そうであればjsファイルからその部分を削除してください（例えばthis answerを参照）。