java wickets menu on image button

3321776

Hello All,

I'm trying to create a image button. When this button clicked, a drop down menu should appear with External Links to other websites.

Till now, I've managed to create drop down menu with External links but on navigation bar as provided in example: http://tomaszdziurko.pl/2012/03/wicket-and-twitter-bootstrap-navbar/.

HTML:

<div wicket:id="navBar"/>

Code:

<span class="kwd">public</span><span class="pln"> </span><span class="typ">Builder</span><span class="pln"> withMenuItemAsDropdown</span><span class="pun">(</span><span class="typ">MenuItemEnum</span><span class="pln"> menuItem</span><span class="pun">,</span><span class="pln"> </span><span class="typ">String</span><span class="pln"> pageToLink</span><span class="pun">,</span><span class="pln"> </span><span class="typ">String</span><span class="pln"> label</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br/>   </span><span class="com">//BookmarkablePageLink<Page> link = new BookmarkablePageLink<Page>("link", pageToLink);</span><span class="pln"><br/>   </span><span class="typ">ExternalLink</span><span class="pln"> linkExternal </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ExternalLink</span><span class="pun">(</span><span class="str">"link"</span><span class="pun">,</span><span class="pln"> pageToLink</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">);</span><span class="pln"> <br/>  linkExternal</span><span class="pun">.</span><span class="pln">setBody</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Model</span><span class="pun"><</span><span class="typ">String</span><span class="pun">>(</span><span class="pln">label</span><span class="pun">));</span><span class="pln"><br/>  linksMap2</span><span class="pun">.</span><span class="pln">put</span><span class="pun">(</span><span class="pln">menuItem</span><span class="pun">,</span><span class="pln"> linkExternal</span><span class="pun">);</span><span class="pln"><br/><br/>   </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">;</span><span class="pln"><br/>   </span><span class="pun">}</span><span class="pln"><br/><br/></span><span class="typ">And</span><span class="pln"> then in </span><span class="typ">Base</span><span class="pln"> JAVA </span><span class="kwd">class</span><span class="pun">:</span><span class="pln"><br/>add</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">TwitterBootstrapNavBarPanel</span><span class="pun">.</span><span class="typ">Builder</span><span class="pun">(</span><span class="str">"navBar"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">HomePage</span><span class="pun">.</span><span class="kwd">class</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Example Web App"</span><span class="pun">,</span><span class="pln"> getActiveMenu</span><span class="pun">())</span><span class="pln"><br/>   </span><span class="pun">.</span><span class="pln">withMenuItem</span><span class="pun">(</span><span class="typ">MenuItemEnum</span><span class="pun">.</span><span class="pln">CLIENTS</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ClientsPage</span><span class="pun">.</span><span class="kwd">class</span><span class="pun">)</span><span class="pln"><br/> </span><span class="pun">.</span><span class="pln">withMenuItemAsDropdown</span><span class="pun">(</span><span class="typ">MenuItemEnum</span><span class="pun">.</span><span class="pln">PRODUCTS2</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Sample_URL"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Product 1"</span><span class="pun">)</span><span class="pln"><br/>   </span><span class="pun">.</span><span class="pln">withMenuItemAsDropdown</span><span class="pun">(</span><span class="typ">MenuItemEnum</span><span class="pun">.</span><span class="pln">PRODUCTS2</span><span class="pun">,</span><span class="pln">  </span><span class="str">"Sample_URL"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Product 2"</span><span class="pun">)</span><span class="pln"><br/>   </span><span class="pun">.</span><span class="pln">withMenuItemAsDropdown</span><span class="pun">(</span><span class="typ">MenuItemEnum</span><span class="pun">.</span><span class="pln">PRODUCTS2</span><span class="pun">,</span><span class="pln">  </span><span class="str">"Sample_URL"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Product 3"</span><span class="pun">)</span><span class="pln"><br/>   </span><span class="pun">.</span><span class="pln">build</span><span class="pun">());</span>

Now to add a Image, I've added the code:-

<span class="kwd">final</span><span class="pln"> </span><span class="typ">ContextImage</span><span class="pln"> image</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ContextImage</span><span class="pun">(</span><span class="str">"image"</span><span class="pun">,</span><span class="str">"IMAGE.png"</span><span class="pun">);</span><span class="pln"><br/></span><span class="typ">ExternalLink</span><span class="pln"> link </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ExternalLink</span><span class="pun">(</span><span class="str">"link"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"SAMPLE_URL"</span><span class="pun">);</span><span class="pln"><br/>   </span><span class="com">//Image image = new Image("img", new SharedResourceReference(BasePage.class, "/wicket-bootstrap/img/QuestionMark_2.png"));</span><span class="pln"><br/>  link</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">image</span><span class="pun">);</span><span class="pln"><br/>  add</span><span class="pun">(</span><span class="pln">link</span><span class="pun">);</span>

But I'm unable to add the drop down menu to this Image button. Kindly suggest some inputs.

Thanks in advance.