Create a web Client for the Bulletin Board Provider

Create the Web Page HTML File

Create a new html file to work with

We don't have a designated client template, but the Quote of the Hour demo is simple and we'll use it as a starting point.

• Copy Quote.html to BBoard.html

Change Qoth headers to BBoard headers.

• Use search and replace to change instances of Quote to BBoard
• Change the two instances of BBoard of the Hour to Bulletin Board

The body of web page is organized in three <div> sections: The page header <div class="pgHeader">, the page body <div class="pgBody">, and the page footer <div class="pgFooter">.
References to page body generally refer to the <div class="pgBody"> section, rather than the html document body.

Remove html markup specific to Qoth

Remove the contents of page body. This is the section between <div class="pgBody"> and the corresponding </div>

• Remove the <blockquote class="mtb2"> block

We'll keep the broadcast message popup (appMsg1Elt), and the debug message area (dbgMsg1Elt).

Import the utility script used to create buttons

Insert the import just before the TvIoBase.js script import.
(You can copy it from BcTester.html or another demo that has table buttons.)

• <script language="javascript" type="text/javascript" src="../Resources/TButton.js">
</script>

Fill in the new page body

We'll use a table to hold the bulletin board posts and a textarea to add new posts.

Add a table with a bbArea id and single placeholder element indicating the page hasn't connected to the provider yet.

• <table id="bbArea" ...>
<td>Bulletin Board Not Available</td>
</table>

Add a textarea with send and clear buttons to create our posts.
We'll use another table to hold the textarea and buttons, and we'll use <td> elements for the buttons.

• <table class="Btn" ...>
• <textarea id="postValFld" ...>
• <td id="postBtn" class="Btn center" onmousedown="btnDown('postBtn')" onmouseup="btnUp('postBtn')" onclick="sendPost()" >
  Post  
</td>
• <td id="clearBtn" class="Btn center" onmousedown="btnDown('clearBtn')" onmouseup="btnUp('clearBtn')" onclick="clearPostArea()" >
  Clear  
</td>

(Our code has some additional attributes to improve the appearance of the web page, but they aren't needed for the page to work.)

Create the Javascript File to Hold the BBoard Code

Create a new javascript file to work with

We'll use Quote of the Hour demo javascript code as a starting point.

• Copy Quote.js to BBoard.js

Change comments to reflect the new purpose.

• Use search and replace to change instances of Quote to BBoard
• Create a new Revision History

Remove code specific to Qoth

Remove references to quoteElt and srcElt

• Remove from Variables at the top
• Remove 2 lines from start() method
• Remove the entire "QuoteText" clause in getNewData()
• Remove 1 line from "QuoteSource" clause in getNewData()

Remove Qoth startup messages in the updateStatus(...) TVB_STS_OPEN clause

• Remove tvbSendMsg("RqstSub", "QuoteText");
• Remove tvbSendMsg("RqstRsrc", "QuoteText");
• (Keep tvbSendMsg("RqstSub", "Broadcast");)

Add stubs for the methods we'll use to implement BBoard

• function updateBB() { }
• function sendPost() { }
• function removeItem(postId) { }
• function clearPostArea() { }
• function addItem(itemId, itemText) { }

Make the necessary changes to the existing code

Edit the getNewData() method

• Change the "QuoteSource" clause to "BBPosts"
• Add updateBB(); to the "BBPosts" clause

Edit the TVB_STS_OPEN clause in the updateStatus(...) method

• Insert the line tvbSendMsg("RqstRsrc", "BBPosts"); at the beginning of the clause

Fill in the stub methods

For sendPost we do a little preprocessing and send the contents of postValFld to the server.

If we try to send a multi-line message to the server, the client channel will process each line as a separate entity; So we replace all newline characters with <br> tags. Then we send the AddBBPost message:

• tvbSendMsg("AddBBPost", postText);

After sending the post we ad a temporary copy of the post to our local bulletin board.

For removeItem we verify the removal, and then send the server the item's ID

We set the item's background color to pink and use window.confirm to verify the client wants to remove the item. If the client cancels, we return the background to it's normal color.

If the client confirms we send the RemBBPost message with the item's ID:

• tvbSendMsg("RemBBPost", String(itemId));

After sending the message, we clear the post area, and change the item's foreground color to dark grey for additional confirmation we have deleted the post.

For clearPostArea we clear the post field

• postValFld.value = "";

For updateBB we clear the bulletin board and process the incoming BBPosts message

The bulk of the EventWeb processing that is unique to BBoard happens in this method.

Note that updateBB is called with no parameters.
updateBB is called when the beginning BBPosts tag has been read in getNewData(). This tag should be followed by a series of BBPostID and BBPost tag-value pairs that we can read from the channel. We use the tvbRecHasMore() method to check for the presence of data so we won't start processing another message when we finish this one.

If there are no more tag-value pairs in this message, the bulletin board is empty and we post a message indicating that.
If there are more tag-value pairs, we loop through the following process:

• See if the mesage has more data.
  If not we are done, so we drop out of the loop
• Get the next tag-value pair
• Confirm the tag is a BBPostID tag
  If it isn't, something is wrong with the message and we drop out of the loop
• Save the item ID explicitly as a String
  (Otherwise it will be converted to a floating point value that the server won't recognize)
• See if the mesage has more data.
  If not, something is wrong with the message and we drop out of the loop
• Get the next tag-value pair
• Confirm the tag is a BBPost tag
  If it isn't, something is wrong with the message and we drop out of the loop
• Save the item contents
• Call addItem to add the post to our bulleting board
• Loop back to the beginning and look for more posts

For addItem we post it to our bulletin board with an onclick attribute to call removeItem with the item ID

(Details omitted. There's nothing specific to EventWeb)