Cool Menus By Luca Passani      passani at eunet dot no      luca dot passani at openwave dot com Cool menus (wall:cool_menu tag) are a way to have cool-looking graphycally rich navigation menus which degrade gracefully on legacy and low-end devices. For example, a cool menu could look something like what you see in the picture. It goes without saying that only a device with a large screen, support for HTML tables and color pictures can render the graphical icons. With cool menus, you can create JSPs that produce pleasent pages like the one above on devices that support them, while rendering acceptably well on less sophysticated devices. The actual code that produces this example can be found at the end of this document. The same code is included in the WALL release since Beta 2. The 'colnum' attribute tells WALL how many columns the matrix should be. The default is 2. Since this attribute can be set dynamically, nothing prevents you from setting the number of columns to a WURFL capability value or a value derived from one or more WURFL capabilities. For example: <c:set var="gridsize" value="2" /> <c:if test="${capabilities.resolution_width >= 160}"> <c:set var="gridsize" value="3" /> </c:if> It goes without saying that the value of coolmenus is mainly in how nicely they degrade on legacy devices and devices that do not have adequate table support. Most Japanese imode phones, for example, do not have table support. For this reason, coolmenus are rendered like a list: How does a cool menu know if a browser supports tables? by looking at some WURFL capability, of course. xhtml_table_support for XHTML and chtml_table_support for imode devices. Of course, one may want to standardize their coolmenus so that all of them look the same (i.e. like a list) no matter if the browser supports tables or not. This is made possible by the 'tabularize' attribute: <wall:cool_menu tabularize="false" /> Visually: Last, but not least...plain WML Finally, here is what the JSP looks like: <%@ taglib uri="/WEB-INF/tld/wall.tld" prefix="wall" %> <wall:document><wall:xmlpidtd /> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> <wall:load_capabilities /> <wall:head> <wall:title>Cool Portal</wall:title> <c:set var="gridsize" value="2" /> <c:if test="${capabilities.resolution_width >= 160}"> <c:set var="gridsize" value="3" /> </c:if> <wall:cool_menu_css colnum="${gridsize}"/> </wall:head> <wall:body> <wall:cool_menu colnum="${gridsize}"> <wall:cell> <wall:img src="pix/movies.gif" alt="Cinema" > <wall:alternate_img src="pix/movies_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="camcorder" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#58999;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63704;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Cinema</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/dice.gif" alt="Games" > <wall:alternate_img src="pix/dice_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="dice" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#59024;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63729;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Games</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/holiday.gif" alt="Travel" > <wall:alternate_img src="pix/holiday_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="plane" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#58978;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63683;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Travel</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/heart.gif" alt="Lovelife" > <wall:alternate_img src="pix/heart_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="heart" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#59116;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63889;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Lovelife</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/clouds.gif" alt="Weather" > <wall:alternate_img src="pix/clouds_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="partcloudy" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#58942;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63647;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Weather</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/headphones.gif" alt="Music" > <wall:alternate_img src="pix/headphones_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="speaker" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#59126;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63899;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Music</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/soccer.gif" alt="Sport" > <wall:alternate_img src="pix/soccer_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="football" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#58966;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63671;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Sport</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/magnifier.gif" alt="Search" > <wall:alternate_img src="pix/magnifier_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="magnifyglass" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#59100;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63873;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">Search</wall:a> </wall:cell> <wall:cell> <wall:img src="pix/more1.gif" alt="More" > <wall:alternate_img src="pix/more1_big.gif" test="${capabilities.resolution_width >= 160}" /> <wall:alternate_img nopicture="true" test="${not capabilities.gif}" /> <wall:alternate_img opwv_icon="rightarrow2" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img eu_imode_icon="&#59030;" test="${capabilities.resolution_width <= 90}" /> <wall:alternate_img ja_imode_icon="&#63735;" test="${capabilities.resolution_width <= 90}" /> </wall:img> <wall:a href="http://url1" title="">More</wall:a> </wall:cell> </wall:cool_menu> </wall:body> </wall:document>

Enter your search terms Submit search form