March 08, 2015

iNotes 9をCustomizeしてみよう! -5-

テーマ:iNotes (DWA)

<話題の履歴>


iNotes 9をCustomizeしてみよう! -1-

iNotes 9をCustomizeしてみよう! -2-

iNotes 9をCustomizeしてみよう! -3-

iNotes 9をCustomizeしてみよう! -4-



前回は、Classic UIのMenu Position表示の確認とLite UIでのAction MenuのCustomizeのためのSample Codeを見てみました。

今回は、Lite UIのAction Menu CodeのSampleを実際に動かしてみたいと思います。



まあ、サンプルを動かすだけなので、つまらないとは思いますが、DWA 7の頃と異なり注意点があるようなので、それを簡単に紹介してみます。


Custome_JS_LiteのSampleには以下のような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 );


注目頂きたいのは、以下の部分です。


action:"com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Hello1\'}", help_text:"some hover text" },


わざわざFunctionを定義して、それをCallしてAlert Messageを表示するようになっています。

このFuncitonもSampleが提供されていて、以下のように書かれています。


function com_ibm_dwa_ui_EXAMPLE_alert(sId){
// This is an example of how to retrieve action Gkn
var o_ActionContext = ELU.EJs[sId];
alert(o_ActionContext.sMsg);
}


早速ここで、iNotes特有の書き方が現れました。

「ELU.EJs[sId]」の部分です。


さて、これを理解するには、以前の記事で紹介したForms9.nsfのResource\Fileの「ObfuscationList.txt」をCheckする必要があります。

Domino Designer自身でも検索は可能ですが、便利に使うにはこの「ObfuscationList.txt」をText FileにCopyしておいて参照すると便利だと思います(かなりの行数ですので)。

このListを参照すると、以下となっています。


Gkn params

ELU com_ibm_dwa_ui_invokeAction

EJs oContext

つまり、ELUというFunctionのContextにsMsgという値を設定して、この値をalertで表示するという内容です。


呼ぶ側では、


