XPages 開発 Tips 百連発

18,760
-1

Published on

2012年5月18日 XPagesDay でのプレゼンテーション

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,760
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
184
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • 2GBのメモリーを積んでいる場合、\nvmarg.Xmx=-Xmx768m\nvmarg.Xms=-Xms256m\nがいいのでは。。。\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 計算結果フィールドは「HTML」で\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • XPages 開発 Tips 百連発

    1. 1. 5-A 1-AXPages 開発 Tips 百連発 チームスタジオジャパン株式会社 Technical Director 加藤 満 @katoman
    2. 2. 1Domino Designer 8.5.x• どこで入手? - http://www.ibm.com/developerworks/downloads/ls/dominodesigner/ - IBM ID が必要
    3. 3. 2Domino Designer パフォーマンス Google検索で「notes 8.5」と入れると「notes 8.5 重い」と候補があがってきます。そんなあなたに。。。• jvm.properties - <Notesディレクトリ>framework¥rcp¥deploy• vmarg.Xmx=-Xmx256m - Eclipseクライアント上の最大メモリー• vmarg.Xms=-Xms48m - Designerの最初の起動時にアサインされるメモリーサイズ 128 256 768 1024 など16の倍数を
    4. 4. 3Domino Designerのメモリ消費• プリファレンス - [一般] - ヒープ・ステータスを表示 - 左下にヒープサーズ表示 - 次回Designer起動時には表示されないので注意
    5. 5. 4エディターの行番号表示• プリファレンスより - [一般] - [エディター] - [テ キストエディター]
    6. 6. 5エラー表示の設定• アプリケーションプロパティ ‒ 「XPages実行時エラーページを表示」をチェック
    7. 7. 6Firefox、Firebug• Web開発者ツールやプラグインを利用
    8. 8. 7設計 vs ソース• 初心者のうちは設計パネル。慣れてくると設計パネルは あまり使わなくなるってホント? - ソースにもコントロールをドラッグ&ドロップできる - 複雑な入れ子(階層構造)のソースにドラッグ&ドロップしても意図し た場所に入らない場合もしばしば - 上級者はドラッグ&ドロップせず<xp: xxxx>タグから直接書き出 す。。。らしい。 小ネタ 設計タブ、ソースタブの切り替えショートカットは CTRL-SHIFT-PageDown (または PageUp)
    9. 9. 8スコープ変数• ライフスパンを理解しましょう - applicationScope - sessionScope - requestScope - viewScope詳細は「XPages のスコープ変数の有効範囲とタイムアウト」 (wiki)で http://XPag.es/?scopevaliables
    10. 10. 8スコープ変数• ライフスパンを理解しましょう - applicationScope - sessionScope - requestScope Pertial - viewScope Refresh詳細は「XPages のスコープ変数の有効範囲とタイムアウト」 (wiki)で http://XPag.es/?scopevaliables
    11. 11. 9セッションタイムアウト• applicationScopeとsessionScopeのタイムアウトは アプリごとで指定可能• タイムアウト > アイドル状態のセッションタイムアウト
    12. 12. 10カスタムコントロール• カスタムコントロールの役割は、サブフォームによく似 ています。 XPage XPage XPage CC CC CC CC CC CC CC CC CC CC CC CC CC CC CC CC CC CC• 以下を効果的に使う - 編集可能領域(ファセット) - カスタムプロパティ(compositeData)• カスタムコントロールは、ページ上のある領域を持つも のだけではない。例えば、ボタン、リンク、スクリプト だけ、などなど
    13. 13. 11編集可能領域• 編集可能領域はそのXPage特有のコントロールを配置す る際に使用します。 カスタム XPage コントロールソース•
    14. 14. 12カスタムプロパティの使用• カスタムコントロールのプロパティ定義 - それぞれのXPageに固有のパラメーターを渡したいときに使用 カスタム コントロールソース
    15. 15. 13カスタムプロパティの使用• カスタムプロパティに値を設定 - XPage内のカスタムコントロールをハイライト - カスタムプロパティに値(パラメーター)を指定 XPage
    16. 16. 14カスタムプロパティの使用• カスタムプロパティをJavaScriptで利用 - 受け側のXPageは「compositeData」グローバルオブジェクトとして カスタムプロパティの値をどこからでもアクセス可能 XPage
    17. 17. 15カスタムコントロールの設計定義XPageにたくさんのカスタムコントロール。どれがどれだかわからなくなる!?• カスタムXSPマークアップでイメージを指定 - 例はディスカッションテンプレート参照
    18. 18. 16スコープ変数の値の確認• 次のカスタムコントロールを作成• 確認したいXPageに追加<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:panel id="applicationVars" styleClass="debugPanel"> <xp:table styleClass="debug"> <xp:tr> <th>変数名</th> <th>値</th> </xp:tr> <xp:repeat id="varRepeat" rows="30" value="#{javascript:applicationScope.keySet();}" var="scopeData"> <xp:tr> <xp:td> <xp:text escape="true" id="varName"value="#{javascript:scopeData}" /> </xp:td> <xp:td> <xp:text escape="true" id="varValue" value="#{javascript:applicationScope.get(scopeData)}" /> </xp:td> </xp:tr> </xp:repeat> </xp:table> ※このコードはapplicationScopeだけです。 </xp:panel> sessionScopeなど他の変数をみたい場合はコードを変更してくださ</xp:view> い。
    19. 19. 17ノーツビュー列のプログラム名を確認• 式で計算している列は「$<数値>」というプログラム名• このプログラム名はデータバインディングする際に使用 される
    20. 20. 18コントロールの可視(表示)プロパティ• ノーツフォーム上の非表示(式)とは異なるので注意 - rendered オプション - HTMLとしてレンダリングするかしないか• レンダリングしてXPage上でデータを保管するなど操作 が必要な場合は「非表示の入力(inputHidden)」コント ロールを使用
    21. 21. 19複数値のフィールドをバインドするコントロール• XPageで入力した値を複数値として扱う - [すべてのプロパティ] - [multipleSeparator]にカンマなどの区切り記 号を指定
    22. 22. 20Panelコントロール、Divコントロール、div <xp:panel id="panel1"></xp:panel>XPage <xp:div id="div1"></xp:div>ソース <div></div> <div id="view:_id1:panel1"></div>HTML <div id="view:_id1:div1"></div>ソース <div></div>• Panelコントロールを使用する場合 - データバインディングがある場合• Divコントロールを使用する場合 - 主にその領域の可視(レンダリング)をコントロールしたい場合• HTMLのdivを使用する場合 - 単なる領域を指定する場合
    23. 23. 21サーバーサイドJavaScript• 利用可能なライブラリ http://XPag.es/?libraryグローバルオブジェクト オブジェクト名から直接アクセス可能。使用時に事前の宣言不要。 例)databaseグローバル関数 グローバルオブジェクト同様、宣言なく直接利用できる関数。DOM XML文書を表すDomino DominoバックエンドにアクセスできるライブラリRuntime グローバリゼーションに役立つメソッドを提供Standard 型の異なるデータを操作し、共通の演算を実行するためのクラスなどの標準ラ イブラリXSP LotusScriptのUIクラスをほぼ同等。加えて、ブラウザコンテキストにアクセス するクラス群@Functions Lotus Notes の@関数をエミュレート http://XPag.es/?atFunctions
    24. 24. 22グローバルオブジェクト• SSJS主要コンポーネントのひとつ - XPagesアプリケーションでSSJSを使ってどこからでも参照可能なオ ブジェクト http://XPag.es/?globals - つまり、宣言なく直接メソッドコール、プロパティアクセス可能、 そして予約語 - context - database - session - applicationScope/sessionScope/requestScope/viewScope - facesContextなどのJSFオブジェクト Lotus Dim session As New NotesSession Dim username As String Script username = session.Effectiveusername SSJS var username = session.getEffectiveUserName();
    25. 25. 23XPagesでサポートされない@Functions• 「List of Formula Not Supported In XPages 」 - http://www-10.lotus.com/ldd/ddwiki.nsf/dx/List_of_Formula_Not_Supported_In_XPages
    26. 26. 24独自@Functionの作成• サーバーJavaScriptライブラリ作成 function @GetMyFuction(parameter){ return @Left(paramter,"") }• XPage/カスタムコントロールに作成したスクリプトラ イブラリをリソースとして取り込む
    27. 27. 25LotusScript er に贈るJavaScriptの基本• JavaScriptは大文字小文字を区別 ‒ 始めた頃によくやる間違い例 @DBTitle() (正)@DbTitle()• 変数名、独自で作成する関数名の命名 ‒ <小文字始まり><大文字始まり>が基本 • 例 startDate、endSubmitDate• @Functionsでは必ず()が必要。例 @Now()• = は値をセット、値の比較は==• @Functionsのパラメーターの区切りはセミコロン(;)で はなくカンマ(,)• @Functionsのパラメーターは、従来のものと同じとは 限らない
    28. 28. 26ソースの読み解き - Expression Language (EL) <xp:inputText id="inputText1" value="#{document1.Name}"> </xp:inputText>• dot notation (.) で次のオブジェクトにバインド - NotesXSPDocument - NotesXSPViewEntry - スコープ変数
    29. 29. 27ソースの読み解き - SSJS #{javascript:database.getProfileDocument("Configuration","Server")}• javascript: で始まる•#と$ - #{....} や ${....} - # はダイナミック(動的に計算) - $ はスタティック(ページの読み込み時に計算)
    30. 30. 28ソース読み解き- CDATAセクション <![CDATA[#{javascript:database.getProfileDocument("Configuration","Server")}]]>• XMLマークアップの指定と解釈されないようにするため の記述でXML一般に用いられている - <![CDATA[....]]>
    31. 31. 29ソースの読み解き<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.data> <xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument> </xp:this.data> <xp:button value="ラベル" id="button1"> <xp:eventHandler event="onclick" submit="false"> <xp:this.script><![CDATA[document.getElementById("#{id:elementID}").innerHTML;]]></xp:this.script> </xp:eventHandler> </xp:button> <xp:inputText id="inputText1" value="#{document1.Name}"> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:database.getProfileDocument("Configuration","Server")}]]></xp:this.action> </xp:eventHandler> </xp:inputText></xp:view>
    32. 32. 30データベース参照の指定(データバインディング)• 外部のデータベースを参照する場合 @Name("[CN]",@Subset(@DbName(),1)) + "!!" + "another.nsf"• 現在のデータベースのパス(フォルダ+ファイル名) database.getFilePath() Test¥dev¥Test.nsf• 現在のデータベースのがあるフォルダ名だけを取得 @LeftBack(database.getFilePath(),"") Test¥dev - または database.getFilePath().split(database.getFileName())[0] Test¥dev¥
    33. 33. 31@DbColumnと@DbLookup• 最初のパラメーター(サーバー、ファイルパス)は配列 - 同じデータベース内のビューであれば @DbName() で @DbName() CN=bootcamp/O=XPagesChannel,Lesson42NamePicker.nsf @DbName()[0] CN=bootcamp/O=XPagesChannel または @Subset(@DbName(),-1) @DbName()[1] Lesson42NamePicker.nsf または @Subset(@DbName(),1) - 他のデータベース var db:NotesDatabase = new Array(@DbName()[0], "names.nsf"); @DbColumn(db, "(People)", 2)
    34. 34. 32@DbColumnと@DbLookupの戻り値• 取得した戻り値が一つの場合はString型、複数の場合は 配列で返ってくる - その戻り値を使ってJavaScriptで続きの処理をするような場合、型が 厳密なJavaScriptではエラーになる可能性が高いので、型の判断を入 れるなど注意が必要
    35. 35. 33ノーツエージェントの呼び出し1• XPageで保存した文書を対象に処理をする ‒ 文書を保存した後のpostSaveDocumentイベント var agent = database.getAgent("agent_name"); var noteid = dominoDoc.getDocument().getNoteID(); agent.run(noteid) あるいは agent.runOnServer(noteid)呼び出されるエージェント Dim session As New NotesSession Dim agent As NotesAgent Dim doc As NotesDocument Set agent = session.CurrentAgent Set doc = session.CurrentDatabase.getDocumentById(agent.parameterDocId) ...... 注意:エージェントの基本タブにある「対象」を「なし」に設定すること!
    36. 36. 34ノーツエージェントの呼び出し2• メモリー上の文書に対して(8.5.2∼) - agent.runWithDocumentContext(doc:NotesDocument)呼び出されるエージェント Dim session As New NotesSession Dim doc As NotesDocument Set doc = session.DocumentContext
    37. 37. 35SSJS上で使用する変数型宣言• 変数名:<Dominoオブジェクト> - 例) var doc:NotesDocument = - 必須ではない(動作しないわけではない)が、より型が厳密な JavaScriptの記述では推奨 - 一番のメリットはメソッドの補完機能が使用できる var doc = database.getDocumentByUNID(docId); var doc:NotesDocument = database.getDocumentByUNID(docId);
    38. 38. 36UnprocessedDocuments• XPagesにはNotesDatabaseクラスの UnprocessedDocumentsに該当するものがない。ど うする? (1) getComponentを用いてビューコントロールをオブジェクトとして取得 (2) ビューコントロールのメソッドであるgetSelectedIds()を用いて、選択文書のNoteIDを取得 (3) NoteIDをキーに、databaseオブジェクト(NotesDatabaseクラス)から文書を取得するvar viewPanel=getComponent("viewPanel1");var docIDs=viewPanel.getSelectedIds();for(i=0 ; i < docIDs.length ; i++){ var docId = docIDs[i]; var doc:NotesDocument = database.getDocumentByID(docId); // 選択文書への処理 doc.recycle();}
    39. 39. 37XPage上のコントロールがもつ値へのアクセスSSJS getComponent("control_name").getValue(); getComponent("control_name").setValue("value_to_set");Client document.getElementById("#{id:elementID}").value; JS 計算結果フィールドの場合 document.getElementById("#{id:elementID}").innerHTML;
    40. 40. 38XPage上のノーツフィールドへのアクセス• フロントエンド fieldValue = document1.getItemValue("field_name"); document1.replaceItemValue("filed_name", "value_to_set"); ※ document1はデータソース名• バックエンドNotes文書の値 var doc:NotesDocument = datasourcename.getDocument(); fieldValue = doc.getItemValue("field_name") doc.replaceItemValue("field_name", "value_to_set"); ※ datasourcenameはバックエンドNotes 文書のデータソース名
    41. 41. 39getItemValue...• フィールドの型に合わせた関数を使用 - getItemValueString - getItemValueInteger - getItemValueDate - ....
    42. 42. 40recycle()• Dominoライブラリのオブジェクト使用後、明示的にメ モリーを解放を推奨 - Lotus Notes/DominoオブジェクトはJVMのガベージコレクションの 対象外
    43. 43. 41妥当性検査• 入力フィールドの妥当性検査は「妥当性検査」タブの項 目だけではありません - Validation on an XPage http://XPag.es/?1696 -
    44. 44. 42妥当性検査 - Validate Expression• 入力コンポーネントに対する妥当性検査ロジックに使用 http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson21 try{ var number = getComponent("serialNumber1").getSubmittedValue(); var vw:NotesView = database.getView("BySerialNumber"); var key:java.util.Vector = new java.util.Vector(); key.add(number); var product = vw.getDocumentByKey(key,true); if (product == null){ // 重複なし。OK return true; }else{ if (product.getUniversalID() == docProduct.getDocument().getUniversalID()){ //合致したレコードは現在編集中のこの文書、OK。 return true; }else{ //同じ商品番号のレコードあり。 return false; } } }catch(e){ _dump(e); return false; }
    45. 45. 43妥当性検査 - まとめて検査• ノーツフォーム設計のQuerysaveイベントに書いていた ロジックと同じようにしたい場合 - まとめてエラーを表示する計算結果コンロトール作成(HTML表示) - 妥当性検査のロジックを記述 http://www.xpageschannel.com/ channel.nsf/detail.xsp?course=lesson21
    46. 46. 44JavaScript エラー処理• try ∼ catch try { <ここに実行処理> } catch(e) { <ここにエラー処理> } try { database.getDocumentByUNID(docid) } catch(e) { print("エラー:"+e); }
    47. 47. 45SSJSのデバッグ • print() println() で変数などコンソールに出力<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:button id="button1"> <xp:this.value> <![CDATA[print() & println()]]> </xp:this.value> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action> <![CDATA[#{javascript:print(@Now());print("UserName: " + @UserName());println("Database Name: " + database.getFileName());}]]> </xp:this.action> </xp:eventHandler> </xp:button></xp:view>
    48. 48. 46Domino DesignerでローカルHTTP• Domino DesignerからローカルDBをブラウザでプリ ビューすれば自動的にローカルのHTTP立ち上がる• ローカルHTTPサーバー「コンソール」の立ち上げ ‒ Notes.ini にDebug_Console=1 • デバッグ時に役立つ ‒ nhttp -preview • Notesクライアント/Domino Designerを閉じる • DOSコマンドでノーツプログラムフォルダー • 「nhttp -preview」 • ユーザーパスワードの入力
    49. 49. 47メモリ/CPUプロファイラー• OpenNTFプロジェクト - 本日基調講演のPhilippe Riand氏のコントリビューション - http://www.openntf.org/projects/pmt.nsf/ProjectLookup/ XPages%20Toolbox
    50. 50. 48Notes Specific - ロール• @UserRolesは使用できない。ロールはよく非表示式で 使用されているが... - context.getUser().getRoles() ※戻り値 java.util.List 型 - 例 [Admin]のロールを持っているかの判定(trueかfalse) var roleList = context.getUser().getRoles(); return roleList.contains("[Admin]") ちなみに、java.util.Listの戻り値をもつ SSJS メソッドは他に ✦getGroups メソッド (DirectoryUser) ✦getAttachmentList (NotesXspDocument) contains以外の java.util.List のメソッドは ✦get (リスト内の指定位置にある要素取得) ✦indexOf (指定要素がリスト内で最初に検出された位置インデックス) ✦size (リスト内の要素数) など
    51. 51. 49XPage上のアクセス制御• XPage/カスタムコントロールまたはパネルに対して指 定が可能 - これは 非表示 ではなく、あくまでアクセス制御 - 指定できるタイプ - USER - GROUP - ROLE - ORGUNIT - ORGROLE - DEFALUT - ANONYMOUS
    52. 52. 50Notes Specific - プロフィール文書• getProfileDocumentで取得可能 var doc:NotesDocument = database.getProfileDocument("DbConfig", name);• ノーツクライアントからのように値のセットはXPages からできない。
    53. 53. 51Notes Specific - 返答文書の作成• ボタンのシンプルアクションに別のXPageを開いて返答 文書作成 document1.getNoteID()• 主文書を読み取りモードで開いているページ内に、編集 モードで開いた返答文書 var doc:NotesDocument = currentDocument.getDocument(); var response:NotesDocument = database.createDocument(); response.appendItemValue("Form", "Response"); response.appendItemValue("Subject", "AAAA"); response.makeResponse(doc); response.save();
    54. 54. 52Notes Specific - フィールドの値の引き継ぎ• 主文書から返答文書作成時に主文書の値を引き継ぐこと がよくある - XPageそのものの中に値を引き継ぐという機能は用意されていない• ひとつのアプローチとしてsessionScope変数に元文書 IDやフィールド値を代入 - postNewDocumentイベントで引き継ぐ元文書の内 容を引き継ぎ先のコントロールへ代入
    55. 55. 53同一ページで読み取りモードと編集モード• [Use Case] ひとつのXPageに主文書と返答文書投稿を 表示したい場合 - ひとつのXPageで複数の文書にバインディングできる - 「ignoreRequestParams」を「true」に - 注意:XPage/カスタムコントロールレベルでのデータバインディングを使用しないよ うに(パネル上にバインディング)
    56. 56. 54Notes Specific - 読者名フィールド• 読者名ってXPageでも有効なの? - XPagesのコントロールには名前フィールドに対応するコントロールは ありませんが、編集ボックスフィールドにバインドすれば期待通りの動 作をします! - ただし、従来からあるように読者名、作成者名フィールドに格納する型 変換に注意が必要。[Canonicalize]形式で。 - さらに、XPageから新規文書を作成する場合には - データソースのComputeWithFormを「onsave」
    57. 57. 55Notes Specific - 読者名フィールドにロール• onsaveだけでは、『?』の場合、やはりsetAuthors、 setReadersが便利 - ロールを追加したいなど var doc:NotesDocument = document1.getDocument(); var authors = new Array("[AdminEditors]"); var user:String=session.getEffectiveUserName(); authors.push( user ); var authitem:NotesItem = doc.replaceItemValue("Authors", authors ); authitem.setAuthors(true); var readitem:NotesItem = doc.replaceItemValue("Readers", "[AdminReaders]" ); readitem.setReaders(true);
    58. 58. 56ビューコントロールのデータ絞り込みのプロパティ• categoryFilterプロパティ - 「¥」で区切り多段階フィルタ可能• keysプロパティ、startKeysプロパティ - 多重キーは java.util.Vector 型で指定 var keys = new java.util.Vector(); keys.add("value_1"); keys.add("value_2"); return keys;
    59. 59. 57ビューの一行おきの色指定• ビューコントロールのスタイル rowClasses - スタイルクラスを指定、指定した数だけ反復 - スタイルシート .oddrow { background-color: rgb(248,248,248); } .evenrow { }
    60. 60. 58ノーツビューを繰り返しコントロールで使用• 基本形 - コレクション名指定 例)viewEntry• フィールド名指定の場合 - viewEntry.getColumnValue( field_name )• 列番号指定の場合 - viewEntry.getColumnValues()[0] - viewEntry.getColumnValues()[1]
    61. 61. 59ビューの全文検索• 全文検索のロジックは至って簡単! - ポイントはビューコントロールの「search」プロパティ
    62. 62. 60全文検索機能 - 検索ボックス• 検索文字を入力する編集ボックスコントロール - 検索結果を表示する次のページに入力内容を渡すためのスコープ変数と して使用できるように指定
    63. 63. 61全文検索機能 - 検索ボタン• 検索ボタン - onclickイベントでページを開くシンプルアクション作成 - ページは値の計算で次のスクリプト "search.xsp?searchValue=" + viewScope.searchValue;
    64. 64. 63全文検索機能 - ビューコントロール• searchプロパティ - URLのパラメーターを指定
    65. 65. 63全文検索機能 - プラスα• データベースに全文作成が作成されていないと実行時エ ラーになります - 全文索引作成の有無をチェック - 無い場合は検索ボックス・ボタン非表示 database.isFTIndexed();• 検索にヒットした検索が0件だった場合、ビューのヘッ ダー・フッターが表示されるだけ - ヒット件数なしを表示する計算結果フィールドかラベルコントロールを 作成。その可視プロパティに次のスクリプト。 getComponent("viewPanel1").getRowCount() < 1
    66. 66. 65ディスカッションテンプレートのカスタマイズ• テンプレートdiscussion8.ntfは他言語対応されている - 設計そのものは英語で作成されている - アプリケーションのプロパティ - XPageタブのローカリゼーション オプション - 不要言語削除 - パッケージ・エクスプローラーからxxxxx_ja.propertiesファ イル内の固定文字を変更
    67. 67. 65プロパティファイル上のダブルバイト文字• 日本語を使用するためには、日本語をJavaのUnicode に変換する必要がある - native2ascii (http://java.sun.com/j2se/1.4/ja/docs/ja/tooldocs/ win32/native2ascii.html) ServerName=bootcamp/Teamstudio DbTitle=u9867u5ba2u30c7u30fcu30bfu30d9u30fcu30b9 DbLocation=Lesson41• Eclipseのプラグイン「プロパティエディタ」が重宝 - http://propedit.sourceforge.jp/ ServerName=bootcamp/Teamstudio DbTitle=顧客データベース DbLocation=Lesson41
    68. 68. 66リソースバンダル• プロフィール文書の代わりにデータソース指定など Configuration設定に使用 - 拡張子「.properties]のリソースファイル作成 例)config.properties - XPageのリソース->リソースバンダル作成、リソースバンダル名 - リソースバンダル名を使って値を取得 JavaScript config.getString("DbPath")
    69. 69. 67部分更新• 部分更新したい場所がページ上に散らばっているとき は? - XPage上の部分更新は通常ひとつのコントロールが対象(パネルな ど) - クライアントJavaScriptを使って個々のコントロールを複数指定して 部分更新させることができる XSP.partialRefreshPost(id)
    70. 70. 68Web ページレイアウト• 独自レイアウトでアプリを作成 - CSSフレームワークを利用• OneUIを利用してアプリを作成 - 特にレイアウトの要件がなければOneUIを - OneUI の利用(wiki): http://XPag.es/?1692 - Extension Libraryでさらに簡単に
    71. 71. 69CSS IDとClassCSS ID Class #para1 .para1 { { text-align: center; text-align: center; color: red; color: red; } }HTML <p id= para1 > <p class= para1 > Hello World Hello World </p> </p> XPagesと相性がいいのは、ClassセレクタのCSS XPageがHTMLにレンダリングされると、 styleClass= XXX は class= XXX に
    72. 72. 70OneUI• IBM Lotus 製品(Webベース)で使用されている共通のUI 仕様• IBM Lotus User Interface Developer Documentation - Version 2.1 - http://infolib.lotus.com/resources/oneui/2.1/docPublic/index.htm - http://XPag.es/?168E (wiki XPages における OneUI 情報)
    73. 73. 71テーマ設計• アプリケーションレベルで必要なリソース - スタイルシート - JavaScript - XPagesコントロールプロパティの設定• テーマは通常次の3つから拡張 - webstandard - 一般的なWebsiteページを作成するとき - oneui - OneUIのテーマを使用するとき - notes - Notesクライアント <theme extends="webstandard"> </theme>
    74. 74. 72CSSの読み込み - アプリケーションレベル• テーマ設計で追加で使用するCSSを指定• アプリケーションのプロパティで使用するテーマを指定 CSS <resource> <content-type>text/css</content-type> <href>/screen.css</href> </resource> <resource rendered="#{javascript:context.getUserAgent().isIE(0,6) == true}"> <context-type>text/css</context-type> <href>/ie.css</href> </resource> <resource> <context-type>text/css</context-type> <href>/application.css</href> </resource> JavaScirpt <resource> <content-type>text/javascript</content-type> <href>clientjavascript.js</href> </resource>
    75. 75. 73Faviconの実装• テーマ設計に次のコード追加 <control> <name>ViewRoot</name> <property> <name>pageIcon</name> <value>/favicon.ico</value> </property> </control>• Faviconの作成? •例  http://www.chami.com/html-kit/services/favicon/
    76. 76. 74テーマ設計 - コントロール編• dojoTheme、dojoParseOnLoadを「true」 <control> <property> <name>dojoTheme</name> <value>true</value> </property> </control> <control> <property> <name>dojoParseOnLoad</name> <value>true</value> </property> </control>• ページタイトルにデータベースタイトルを <control override="false"> <name>ViewRoot</name> <property> <name>pageTitle</name> <value>#{javascript:@DbTitle()}</value> </property> </control>
    77. 77. 75テーマの無効• IBMが提供するCSSを使用したくない場合など - ブランクの「テーマ」を作成 - 3つのCSS
    78. 78. 76Dojo の無効化• さらにDojo以外のフレームワークを使いたいなど - パッケージエクスプローラーから WebContent->WEB-INF - xsp.propertiesファイルに次の一行を追加 xsp.client.script.libraries=none
    79. 79. 77Form の無効化• さらにドミノと関係ない普通のHTMLページを作成した い場合 - createForm を false
    80. 80. 78xsp.properties• アプリケーションのプロパティ「XPage」タブにある項 目以外にもXPageに関する設定がたくさん。 - パッケージエクスプローラーから - WebContent -> WEB-INF xsp.properties ファイル http://XPag.es/?1682
    81. 81. 79Dojo ウィジェット使用時• dojoParseOnLoad、dojoTheme を true• リソースで使用するDojoモジュールを指定
    82. 82. 80Dojo Tooltip• dijit.Tooltip を Dojo モジュールとして取り込み• 基本形 <div dojoType="dijit.Tooltip" style="display:none" connectId="id-of-element-to-connect-the-tooltip-to"> here is my tooltip </div>• サンプル <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true" dojoTheme="true"> <xp:this.resources> <xp:dojoModule name="dijit.Tooltip"></ xp:dojoModule> </xp:this.resources> <xp:label id="label1" value="テストラベル"></xp:label> <xp:text escape="false" id="computedField1"> <xp:this.value><![CDATA[#{javascript:"<div dojoType= "dijit.Tooltip"n" + "connectId="" + getClientId("label1") + "" style="display:none;"> n" + "これがツールチップですn" + "</div>"; }]]></xp:this.value> </xp:text> </xp:view>
    83. 83. 81知っておきたいオープン技術 - JSON• JavaScript Object Notation - 軽量のデータ交換フォーマット - http://www.json.org/json-ja.html - Dojo ウィジェットへのデータ受け渡しなどでよく使用されるデータ形 式
    84. 84. 82知っておきたいオープン技術 - REST• Representational State Transfer - Webサービスのひとつ - 一昔前はSOAP、今はRESTが主流になりつつある - サービスを経由して、HTTPのGETメソッドでリクエストを送信すると XML形式のデータを取得できるもの。 - 例えば、特定のURLにパラメーターを指定してリクエストを送ると商品 情報などを含むXMLデータ(あるいはJSONデータ)を取得できる
    85. 85. 83知っておきたいオープン技術 - OpenSocial• http://www.opensocial.org/• Lotus Notes Social Edition, IBM Connections NEXT - Activity Stream - Embedded Experience
    86. 86. 84OpenNTF• www.openntf.org
    87. 87. 85XPages Extension Library• OpenNTF XPages Extension Library - http://extlib.openntf.org/ - コミュニティに公開 - 実験的• Upgrade Pack - OpenNTF から安定したものを提供 - IBMのサポート - http://www-06.ibm.com/software/jp/lotus/products/nd85/nd85-UpgradePack853-1.html
    88. 88. 86Extension Library - Mobile Controls• Dojo Mobile フレームワーク• コントロールをドラッグ&ドロップ、パラメータを設定s るだけで簡単にモバイルWebアプリが作成できる• iOS、Androidに対応• チュートリアル• http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tutorial_• http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson33• http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson34• http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson35
    89. 89. 87Extension Library - OneUI Application Layout• コントロールをドラッグ&ドロップ - コードレス(プロパティ設定)でOneUIレイアウトを作成できる -
    90. 90. 88Extension Library - Rest + Dojo Grid• ビュー項目の内容をDojo Gridで表示、同時にon the flyで修正
    91. 91. 89Extension Library - Value Picker、Name Picker• ビューやアドレス帳から値を取得 - コントロールをドラッグ&ドロップしてパラメータを指定するだけ - Dojo ダイアログのピッカーダイアログが表示される
    92. 92. 90Login/Logout<xp:this.resources> <xp:dojoModule name="dijit.Dialog"></xp:dojoModule></xp:this.resources> <xp:link escape="true" id="banner_btn_login" styleClass="loginLink" text="ログイン"> <xp:this.rendered> <![CDATA[#{javascript: var strLoginURL:String; var strLogoutURL:String; var contextPath = facesContext.getExternalContext().getRequest().getContextPath(); var requestURI = facesContext.getExternalContext().getRequest().getRequestURI(); strLoginURL = contextPath + "?login&redirectto=" + requestURI; strLogoutURL = contextPath + "?logout&redirectto=" + contextPath; return (@UserName() == "Anonymous")?true:false;}]]> </xp:this.rendered> <xp:eventHandler event="onclick" submit="false"> <xp:this.script><![CDATA[javascript:dijit.byId("#{id:showLoginDialog}").show();]]></xp:this.script> </xp:eventHandler> </xp:link> <xp:link escape="true" id="banner_btn_logout" styleClass="loginLink" value="#{javascript:return strLogoutURL}" text="ログアウト"> <xp:this.rendered> <![CDATA[#{javascript: return (@UserName() == "Anonymous")?false:true;}]]> </xp:this.rendered> </xp:link> <xp:div dojoType="dijit.Dialog" id="showLoginDialog" style="overflow:auto;" title="ログイン"> <xp:this.dojoAttributes> <xp:dojoAttribute name="href" value="#{javascript:strLoginURL}" /> </xp:this.dojoAttributes></xp:div>
    93. 93. 91CGI 環境変数へのアクセスDomino HTTP ではフィールドまたはLotusScritエージェントを介してCGI変数を取得できた。XPagesでは? facesContext.getExternalContext().getRequest().getXXXXXXXX();• ディスカッションテンプレートに「xpCGIValiables」と いうサーバーサイドJavaScriptライブラリ。取得の例は 「mainTopic」カスタムコントロールを参照 - 取得の例は「mainTopic」カスタムコントロール内のデータソース querySaveDocumentイベント参照• wikiでの説明 - http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-cgi- variables.htm
    94. 94. 92ノーツ文書に添付された画像イメージの表示• イメージをポイントするURLの基本形 - /0/<文書のUNID>/$FILE/<イメージのファイル名>•例 - /0/ + viewEntry.getDocument().getUniversalID() + /$FILE/ + viewEntry.getColumnValue( Image ) ビューにイメージのファイル名を表示する列「image」があるものとする 文書内の添付ファイル名を取得する@AttachmentNamesを使用
    95. 95. 93/.ibmxspres/• Domino上のリソースファイル参照 - /.ibmxspres/domino/icons → <data>¥domino¥icons - /.ibmxspres/dojoroot → <data>¥domino¥js¥dojo-1.x.x - /.ibmxspres/dojojs → <data>¥domino¥js - /.ibmxspres/domino/oneuiv2/images → <data>¥domino¥html ¥oneuic2¥images - /.ibmxspres/global → <data>¥domino¥java¥xsp <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:image url="/.ibmxspres/domino/oneuiv2/images/ibmlogo.png" id="image1"> </xp:image> </xp:view>
    96. 96. 94URLの操作まとめ• 別のURLへリダイレクト - faceContext.getExternalContext().redirect( http://www.ibm.com )• 別のXPageへリダイレクト - context.redirectToPage( Page.xsp )• 現在のパス取得 - faceContext.getExternalContext().getRequest().getContextPath()• ページ名を含むフルパス取得 - faceContext.getExternalContext().getRequest().getRequestURI()• 完全URL - faceContext.getExternalContext().getRequest().getRequestURL()• URLパラメーターの取得 - param.get( parameter_name )
    97. 97. 95XPagesでサービスエージェント(XAgent)• 通常XPageはWebページを表示するものですが、ファ イル出力(.txt、.xls、.csvなど)することもできます - http://XPag.es/?169A - http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson24 <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false"> <xp:this.afterRenderResponse><![CDATA[#{javascript: var externalContext = facesContext.getExternalContext(); var writer = facesContext.getResponseWriter(); var response = externalContext.getResponse(); // コンテンツのタイプをセット response.setContentType("text/xml"); // response.setContentType("application/json"); JSON形式の場合 response.setHeader("Cache-Control", "no-cache"); // パラメーターの取得など var param = context.getUrlParameter("myParam"); // HTMLの出力など writer.write("<br></br>"); // writer.write("{jsonvar=jsonvalue}"); writer.endDocument(); }]]> </xp:this.afterRenderResponse> </xp:view>
    98. 98. 96ソースコードコントロール• Domino Designer 8.5.3からSubversionなどのソース コードコントロールが利用可能に - http://heidloff.net/home.nsf/dx/09152011024951AMNHEA28.htm - http://heidloff.net/home.nsf/dx/09192011040807AMNHEBK6.htm - http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson29
    99. 99. 97XSP Client Object• Client JavaScript - XSP Object - XSP.addOnLoad() - ページがロードされたときに実行するコード - XSP.setSubmitValue(value)• 現在はDojo主体• 将来XPages独自の拡張• 詳細 - http://XPag.es/?xspobject - http://XPag.es/?CSJSinXPages Dojoを使用するとき、 dojo.addOnLoad()を使用することも ありますが、XSP.addOnLoad()は XPageが完全にロードされたことを 保証していますのでXSPを使用することを 推奨します。
    100. 100. 98Books
    101. 101. 99快適なXPagesライフのために• フォローすべきTwitterアカウント - @Lotus_BPTE - @IBM_XPages_JP - @xpagesinfo - @XPages - @xpagesblog - @openntf - 個人アカウントでつぶやく方もたくさん• Website - Lotus Notes/Domino Application Development wiki http://www-10.lotus.com/ldd/ddwiki.nsf/ - IBM developerWorks http://www.ibm.com/developerworks/jp/ - notes/domino liaison http://notesdominoliaison.blogspot.jp/ - IBM XPages Japan Facebook 公式ファンページ https://www.facebook.com/xpagesjapan - XPages.info http://xpages.info/XPagesHome.nsf/Home.xsp - XSnippets http://openntf.org/xsnippets - OpenNTF http://www.openntf.org
    102. 102. I m with you 100• notes/domino liaison• XPagesChannel (@XPagesChannel Facebook)• @katoman• Google+

    ×