Part XVI: Advanced TQS Window Options

TQS 2.7 introduces several new features which allow you finer control over the appearance of the TQS window. These features include specifying a custom icon, displaying gradient backgrounds, and controlling background image position and repetition. In addition, TQS 2.7 introduces a more uniform and powerful mechanism for customizing the window appearance on a per-location basis. This section of the tutorial will describe how to use these new features in your TQS applications.

In versions 2.6 and earlier, the TQS window displayed the icon for Microsoft Internet Explorer HTML documents. This icon was displayed both in the window's title bar and in the Windows taskbar. Now, TQS 2.7 displays the TQS book icon by default, and allows you to specify your own icon for your applications. This allows you to further customize your quizzes and applications.

In Windows, an icon file has the .ico extension. In TQS 2.7, the new ICON element allows you to specify an icon file that contains the icon TQS should use for your application. The ICON element must be a child of the TQS element, and currently contains a single attribute, SRC, which contains the icon file name:

<?xml version="1.0"?>
<TQS VERSION="2.7" EDITABLE="1">
  <TITLE>My TQS Application</TITLE>
  <TQSWINDOW ... />
  <ICON SRC="EMBED?world.ico"/>
  ...
</TQS>

In this case, the embedded file world.ico is displayed. Like other places in TQS which point to files, the SRC attribute can refer to a file alongside your .tqs file, a file on the Internet, or an embedded file. For more information, see the reference page for the ICON element.

Previous versions of TQS allow you to specify a background color which is used to fill the background of the TQS window. Now, TQS 2.7 allows you to display a gradient background. A gradient is where one color gradually blends into another color.

You specify the starting color using the TQSWINDOW element's BGCOLOR attribute, and the ending color using the BGGRADIENTCOLOR attribute. In addition, you must specify the direction of the gradient by setting the BGGRADIENTSTYLE attribute to either "VERT" or "HORIZ" (for top-to-bottom or left-to-right gradients, respectively).

For example, the World Literature Trivia sample (included with TQS) uses a blue-to-black vertical gradient by using the following code:

<TQSWINDOW
  ...
  BGCOLOR="#0000ff"
  BGGRADIENTCOLOR="#000000"
  BGGRADIENTSTYLE="VERT"
/>

In previous versions of TQS, if you specified a background image to be displayed, the image was positioned at the upper-left corner of the window and then tiled both horizontally and vertically to fill the window. Now, TQS 2.7 allows you finer control over this process.

Specifically, you can now control whether the image should be tiled (repeated) in both directions, in just one direction, or not tiled at all. Also, you can control where the image is positioned. These two features are controlled by the TQSWINDOW element's BGIMGREPEAT and BGIMGPOS attributes.

For example, to display a background image in the lower-left corner and have it not repeat at all, you would use a TQSWINDOW as follows:

<TQSWINDOW
  BGIMG="image.gif"
  BGIMGREPEAT="NONE"
  BGIMGPOS="1"
  ...
/>

The BGIMGPOS attribute can be set to a value of "1" through "9", corresponding to the nine different alignment possibilities. The values align the image to the window similarly to the numbers on the number keypad or on a phone: 1 is the lower left, 2 is lower center, etc. The default value is "7", the upper left.

The BGIMGREPEAT attribute can be set to "NONE", "VERT", "HORIZ", or "BOTH". The default value is "BOTH".

TQS 2.7 also makes a few changes to the BGSTYLE attribute. Previously, you could set it to "FIXED" to cause the image to not scroll with the TQS window. Now, there are two additional options: you can explicitly set it to the default value of "SCROLL", or set it to "STRETCH". When set to "STRETCH", the image is displayed once, stretched to fill the entire size of the TQS window. This option could be useful for a background pattern that would not tile well; however, certain types of images may not look good if the user resizes the window very thin.

In addition to all of these changes mentioned so far, TQS 2.7 introduces a powerful new way to customize the look of your applications: you can now include TQSWINDOW elements within individual LOC elements. This means you can give each location a completely different look and feel: different colors, gradients, images, and fonts. All of the TQSWINDOW attributes can be set differently for each location (except for WIDTH and HEIGHT--these can only be set in the main TQSWINDOW element).

To see this in action, run the World Literature Trivia sample application. The main menu has a blue-to-black gradient, and no background image, while the child locations for each book have separate colors and background images.

If you open up World Literature Trivia.tqs in Notepad and look at the code, you will find that there are several TQSWINDOW elements throughout the application. The main TQSWINDOW element (located as a direct child of the TQS element) contains the default attribute definitions, those that are to be shared among all locations:

