Lotus NotesのWebアプリでjQueryを使用する

DB単位でｊｓファイルをimportして使用する方法は以下の通り

  1. jQueryライブラリをダウンロード
    適当なサイトからjQuery(やplugin)をダウンロード
  2. jQueryライブラリをNotes DBにインポート
    Domino Designerでjavaパースペクティブを開きWebContent直下にjQueryディレクトリを作成し１．のファイルをそのままインポート

    ※jQueryのファイル(ｊQuery-1.8.5.min.jsなど)をNotes DBのスクリプトライブラリに登録するとなぜかエラーがでるのでWebContentにインポート
  3. WebContent/WEB-INF/xps.propertiesでDOCTYPEを設定
    デフォルトではjQueryが動かないようなのでリンクを参考にDOCTYPEを指定
  4. Xpagesの編集画面を開く
    jQueryを使用するページの設計を開く
  5. リソースにjsファイルやcssファイルを追加
    Sourceタブに切り替えて    <xp:view>の間に<xp:this.resources>を追加し、その中に<xp:headTag>で追加していく。

    CSS取り込み例）
            <xp:headTag tagName="link">
                <xp:this.attributes>
                    <xp:parameter name="rel" value="stylesheet"></xp:parameter>
                    <xp:parameter name="type" value="text/css"></xp:parameter>
                    <xp:parameter name="href"
                        value="jQuery/jquery-ui/theme/jquery-ui.min.css">
                    </xp:parameter>
                </xp:this.attributes>
            </xp:headTag>


    JS取り込み例)
            <xp:headTag tagName="script">
                <xp:this.attributes>
                    <xp:parameter name="script" value="text/javascript"></xp:parameter>
                    <xp:parameter name="src" value="jQuery/jquery-1.8.3.min.js">
                    </xp:parameter>
                </xp:this.attributes>
            </xp:headTag>

    ※でCSSを取り込むとサーバが自動でCSSファイルを統合してしまうのでCSSで指定しているイメージのパスがおかしくなるのでheadTagで指定する。
  6. jQuery用のjavascriptを実行
    後は普通にｊQueryを使う。リソースのjavascriptではスクリプトを記入するときに"#{id:xxx}"でIDをバインドできないようなのでもし、IDをバインドさせたい場合は"Output Script"コントロールで内に記述する必要がある模様。
ラベル: