Menu customizations with the web UI framework
You can make menu customizations using the Ext.menu.Menu class of the Ext JS JavaScript framework.
The Designer Workbench does not have a widget for creating menus. However, you can create menus using the menu template of the Code Template Generator, which you access from the Designer Workbench using the Generate Code button. Code generated by the Code Template Generator is pasted or typed on the Code Update page, where you finish the creation of the code for the new menu.
In Web UI Framework, to show a menu in a screen, you have to get menu data from the server and render it on the browser.
In the default implementation, the tag includeMenu is provided, which can be called from JSP as:
<scuiimpltag:includeMenu></scuiimpltag:includeMenu>
This returns all of the menus configured for the logged-in user for which the user has permissions.
This tag returns menu data as JSON data (which can have text), a URL, JavaScript, or an image.
{
text: 'First Menu',
subMenu: [{
text: 'First SubMenu',
url: '/<app_dir>/<app_dir>/editRule.do'
js: 'openpopup()',
img: 'my-cls-img'
}
To render this data, the default implementation is provided as a JavaScript file. To use this file, include the following code in the JSP:
<script type="text/javascript" src="<%=request.getContextPath()%>/platform/scripts/menuPaint.js"></script>
- To change the UI look and feel of the menu, it has to use its own implementation instead of the application menuPaint.js.
- To get menu data with more information, it has to use its own implementation instead of the application using includeMenu tag.