<TQS VERSION="2.7" EDITABLE="1">
  ...
  <TQSWINDOW
    WIDTH="720"
    HEIGHT="520"
    FONT="Times New Roman"
    BGCOLOR="#0000ff"
    BGGRADIENTCOLOR="#000000"
    BGGRADIENTSTYLE="VERT"
    BGIMGPOS="1"
    BGIMGREPEAT="NONE"
    BGSTYLE="FIXED"
  />
  <LOCATIONS ...>
    ...
  </LOCATIONS>
  ...
</TQS>

Then, the first-level child LOC elements for each book contain a TQSWINDOW element of their own. These attributes define custom background colors, background images, and highlight colors, as follows:

<LOCATIONS START="0">
  ...
  <LOC ID="1" TYPE="NULL">
    <TQSWINDOW
      SELCOLOR="#E89C92"
      BGCOLOR="#33281E"
      BGIMG="EMBED?antigone.gif"
    />
    ...
  </LOC>
  <LOC ID="4" TYPE="NULL">
    <TQSWINDOW
      BGCOLOR="#00002A"
      BGIMG="EMBED?lesmis.gif"
    />
    ...
  </LOC>
  <LOC ID="3" TYPE="NULL">
    <TQSWINDOW
      SELCOLOR="#C41A14"
      BGCOLOR="#EB9A12"
      BGIMG="EMBED?lamancha.gif"
    />
    ...
  </LOC>
  ...
</LOCATIONS>

Here, the LOC elements are container locations (i.e., their TYPE is "NULL"). The TQSWINDOW customizations apply to all child locations underneath the LOC element in the hierarchy. Therefore, designing your locations to use a location hierarchy is helpful if you want to use these new customization features.

When the user visits a location, TQS determines what styles should take effect by creating a composite window style. First, it looks at the attributes set in the main TQSWINDOW element. Then, it starts at the root of the location hierarchy and walks it until it finds the current location; at each step, it looks at the LOC element's TQSWINDOW to see which attributes are set. Attributes set at more-specific locations override those set in parent locations.

For example, consider the following location hierarchy:

<TQS VERSION="2.7" EDITABLE="1">
  ...
  <TQSWINDOW
    WIDTH="720"
    HEIGHT="520"
    FONT="Times New Roman"
    BGCOLOR="#0000ff"
    BGGRADIENTCOLOR="#000000"
    BGGRADIENTSTYLE="VERT"
    BGIMGPOS="1"
    BGIMGREPEAT="NONE"
    BGSTYLE="FIXED"
  />
  <LOCATIONS ...>
    <LOC ID="1" TYPE="NULL">
      <TQSWINDOW
        TEXTCOLOR="yellow"
        SELCOLOR="red"
        BGIMGREPEAT="VERT"
      />
      <LOC ID="2" TYPE="QUESTIONS">
        <TQSWINDOW
          FONT="Verdana"
          BGIMG="image.gif"
        />
        ...
      </LOC>
    ...
    </LOC>
  ...
  </LOCATIONS>
</TQS>

When at location "1,2", TQS will evaluate the three TQSWINDOW elements and combine them to create the following composite style:

FONT="Verdana"
TEXTCOLOR="yellow"
SELCOLOR="red"
BGCOLOR="#0000ff"
BGGRADIENTCOLOR="#000000"
BGGRADIENTSTYLE="VERT"
BGIMGPOS="1"
BGIMGREPEAT="VERT"
BGSTYLE="FIXED"
BGIMG="image.gif"

If the main TQSWINDOW element (or one attached to a parent LOC) specifies a background image, but you wish for a child location to not display it, you can set the child location's TQSWINDOW element's BGSTYLE attribute to "HIDEIMG".

A child TQSWINDOW element is also allowed within the REPORT element, allowing you to customize the report screen using the same mechanism.

Note: Previous versions of TQS allowed limited customization of child locations through several attributes of the LOC element. Starting with TQS 2.7, these attributes are deprecated: they are ignored if your TQS application is marked as version 2.7 or higher. You must use a child TQSWINDOW element from now on in order to achieve per-location customization. (The attributes are still obeyed for version 2.6 and prior applications.) Likewise, the REPORT element's BGSTYLE attribute is now deprecated in favor of a child TQSWINDOW element.

In conclusion, TQS 2.7 introduces a powerful, uniform mechanism for customizing the appearance of locations within your TQS application. It also introduces new features for gradients, background image control, and window icons. This section of the tutorial has described these new features and explained how TQS composes styles for locations.

Having read through all sixteen parts of the Trivia Quiz Shell tutorial, you should now be able to create your own rich, interactive applications for TQS 2.7. Keep checking Bot Productions's web site for updates, new sample applications, and information on the TQS Editor, currently under development.