WML and WMLScript

Input and Select

In the previous chapter, we learnt about variables. To create a variable in WML, setvar is used within a task. Other than setvar, there is no known way to change or assign values to the variable. But then, this is all Greek and Latin, and you really do not know how to cope with change. This chapter takes care of such uncertainties. Do understand that this is an important topic, hence it deserves a chapter by itself. Understand this well, and you could well be able to plant a trigger mechanism to blow up the mobile's cell site after a certain number of hours of usage have been clocked.

Screen 4. 1

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</p>

</card>

</wml>

In this example, we have introduced a new tag called input and followed it by name="aa". To understand input, take a look at your screen or fig 4.1. You will see 2 square brackets. All other mobile phones may not show you square brackets. Some may have curves, and others may come with braces. Card 1 appears because it is the text defined within the <p> Since the value of aa has not been defined as yet, the brackets are empty.

Lets add some more lines to the earlier program. We give Val1: and then $aa .

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Vall:$aa

</p>

</card>

</wml>


Screen 4. 2	Screen 4. 3	Screen 4. 4	Screen 4. 5

The current screen shows the square brackets highlighted. Click on Option and then select the Edit option. You will now be taken to a different screen which has an edit box. On the top right corner, you are given the maximum limit of characters you can type. The top left corner show ABC which means upper case characters are to be entered. Finally at the bottom of the screen, you see OK and Back.

To key in characters on a mobile phone, clicking once on the number pad will show you the first character displayed on the number. If you double click, you see the second character. And for the third character, you have to click thrice in quick succession. This is how you use the mobile device. There is no other way, unless you add a handy keyboard to the unit, making it non-mobile and, hence defeating the purpose of the mobile. You could add in 26 keys if you like. And there are units that have this as well. They have a full keyset to be precise. The problem is that the keys are still too small to be of any real use.

Notice the change at the bottom once you start entering characters. Back changes to Clear. When you click on OK, you return to the first screen and this time you will see the value you keyed in twice. One in the input box - and the other Vall:. This value can now be sent across the net.

In the next example, we have 2 inputs statements.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Val:$cc

Val1:$bb

</p>

</card>

</wml>


Screen 4. 6	Screen 4. 7	Screen 4. 8

Move the arrow keys to select one of the input boxes. Remember, this is mobile specific. You can use the cursor to move up and down. We have selected the first input box which is why the input screen we shows the title as t1. With other devices the value may comes on the same screen and there maybe no box around it. There is no single generic user interface even for phones.

In this example, we are now saying name is bb and the variable has the value of ABC.

Screen 4. 9

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$bb

</p>

</card>

</wml>

In the earlier case the variable bb had the value TJG. Since your browser is yet on, bb will have the previous value. Hence, the new value has no meaning. Let us now introduce the concept of newcontext.

Screen 4. 10

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$bb

</p>

</card>

</wml>

Newcontext requests the browser to forget all values. As bb loses its previous value, it has no value and the current value of ABC is assigned to bb. The value here is the default value. It is used if the variable is unset.

We have another example where there are two cards and the second card uses newcontext=true. You can go from the first card to the second. But since the second card resets all variables, the prev does not work. This is due to newcontext=true.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

</do>

</p>

</card>

<prev/>

</do>

</card>

</wml>


Screen 4. 11	Screen 4. 12	Screen 4. 13

Therefore, besides the variables, newcontext also forgets the history. Would it not be fun to have something like this in real life as well, especially when talking to a girl? Just newcontext her, and you could start all over again. The only problem would be, is that your memories would also be erased and being the dumb male that you are, you'd probably make the same mistakes all over again.

In the earlier chapters, we used onenterforward and initialised variables. We follow the same approach in the next example and intialise aa to DEF. Truly speaking, we do not have to specify newcontext=true as we are initialising the variable. But there will be times when the variable cannot take a default value from the previous program and hence you initialise it or refresh the context.

Screen 4. 14

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

In the next phase, we have an attribute called format, which can be used with the input tag. Format has been set to a default value of AAAA. The capital As ensure that the user cannot enter any numeric value into the input field. All that the user is allowed to do, is to enter in uppercase characters or some punctuation mark. If he tries to enter anything else, he will be warned.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

Screen 4. 15

Screen 4. 16

If you try anything else, it will not be accepted. Setting the value of aa to DEF is invalid. Since the format defines AAAA, one is expected to input 4 characters. The default value, DEF, is not accepted. Clear the line and try again.

What we have tried to explain as simply as possibly, is that the format option ensures that you enter a value as defined. You cannot have more characters or less, or for that matter user any lower case character or number. You could use punctuation marks, however.

Screen 4. 17

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

