WildView - Panel Sets and Triggers

ildView Panel Sets and Triggers

Before reading about WildView panel sets and triggers, you should be familiar with WildView fundamentals as discussed in the Basics topic of the documentation.

In this topic you will learn how to combine multiple panels in a layout file to create a panel set, and how to send messages between panels using triggers.

Before we move on to panel sets and triggers, we'll first touch on how to add comments to a layout file.

omments

Comment tags may be placed in a layout file, allowing you to document your layout design.

WildView comment tags are similar to HTML comment tags. The comment tag begins with "<!--" and ends with ">". Note that unlike WildView comment tags, HTML comment tags end with "->". Though you may use the HTML format for your WildView comment tags, the dash before the closing angle bracket is not required.

Make sure that you do not have have a tag end character (the default tag end character is ">") in your comment text, or WildView will assume that it marks the end of the comment.

Comment tags may be placed anywhere in the WildView layout file -- even beginning in the middle of a word. An example of comment tags is illustrated below:

<!-- The following panel creates an area that contains vertically scrolling text> <PANEL name=TextDemo module="WVPanelVScroll" x=25 y=10 w=150 h=80 clock=50 fontSize=14 fontColor=7D3B9D fontStyle=bold> <!-- The text that will be scrolled vertically is found below> This is a demonstration of a simple panel that scrolls text vertically from bottom to top. Notice that we have specified a margin of 10 pixels on the top and bottom of the display area, and a margin of 25 pixels on the left and right sides of the display area.

anel Sets

In the WildView documentation, you will find that the terms "layout file" and "panel set" are frequently used interchangeably. What, you might find yourself wondering, exactly is a "panel set?"

A panel set is simply one or more panel tags in a layout file. In other words, a panel set is a set of panels displayed together in the WildView applet display area and referred to by the name of the layout file.

In the WildView Basics documentation, you learned how to create a WildView display that contained a single panel. Now we will tackle creating a panel set with multiple panel tags.

To illustrate the use of more than one panel tag in a panel set, we will design a simple WildView news display that has vertically scrolling article text at the bottom of the display area, and headline text at the top of the display area. Following this, in the "Triggers" section below, we will learn how to change the headline text based on what article text is being displayed in the bottom of the display area.

The first step in creating our WildView news display is to define the layout of the two panels that we will use.

The headline panel will be displayed at the top of the display area. It will have a margin of 5 pixels to the left and right, and it will be 20 pixels high. The article area, which contains text that will be scrolled vertically from bottom to top, will be placed directly below the headline and will have a margin of 5 pixels to the left, right, and below. The layout is illustrated below:

After deciding where each panel will be positioned, we next create the layout file that contains the panel set.

<!-- The following panel tag creates a static text area where the headline will be displayed.> <PANEL name=Headline module="WVPanelText" x=5 y=0 w=190 h=20 fontSize=14 fontColor=FF0000 fontStyle=bold justify=center> <!-- The panel tag below creates a vertically scrolling text area that displays the article text.> <PANEL name=Articles module="WVPanelVScroll" x=5 y=20 w=190 h=75 clock=70 fontSize=14 fontColor=7D3B9D> This is a demonstration of a simple panel set that displays news articles. The news articles are displayed in a vertically scrolling text panel, and the headline text for each article is displayed directly above the article text.<P> WildView makes it very easy to quickly set-up wild displays. While this example is quite basic, it is not difficult to add advanced features, such as displaying photos that are synchronized with the scrolling article text.

If we were to create an applet tag for this panel set and embed the WildView applet in an HTML page, the first thing that we would notice is that while the article text is scrolling at the bottom of the display, the top of the display where the headline text should appear is blank. That's not exactly what we want.

To get our headlines functioning, we need to use "triggers," which just happens to be our next topic.

riggers

A trigger is a WildView tag that can be used to send a message to a panel in the panel set. The message that is "fired" at the "target" panel by the <TRIGGER> can be used to change the behavior of the target panel, or to change the way that the target panel displays its contents, or to synchronize the target panel with the panel that fired the <TRIGGER>.

The attributes of the <TRIGGER> tag will vary depending upon what type of panel the trigger is being fired at, and depending on what the trigger is supposed to accomplish. Each module (remember that a module defines how the panel works) understands a unique set of attributes related to how the module functions.

All of this might sound quite complicated, but in practice triggers are very easy to use. In fact, we'll see how easy it is to use triggers by using them to get our headlines working in the news display that we are designing.

In the panel set that we have created for the news display, we have two paragraphs in the vertically scrolling text portion of the display. We would like to display a headline for each of these paragraphs in the top portion of the display as the paragraph scrolls into view.

To set the text in the headline panel, we need to fire a <TRIGGER> at the "headline" panel from the "articles" panel. Here is the revised panel set with the two triggers added to set the headline text:

<!-- The following panel tag creates a static text area where the headline will be displayed.> <PANEL name=Headline module="WVPanelText" x=5 y=0 w=190 h=20 fontSize=14 fontColor=FF0000 fontStyle=bold justify=center> <!-- The panel tag below creates a vertically scrolling text area that displays the article text. Note that the text following the panel tag contains trigger tags to change the headline.> <PANEL name=Articles module="WVPanelVScroll" x=5 y=20 w=190 h=75 clock=70 fontSize=14 fontColor=7D3B9D> <TRIGGER panel=Headline text="Wild News!"> This is a demonstration of a simple panel set that displays news articles. The news articles are displayed in a vertically scrolling text panel, and the headline text for each article is displayed directly above the article text.<P> <TRIGGER panel=Headline text="Easy to Use!"> WildView makes it very easy to quickly set-up wild displays. While this example is quite basic, it is not difficult to add advanced features, such as displaying photos that are synchronized with the scrolling article text.

Notice the format of the <TRIGGER> tag:

<TRIGGER panel=Headline text="Wild News!">

The "panel" attribute in the <TRIGGER> tag is required, and it determines the panel to which the <TRIGGER> message will be sent (panels are named by the "name" attribute in the <PANEL> tag). In the example above, we are telling the "headline" panel that it should set its text to "Wild News!".

To see our WildView news display in action, we need to create the HTML applet tag (the layout file is named "VScrollDemo2.TXT"). The HTML applet tag is:

<APPLET CODE="WildViewApplet.class" WIDTH="200" HEIGHT="100"> <PARAM NAME="panelSet1" VALUE="DocPanelSets/VScrollDemo2.TXT"> </APPLET>

And here at last is our working WildView news display applet: