iNotes 9をCustomizeしてみよう! -4-
<話題の履歴>
前回は、Custome_JS_LiteのActionIDの表示を行ってみました。
今回は、従来のCustome_JSのMenu Position表示を有効にしてみたいと思います。
前回と同様に、Domino DesignerでCustom_JS Subformを開き、以下のように設定します。
Utilityは最初から読み込むように設定されていますので、そのままの状態にしておきます。
// Include utility routines common to both Classic and Sparkle Full/Lite
<InsertNotesSubForm Name="Custom_Common_Utils">
次に、Action HelperのUrilityを読み込むように設定します。
// ===========================================================================
// Expose this comment block to include actions helper routines
// ===========================================================================
//
<InsertNotesSubForm Name=API_ActionsHelper_Subform>
</NotesComment>
<InsertNotesSubForm Name=API_ActionsHelper_Subform>
また、以下の通り、Action Positionを表示するように設定します。
function Custom_Scene_Actions( s_SceneName, o_Window, s_TopBranchId ){
checkActionPositions(s_TopBranchId);
これで設定は完了しましたので、変更をServerのForms9_x.nsfに反映させて、以下のCommandでCacheのRefreshを行います。
> dbc flush
> tell http inotes flushforms
これでBrowerをRefreshして、Classic UIを使ったFormである「伝言メモ」(PhoneMessage)を開くと以下のようになります。
従来のMenu Positionが表示されたことが分かります。
では、Classic UIはこれくらいにして、Lite UIにAction Menuを追加する場合を見てみましょう。
Lite UIのMenu IDは以下のように表示されています。
これは、このSceneのMenu ID全体の名前で、MailのInboxのMenu IDであることを示しています。
「Scene」というのはiNotesが初めての方にとっては聞きなれない言葉かもしれませんが、現在の
作業画面の名前を表しています。
つまり、このAction Menu IDはMail Viewの一つであるInboxのMenuという意味なのです。
話しが逸れますが、Notesを使い慣れた人であればInboxはViewではなくFolderだと突っ込まれるかも知れませんが、iNotesではViewとFolderの区別は無いのです。
では、Custome_JS_Liteに書かれたSample Codeを見てみましょう。
Menuを追加するためのCodeが以下のように書かれています。
// Add to the mail view toolbar, only the normal one
if (-1 == s_MenuID.indexOf("mailview"))
return false;
var bLeftItems = true;
// Add menus and submenus
var aAdd1 = [
{title:"Hello world", find_id: "new", id: "hello1", before: true,
action:"com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Hello1\'}", help_text:"some hover text" },
{title:"Sub menus", find_id: "new", id: "hello2", before: false,
action: "com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Hello2\'}", help_text:"submenu hover text",
submenus: [
{title:"Selected docs",
action:"com_ibm_dwa_ui_EXAMPLE_actionSelectedDocs {}"},
{title:"Is view",
action:"com_ibm_dwa_ui_EXAMPLE_IsView {}"},
{is_divider:true},
{title:"Toggle Sidebar",
action:"EcV {sAction: \'toggle\'}"}
]},
{title:"Image", find_id: "hello2", id: "image1", before: false,
action:"com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Icon and text\'}", help_text:"icon and text", img:"/iNotes/Forms9.nsf/commonactionicons.gif?OpenFileResource", img_width: 16, img_height: 16, x_offset: 48, y_offset: 0 },
{find_id: "image1", id: "image2", before: false,
action:"com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Icon only\'}", help_text:"icon only", img:"/iNotes/Forms9.nsf/commonactionicons.gif?OpenFileResource", img_width: 16, img_height: 16, x_offset: 96, y_offset: 0 }
];
addActionsLite( s_MenuID, bLeftItems, aAdd1 );
最初に書かれているのは以下のCodeです。
if (-1 == s_MenuID.indexOf("mailview"))
return false;
s_MenuIDというのが、先程の画像で「MENU ID」に表示されていた値を含んでいる変数となっています。
この受信ボックス表示のSceneでは、"e-actions-mailview-inbox"という値が格納されています。
つまり、最初の部分が、追加するAction MenuのSceneを決定する判断となっていて、JavaScriptのindexOfを使って、s_MenuID.indexOf("mailview")でs_MenuIDに"mailview"含まれているかどうかを判断していますので、この場合は"mailview"という値を持つ全てのViewにAction Menuを追加するということになります。
新規Mail作成のSceneでは、"e-actions-mailedit"というのがs_MenuIDの値ととなりますが、これらの値はMenuIDのHelperが有効になっていれば容易に確認することができる訳です。
それ以外の方法で確認する為には、Firefoxなどの開発者Toolを使って調べる必要があります。
例えば、このTable定義されたMenu部分をFirefoxの開発者Toolを使って表示してみると、以下のようになっていることが分かります。
全体を見ると、iNotes Consoleを含めて表示されてしまいますので、個別のAction Menuを選択して表示すると以下のようになります。
開発Toolでの解析は面倒ですが、iNotesのDOM Treeの詳細を解説した資料はありませんので、本格的にCustomizeを行う場合は開発Toolによる解析が必須となってきます。
今回は、Classic UIのMenu Position表示の確認とLite UIでのAction MenuのCustomizeのためのSample Codeを見てみました。
次回は、Lite UIのAction Menu CodeのSampleを実際に動かしてみたいと思います。