Format with N is used for numbers. X means symbols, numbers or any upper case characters. X and M mean the same; the only difference is that M can be changed to lower case. For lower case, you first click on the # button and then click on any other character.

Screen 4. 18

Val:$aa

Val:$aa

Val:$aa

What happens when you have to key in a password? The user needs to see the characters keyed in, as well as they should be hidden from peering eyes. To do this, you need to define type=password. With this, the characters typed will show for a second and then be replaced by an asterisk. By default, type is equal to text.

Screen 4. 19

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

We are dealing with mobiles, pagers and small units where you would have to guess if you keyed in the right character. If it was a computer and you typed in ABC, then you won't see ABC. But because it is a mobile, how would you know what keys were pressed if you can't see the character keyed in? Since you have to either single click, double click or triple click, the password doesn't show asterisks right away.

Then, we have tabindex . On a computer you could keep pressing tab, to move from one field to another. Since there is no tab key on Nokia phones, this feature is not implemented. You however, have to decide the order in which input should be received. In some phones the down arrow will take you to the tab order defined.

You could also make use of another attribute emptyok, which is set to true. Usually, when you use a format, the user is forced to follow the format to go on. With emptyok, you will be allowed to pass the input screen even if the field is not filled in to the specification or format defined.

Screen 4. 20

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

Maxlength defines the maximim number of characters you can key in. By default, the maximum is 838 characters. If maxlength is set to 3, then a fourth character cannot be entered. Size is the size of the box but once again it is optional.

In the following example we have defined the format as A\-A.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

Screen 4. 21

Screen 4. 22

Whenever you have a backslash, the next character appears automatically. The variable to which this value is passed will have it too. If you type in BD, the value will become B-D. If you attempt to key in a - (hyphen) it will be rejected.

The last option of format is *(character). It means multiple or as many as you want.

This means if you say A*N, the * before the N means you can type in as many numbers - 0 to its maximum limit

Screen 4. 23

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

When you give the format as 3N, then you can type in only 3 digits

Screen 4. 24

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

Val:$aa

</p>

</card>

</wml>

A number may only be placed at the beginning of the character that you want to repeat. You cannot have it in the middle - like A3A. It has to be at the start of the format string.

Well, this is one way of getting an input from the user. It is a bit tiresome, especially with the newer phones that are ever so small and dinky. The buttons are even smaller; and strangely enough the users hands keep getting bigger. Any good programmer's aim would be to create a routine that makes it easy for the user to get his work done.

With the keys so close together on the keypad, it is easy enough to make mistakes when getting user input. Another simpler method is to offer the user a choice from which he can choose what he wants. This reduces the chance of error greatly as the user only has to choose from the selection offered. You guessed it - select is what we are looking at. You have <select>, </select>, where one gets out only after making some selection.

Screen 4. 25

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

</p>

</card>

</wml>

Card1 displays aa as the value in square brackets. Click on Options to run this routine. Moving ahead from Select will take you to a screen where bad is displayed as the title alongwith the other options. We see three options displayed in the form of radio buttons.


Screen 4. 26	Screen 4. 27	Screen 4. 28	Screen 4. 29

The options offered are (text between <option> </option>) aa, bb, cc. Move your arrow keys and make your choice. You could even have a variable here. The value displayed will be that of the variable. But if you are doing all this, why do you need to have a variable? In fact, if the basic nature of a variable is to vary, then a stable variable would not be called a variable as it does not vary. But in calling it a variable, one expects that it would vary, which in turn is a contradiction of the basic terms of the variable. Hence, one should be wary of variables, and they are quite unpredictable.

The purpose of select is to prevent the user from keying in something. It also allows the programmer to have some control over the user input since these values would normally initialise the variable. This is, in other words, a list box.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

Val:$aa

</p>

</card>

</wml>

Screen 4. 30

Screen 4. 31

Here we have name initialised to aa and because aa is unset, it will be equal to the first one. aa will be initialised to a1 and hence you will see a1.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

Val:$aa

</p>

</card>

</wml>

Screen 4. 32

Screen 4. 33

Same rules apply here where aa now has a default value of a2. Hence you see bb on the screen. You can now navigate further and give it a new value.

This is getting interesting? We thought you might be able to figure this out, if we keep at it. Do understand that input from the user is important to bring in interactivity. You need these options to simplify the task of getting user input in the fastest possible manner.

Screen 4. 34

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

</select>

Val:$aa

</p>

</card>

</wml>

aa has been set to a3 by the onenterforward, hence the third one will be selected. The default value of a2, in this case, has no meaning.

Now we have an example where aa is set to a3 and with select we have a new attribute iname that is set to bb. Think this one through before attempting to run the program. You should be able to figure out what iname is all about.

