Perl Cd Bookshelf [Electronic resources] نسخه متنی

Designing the Static and Dynamic Areas

In this section, you will see how to populate the various content areas with their data and links. In this discussion, a static area is one that gets its content from the local file system, and a dynamic area is one that is populated from a remote source where the content is unknown to the web server at request time. In this example, this dynamic content will be from database queries and web services. For ease of development and the ability to support multiple browsers, all content will be delivered in XML, and the XSQL servlet will apply the appropriate XSLT stylesheet to produce HTML or another device-appropriate markup language such as WML.

Creating the Dynamic Areas

For this sample page, there are two dynamic areas: What’s New and Hot Topics. The What’s New area is created by retrieving listings from the database, while the Hot Topics area is generated from a web service offered on OTN.

Creating the What’s New Section

This section uses the same techniques introduced in Chapter 14 for retrieving and displaying FAQs. Therefore, the first task is to define the database schema for these news items. Instead of registering an XML schema, the database schema will be created as a NEWS table where the data will be stored relationally but retrieved as XML. The following SQL script creates this table:

CREATE TABLE NEWS(
news_id NUMBER PRIMARY KEY,
title VARCHAR2(100),
notes VARCHAR2(200),
link VARCHAR2(200),
createtime DATE,
category VARCHAR2(10),
status varchar2(10)
);
CREATE SEQUENCE news_seq START WITH 1;
CREATE or replace TRIGGER news_insert
BEFORE INSERT ON news
FOR EACH ROW
BEGIN
select news_seq.nextval into :new.news_id from dual;
END;
/
show errors;

Since you would want to store information such as title, notes, and a link, these columns are created as VARCHAR2. The size of each column is also limited to the number of characters that you can reasonably display in a listing. Additionally, metadata about the entry can be added, such as the date, category, and publication status. Finally, you will need to generate IDs for the items, which will be useful in creating a link for retrieval of the entry for updating. These IDs are generated by the NEWS_SEQ trigger created in the second part of the script.

Now that the schema is created, we can examine the XSQL page that retrieves its contents. The following fragment does this retrieval from the main index.xsql page:

<content>
<xsql:if-param name="pagename" exists="yes">
<xsql:include-xsql reparse="yes" href="/>
</xsql:if-param>
<xsql:if-param name="pagename" exists="no">
<xsql:include-xsql reparse="yes" href="/>
</xsql:if-param>
</content>

As in the FAQ listing, the first iteration of this section is without a pagename, so the first xsql:if-param> will be skipped and the second one executed by calling the app_news/index.xsql page with a category parameter of xdk. Taking a look at this page in the following listing, you’ll see that it has its own stylesheet, news.xsl, to handle the specific formatting of the XML. It also uses the xdkus database connection in the XSQLConfig.xml file and calls the same Paging.java class used for the FAQs, located in the package oracle.xml.sample.xsql.portal.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="?>
<page id="1" title="News of XDK" 
connection="xdkus" xmlns:xsql="urn:oracle-xsql">
<xsql:action handler="oracle
.xml.sample.xsql.portal.Paging" rows-per-page="10"
url-pagename="index.xsql?cat={@cat}&amp;">
<![CDATA[
SELECT count(1)
FROM news 
where category='{@cat}'
]]>
</xsql:action>
<xsql:query rowset-element="NEWS" row-element="NEWS_ITEM"
skip-rows="{@paging-skip}" max-rows="{@paging-max}">
<![CDATA[
SELECT news_id as id,title,link,status,
TO_CHAR(createtime,'Month DD,YYYY') as time, notes as note 
FROM news
where category='{@cat}'
ORDER BY createtime DESC
]]>
</xsql:query>
</page>

Taking a look at the queries, the first one simply generates the overall count of items. The second one uses the capability of the XML SQL Utility to encapsulate the result in XML. The following is an example result returned in XML:

<page>
…
<NEWS>
<NEWS_ITEM num="4">
<ID>124</ID> 
<TITLE>XDK eSeminar</TITLE> 
<LINK>http://ilearning.oracle.com/ilearn/en/learner/jsp/
offering_details_home.jsp?classid=58377231</LINK> 
<STATUS>new</STATUS> 
<TIME>July 05,2003</TIME> 
<NOTE>Overview of the XML standards support by the Oracle XDK and an 
in-depth discussion on the XML features.</NOTE> 
</NEWS_ITEM>
</NEWS>
…
</page>

This result is then processed by the news.xsl stylesheet to create the entry, as shown in this fragment:

