Office Style Menus in TIBCO General Interface

Posted by Adam

Recently I got into a 'Usability' debate about what sort of menus where better; 'Office Like' menus or basic drop-down fly-out menus with tool tips. I was thinking about it and I started to wonder if it was even possible in my favorite AJAX web UI development environment (General Interface).

The answer is yes, of course, and there are a number of ways in which it could be accomplished. I chose to try it by re-writing the XSL that is used to render the Menu GUI component. You will have to realize that GI is alien technology reverse engineered by time traveling browser ninjas and the XSL method is the one that I felt was the most elegant. It is not the easiest way I can think of.

I have to admit that this example is incomplete for two reasons:

I don't have any real business case for implementing this at this time. I am perfectly happy with the default menus for now.
I am feeling very lazy tonight.

In the image below you will see an example of some of the menus in Office that I am talking about. They have a large graphical icon and two types of text, a bolded title and a non-bolded description.

Here is an example of the menus that I made by altering the default XSL for the menu component in GI.

Copy the default XSL file from the GI runtime folder..(/JSX/xsl/jsxmenu.xsl) to the XSL folder under your current project.
Alter the XSL file to show the menus the way you want them to.
Then create an XML document using the GI 'Common Data Format' or CDF
<data jsxid="jsxroot">
<record jsxid="1" jsxtext="New" jsxtip="Tool Tip Here" jsxkeycode="ctrl+e" jsximg="images/paint_24.png" jsxexecute="alert('New Clicked');"/>
<record jsxid="2" jsxtext="Open" jsxtip="Tool Tip Here also" jsximg="images/flag_24.png" jsxexecute="alert('Open Clicked');">
<record jsxid="21" jsxtext="Open Sub 1" jsxtip="SubTip Here" jsxexecute="alert('Open Sub Clicked');"/>
</record>
<record jsxid="3" jsxtext="Save" jsxtip="Another Tool Tip here and this one is really lot of text." jsximg="images/foldr_24.png" jsxkeycode="ctrl+q" jsxexecute="alert('Save Clicked');"/>
</data>

Pay special attention to the 'jsximg', 'jsxexecute', 'jsxkeycode', and 'jsxtip' attributes. I chose to use the tool tip data as the description text. I could have used a custom attribute but I got lazy again.
Apply the contents of this XML file to the 'XML String' property of the menu. You can also apply the path to this document in the 'XML URL' property but I am finding that the HOT KEYs (see jsxkeycode attribute) are not working when I do that. I have brought this up in the forum.
I then copied some random icons into my local project and made sure the 'jsximg' attribute in the XML document was correct.