Screen 4. 35

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

</select>

Val:$aa $dd

</p>

</card>

</wml>

Iname refers to index name. The only difference is that it behaves like a number. Hence, the first value is 1; the next is 2; the third one is 3 and so on. dd as a variable is unset, therefore aa in the select gets precedence over setvar as iname is added. Therefore a2 is chosen. Since aa has the value a2 and it is the second on the list, dd will be 2.We now display the values of both aa and bb which will be a2 and 2. As you change this, the value of bb will also change. Try some more permutations and combinations to the above code

------------

</refresh>

Okay, so you were not confused enough? Still want to go through some more i stuff? There is more, and we are coming to this in just a minute. We now have an ivalue in the <select> and as bb is yet not initialised, ivalue will get preference.

Screen 4. 36

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

</select>

Val:$aa $bb

</p>

</card>

</wml>

With i, the rule is simple. I am first, and I am last; and if anyone is there to argue, I am all the way between as well. But seriously, iname is the first i to be examined. If select has the attribute of iname, then the value of a2 is accepted and the guesswork stops. But if select also has ivalue and then ivalue's value is taken. ivalue has a precedence over value.

In the next example, we have given iname a value hence ivalue doesn't come in to the picture.

Screen 4. 37

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

</refresh>

</onevent>

<p>

Card 1

</select>

Val:$aa $bb

</p>

</card>

</wml>

In this program, we have given all possible attributes to the select tag. Also we have now initialised iname to 4. Since iname has a value, it takes full precedence over ivalue and name. Hence we see the default displayed values as dd, a4 and 4.

But what if both iname and ivalue are not mentioned? Then, the value assigned to name in setvar is accepted as the default value. If this too is unset, it takes the first available option values.

Remember we spoke of triggers before, or better still events - where something happened? There is another one here that you can learn about. This one is onpick. No, it has nothing to do with picking your nose. It just allows you to define what happens should the user pick one card and not another.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

</p>

</card>

<p>

Card 2

</p>

</card>

<p>

Card 3

</p>

</card>

</wml>


Screen 4. 38	Screen 4. 39	Screen 4. 40

The option can take two attributes, value and onpick. If you look closely, you will not see any difference because the select remains the same. Depending upon the option you select, you get taken to the respective card. Here the problem is that the select by default chooses the first one and hence you can't select it again. Select the next one and onpick will take you directly to Card 3.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

</p>

</card>

<p>

Card 2:$aa $bb

</p>

</card>

<p>

Card 3:$aa $bb

</p>

</card>

</wml>

Screen 4. 41

Screen 4. 42

Practically, initialising ivalue to 0 will unselect all of them - nothing will be selected. At least, this is what is supposed to happen. But we see no difference at all. Change ivalue to 2 and bb will get selected.

Here we have to understand that the onpick initialises iname. Hence we see bb displaying new values whereas aa has no value.

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

Value : $aa

</p>

</card>

</wml>


Screen 4. 43	Screen 4. 44	Screen 4. 45

If iname is unset then the ivalue automatically takes over. But if ivalue is given a negative value, then it is ignored. If the ivalue is 20 (beyond limits) then the first value is taken. There are checks and balances while displaying the output. If something fails then another option takes over automatically.

You can have multiple=true after select and everything remains the same.

Screen 4. 46

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</select>

Value : $aa

</p>

</card>

</wml>


Screen 4. 47	Screen 4. 48	Screen 4. 49	Screen 4. 50

Select the first and third option and the iname and name will get the values separated by ;

You can also set the defaults using semicolons. But you cannot have a null in between them. That will generate an error. Unlike the select where the first option gets selected by default, when multiple is true there is no default selection.

You can use refresh here to clear all variables. That means you can have a <do> with a refresh that will clear the variables and all the variables will be initialised. You will not get an error if option is empty. The option can also have a title but this doesn't get displayed.

Then we have optgroup. When you have too many of options, you can decide how many are to be displayed at a time. If you have 6 options, you can group 2 options in one optgroup and have 4 options in the second optgroups. Or you could have 3 in one and 3 in another. Instead of showing you all 6, it will show you 2 optgroups. And from here you will have to make a selection. Something like having a drill-down menu. Here too, the optgroup can have a title.

Screen 4. 51

a11.wml

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<p>

Card 1

</optgroup>

</optgroup>

</select>

Value : $aa

</p>

</card>

</wml>


Screen 4. 52	Screen 4. 53	Screen 4. 54	Screen 4. 55

Whatever you opt for, the only choice you have at this point in time is to opt to turn the page and on to the next chapter, as this is the only option we offer you just now.