<xsl:for-each select="page/NEWS/NEWS_ITEM">
<tr> 
<td width="10" align="right" valign="top">
<img src="/image/library
/english/10158_r_arrow.gif" width="10" height="10"/>
</td>
<td colspan="2" width="600" align="left" class="fbox">
<a href=" target="_new" class="fbox">
<xsl:value-of select="TITLE"/></a>
<xsl:if test="STATUS[text()!='']">
<img src="/image/library/english/10158_{STATUS}.gif"/> 
</xsl:if>
<xsl:text>(</xsl:text>
<xsl:value-of select="TIME"/><xsl:text>)</xsl:text>
</td>
</tr>
<tr> 
<td width="10"><xsl:text> </xsl:text></td>
<td colspan="2" width="600" class="footnt">
<xsl:value-of select="NOTE"/>
</td>
</tr>
</xsl:for-each>

Of note is the <xsl:if> element, which tests for a value in the <STATUS> element. If found, an icon corresponding to its value is displayed. This is accomplished by using {STATUS} in the XPath to construct the name of the image. Looking at our example result, new.gif would be chosen. This technique is also used to construct the HREF attribute for the link to the news item.

Notice that the XSL statement

<img src="/image/library/english/10158_{STATUS}.gif"/>

is equivalent to

<img>
<xsl:attribute name="src">
<xsl:text>/xdkus/images/</xsl:text><xsl:value-of select="STATUS"/> 
<xsl:text>.gif</xsl:text>
</xsl:attribute>
</img>

but is easier to write, read, and maintain.

Finally, different CSS classes are used to vary the formatting and text size of the <TITLE> and <NOTE> values, as shown in the stylesheet, where the class attribute of some <td> elements takes the values fbox and footn.

Creating the Hot Topics Area

Up to this point, the content on the site has been supplied locally. Web services provide the advantage of supplying changing content without requiring maintenance on your part. For this area, you’ll use a web service provided by OTN as an XML document sent as the payload of a SOAP message. This XML service, while of a Really Simple Syndication (RSS) type, has a Web Services Description Language (WSDL) service description available at http://otn.oracle.com/ws/oracle.otn.ws.news.OTNNews?WSDL. These services are available from a variety of web sites, from retailers such as amazon.com to personal blogs.

To connect this service to the site, you need to create a Java class—usually called a stub, or a proxy—to generate the request and receive the XML response that can then be transformed into HTML by a stylesheet. This class, acting as a SOAP client, needs to call the getRSS method available at oracle.otn.ws.news.OTNNews. You can set up an XSQL custom action handler to invoke the class from within an XSQL page. In this case, the following section from the main index.xsql page calls the otnnews.xsql page, invoking the service:

<topic>
<xsql:include-xsql href="/>
</topic>

The otnnews.xsql page is very simple, as shown in the following section, but needs to be its own page in order for the otnnews.xsl stylesheet to be applied:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="?>
<xsql:action xmlns:xsql="urn:oracle-xsql"
handler="oracle.xml.sample.xsql.portal.OTNNewsStub"/>

To implement the OTNNewsStub.java class, you need to use the Oracle SOAP implementation that is part of the XDK. The following are the code fragments. First, you need to initialize an HTTP connection:

public OTNNewsStub()
{
m_httpConnection = new OracleSOAPHTTPConnection();}

Next, you need to set up the connection session and properties:

public void setMaintainSession(boolean maintainSession)
{
m_httpConnection.setMaintainSession(maintainSession); }
public boolean getMaintainSession()
{
return m_httpConnection.getMaintainSession(); }
public void setTransportProperties(Properties props)
{
m_httpConnection.setProperties(props); }
public Properties getTransportProperties() 
{
return m_httpConnection.getProperties(); }

Then, you need to create the method to invoke the web service:

