Home > Articles > Mobile Application Development & Programming > HTML5 & Web Standards

📄 Contents

  1. Dark Forces Gather
  2. Structure of the Site
  3. Tier 1: Presentation Layer (ASP, VBScript, and JavaScript)
  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Tier 1: Presentation Layer (ASP, VBScript, and JavaScript)

Let's first start in the presentation layer, the ASP, in our building of this object. As it turns out, the ASP piece comprises the simplest component of the BTB. It was surmised early on that an object like this, which relies heavily on database calls in its construction, should be built automatically in the background. Otherwise, the overhead in building a BTB on the fly would require unacceptable page load-times. Whenever a change is made to the underlying data that makes up the BTB, a procedure is run that re-creates the HTML used to display the object. That HTML is stored as a text field in a database table. When required, the HTML is retrieved and displayed as simply as this:

<% renderBrowseTopicBox() %>

Throw that onto an HTML page, and you have yourself a BTB. The code that makes up the ASP function, renderBrowseTopicBox(), which resides adequately in a file called browseTopicBox.asp, isn't all that complex, either:

1  <%
2  '********************************
3  'FUNCTION: renderBrowseTopicBox
4  'PURPOSE: to render the btb using the default destination URL
5  ' (/topics/index.asp)
6  'ARGS: none
7  'RETURN VALUE: none
8  '********************************
9   function renderBrowseTopicBox()
10    writeBrowseTopicHTML "", false
11   end function
12  %>

All it does is call another ASP function, writeBrowseTopicHTML, with two arguments, an empty string and a Boolean false. writeBrowseTopicHTML consists of the following few lines:

1  <%
2  '*********************************
3  'FUNCTION: writeBrowseTopicHTML
4  'PURPOSE: to get the field from the db and render it
5  'ARGS: mypath -> the destination URL
6  '   fulltree -> ignored
7  '*********************************
8  function writeBrowseTopicHTML(mypath, fulltree)
9   dim mybtb
10   dim murl
11   dim mytoken
12   mybtb = State.getBtbHtml()
13
14   murl = urlsl("")
15
16   if instr(1, murl, "?") > 0 then
17    murl = mid(murl, instr(1, murl, "?") + 1, len(murl))
18   end if
19   if len(murl) > 0 then
20    mybtb = replace(mybtb, "$$STATE$$", "&" & murl)
21   end if
22   mybtb = replace(mybtb, "$$LPATH$$", lpath)
23
24   mytoken = State.getTabDestination()
25
26   if len(mypath) > 0 and mypath <> mytoken then
27    mybtb = replace(mybtb, mytoken, mypath)
28   end if
29
30   Response.Write(mybtb)
31  end function
32
33  %>

After we dimension some variables on lines 9–11, we set the variable mybtb equal to a Java function call, State.getBtbHtml(). That would seem to retrieve the aforementioned BTB HTML from the database, and I can assure you that it does.

On line 14, the variable murl is set to the custom function urlsl(""). That sets murl equal to the user's current path from the query string. Lines 16–18 then set murl equal to only what's found on the query string after the question mark—the arguments—if any. In the BTB HTML returned from the database, there are two placeholders, $$STATE$$ and $$LPATH$$. Lines 19–22 replace the placeholder $$STATE$$ with the query string arguments, and $$LPATH$$ with lpath. lpath is a global variable defined for the web application that substitutes the web server path (http://www.informit.com/). lpath changes based upon the host environment and allows us to test our code on a variety of servers without having to hard-code server paths.

By the time we reach line 24, the HTML code stored in mybtb contains valid query strings and links within all of its <a> and <img> tags. Line 24 checks for one more item. It retrieves another value from the database, the tabDestination. This is a bit of data that lets us know what page the BTB thinks it's on. The variable mypath is passed into the function. If mypath contains a non-null value that is not equal to tabDestination, the value of mypath overrides the value of tabDestination. In our case, mypath is an empty string, so the tabDestination remains.

All that is left is to call Response.Write to print out the BTB HTML. Pretty simple, no?

"Wait!" you exclaim. "How does the BTB know what page it's on?" Boy, you've had your coffee today. Good catch!

Figure 1 shows the BTB as it appears on the home page, with none of the topic areas selected. How does the renderBrowseTopicBox() function know to display the pre-generated HTML for the Programming topic (see Figure 2)? Or Artificial Intelligence? Astute reader, you have espied one of the most important aspects of the InformIT site, the mystery of state. The State properties of a page determine a great number of things about how a particular area of the site is displayed. It ties in with the taxonomy to select which articles and books will show up when you click the BTB or the top navigation bar. In short, State defines InformIT.

Alas, the State is built in Java. So, you, oh coding faithful, will have to wait breathlessly for my next article, where we delve into the Java components of the BTB and find out what's going on under the covers.

Figure 2 The mystery deepens.

  • + Share This
  • 🔖 Save To Your Account