Web UI フレームワークを使用したメニューのカスタマイズ
メニューのカスタマイズは、Ext JS JavaScript フレームワークの Ext.menu.Menu クラスを使用して行うことができます。
Designer Workbench には、メニューを作成するためのウィジェットはありません。 ただし、コード・テンプレート生成プログラムのメニュー・テンプレートを使用してメニューを作成できます。コード・テンプレート生成プログラムにアクセスするには、Designer Workbench で「コードの生成 (Generate Code)」ボタンをクリックします。 コード・テンプレート生成プログラムによって生成されたコードを「コードの更新 (Code Update)」ページに貼り付けるか入力して、このページで新しいメニューのコードを完成させます。
Web UI フレームワークでは、メニューを画面で表示するには、サーバーからメニュー・データを取得して、そのデータをブラウザー上でレンダリングする必要があります。
デフォルト実装では、includeMenu タグが用意されており、このタグは JSP から次のようにして呼び出すことができます。
<scuiimpltag:includeMenu></scuiimpltag:includeMenu>
これにより、ログイン中のユーザー用に構成されたメニューのうち、このユーザーがアクセス権を持っているメニューがすべて返されます。
このタグは、メニューデータをJSONデータ(テキストを含むことができる)、 URL、 JavaScript,、または画像として返します。
{
text: 'First Menu',
subMenu: [{
text: 'First SubMenu',
url: '/<app_dir>/<app_dir>/editRule.do'
js: 'openpopup()',
img: 'my-cls-img'
}
このデータをレンダリングするために、デフォルトの実装が JavaScript ファイルとして提供されています。 このファイルを使用するには、以下のコードを JSP に組み込みます。
<script type="text/javascript" src="<%=request.getContextPath()%>/platform/scripts/menuPaint.js"></script>
以下のガイドラインに従ってメニューをカスタマイズしてください。
- メニューの UI 上の外観を変更するのに、そのメニューでは、アプリケーションの menuPaint.js の代わりに独自の実装が使用される必要があります。
- より多くの情報が含まれたメニュー・データを取得するのに、そのメニューでは、includeMenu タグを使用するアプリケーションの代わりに、独自の実装が使用される必要があります。