public void getRss(Node root)
{
String resultVal = null;
try
{
//Initialize the URL location of the service
URL endpointURL = new
URL("http://otn.oracle.com/ws/oracle.otn.ws.news.OTNNews");
//Build the call.
Call call = new Call();
//Associate connection with call
call.setSOAPTransport(m_httpConnection);
// configure the call (i.e. targetObjectURI, methodName, etc.)
call.setTargetObjectURI("oracle.otn.ws.news.OTNNews");
call.setMethodName("getRss");
call.setEncodingStyleURI(Constants.NS_URI_SOAP_ENC);
//Make the call
Response response = call.invoke(endpointURL, ");
if (!response.generatedFault())
{
Parameter result = response.getReturnValue();
resultVal = (String)result.getValue();
DOMParser p=new DOMParser();
p.parse(new ByteArrayInputStream(returnVal.getBytes()));
XMLDocument doc = p.getDocument();
appendCopyOfSecondaryDocument(root, doc);
// return doc.getDocumentElement();
}
else { … }
catch { … )

Finally, you need to connect up the XSQL plumbing to call the service and return the data:

public void handleAction(Node root)
{
//Initialize the returned data
String m_title=null;
String m_question=null;
String m_answer=null;
String m_category=null;
String m_language=null;
String m_path = null;
if(getPageRequest().getRequestType().equals("Servlet"))
{
// Get the XSQL Page Request
XSQLServletPageRequest xspr =
 (XSQLServletPageRequest)getPageRequest();
HttpServletRequest req = xspr.getHttpServletRequest();
// Call the Web Service
getRss(root); }
}

Upon invoking getRSS(), an
XML document is returned,
as shown in the following listing:

<rss version="0.91">
<channel>
<title>Oracle Technology News</title> 
<link>http://otn.oracle.com</link> 
<description>Oracle
 Technology News</description> 
<language>en-us</language> 
<copyright>Copyright 2002, 
Oracle Corporation. All rights reserved</copyright> 
<managingEditor>otn_us
@oracle.com</managingEditor> 
<webmaster>otn_us@oracle.com</webmaster> 
<textinput>
<title>Search OTN</title> 
<description>Enter your search terms</description> 
<name>keyword</name> 
<link>http://otn.oracle.com/ws/searchwrapper</link> 
</textinput>
<image>
<title>Oracle Technology Network</title> 
<url>http://otn.oracle.com/otn116x65_center.gif</url> 
<link>otn.oracle.com</link> 
<width>116</width> 
<height>65</height> 
<description>Developer news from Oracle
 Technology Network.</description> 
</image>
<item num="1">
<title>New Oracle Portal Development Kit (PDK)</title> 
<link>http://otn.oracle.com/products/iportal//image/library
/english/10158_pdk105ea/indexl</link> 
<description><a href="/products/iportal/index2?
Info&/products/iportal//image/library/english
/10158_pdk105ea/indexl">The Oracle Portal
Development Kit (PDK)</a> is the
 pre-eminent resource for developing
portlets. It contains utilities
 and articles that assist in every step
of portlet development. This release of 
the PDK illustrates how to extend
the <a href="/products/iportal/">
 Oracle Portal</a> and includes the
JPDK utilities for building
 portlets in Java.</description> 
</item>
...
</channel>
</rss>

For the purpose of this site, you are only interested in displaying the title and link for a subset of items. Therefore, a very simple stylesheet, otnnews.xsl, is all that is required:

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<top_topics>
<topic name="OTN News">
<link uri="{rss/channel/item[1]/link}"><xsl:value-of 
select="rss/channel/item[1]/title"/></link>
<link uri="{rss/channel/item[2]/link}"><xsl:value-of 
select="rss/channel/item[2]/title"/></link>
</topic>
</top_topics>
</xsl:template>
</xsl:stylesheet>

As you can see, this stylesheet retrieves the values of <title> and <link> of the first two items and creates a small XML document that is returned to the calling index.xsql page to be converted into HTML by the included topic.xsl that creates the Hot Topics area. These links are created in the same way as the News items previously discussed.

Creating the Static Areas

For the portal page, there are two areas that will be populated from XML files: the left-hand navigation bar, which is a constant across pages, and the Hot Links area, a set of links that is easy to update and maintain.

To retrieve XML from a file on the local system running the XSQL servlet, you simply use the <xsql:include-xml> element, as in the following example from index.xsql:

<nav>
<xsql:include-xml href="/>
</nav>
<link>
<xsql:include-xml href="/>
</link>

Each of these files contains <link> elements made up of the URI, descriptive text, and optional status, as follows:

<link status="new"
 uri="/xdkus/app_release/index.xsql?pagename=beta&amp;rel=beta">
XDK v10 Beta</link>

These links are transformed into HTML by associated stylesheets that extract each part. Here is a simple template section that performs this transformation:

<xsl:for-each select="link">
<tr bgcolor="#f7f7e7"> 
<td>
<img src="/xdkus//image/library/english/10158_r_arrow.gif" width="10" height="10"/>
<xsl:choose>
<xsl:when test="./@uri">
<a href=" class="navs">
<xsl:value-of select="./text()"/>
</a>
<xsl:if test="@status">
<img src="/image/library/english/10158_{@status}.gif"/> 
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="./@name"/>
</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:for-each>

Note that this template is conditional based upon finding a uri attribute in the link element and turning it into an HTML href using the link’s text value as the new HTML href text. As before, an image is optionally added based upon finding a status attribute. The <xsl:otherwise> element selects the value of the name attribute that could be used as subdivision text.