simputer logo simputer mission simputer  
 
 
Simputer:
­ Spec
IML:
Information Markup Language

Table of Contents | Chapter 1 | Chapter 2 | Chapter 3

3. IML Presentation Markup 3.1 Introduction

This chapter specifies the elements of IML. It is strongly recommended that one read Section 2.3 on IML syntax and grammar before reading further.

3.2 IML presentation elements

Each IML element is described below in detail. The intended use of each element, along with the argument syntax it accepts have been described. The valid attributes, their permissible default values, and the effect of each attribute is also discussed.

For certain elements, further information of interest to those implementing IML renderers is given in a subsection.

3.2.1 <page> -- Basic unit of every IML document

Description:

page is the basic element of every IML document.

Attributes of <page>:

  • id: The id attribute uniquely identifies a page within a document.
  • timer: This attribute assumes a value with units of seconds. The timer is started as soon as the page is loaded and at timeout the action associated with the action attribute is invoked.
  • action: The action attribute can have one of the following values: next|prev|
  • audio: This attribute holds a sound file URL as its value. Whenever the page is visited, this audio file is played out. It is used to provide a spoken brief on the content of the page.

    Example:

    
    <iml>
    <head>
    <title>
    Timer demo
    </title>
    </head>
    <page id="r1" timer="10" bgcolor="red" action="_next">
    Stop!!
    </page>
    <page timer="4" bgcolor="yellow" action="_next">
    Get Ready!
    </page>
    <page timer="10" bgcolor="green" action="#r1">
    Go!
    </page>
    </iml>
    

    When rendered, the above example shows a red page for 10 units, followed by a yellow page for 4 units followed by a green page for 10 units. The pattern repeats endlessley since the last page points back to the first page using the action attribute. Every IML document is a collection of pages.

    The <page> element is thus the basic packet of information. All the renderable content of IML is contained within pages.

    A <page> element is rendered so that the contents of each page fit in one screen of a simputer.

    3.2.2 <image> -- Image display element

    Description:

    The image element unlike its HTML counterpart, is quite complex and allows for interesting image presentation and manipulation. IML images have the notion of a canvas on which the pixels are rendered. Several images can be placed on this canvas and moved around on the canvas. Since this is an empty element, the various values of the attribute control the effect of the image element.

    Attributes of <image>:

    The following is the list of attributes:
    id: attribute identifies each image entity and is useful in image manipulation, both by subsequent image elements as well as by the update element (discussed later).
    mode: attribute can have one of three possible. values create|src|draw.

    When mode=create, the width and height attributes specify the size in pixels, of the canvas on which subsequent images can be placed.

    When mode=src, the image file (only gif format is supported) specified by the src attribute is placed on the canvas created by an earlier image element, identified by the tagid attribute. The xoff and yoff elements can be used to specifiy the offset from the origin of the canvas at which the image is to be placed.

    When mode=draw, it is possible to specify line and arc drawing using the draw, coord, extent, fill attributes. The config attribute can be used to scale or move the images placed on the canvas by preceding image elements.

    audioformat, audio, audiomode and speak: These attributes are valid only when mode=src, and they allow audio content to be associated with an image. Look at the semantics of the <audio> tag for more information.

    Example:

    The following example illustrates several attributes and their role.
    
    <iml>
    <page>
    <page>
    <image id="img1" mode="create" width="210" height="200"/>
    <image id="img0" tagid="img1" mode ="src" src="/simputer/imgs/spec/big.gif" border="0"/>
    <image id="img4" tagid="img1" mode ="draw" draw="line"
    coord="20,20,100,50, 75,180" width="2" smooth="1" dash="-" />
    <image id="img5" tagid="img1" mode ="draw" draw="line"
    coord="20,20,100,50, 75,180" width="2" smooth="1" />
    <image id="img6" tagid="img1" mode ="draw" draw="arc"
    coord="50,70,100,100" start="0" extent="120" fill="black" />
    <image id="img7" tagid="img1" mode ="src" src="/simputer/imgs/spec/abhu.gif"
    border="0" xoff="40" yoff="120"/>
    <br/>
    
    Illustrating features of the image element and
    <br/>
    <i> Abhu </i>
    </page>
    </iml>
    
    
    The rendered example is shown in the figure below:

    3.2.3 <appl> -- For creating dynamic content of all types.

    Description:


    This is a major element of iml that provides access to dynamic content, both on the local machine and on remote internet nodes. Its unified syntax can be demonstrated with a few examples.
    <iml>
    <head>
    <title>
    Example of appl element
    </title>
    </head>
    <page id="page1">
    Here are two simple applications<br/>
    <appl balloon="Greetings!" icon="images/red.gif" border="0" action="greetings.pl"/>
    <appl balloon="Calender!" icon="images/red.gif" border="0" action="cal.pl"/>
    <br/>
    </page>
    </iml>
    

    Attributes of <appl>:

    balloon, icon, anchor, action

    The appl element is an empty element and hence its semantics is controlled by the attributes.

    The balloon attribute gives a brief description of what the application is about. This description can be used by the browser to pop up a tool tip message.

    the icon attribute provides a 16x16 gif image to be displayed as an icon to provide the handle for the user to activate the application.

    The action attribute, if present gives the name of the application that will be executed when the user clicks on the icon. The application can be in the local machine or it can be on a remote machine. In the latter case a full path name needs to be given.

    Example:

    3.2.4 <title> -- Title element

    Description:

    Element for holding the title of the document.
    Example of title can be seen in various IML examples presented in this document.

    3.2.5 <iml> -- The root element

    Description:

    This is the root element of an IML document and holds all its content.

    Attributes of <iml>:

    None.

    3.2.6 <head> -- Header Information element

    Description:

    Currenlty the head element simply contains a title element. Subsequent versions of IML will include elements for author information and other meta information about the document.

    Attributes of <head>:

    No attributes.

    3.2.7 <text> -- Text element

    Description:


    For presenting text content.
    The text element is distinct from text directly occuring inside a page element in that its attributes enable pieces of text to be hyperlinked. Otherwise, the presentation of text in this element can be modifed by the use of b, i, u, small and large elements.

    Attributes of <text>:

    tagid, anchor and justify are the attributes of the text element.

    Example:

    The following are several elements that control the appearence of text. These elements are i, b, tt, small and large . This is for presenting text in the teletype font.

    3.2.8 <itemize> -- Element for listing

    This element provides a simple listing environment. The attribute style controls whether it is a numbered list or a bulletized list. A list element can contain most of the other elements.

    Attributes of <itemize>:

    style = enum|bullet

    3.2.9 < item > -- Element for itemize content


    Basic unit inside an itemize element

    Description:

    This element holds content inside an itemize element. Most of the elments of IML can be a content inside an item element. The rendered example is shown in the figure below:

    3.2.10 < br > -- Line break element


    Description:

    This is a simple line break element. It is an empty element.

    No attributes.

    3.2.11 < table > -- Simple tabular environment


    Description:

    The table element provides an elegant mechanism for structuring content. It is possible to build a hierarchy of tables with each table element being any one of the content elements of IML. Examples of content elements are text, image, button etc. The only restriction is that each table data element can hold only a single content element.

    Example IML:

    <iml>
    <head>
    <title>
    Table Demo
    </title>
    </head>
    <page>
    This is an example of a simple table<br/>
    <table>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>
    <select var="var5">
    <option value="1" label="one"/>
    <option value="2" label="two"/>
    <option value="3" label="three"/>
    <option value="4" label="four"/>
    <option value="5" label="five"/>
    </select>
    </td><td>4</td></tr>
    </table>
    <br/>How was that!
    </page>
    </iml>
    
    the rendered table is shown in the figure below:

    Another example:

    <iml>
    <head>
    <title>
    <Table Demo>
    </title>
    </head>
    <page>
    This is an example of a table<br/><br/>
    <table>
    <tr><td>11<b>111</b>11</td><td>2</td></tr>
    <tr><td>3333</td><td>4</td></tr>
    <tr><td>
    <table>
    <tr><td>5</td><td>
    <table><tr><td>66</td><td>0</td></tr></table>
    </td></tr><tr><td>777777777777</td><td>8</td></tr>
    </table>
    </td><td>9</td></tr>
    </table>
    <br/><br/>
    Neat? eh!
    </page>
    </iml>
    

    Example figure:

    3.2.12 < tr > -- Row element

    Description:

    The row element contains any number of <td> elements.

    3.2.13 < td > --


    the <td> element is the entry inside a row element. This element can contain any of the renderable elements of IML with the restriction that atmost one element can be present inside a <td> element.

    For example

    <iml>
    <head>
    <title>
    td demo
    </title>
    </head>
    <page>
    <td> <text> example text
    </text>
    <text>
    another string
    </text>
    <text>
    is an error.
    </text>
    </page>
    </iml>
    

    3.2.14 <setattr>


    Description:

    Changing various attributes of elements

    3.2.15 <input> -- Input element


    Description:

    The input element is the basic element for obtaining user input, primarily in forms.

    Attributes:

    There are several attributes to the input element. these are
    type: text|password|check|radio|
    width: width of the text area
    height: height of the input text area
    var: name to be asociated with this input field
    magic: one of r|e|s|t (respectively, read, exclusive,secure and transient)
    value: value of the variable
    

    The var attribute has an important role in enabling IML to deal with smartcards. The var attribute can take any alphanumeric string as its value with a special case of a name starting with the underscore('_') having a special significance. See IML and smart card for details.

    For a variable name starting with an underscore, the value of the variable is to be obtained from the smartcard, using the appropriate passwords input by the user. The level of security and access is defined by the magic attribute as follows:

    magic=r : The variable is readable by anyone without a password. For changing that
    variable, a password is required.
    
    magic=e: The variable is readable and writable with passwords.
    
    magic=s: The variable is secure. It is readbale with a password, but cannot be
    changed from the IML environment.
    
    magic=t: The variable is transient and can be accessed using a password, but
    has no permanence beyond the current session. (i.e. the value is not stored on the smartcard)
    

    Example IML:

    An example form with various input elements
    <iml>
    <head>
    <title>
    Form Demo
    </title>
    </head>
    <card>
    We have here all sorts of form elements<br/>
    <table>
    <tr><td> Name: </td><td><input type="text" width="15" height="1"
    var="var0" value="_name" magic="s"/></td></tr>
    <tr><td> Occupation: </td><td><input type="text" width="15" height="1"
    var="var0" value="_occupation" magic="s"/></td></tr>
    <tr><td>Passwd: </td><td><input type="password" width="10" var="var1" value="Hello!"/></td></tr>
    <tr><td>Working?: </td><td><input type="check" var="var2" value="working"/></td></tr>
    <tr><td>Paid?: </td><td><input type="check" var="var3" value="get paid"/></td></tr>
    <tr><td>Male: </td><td><input type="radio" var="var4" value="male"/></td></tr>
    <tr><td>Female: </td><td><input type="radio" var="var4" value="female"/></td></tr>
    <tr><td>Count upto: </td><td>
    <select var="var5">
    <option value="1" label="one"/>
    <option value="2" label="two"/>
    <option value="3" label="three"/>
    <option value="4" label="four"/>
    <option value="5" label="five"/>
    </select>
    </td></tr>
    <tr><td>Out -> </td><td>
    <output label="enter" method="exec" anchor="persist.pl">
    <collect varid="var0"/>
    <collect varid="var1"/>
    <collect varid="var2"/>
    <collect varid="var3"/>
    <collect varid="var4"/>
    <collect varid="var5"/>
    </output>
    </td></tr>
    </table>
    <update class="input" varid="var5" label="three" do="set"/>
    </card>
    </iml>
    
    The rendered form :


    Note that the name field is already filled in. This is because the corresponding input elements in the IML file has variable name that begins with an underscore (_name) and hence the browser has obtained the value from the smartcard.

    3.2.16 <button> -- Button element


    Description:

    this element is a simple element for user to activate an application or make a request.

    Attributes:

    id, label, anchor

    3.2.17 <select> -- Select element


    The select element is a simple user-input element that allows the user to select one of several choices. This is usually implemented as a drop-down menu with the various choices.

    Example usage:

    <iml>
    <head>
    <title>
    Table Demo
    </title>
    </head>
    <page>
    <select var="var5">
    <option value="1" label="one"/>
    <option value="2" label="two"/>
    <option value="3" label="three"/>
    <option value="4" label="four"/>
    <option value="5" label="five"/>
    </select>
    </page>
    </iml>
    
    A single attribute of the select element namely var , is the variable that holds the value of the selection.

    3.2.18 <option> -- Option element


    Description:

    The option element is the element inside the select element. It is a null element with two attributes: value and label. The label is displayed by the browser, and when the user selects this label, the value attribute is picked up by the var attribute of the enclosing select element.

    3.2.19 <output> -- Output element


    Description:

    The output element is a generalization of the submit button in a HTML form. In HTML when a form is submitted, all the user-inputs are collected as name-value pairs, URL encoded, and sent back to the server either through a GET method or a POST method.

    In IML, the output element permits the grouping of input elements and the linking of different actions to different groups.

    3.2.20 <collect> -- Collect element


    Description:

    This element occurs inside an output element specifying the input variables that need to be grouped together and output.

    3.2.21 <turn> -- Turn element


    Description:

    This is a novel feature of IML that enables a persistant connection to be maintained between a remote server and the local machine on which the IML browser is running.

    3.2.22 <update> -- Update element


    The update element is a novel method of updating the displayed content and can be used in interesting ways.

    Attributes:


    objid=#implied
    class: (text|image|input) indicates the type of element that is to be updated.
    do: (replace|append|insert|set) indicates the type of action to be performed on the selected element.

    Example:


    <iml>
    <page>
    The number here is <text id="t123"> 145 </text><br/>
    The text here is <text id="t124"> grow</text><br/>
    The text here is also <text id="t125">ing</text>
    <update class="text" tagid="t123"do="replace" text="256"/>
    <update class="text" tagid="t124"do="append" text="ing"/>
    <update class="text" tagid="t125"do="insert" text="grow"/>
    <input type="text" width="15" height="1" var="var0" value="Hello!"/>
    <input type="check" var="var1" value="box1"/>
    <input type="check" var="var2" value="box2"/>
    <input type="radio" var="var3" value="radio1"/>
    <input type="radio" var="var4" value="radio2"/>
    <select var="var5">
    <option value="1" label="one"/>
    <option value="2" label="two"/>
    <option value="3" label="three"/>
    <option value="4" label="four"/>
    <option value="5" label="five"/>
    </select>
    <update class="input" varid="var0" value="Hello VV" do="set"/>
    <update class="input" varid="var2" do="set"/>
    <update class="input" varid="var3" value="BOX2" do="set"/>
    <update class="input" varid="var4" value="radio2" do="set"/>
    <update class="input" varid="var5" label="five" do="set"/>
    </page>
    </iml>
    

    Example figures:


    The second figure is the output of the above IML markup. The first figure is the output if the markup is modified to remove all the update statements. The utility of update is much higher if it is used as part of a program running in a remote machine. In such a case, instead of sending a different IML file everytime to indicate a change, it is sufficient to send update messages. Thus, fairly sophisticated applications can be implemented by using update appropriately.

    3.2.23 <audio> -- Audio element


    The audio element is a method of presenting audio content as a raw file, mp3 file, sythesized phonemes, , synthesized from Indian language UTF data or synthesized from Indian language itrans data.

    Attributes:

    audioformat: (raw|tts|kannada|hindi|tamil|telugu) indicates the format of the audio data that has be presented.
    audio: indicates the filename of the audio file containing the raw audio data.
    audiomode: (itrans|utf) indicates the whether the indian language data is in utf or itrans format.
    speak: contains the data in phoneme, UTF or itrans that has to synthesized.

    3.2.24 <lang> -- Lang element


    The lang element is a method of presenting indian language content from data in UTF or itrans format.

    Attributes:

    script: (kannada|hindi|tamil|telugu) indicates the script of the indian language content that has be presented.
    mode: (itrans|utf) indicates whether the indian language data is in UTF or itrans format.

    Table of Contents | Chapter 1 | Chapter 2 | Chapter 3

  •  FAQ
      simputer
    [ top ]

    The Simputer Trust is a registered non-profit trust with the broad goal of harnessing the potential of Information Technology for the benefit of the weaker sections of society.

    Inquiries & questions to <simputer AT csa dot iisc dot ernet> dot in.
    design:corrosive

         
    Verbatim copying and distribution of this entire article is permitted in any medium, provided this notice is preserved.
    Copyright © 2000 The Simputer Trust

    This page maintained by <manohar AT csa dot iisc dot ernet dot in> with scripts and support from <vinay AT csa dot iisc dot ernet dot in>


    simputer