February 28, 2015

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

テーマ:iNotes (DWA)

<話題の履歴>


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

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

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



前回は、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)を開くと以下のようになります。



iNotes_Customize_11


従来のMenu Positionが表示されたことが分かります。



では、Classic UIはこれくらいにして、Lite UIにAction Menuを追加する場合を見てみましょう。


Lite UIのMenu IDは以下のように表示されています。



iNotes_Customize_12


これは、この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_Customize_13


全体を見ると、iNotes Consoleを含めて表示されてしまいますので、個別のAction Menuを選択して表示すると以下のようになります。



iNotes_Customize_14


開発Toolでの解析は面倒ですが、iNotesのDOM Treeの詳細を解説した資料はありませんので、本格的にCustomizeを行う場合は開発Toolによる解析が必須となってきます。



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

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


<続く>


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

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

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

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

コメント

[コメントをする]

コメント投稿

AD

ブログをはじめる

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

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

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

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

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