Create an iPhone Site Using Lasso and the iUI Library

This article discusses how to create a site formatted for the Apple iPhone and IPod Touch using Lasso and the iUI interface library by Joe Hewitt.

Introduction

The iPhone includes a full Safari Web browser which allows the user to view full Web sites without any special formatting. However, some Web sites can benefit by providing an interface which is targeted to the unique user interface and screen size of the iPhone.

The iUI library by Joe Hewitt provides a style sheet and graphics which allow you to create an interface which looks like the built-in applications on the iPhone. It also includes a JavaScript library which can translate standard HTML elements so they have iPhone specific behaviors.

http://www.joehewitt.com/iui/

Visit the following URL to see the iPhone specific interface for the Lasso Reference. This URL is best visited on an iPhone. The interface also works in the Safari Web browser on Mac OS X or Windows.

http://www.ireph.com/index.lasso

The remainder of the tip describes how the iUI interface is used to create this interface. The files for the Lasso Reference interface can be downloaded and run in any copy of Lasso.

Create_an_iPhone_Site.zip  

iUI List Interface

The interface of many built-in iPhone applications is based on list navigation, much like the iPod interface. The user is presented with a cascading list of options (e.g. Artists, Albums, Songs). The iUI library makes it easy to create this sort of interface.

In order to use the iUI library you must place a script tag and a style tag in the head of your HTML document. The iUI library also includes a compressed version of the script and style sheet with an "x" at the end of the name.

  <style type="text/css" media="screen">@import "iui/iui.css";</style>
  <script type="application/x-javascript" src="iui/iui.js"></script>

 

The toolbar at the top of the page is created with the following code. The iUI library automatically replaces the contents of the header tag with the title of the current list. The back button automatically links to the previous list which was shown.

  <div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
  </div>

 

The CSS and JavaScript of the iUI library work together to automatically translate HTML list tags into lists that are formatted in the same fashion as those from built-in iPhone applications. This list is formatted as shown below.

  <ul id="home" title="Lasso Reference" selected="true">
    <li><a href="#tag_category">Categories</a></li>
    <li><a href="#tag_type">Types</a></li>
    <li><a href="#tag_language">Sets</a></li>
    <li><a href="#tag_support">Support</a></li>
    <li><a href="#tag_history">Changes</a></li>
    <li><a href="search.lasso">All Tags</a></li>
    <li><a href="#about" target="_self">About</a></li>
  </ul>

 

The anchor tags reference the IDs of the other lists on the same page using the #anchor format. A hierarchy of lists can all be specified in a single file. For example, the #tag_type anchor links to the "Types" list shown below.

  <ul id="tag_type" title="Types">
    <li><a href="search.lasso?tag_type=Command">Command</a></li>
    <li><a href="search.lasso?tag_type=Constant">Constant</a></li>
    <li><a href="search.lasso?tag_type=Container">Container</a></li>
    <li><a href="search.lasso?tag_type=Data Type">Data Type</a></li>
    <li><a href="search.lasso?tag_type=Delimiter">Delimiter</a></li>
    <li><a href="search.lasso?tag_type=Member">Member</a></li>
    <li><a href="search.lasso?tag_type=Process">Process</a></li>
    <li><a href="search.lasso?tag_type=Substitution">Substitution</a></li>
    <li><a href="search.lasso?tag_type=Symbol">Symbol</a></li>
  </ul>

 

If the anchor tags reference another file on the server then the iUI library uses an AJAX XMLHttpRequest to pull the contents of the specified file into the current file. The anchors shown above perform a search in the "search.lasso" file.

