Tags in ioL

In ioL, tags create objects in the ioL console. These might be tangible things the user can interact with, like buttons on the screen that the user might click on, or more abstract objects like variables for manipulating data. Each tag is like a machine which has been defined to carry out a particular task.

A tag starts with a < and ends with a >. You can place a tag anywhere within just about any section of text, or you can place them directly inside other tags. When you print a tag to the screen, ioL constructs the relevant object for you.

A tag typically has elements as follows. We've put in some numbered comments to help explain the various parts. We'll discuss each line individually below.

<                    <! 1. start of a tag!>
  box                <! 2. the type of tag. !>
  color={black}      <! 3. color is an example of a field -- these give tags different properties!>
  {What time is it?} <! 4. What is this? Is this a field too? !>
  visible=true       <! 5. another field used to control visibility of the box on the screen.!>
  rotate=7, {deg}    <! 6. some fields, like this one, accept more than one argument.!>
>                    <! 7..The end of this tag construct!>

Above, we've spaced our tag out over multiple lines to make the example clearer. Normally you would probably write it more compactly like this:

<box color={black} {What time is it?} visible=true rotate=7,{deg}>

ioL code is not whitespace-sensitive, so you can lay out your code whichever way is clearest to you. We'll often present our examples spaced out for clarity, but you can also (within reason) print these to ioL in a single line if you prefer.

Let's step through our example, looking back at each of the numbered comments above...

1. First we need to tell ioL that we're opening a new tag construct. We print the < symbol.
2. The next thing we need to specify is what kind of tag this is. In this case, it's a box tag. box tags are useful for creating rectangular on-screen containers that can be used to present content to the user in various ways. This must come at the start of the tag, so ioL knows what kind of object to create.

Identifiers in ioL are case-sensitive. ioL provides a built-in <box> tag, but if you type <Box> or <BOX> it won't be recognised as the same type of tag. The result will be invalid, since those other tag types don't exist.

3. color is the name of a field. Fields specify the various properties that a tag object will have. Exactly what fields you can specify depends on the tag type.
   The = sign means this is a field definition. The name of the field goes on the left, and the value goes on the right. What type of value are we assigning? The value is in curly braces { ... }. That means the type of our value is text.
4. What's this? Here we have a text value without a field name, and without the = operator. What field property does it get assigned to? Most tags provide a default field which has no name. Here, the main purpose of a box tag is to display content on the screen, so the default field for a box specifies the actual content to be displayed.
   Because the default field has no name of its own, you don't use an = sign to assign it a value. Whenever ioL sees a value or identifier inside a tag without the field-name = ... construct, it assigns this value to the tag's default field.
5. This field takes a different kind of value. Notice that there are no curly braces around the word true so this is not a text value. This field takes a boolean (true or false) value. In this case it answers a question: is the box visible on the screen or not? You enter a boolean value as true or false. If you were to pass a different sort of value, ioL would attempt to convert it into a boolean value for this field.
6. Some fields (here, the rotate) field, take in a list of values. The rotate field applies a visual rotation to the box. We want a rotation of 7 degrees. The first element has numerical type, which allows it to be used for calculations, not just as a piece of text. The second element is a small block of text, indicating the units of angle that we want to use. (Here we specified 7 degees. We could also have used {rad} for an angle in radians.)
   If you specify multiple values for a field, you need to place commas , between them. Otherwise, the second (and third, etc.) element you specify will not be attached to the same field, and will be treated as an element of the tag's default field instead.
   You can actually specify multiple values for any field — if a field requires a single value only, ioL will attempt to concatenate them together into a single value.
7. Finally we close the tag with a >.

Review

1. Run ioL in standard io mode by typing iol - at the command line. Try typing the following example, line-by-line, and watch what happens to the ioL console as you press Enter at the end of each line. (If you make a mistake, you can hit Ctrl+d on an empty line to quit, and then open the console again.)

<box {
  <span bold=true {Hello!}> What is your name?
  </p>
  <name-of-user:input>
  <button {OK} onClick=
    <putLn {The user's name is <name-of-user>.}>,
    <name-of-user.clear>
  >
}>

2. There are some things in the example above that we haven't talked about yet. We have an input tag in there, which provides the user with a box on the screen where they can type in their input, but in front of the tag type is name-of-user:. Can you guess what this does?
3. Try to guess the purpose of the onclick field inside the button tag.
4. What happens inside your TTY terminal when you type your name and click the OK button? What does the putLn tag appear to be doing? Why is there a comma , after the end of the putLn tag?