Fancy Pizza Selection

Preferences - Do not show ads

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:

• The wall_prepend.php file at the beginning loads the WALL class, detects the user's browser, and loads its capabilities. You can use the $wall object in your code later to check device capabilities etc.

• <wall:document> tells the WALL parser to start the document code. <wall:xmlpidtd /> will insert the XHTML/WML/CHTML prolog as required. This solves part of the headache in adaptation.

• The next few lines define the page title and meta tags. Code that is not in <wall:*> tags is sent to the browser as is.

• The heading tag will render as a bold text on a WML device. You can use many standard tags with WALL. Just prefix them with "wall:".

• We do not want to enable WML support in the form. It requires a few more changes in the document structure, and we don't want it to get complex for this example! If you want to support forms on WML devices, you can enable it in the <wall:form> tag.

• The img and alternate_img tags are a cool feature of WALL. You can specify the default image in the img tag, and then specify alternative images based on any condition you like. One of these images will be picked up at run time. WALL can even skip displaying the image all together if the nopicture test evaluates to true. In our code, we show a 120x100 pixels images by default, and show a larger image if the device resolution is more than 200 pixels. As the image is a JPG, we skip showing the image if the device cannot support JPG images. The alternate_img tag also supports showing some icons available natively on the phone. You can refer to the WALL reference for more on this.

• Adapting the phone call link is dead simple. Just use the <wall:caller> tag. Specify the number to call in the tel attribute, and you are done. You can also specify what to display if the phone does not support phone links in alt attribute.

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.

Preferences - Do not show ads

Enter your search terms Submit search form   Web DevelopersHome.com