The "search.lasso" file returns simple HTML lists without any surrounding HTML or body tags. For example, the link for Symbol tags returns the following lists. In order to keep the interface snappy only eight results are provided in each list. The (Next Group) link uses a local anchor to link to the next group of results. The resulting file contains the entire found set, but grouped into pages.

  <ul id="14d5e586d32bd496b39c0af9a1420d1d_1" title="1/5">
    <li><a href="detail.lasso?tag_id=680">+= Addition Assignment</a></li>
    <li><a href="detail.lasso?tag_id=539">+ Addition (Concatenation)</a></li>
    <li><a href="detail.lasso?tag_id=546">&amp;&amp; And Logical</a></li>
    <li><a href="detail.lasso?tag_id=1114">: Array</a></li>
    <li><a href="detail.lasso?tag_id=685">= Assignment</a></li>
    <li><a href="detail.lasso?tag_id=1377">:= Assignment and Value</a></li>
    <li><a href="detail.lasso?tag_id=554">&gt;&gt; Contains</a></li>
    <li><a href="detail.lasso?tag_id=544">-- Decrement</a></li>
    <li><a href="#14d5e586d32bd496b39c0af9a1420d1d_9">(Next Group)</a></li>
  </ul>

  <ul id="14d5e586d32bd496b39c0af9a1420d1d_9" title="2/5">
    ...
  </ul>

 

The "detail.lasso" file is the only file in the Web site which does not primarily consist of lists. The detail for each tag is formatted in an iPhone style using the CSS rules built into the iUI library and a few custom styles. Fieldset tags are used to create white areas with rounded corners.

--! code needs to be inserted, but Lassoscript is breaking it --!

 

Implementation

The implementation of the site is simple using Lasso. The first list (shown above) is hard-coded within the "index.lasso" file. The About section and the HTML wrapper and head are also hard-coded.

The remainder of the "index.lasso" contains the second-level lists for Categories, Types, Change status, etc. These are created using [Iterate] ... [/Iterate] tags to cycle through a variable containing a set of categories. The sets are generated as global variables in the "valuelists.lasso" file.

  <ul id="tag_category" title="Categories">
  [Iterate: $iphone_tag_category, (Var: 'temp')]
    <li>
      <a href="search.lasso?tag_category=[Var: 'temp']">
        [Var: 'temp']
      </a>
    </li>
  [/Iterate]
  </ul>

 

All of the second-level lists link to the same "search.lasso" file. This file has a section at the top which processes the parameters that have been passed into the page. The conditional for tag_category is shown here. The conditionals for types, change status, etc. are similar.

  var: 'params' = array;
  if: (action_param: 'tag_category') != '';
    $params->(insert: -op='eq');
    $params->(insert: 'tag_category' = (action_param: 'tag_category', 1));
  /if;

 

The page size is set to eight. This could be made larger if you want to provide more tags on each page. Eight is the maximum possible without scrolling. The $unique variable is set to an MD5 hash in order to create a unique ID for the list results generated by the [Inline] ... [/Inline] on the page.

  Var: 'page' = 8;
  Var: 'unique' = (encrypt_md5: $params);

 

The inline finds tags based on the parameters which were passed in and formats the results as an HTML list. The $unique ID and the Loop_Count are used to create the anchor for the list. This provides the (Next Group) link a destination to link to.

  Inline: $params,
      -log='none',
      -search,
      -database='ldml8_reference',
      -table='tags',
      -op='eq', 'tag_display'='Y',
      -op='eq', 'tag_basic'='Y',
      -sortfield='tag_sort',
      -maxrecords='all',
      -returnfield='tag_name', -returnfield='tag_id';
    Records;
      If: (Loop_Count % $page == 1) && (Loop_Count != Found_Count);
        If: (Loop_Count > 1);
          '\t<li><a href="#' + #unique + '_' + (loop_count) + '">(Next Group)</a></li>\r\n';
          '</ul>\r\n';
        /If;
        '<ul id="' + #unique + '_' + loop_count + '" title="' + (((Loop_Count - 1)/
 $page) + 1) + '/' + ((Found_Count / $page) + 1) + '">\r\n';
      /If;
      '\t<li><a href="detail.lasso?tag_id=' + (field: 'tag_id') + '">' + 
(Encode_HTML: (list_cleanup: (Field: 'tag_name'))) + '</a></li>\r\n';
    /Records;
    '\t<li><a href="#home">(Home)</a></li>\r\n';
    '</ul>\r\n';
  /Inline;

Author: Fletcher Sandbeck
Created: 14 Sep 2007
Last Modified: 1 Mar 2011