Fancy Pizza Selection

Luigi has been asking to put up photographs of his delicious pizzas on the mobile site, but we didn't do that so far to save bandwidth for users. Let us now go ahead and add images to the pizza selection page. We want to show larger images to devices that can support them.

Remember the XHTML to invoke a phone call? The two approaches of using wtai and tel? Some customers have complained that they were not able to make a call using that link. The cause is that their browsers did not understand the tel link. Let us adapt that so that the user gets the markup her or his browser can understand!

Review the code shown below. It's an abridged version of the actual code.


<?php
include_once("wall_prepend.php");
?>
<wall:document><wall:xmlpidtd />
  <wall:head>
    <wall:title>Pizza On The Run</wall:title>
   <link href="assets/mobile.css" type="text/css" rel="stylesheet" />
  </wall:head>
  <wall:body>

<?php
echo '<wall:h2>Customize Your Pizza #'.$currentPizza.':</wall:h2>
<wall:form enable_wml="false" action="index.php" method="POST">

<fieldset>
<wall:input type="hidden" name="action" value="order" />';
// If we did not get the total number of pizzas to order,
// let the user select
if ($_REQUEST["numPizza"] == -1)
{
  echo 'Pizzas to Order: <wall:select name="numPizza">';
  for($i=1; $i<=9; $i++)
  {
    echo '<wall:option value="'.$i.'">'.$i.'</wall:option>';
  }
  echo '</wall:select><wall:br/>';
}
else
{
  echo '<wall:input type="hidden" name="numPizza" value="'.$_REQUEST["numPizza"].'" />';
}
echo '<wall:h3>Select the pizza</wall:h3>';
// Select the pizza
$checked = 'checked="checked"';
foreach($products as $product)
{
  // Show a product image based on the device size
  echo '<wall:img src="assets/pizza_'.$product["id"].'_120x80.jpg" alt="'.$product["name"].'">
  <wall:alternate_img src="assets/pizza_'.$product["id"].'_300x200.jpg" test="'.($wall->getCapa('resolution_width') >= 200).'" />
  <wall:alternate_img nopicture="true" test="'.(!$wall->getCapa('jpg')).'" />
  </wall:img><wall:br />';

  echo '<wall:input type="radio" name="pizza['.$currentPizza.']" value="'.$product["id"].'" '.$checked.'/>';
  echo '<strong>'.$product["name"].' ($'.$product["price"].')</strong> - ';
  echo $product["description"].'<wall:br/>';
  $checked = '';
}
echo '<wall:input type="submit" class="button" name="option" value="Next" />
</fieldset></wall:form>';
?>
  <p><wall:a href="?action=home">Home</wall:a> - <wall:caller
tel="+18007687669">+1-800-POTRNOW</wall:caller></p>

  </wall:body>
</wall:html>


What are Those <wall:*> Tags?

All those <wall:*> tags are at the heart of adaptation. Wireless Abstraction Library (WALL) is an open-source tag library that transforms the WALL tags into WML, XHTML, or cHTML code. E.g. iMode devices use <br> tag and simply ignore <br />. WALL will ensure that cHTML devices get a <br> tag and XHTML devices get <br />. You can find a very good tutorial and extensive reference material on WALL from: http://wurfl.sourceforge.net/java/wall.php. You can download WALL and many other tools too from that site.

WALL4PHP—a PHP port of WALL is available from http://wall.laacz.lv/. That's what we are using for POTR.


Let's Make Sense of This Code!

What are the critical elements of this code? Most of it is very similar to standard XHTML MP. The biggest difference is that tags have a "wall:" prefix. Let us look at some important pieces:



(Click the image to enlarge it.)


When you load the URL in your browser, WALL will do all the heavy lifting and show a mouth-watering pizza—a larger mouth-watering pizza if you have a large screen!


Can I Use All XHTML Tags?

WALL supports many XHTML tags. It has some additional tags to ease menu display and invoke phone calls. You can use <wall:block> instead of <p> or <div> tags because it will degrade well, and yet allow you to specify CSS class and id. WALL does not have tags for tables, though it can use tables to generate menus. Here's a list of WALL tags you can use:


a, alternate_img, b, block, body, br, caller, cell, cool_menu, cool_menu_css, document, font, form, h1, h2, h3, h4, h5, h6, head, hr, i, img, input, load_capabilities, marquee, menu, menu_css, option, select, title, wurfl_device_id, xmlpidtd.


Complete listings of the attributes available with each tag, and their meanings are available from: http://wurfl.sourceforge.net/java/refguide.php.


Will This Work Well for WML?

WALL can generate WML. WML itself has limited capabilities so you will be restricted in the markup that you can use. You have to enclose content in <wall:block> tags and test rigorously to ensure full WML support. WML handles user input in a different way and we can't use radio buttons or checkboxes in forms. A workaround is to change radio buttons to a menu and pass values using the GET method. Another is to convert them to a select drop down. We are not building WML capability in POTR yet.

WALL is still useful for us as it can support cHTML devices and will automatically take care of XHTML implementation variations in different browsers. It can even generate some cool menus for us! Take a look at the following screenshot.



(Click the image to enlarge it.)



Previous Page Page 2 of 4 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page