Demonstration Application for XPages
ここしばらく、「XPage」と「OneUI」に振り回されてました。
思うようにレイアウトできない。 なかなか手ごわい。
OneUIのバージョンの違いや、勝手に生成されるスタイルクラスで頭がスパゲッティー状態。
そんな時、Lotus Development wikiでこんなの見つけました。
XPages開発のお供に「Demonstration Application for XPages」
「XPage」と「OneUI」のサンプルがいっぱい!
しかし、このノーツDB、クライアントから開くが、ブラウザから開けない。 なんで?
やりかたが悪いのかな?
ブラウザで開けないと生成されたHTMLの確認ができないよう。
<エラーメッセージ>
HTTP 403エラー(Web サイトによってこのページの表示を拒否されました)
Dominoのログを確認したところ、下記のエラーがでていました。
Caused by: com.ibm.domino.napi.NException: パブリックキーを確認できる相互認証がアドレス帳にありません。
なんのことかさっぱり...
■2010/09/16 追加
アプリの登録方法をみつけました。
Adding the Demo App to your Domino server. (転載元:http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPagesDemoApp.htm)
Unzip the application to the data directory of your Lotus Domino 8.5 server. And because this application is released on OpenNTF.org it is not signed with the standard Lotus Notes development signer, so you will need to sign the template with an id that is allowed to run agents/code on your server. Then once that is done and the web server task is running on your server you can hit this application via a web browser with the following URL for example ? http://yourDomino85Server/XPages.nsf and this will give you the applications welcome XPage. ロータスDomino8.5サーバに関するデータ登録簿にアプリケーションを開けてください。 そして、このアプリケーションがOpenNTF.orgでリリースされるので、それが標準のロータスノーツ 開発署名者を契約されないので、あなたは、あなたのサーバのエージェント/コードを実行できるイドで テンプレートでサインする必要があるでしょう。 そして、ウェブサーバータスクがいったんそれが完了していて、あなたのサーバで動いて、あなたは例えば、 以下のURLがあるウェブブラウザでこのアプリケーションを打つことができます -- http://yourDomino85Server/XPages.nsf とこれがアプリケーションをあなたに与えるというなる後、 XPageを歓迎してください。
どうやら署名しろと言ってるようです。
メールで署名があるのは知ってましたが、使ったことはありません。
しかも、アプリで署名があるなんて知りません。
で、Adminでメニューをさがしたら署名がありました。
ダメもとで下記の通りやってみたら、ブラウザで表示出来るようになりました。ラッキー!
1.ダウンロードした XPages.nsf をDominoサーバーのデータディレクトリに保存する
2.署名する
Admin > ファイルタブ > XPages.nsfを選択 >ツールペイン >データベース > 署名 > ダイアログにOKする
■2010/09/18 追記
Demonstration Applicationで使われているCSSライブラリがどのような構造になっているか確認し、
テストアプリで再現してみることにする。
◆テーマ
なぜか、テーマには何も登録されていなかった。
「アプリケーションのプロパティ」の「アプリケーションのテーマ」には oneui が指定されている
→テーマが登録されていないのに、oneuiと指定されているのは初めてみた。 どうゆうことだろうか?
テーマは登録されているが、見えないだけと仮定して先に進む。
◆スタイルシート
「1UIclasses.css」、「csscustom.css」、「iehacks.css」の3つのスタイルシートが登録されている
中身は...
・1UIclasses.css #activityButton {}から始まる375個のスタイルの名前だけが登録されている クラス名がうる覚えでも、選択方式でクラス名を指定できるので、便利かも... ・csscustom.css 下記の6個のクラスが登録されている .customTitle .customButton .customTable .widgetmain1 .widgetTop .widgetTitle ・iehacks.css 以下が定義されている a.action:link, a.lotusLinkAction:visited{position:relative;top:-4px;} .lotusContent{display:inline-block;} .lotusBanner{margin-bottom:20px} .lotusFrame{width:expression( documentElement.clientWidth < 990 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 990 ? "990px" : "auto") : "990px") : "auto" );} .lotusMain{display:inline-block;overflow:hidden;} .lotusColumnLeft{display:inline-block;} .lotusTop{display:inline-block;} .lotusInner{display:inline-block;} .lotusBottom{display:inline-block;}
この様な設定で実際にHTMLにどのように展開されたかというと、下記の様になる。
◆ライブラリ
<script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'ja'"></script> <script type="text/javascript" src="/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js"></script> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/core.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/coreLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultTheme.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultThemeLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xsp.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspIE78.css"> <link rel="stylesheet" type="text/css" href="/testdb/XPages.nsf/csscustom.css"> <link rel="stylesheet" type="text/css" href="/testdb/XPages.nsf/1UIclasses.css">
これをみると...
・OneUI v1.8のようである。 v2は使われていない。
・なぜかiehacks.cssは反映されていない。 理由はわかんない。
自分でも、テストアプリで同じようにライブラリが反映されるかテストしてみることにする
<テスト手順>
・テストDB(test.nsf)を作成
・XPageを新規に作成し”test”とテキストを入力 ソースタグに切替、ソースを確認すると下記の様になる
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core">test </xp:view>
・テーマを作成する
Demonstration Application ではテーマはなぜか登録されていなかったが、
登録しないと、テーマの定義が出来ないので、テーマ名をoneuiとし下記のとおり作成した。
<theme extends="oneui"> ?<resource> ??<content-type>text/css</content-type> ??<href>/csscustom.css</href> ?</resource> ?<resource> ??<content-type>text/css</content-type> ??<href>/1UIclasses.css</href> ?</resource> </theme>
・スタイルシートをDemonstration Applicationから3ファイルコピー&ペーストして作成
・「アプリケーションのプロパティ」の「アプリケーションのテーマ」に oneui を指定する
・全て保存し、XPageをブラウズしてみる
・IEのソースをみると下記の通りで、ライブラリの所はDemonstration Applicationとまったく同じになった。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <title></title> <script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'ja'"></script> <script type="text/javascript" src="/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js"></script> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/core.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/coreLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultTheme.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultThemeLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xsp.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspLTR.css"> <link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspIE78.css"> <link rel="stylesheet" type="text/css" href="/testdb/test.nsf/csscustom.css"> <link rel="stylesheet" type="text/css" href="/testdb/test.nsf/1UIclasses.css"> </head> <body> <form id="view:_id1" method="post" action="/testdb/test.nsf/test2.xsp" enctype="multipart/form-data"> test <input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!cnf1jbj7w6!"> <input type="hidden" name="$$xspsubmitid"> <input type="hidden" name="$$xspexecid"> <input type="hidden" name="$$xspsubmitvalue"> <input type="hidden" name="$$xspsubmitscroll"> <input type="hidden" name="view:_id1" value="view:_id1"> <script type="text/javascript"> function clearFormHiddenParams_view__id1(curFormName) { ? var curForm = document.forms[curFormName]; }</script> </form> </body> </html>
これで、Demonstration Applicationのサンプルを見ながら、自分のアプリを作成できる準備が整ったことになる。
つづく...