 Capt. Horatio T.P. Webb | Using Frames, Ajax and MS SharePoint MIS 4372 Transaction Processing II |
Capt. Horatio T.P. Webb | Using Frames, Ajax and MS SharePoint MIS 4372 Transaction Processing II |
The concept of a "user portal" has increasingly gained in popularity. These portals provide a single web site for the user that acts as a gateway to many of the user's other computing needs. Typically the must gain access to the portal by a logon process. Once logged on, the user sees connections to many different services on a single page. Portals have the advantages of a "single logon" that simplifies access to multiple system features. Most often these portals appear an organization's intranet where tasks, work groups, application tools and databases are commonly shared; secure and maintained.
Microsoft has taken a particular interest in the development of portals with their "SharePoint" technology. They claim that the use of their SharePoint servers provides valuable advantages to organizations in:
This is the idea of a single page where users logon and are presented with a variety of applications. This tends to be an HTML page with the organizational advantage that simplifies and aggregates several MIS functions for the user.
In an intranet environment where many diverse users have overlapping data and query needs, enterprise-wide search becomes a critical need. This also means that security and accessibility have been provided to maintain data and access integrity.
Content management has become a significant issue for most organization as the amount and number of alternative media types has risen dramatically. Having central access made available to a variety of user simplifies both finding and displaying content as well as reducing storage redundancy.
The ability to provide web-based processing for standard user tasks has been a staple of the client/server applications of the web since its inception. "Transaction processing" in whatever form is the often the most critical tasks the web performs. This may range from traditional filling out standard forms (like requesting a parking permit or filing a travel request) to shared calendars and messaging. These tasks typically require the user to make some permanent change in a database (process a transaction) -- as compared to static web displays or data retrievals.
With the advent of large databases, companies can now not only record transaction activity (i.e., data warehousing), it can also be selectively accessed (i.e., data mining) and used to make strategically important decisions about the future (i.e., business intelligence)
With large central databases, common content, and data access control provided for at the organizational level, users can share applications, data and communication channels.
An later variation of a portal is the "dashboard" concept where on a single web page many data sources are aggregated to provide a manager with constantly updated status reports. These reports features often use graphs, dials and indicator lights to report on the constantly changing environments -- much like the "dashboard" of your automobile.
In all of these ideas and applications, one of the central ideas is "sharing". This creates several serious technical issues. For sharing to take place, the following must be addressed:
They have all been tried in various forms, using various computer technology since the advent of networks in the late 1960s. However, the buzz words that name these shared processes have evolved as have the specific technical solutions.
One of the central advantages to both the portal and dashboard concepts is the assumption that multiple sources are employed on a single page simultaneously. The ability to accomplish this in a browser environment has evolved over the years using a variety of approached. We will examine some common web-based technologies in the order in which they appeared below:
HTML Frames provides the ability to display multiple web pages within a single web page and was one of the early features provided in HTML.
The original concept relies on the idea of a "frame" as space containing the contents of a single HTML page. "frames" could then be arranged into a "frameset". This idea is different in HTML from the concept of an HTML page containing a single page of content inside the >body> and </body> tags. So instead of a single page like
|
<html> <body> . . contents of a single page . . </body> </html> |
The use of frames replaces the <body> tag with a <frameset> tag pair inside of which the multiple frames are specified with <frame> tags.
The general layout is:
|
<html> <frameset [rows | cols] = "[pixels | %], [pixels | %], [pixels | %],..."> <frame src="URL of an HTML page" > <frame src="URL of an HTML page" > <frame src="URL of an HTML page" > </frameset> </html> |
The first frameset attribute identifies whether the page is to subdivided in multiple pages arranged in either rows or columns. This choice is then followed by a quoted list of "widths for each column" OR "heights for each row" depending on whether "rows" or "cols" has been chosen expresses ed in pixels. Alternatively, the "widths" or "heights" can be expresses as:
For example:
Note: if you use percentages they should add up to 100%.
Here if the HTML for a simple three column frameset:
The three HTML pages are to be arranged in columns. Three column widths are specified: 350 for the first (a sample RSS nes feed); 150 for the second (a stock market quote scapped from Google) and whatever width is leftover of the current browser window is the width of the third column (the Goggle home page). For each HTML page a "frame" tag is shown with an "src=" attribute that specifies the URL for the HTML page that is to appear in the specified column. Then there is a closing "frameset" tag. Note: there is NO body tag -- Each frame has its own. See the example here.
There are numerous frameset and frame tag attributes that can be set to control size, function and appearance:
If desired, you can subdivide the page further. This can be accomplished by making one of the frames that make up the frameset a frameset itself. Thus, a frameset of row frames can be subdivided into cols and vice versa. Here is the sequence of HTML pages that would be required to make a frameset with nine HTML pages in three rows and three columns:
The top level page would be (named: frame_ex_top.htm), and have three rows like this:
<html> <frameset rows="*,*,*"> <frame src="frame_ex_row1.htm"> <frame src="frame_ex_row2.htm"> <frame src="frame_ex_row3.htm"> </frameset> </html>
Then, each of the three rows would be a frameset:
The first row would be a frameset with three frames:
| frame_ex_row1.htm |
<html> <frameset cols="*,*,*"> <frame src="frame_ex_row1_col1.htm"> <frame src="frame_ex_row1.col2.htm"> <frame src="frame_ex_row1.col3.htm"> </frameset> </html> |
The three HTML pages on the first row would be:
| frame_ex_row1_col1.htm | frame_ex_row1_col2.htm | frame_ex_row1_col3.htm |
<html> <body> I am the row 1 col 1 page </body> </html> |
<html> <body> I am the row 1 col 2 page </body> </html> |
<html> <body> I am the row 1 col 3 page </body> </html> |
The second row would be a frameset with three frames:
| frame_ex_row2.htm |
<html> <frameset cols="*,*,*"> <frame src="frame_ex_row2_col1.htm"> <frame src="frame_ex_row2.col2.htm"> <frame src="frame_ex_row2.col3.htm"> </frameset> </html> |
The three HTML pages on the second row would be:
| frame_ex_row2_col1.htm | frame_ex_row2_col2.htm | frame_ex_row2_col3.htm |
<html> <body> I am the row 2 col 1 page </body> </html> |
<html> <body> I am the row 2 col 2 page </body> </html> |
<html> <body> I am the row 2 col 3 page </body> </html> |
The third row would be a frameset with three frames:
| frame_ex_row3.htm |
<html> <frameset cols="*,*,*"> <frame src="frame_ex_row3_col1.htm"> <frame src="frame_ex_row3.col2.htm"> <frame src="frame_ex_row3.col3.htm"> </frameset> </html> |
The three HTML pages on the third row would be:
| frame_ex_row3_col1.htm | frame_ex_row3_col2.htm | frame_ex_row3_col3.htm |
<html> <body> I am the row 3 col 1 page </body> </html> |
<html> <body> I am the row 3 col 2 page </body> </html> |
<html> <body> I am the row 3 col 3 page </body> </html> |
Whew! See the working example here.
Any other arrangements of multiple subdivisions can be accomplished.
It is simple (?) enough to make framesets that provide a way to alternatively lay out multiple HTML pages. But the frameset is only a mechnism for specifying pages -- it does not address communication BETWEEN frames.
The HTML object model provides a simple way to: (1) access HTML object properties; (2) specify actions based on object events; and (3) control behaviors by executing an object's methods. In order to accomplish these tasks, the script must have a way to reference the object. In the HTML object model, that method used by scripts to reference HTML objects is:
| window | . | document | . | forms name or number (0,1,2,...) | . | elements name or number (0,1,2,...) | . | property event method |
However, in a frameset there are multiple pages (i.e., documents), so we must add an additional componewnt in the object model. In the same vein as "forms" and "elements" we must add the "frames" name of number. Notes:
Here is the general form:
| window or top or parent | . | frames 1st level name or number (0,1,2,...) | . | frames 2nd level name or number (0,1,2,...) | . | frames 3rd level name or number (0,1,2,...) | ... | document | . | forms name or number (0,1,2,...) | . | elements name or number (0,1,2,...) | . | property event method |
Here is a simple three frame example:
<html> <frameset rows="*,*,*"> <frame src="frame_ref1.htm"> <frame src="frame_ref2.htm"> <frame src="frame_ref3.htm"> </frameset> </html>
Here is the code for the first frame in the frameset (frame_ref1.htm):
<html><head>
<script language="javascript">
<!--
function pref()
{
if (window.document.form1.elements[1].checked) targ=0;
if (window.document.form1.elements[2].checked) targ=1;
if (window.document.form1.elements[3].checked) targ=2;
getvalue=window.document.form1.t1.value;
top.frames[targ].document.form1.t1.value=getvalue;
}
-->
</script></head>
<body>
This is frame_ref1.htm. This page uses a form named "form1".<br>
<form name="form1">
This is a textbox named t1 <input name="t1" type="text" size="5"><p>
Put the value in the textbox above into the textbox in the
<br>1st frame <input type="radio" name="b">
<br>2nd frame <input type="radio" name="b" checked>
<br>3rd frame <input type="radio" name="b">
<p><input type="button" onClick="pref()" value="change it"
</form></body></html>
The code shows how to retrieve a value from a textbox; determine (from the checked radio button, it assignes 0,1,2 to "targ") which frame gets the value. The cross frame assignment is made by:
top.frames[targ].document.form1.t1.value=getvalue;
See the working frame reference example as discussed above.
While frames have received some level of utilization, there is much derision because of: printing issues (only on page can be printed from the frameset at a time and the user must click inside the frame to print it), bookmarking issues (doesn't retain any navigation that occurs inside the frameset in the bookmark) and navigation issues (confusing to users how the navigation works). Originally some browsers didn't support frames. This is generally not true today. But there is considerable outdated information about alledged "frame problems".
However, the "in-line" version of frame has received some wide acceptance. An inline frame does NOT require the "frameset". One or more "in-line frames can be put "anywhere" in a standard HTML page without constraints. An "iframe" can appear anywhere in an HTML document. There are numerous attributes that define the iframe. In general the tag is:
<iframe>any HTML
</iframe>
Attributes are:
Optional. You must use this to reference the frankme with script.
1=show a frameborder; 0 do not to display a border
sets the frame height in pixels
Sets the top and bottom margins of an the iframe
Sets left and right margins of an iframe
Sets the width of the iframe
See the working iframe example here.
The ability to place one or more HTML pages provides the capability to create an access portal with several page options immediately visible to the user. Frames used in the ways discussed above are a quick and dirty tool to get a portal done. It works without any special server-side programming
While frames is a way to control simultaneous multiple access on a single page, it has generally been replaced by the Ajax technologies. See my 2000 initial XMLHTTP page here. The technology XMLHTTP discussed was ultimately renamed "AJAX" (asynchronous JavaScript and XML). This is still a misnomer. It doesn't have to be javascript (it can be vbscript) AND it doesn't not have to be XML (it can be text, HTML or anything else you wish to get/put on the page) AND it does NOT have to be asynchronous. What AJAX does is to:
send and receive data to/from servers to the browser from a scripting language without refreshing (replacing) the contents of the page
Most importantly, this AJAX activity is invisible to the user and it can work in the "background" while the user does other things. My pages on Ajax are:
Most important in this technical discussion of Ajax what can be obtained. Typically, Ajax was initially used to get data from a database. In this mode a request is made to a server-side middle ware program to access a database and return the data to the executing script code. The script code then placed the result on the page. Now we are not limited to just conversing with middleware server programs. We can also access the content of other people's pages (HTML or server side programs) in the same way.
Lets make a simple ajax program that accesses data on a google page. While it might be easy to access any google.com page using a HTML link, the problem would be that the google page would replace the existing page. We only want a little piece of the google page -- not the whole thing.
Let us suppose that we want the current news on the UH News Page. This page is located by clicking on the "VIEW ALL NEWS" Link at the end of the "TOP STORIES COLUMN". We could type or link to the actual address:
http://www.uh.edu/news-events/index.php
Let's use a 660 x 300 iframe to see this page:
Suppose we really want ONLY the "TOP STORIES" section -- not the whole page. If we go to the page above and click on "View", then "Source" we get a 200+ line HTML page. With a little judicious searching we find the "TOP STORIES" section begins with the following:
<h1>Top Stories</h1>
...then each story begins with a span tag like this:
<span class="hd">
Now we need:
Why do I need the server? Why can't ajax go get the google page content directly? This presents a serious security problem called "cross-browser scripting" (aka "Xbrowser scripting" or "Xscripting"). While I can always get the Google page into the browser I am prevented from accessing the details of the page from a client-side script. This is prevented by all browsers as a security measure. However, a server-side program CAN do this (access the contents of a referenced page). This is exactlty how google.com and other search engines crawl the web with robots and spiders and access/index the page contents. You cannot, however, do this from client-side browser code. So we have to have a server side program.
Here is the server-side code (named: spidey4c.asp) I will use to get the page, parse the data and extract what i need and return it to the client:
<%
dim story (200)
dim story_start (200)
url = "http://www.uh.edu/news-events/index.php"
set xmlhttp = CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.open "GET", url, false
xmlhttp.send ""
'
' Here is the relevant part of the HTML generated from
' http://www.uh.edu/news-events/index.php :
'
' Our search should start immediately AFTER this
'
' <h1>Top Stories</h1>
'
'
s1="<h1>Top Stories</h1>" '***start searching after this
ls1=len(s1) '***length of desired string
'
' here is what ajax retrurned
'
t=xmlhttp.responseText
st1=Instr(t,s1) '*** find the start string
' this tells us where to begin seacrhing
'
'
' Each news section begins with:
'
' <span class="hd">
'
' the end of the "Top Stories" section is found when the tag below is found:
'
' <p class="right">
'
'
s2="<p class="+chr(34)+"right"+chr(34)+">"
st2=Instr(t,s2) '*** find the stop string location
'
' Each story then starts with this:
'
s3="<span class="+chr(34)+"hd"+chr(34)+">"
cur = st1 '*** move the cursor to the "TOP STORIES" section
cur=Instr(cur,t,s3) '*** find the first story
sn=0
response.write "<p><ol>"
while cur < st2
sn=sn+1
newcur=Instr( (cur+1) ,t,s3)
if newcur <> 0 then
nc=newcur-cur
story(sn)=mid(t,cur,nc)
wa="href="+chr(34)
wa2=wa+"http://www.uh.edu/news-events/" '***insert the correct http prefix and URL
story(sn)=replace(story(sn),wa,wa2)
response.write "<li> "+story(sn)
response.flush
cur=newcur
else
cur=1000000 '***force end of loop if no more found
end if
wend
response.write "</ol>"
set xmlhttp = nothing
%>
This server-side code performs three searches within the text of the UH Top Stories page, extracts them, formats them and returns them to the client.
Below is the output returned by the server-side code:
Here is the client-side code that is implemented on THIS PAGE to request, retrieve and display the data:
<script language="javascript" src="AjaxRequest.js"></script>
<script language="javascript">
function get_uh_news()
{
AjaxRequest.submit(fred,
{
'url':'http://auckland.bauer.uh.edu/students/parks/spidey4c.asp'
,'onSuccess':function(req){ news_out.innerHTML=req.responseText;}
,'onError':function(req){ news_out.innerHTML=req.responseText;}
}
);
}
</script>
As long as I know the page, I can get the page content on the server, strip out what I want and return it to the user. THIS IS EXTREMELY POWERFUL!. I can get whatever I want, check it whenever, save it, flush it, or just show it -- this lets me crawl it all! So long as the format of the page doesn't change I can get whatever I want, whenever I want. So, if it is on the web -- I own it (i.e., I pwn it).
Note 1: The "news_out" reference in the code above is the id of the DIV block above (now gray and filled with the retrieved data from the UH News site). It was originally empty like this:
<div id="news_out" style="border:2px solid black;width:700px;background-color:#cccccc;">
</div>
Note 2: that this version of the ajaxtoolbox expects to send "form" data from a form named "fred". We intend to send NO data, but must have an empty form on the page. So the following empty form is embedded at the end of this page:
<form name="fred" method="POST"><'/form>
Dashboards are nothing more than special cash of a portal that produces constantly updated info on a page in a quickly readable fashion. Dashboards have:
[We can partition with frames, iframes or div blocks]
[We can get HTML pages; or asp/php/pl pages; AJAX, parts of web pages; reports; or just data]
[often graphs, dials, meters or indicator lights that use colors and graphics in highly visual formats] [i.e., controls the refresh rate -- updates the partition every second, minute, hour or day, etc.]
See HTML 5 Graphs and Dashboards Using Canvas (at the bottom of the page)
and