com_ibm_dwa_ui_EXAMPLE_alert {sMsg: \'Hello1\'}


となっていますので、sMsgの値として、"Hello1"を設定して渡していますので、このActionを押すと"Hello1"というAlertのPOPupが表示されるという訳です。


DWA 7の頃にCustomizeをされた方はご存知だと思いますが、Classic UIは普通にJavaScriptのalertだけでMessage表示が出来ましたが、Lite UIの場合は異なっています。


では、Sample Codeを元にして簡単なAction Menuを作ってみましょう。


まず、Alert Messageを出すためのFunctionをIBMのSampleを元に以下のように作成して、Custome_JS_Liteの最後に追加します。


function alertMsg(sId){
var o_ActionContext = ELU.EJs[sId];
alert(o_ActionContext.sMsg);
}


次に、Actionを定義します。


これも、IBMのSampleを元に以下のように作成してみます。


function Custom_Scene_Actions_Lite(s_MenuID)
{
if (-1 == s_MenuID.indexOf("mailedit"))
return false;
var bLeftItems = true;
var aAddMenu = [
{title:"新メニュー", find_id: "send$bold", id: "custom", before: true,
action:"alertMsg {sMsg: \'新規メニュー\'}", help_text:"新規ドロップダウンメニュー",
submenus: [
{title:"サブメニュー1",
action:"alertMsg {sMsg: \'ドロップダウンメニュー1\'}"},
{is_divider:true},
{title:"サブメニュー2",
action:"alertMsg {sMsg: \'ドロップダウンメニュー2\'}"}
]
}
];
addActionsLite( s_MenuID, bLeftItems, aAddMenu );


checkActionIDs( s_MenuID );

これは、s_MenuIDが"mailedit"を含んでいる場合に表示するメニューとしていますので、新規Mail作成時やMail返信時などMailが編集Modeの場合のみ表示されるMenuとなります。


MenuはMail編集時のTop Menuである「送信」ボタン(MenuIDは"send$bold")を見つけ、その左側(before: true)に新規メニューを挿入しています。


トップメニューのタイトルは「新メニュー」(title:"新メニュー")で、このボタンを押すと「新規メニュー」がAlert Messageとして表示されます。

また、サブメニューも二つあり、これもAlert Messageを表示するようになっていて、サブメニューの間にセパレーター(is_divider:true)を入れています。


最後に、checkActionsIDs( s_MenuID )を入れたことにより、MenuIDの表示は全体ではなく、Mail編集時のみに表示されるようになります。


変更が完了したら、Custome_JS_Lite Subformを保存して、CustomizeしたLocalのForms9_x.nsfをReplicaし、Domino Server Consoleから以下のCommandを入力します。


> dbc flush

> tell http inotes flushforms


Web BrowserでCacheをClearしてみると、以下のようになります。


まず、Mail Inboxではこれまで設定していたcheckActionsIDs( s_MenuID )が無効になり、MenuIDが表示されなくなります。



iNotes_Customize_15


また、今回の変更で以前checkActionsIDs( s_MenuID )だけを動かして際に発生していたErrorは出なくなりました。

Classic UIのMenu Position表示は全体に適用した場合も問題なく動作するのですが、どうやら、Lite UIのMenuID表示は特定のs_MenuIDに適用しないと、sDescriptionが空でErrorとなるようです。


では、新規Mailを作成してMenuが追加されたか確認してみます。

以下のように、checkActionsIDs( s_MenuID )はMail編集時のみ有効となり、この画面だけでs_MenuIDが表示されています。



iNotes_Customize_16


新規MenuのIDが表示されているのが確認できます。

新規MenuにHelp Textを設定していましたが、MenuID表示を有効にしているため、ID表示が優先され、Help Textは表示されませんので、Menu位置の確認が終わったら、MenuID表示を無効にしてHelp Textを確認する必要があります。


この新規Menuをクリックしてみると、以下のようになります。



iNotes_Customize_17


通常のJavaScriptのAlertとは異なり、iNotesの画面上のAlertでバックがGlayoutされているのが分かります。


サブメニューも見てみましょう。

以下のようにサブメニューが表示され、メニューの間にセパレーターも入っていることが確認できます。


iNotes_Customize_18


サブメニューを押すと以下のメッセージが表示されます。



iNotes_Customize_19


これでSample Codeは正常に動いていることが確認できました。


最後にHelp Text表示を確認するために、checkActionsIDs( s_MenuID )を無効にして確認します。

以下のように、Help Textも正常に表示されていることが確認できます。



iNotes_Customize_20


さて、ここでついでにClasic UIを使っているFormである「伝言メモ」(PhoneMessage)を開いて見ます。

以下のように、追加したLite UIのActionは表示されておらず、かつ、Custom_JSで設定したMenu Position表示が有効になっていることが分かります。



iNotes_Customize_21


Classic UIの場合は、s_MenuIDはありませんので、SceneNameで判断したActionをCustom_JSで定義しないと現れないのです。

つまり、Classic UIとLite UIが混在してしまっている現在のiNotes 9では、Classic UIとLite UIを認識しながらCustomize Codeを夫々に対応した形で作らなければならないということです。


今回紹介した内容は簡単なSample Codeの内容で、全く役に立たないと思いますし、Alert Messageの場合は、BrowserのSecurityによって、Alert Message内にMessageをBlockするMessageが挿入されることがあります。

本来のCustomizeであれば、JavaScriptのshowModalDialogと同様のCustom Dialog Box表示が必須になりますが、Lite UIの場合、Custom Dialog Boxの表示もClassic UIの場合とは異なっていますので、別の機会に紹介したいと思います。



今回は、IBMが提供しているSample Codeを元に新規Menuの追加を行ってみました。

次回は、少し役立つCustomizeを考えてみます。


<続く>

いいね!した人  |  コメント(0)  |  リブログ(0)

いわまんさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事
 もっと見る >>

コメント

[コメントをする]

コメント投稿

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。