Friday 11 October 2019

Wireless Markup Language (WML)

Contents

1. Purpose of WML
2. System View:  Delivering WML via Internet
3. WML Syntax and Examples
4. Exercises
5. References

1. Purpose of WML

Target of WML

Developers of  apps for wireless devices

Typical Devices

  • Phones
  • PDAs

Typical Device Characteristics


  • Small display
  • Limited input capability
  • Narrowband network connection
  • Limited memory
  • Limited CPU power

    • 2. System View:  Delivering WML via Internet

    The normal web delivery of pages to HTML browsers looks like this (from [AEO]:

    A gateway is used to do a protocol conversion when a doc is delivered from an origin server to a phone.  A protocol conversion also occurs (to use a compact binary version of HTTP).


    What phones have WML browsers?

    Click here to find out!

    3. WML Syntax and Examples

    Document Model


  • Controls text presentation and layout
  • User interface is deck of cards

    • Deck = HTML page
    • User navigates through sequence of cards

  • WML file is prameterized -- instantiate with variables to save memory
  • Provides inter-card navigation and linking
  • Supports scriting
  • Event handling for navigation or script invocation

    • User Navigation Model

    • Browser maintans stack of URLs giving history, just like web browser
    • Three operations on stack:
      1. Reset:  Set stack to contain current card only
      2. Push:  Put new URL on stack
      3. Pop:  Remove current URL; return to previous URL
    The Prev button on the phone does a pop.

    Initial exercise:  Run the phone simulator

    Start the WML phone simulator as follows:

    Select Start->Programs->Course Software->UP.SDK3.2forWML->UP.Simulator

    You should see a screen with three choices starting "Input Field"; if not enter the following in the text box to the right of "Go" at the top of the phone window:

    file:\\c:/program files/unwired planet/upsdkw32/examples/wml/controls.wml

    First, play with the user interface.  The main screen will show you three choices:
    • Input Field
    • Select List
    • Multiple Choice
    se the up/down arrows followed by the OK soft key to select each in turn.
    The first shows you password entry.

    • Use the "BACK" button to return to the main screen.
    • Then choose "Select List" to see how to select one from a list of items.
    • Use the "BACK button again to return to the main screen.
      |
    • Then choose "Multiple Choice" and try selecting two or more items (or deselecting items) from the list of first names.
    • Use the "BACK button again to return to the main screen.

    After this, select "Open Configuration" from the "File" menu at the top of the window.  Try each style of phone.  Note the variety of screen sizes!

    First Example:  Hello World



    This example illustrates a simple WML file containing one
    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
       "http://www.wapforum.org/DTD/wml_1.1.xml">
    <wml>
      <card>
        <p>
        Hello!
        </p>
      </card>
    </wml>
    Open a file named "test.wml", paste the above text into the file, and try the phone simulator on test.wml to see what results!

    Exercise 1

    Open a text editor. Create a WML file named "pizza.wml".  The file will evolve into a user interface for ordering pizzas.  We'll have a screen to welcome to user to your pizza store (give it a name), and then screens to order the topping, crust, etc., followed by a screen that summarizes for the user what they ordered.
    As the first step, create in pizza.wml an initial screen that welcomes the user to your pizza store!
    Start a second copy of the phone simulator and display your file as follows:

    Select Start->Programs->UP.SDK3.2forWML->UP.Simulator

    To enter your file name, click in the textbox displaying the URL and type "file:\\c:/b/pizza.wml", replacing c:/b with the actual drive letter and path of your file.

    Second Example


    This example shows how to make the soft key change the display from one sceen to a second screen:
    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
       "http://www.wapforum.org/DTD/wml_1.1.xml"><wml>
      <card>
        <p>
          <do type="accept">
            <go href="#card2"/>
          </do>
        Hello!
        This is the first card...
        </p>
      </card>
      <card id="card2">
        <p>
        This is the second card.
        Goodbye!
        </p>
      </card>
    </wml>

    Exercise 2

    Edit the file you created earlier named "test.wml", paste the above text into the file.  Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml!
    Then modify pizza.wml to add a second card, telling the user to choose whether they are ordering a pizza or a sub.  (We'll see how to insert the list of toppings momentarily!)

    Third Example

    Now let's see how to insert a list of selections into a WML file...

    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
       "http://www.wapforum.org/DTD/wml_1.1.xml">
    <wml>
      <card id="NetworkClassMenu">
        <p>
          Network Device Status
            <select>
                <option onpick="#PrinterMenu">
                  Network Printers
                  </option>
                <option onpick="#Computer_Menu">
                  Computers
                  </option>
                <option onpick="#Routers_MenuItem">
                  Routers
                  </option>
            </select>
        </p>
      </card>
      <card id="PrinterMenu">
          <p>
            Network Printers
              <select>
                <option onpick="#HPLJ5A_stats">
                  HP-LaserJet 5M
                </option>
                <option onpick="#LMOE310A_stats">
                  Lexmark Optra-E310
                </option>
                <option onpick="#HP2500CM_stats">
                  HP-2500 CM
                </option>
              </select>
          </p>
      </card>
    </wml>

    Exercise 3

    Edit the file you created earlier named "test.wml", paste the above text into the file.  Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml!
    Modify your second sceen to let the user pick a topping, and whichever is picked, goto screen #3, where the user picks a crust.  Make screen #3 go to a screen #4, which we'll fill in later.

    Fourth Example

                  
    The following code will display a screen with an input field generated by the <input> tag.  The attribute name="i1" assigns a variable.  Also, the <do> elements are a way to order the screen display (in contrast to onpick used in the Third Example).
    <wml>
      <card id="main">
          <do type = "accept"  label = "hello">
            <go href = "#card2"/>
          </do>
        <p>
            Enter your name:
            <input name="i1" />
        </p>
      </card>
      <card id="card2">
          <do type = "prev"  label = "hi">
            <prev/>
          </do>
        <p>
            Hello $i1, how are you?
        </p>
      </card>
    </wml>

    Exercise 4

    Edit the file you created earlier named "test.wml", paste the above text into the file.  Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml!  Note how the display is automatically set to alpha mode so that you can spell your name.
    Modify screen 4 in pizza.wml to ask the user to enter their name and phone number, then in screen #5 echo back what they input.  Be sure you understand how to enter a name (consisting of letters) versus a phone number (consisting of numbers) when you run your example!

    Using UIML with WML


    Here is a simple UIML file that generates a WML file displaying a couple of lines of text...

    <?xml version="1.0"?>
    <!DOCTYPE uiml PUBLIC
            "-//UIT//DTD UIML 2.0 Draft//EN"
            "UIML2_0d.dtd">
    <uiml>
     <interface>
       <structure>
        <part name="WelcomePage" class="Wml">
          <part name="WelcomeCard" class="Card">
            <!-- Sub Menu ======================= -->
            <part name="IntroP" class="P">
              <part name="Introduction" class="RichText">
                    <style>
                            <property name="bold">true</property>
                            <property name="wrap">true</property>
                            <property name="content">You have successfully converted UIML to WML!</property>
                    </style>
              </part>
            </part>

            <part name="SigP" class="P">
              <part name="Signature" class="RichText">
                    <style>
                            <property name="italic">true</property>
                            <property name="wrap">true</property>
                            <property name="content">Ready for more?</property>
                    </style>
              </part>
            </part>
          </part>
        </part>
      </structure>
     </interface>
    </uiml>

    Try this example.

    Copy folder uiml2wml-0.3a from the shared folder to your folder.  Set these environment variables:
    • UIML2WML=<your-dir>\uiml2wml-0.3a
    • PATH=%PATH%;<your-dir>\uiml2wml-0.3a\bin
    Type "dir %uiml2wml%.  You should see directories like "docs", "examples".
    Put the blue UIML code above into a file name wmltest.uiml.  CD to the directory containing that file.  Enter this:

    u2w -indent wmltest.uiml
    The output file wmltest.wml should have been created.  Display this file in your web browser.

    More Examples

    Try out the other examples in the Unwired Planet\UPSDKW32\examples\wml file.


    5. References

    Allan.J.Wilson at
    Labels: , ,

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)