Question

Hi I am trying to create a drop down menu using GWT. This is the layout I am trying to achieve:

| Categories | Pictures | Other |

Now, when categories opens I want to display the actual drop down showing the categories in groups of two. Lets say:

 | Categories | Pictures | Other |
 |  Cat 1    Cat 2   |
 |  Cat 3    Cat 4   |
 |  Cat 5    Cat 6   | <---------- Menu of categories here
 |  Cat 7    Cat 8   |
 |  Cat 9    Other   |
  -------------------

I looked at the MenuBar Widget http://gwt.google.com/samples/Showcase/Showcase.html# MenuBar and the rest of the widgets there. However, doesnt seem to fit my needs since categories will be shown in pairs of 2 so whenevever I move the mouse over a row it will select both of them instead of only one.

I am currently using a FlexTable so basically I have a matrix with empty spaces and I only display the elements from categories because it is the only one that has items. In otherwords all the elements are a cell in a matrix. I almost achieve the use case However, the way is currently programmed is a bit hacky and unnatural.. currently it looks like this:

       Column1        |       Col2   |  Col3
| Categories                Pictures | Other |               <- Row1
|  Cat 1                     Cat 2   |  Empy |               <- Row2
|  Cat 3                     Cat 4   |  Empy |               <- Row3
|  Cat 5                     Cat 6   |  Empy |   <---------- Menu of categories here
|  Cat 7                     Cat 8   |  Empy |               <- Row5
|  long descriptions ruin layout     |  Empy |               <- Row6
-------------------------------------

So the layout of the header “Pictures” and “Other” always will move depending on the width of the categories menu.

Could anyone give me an advise on how how to achieve this using GWT? I know there’s the option to create own widgets. But before that I would like to know how to achieve that. May be somebody can guide me how to integrate another technology like jQuery, or achieve that format adding CSS classes or a particular GWT widget layout that allows to have different columns and row sizes.

Thank you

Answer 1

here is a fiddle you can start with http://jsfiddle.net/UUHyj/ all it uses is css but for ie6 down you will need javascript to do the rollovers etc