33 The Burlington Financial Sample Site
The Burlington Financial sample site demonstrates site design best practices using WebCenter Sites assets.
Content management can be highly abstract, especially when described in terms of assets, queries and templates. Burlington Financial helps you to understand what the end result of your application can be—a live, functioning website. Developers and content managers have immediate and easy access to the sample site's code and queries.
This chapter contains the following sections:
33.1 Overview of the Burlington Financial Sample Site
Burlington Financial is a fictitious financial news site. The site emphasizes navigation between sections, the site's hierarchy, how the site works with asset types, and a real-world look-and-feel. Burlington Financial also has about five hundred articles and over a hundred images, or enough real-world content to populate several sections.
Burlington Financial is a fully functional sample site with the following features:
-
Includes search, member login, printer-friendly articles, email to a friend, topic directory, and stylesheets
-
Demonstrates a hierarchy of website sections
-
Supports component caching and Satellite Server
-
Demonstrates the use of assets created with AssetMaker
-
Demonstrates the use of Flex Assets and Engage Segment Assets
-
Includes a meaningful amount of content
-
Approximates a real-world site that developers can learn from
The Burlington Financial home page is shown in the following figure:
Description of the illustration bf_home.gif
Burlington Financial takes advantage of cacheable pagelets. These individual pagelets can be cached and managed independently, giving developers greater performance and flexibility on the site.
It is recommended that you design your site using cacheable pagelets. For more information, see Chapter 5, "Page Design and Caching."
33.2 Navigation Features
The following three elements are used to display the primary navigation bars in Burlington Financial (which you can look at using Oracle WebCenter Sites Explorer).
This section contains the following topics:
-
Section 33.2.2, "BurlingtonFinancial/Site/LeftSideSiteBar.xml"
-
Section 33.2.3, "BurlingtonFinancial/Site/BottomNavFooter.xml"
33.2.1 BurlingtonFinancial/Site/TopSiteBar.xml
Description of the illustration bf_home_topsitebar.gif
This element draws the hyperlinks to the home page and its top-level children at the top of the page, just under the Burlington Financial logo.
It intentionally displays only the top-level children of the Home page, so that the row of hyperlinks does not wrap, breaking the design of the page. The Home page appears first and it is at the same level as its children.
33.2.2 BurlingtonFinancial/Site/LeftSideSiteBar.xml
Description of the illustration bf_home_leftsitebar.gif
This element draws a more detailed map of the major sections of the website and looks at the child and grandchild pages of the Home page. This element could be modified to go more than two levels deep, although the graphic design of the site limited the space available.
Notice that two other major pages are listed here that were not listed in the TopSiteBar; the Wire Feed and Columnists pages are independent of the Home page and its children, and are displayed separately.
33.2.3 BurlingtonFinancial/Site/BottomNavFooter.xml
Description of the illustration bf_bottomnavfooter.gif
This element draws the hyperlinks at the bottom of every page. Like LeftSideSiteBar, the BottomNavFooter element also includes links to pages that are not children of the Home page.
Note:
If you add another Page asset to the site, and it is not a descendant of the Home Page asset, then it will not automatically appear in any of the navigation bars used in Burlington Financial.
Although these navigation bars are computed dynamically, in a real-world website they would probably not change very often. For maximum performance, you could simply replace the dynamic code in the element with a static list of hard-coded links to the top-level pages. Later on, if you do need to change the site and add a new top-level section, you need only modify a few elements.
If you use dynamic navigation bar elements, you should set a long cache time-out for the navigation bar pagelets.
33.2.4 Breadcrumbs
This common feature in websites is a tiny map of the path to a particular item. In Burlington Financial, it is a conceptual path rather than the actual history of pages visited, and is located just under the top navigation bar:
Description of the illustration bf_breadcrumb.jpg
Because WebCenter Sites allows assets to be assigned to multiple parents at the same time, the same article can appear as a member of a collection on the Home page and on the News page at the same time. There is no way to identify the true parent of the article, so Burlington Financial passes the id of the parent Page anytime it draws a hyperlink to a child. That way, when the child asset draws itself, it already has the ID of the desired parent. This value is passed in the variable p.
Since our templates generate different HTML based on different values for p, those versions should be cached independently. So the variable p must be part of the page criteria variables listed in the page entry in the SiteCatalog for that template. Because this is such a common technique, WebCenter Sites automatically includes p in the list of page criteria variables for a Template asset's SiteCatalog page entry.
Sometimes you may want to override p and use a different parent asset. For example, the Burlington Financial Home page has links to articles by the following columnists:
Description of the illustration bf_columns.jpg
However, these articles don't belong conceptually to the Home page, rather, they belong to the Columnists page. So you can load and pass the ID of the Columnists Page asset as the parent for those hyperlinks. This way, when a visitor clicks on them, the breadcrumb identifies Columnists as the parent. This behavior is consistent with clicking on the Columnists link in the navigation bar, and then clicking on one of the articles there:
Description of the illustration bf_columnbreadcrumb.jpg
In other cases, it isn't immediately clear which asset should be the parent. For example, Burlington Financial treats the articles in the From the Wires box as belonging to the current page. Stories listed on the main Wire Feed section page belong to the Wire Feed section, and show Wire Feed as their parent.
33.3 Best Practices
The Burlington Financial sample site demonstrates WebCenter Sites best practices for several other important features found in real-world websites.
This section contains the following topics:
33.3.1 Searching
The database search code in Burlington Financial is very similar to the search code in the WebCenter Sites application itself. It works with dynamic delivery, but not with exported static HTML. In this case, you'll need a different search mechanism for indexing the static HTML files.
The BurlingtonFinancial/Util/SearchPost element uses SQL searching against the Article table, or it can use the search engine index if it is installed and enabled for the Article asset type. SQL searching is case-sensitive. Using a search engine would allow more sophisticated search capabilities, such as case-insensitive searching, word variants and word stemming.
33.3.2 Keywords
The Article asset type contains a field called keyword which lets editors associate specific terms with an Article for improved searching of the Article asset type. Burlington Financial Article assets have one or more keywords separated by commas, for example, Energy, Shell Oil, OPEC. Burlington Financial uses keywords to display lists of Hot Topics.
33.3.3 Hot Topics
Burlington Financial Hot Topics demonstrate one use of query assets.
On the left side of most pages, there is a list of Hot Topics for a particular section of the site. Hot topics are listed according to which section the visitor is viewing, as determined by the Page assets.
In the following example, the Hot Topics in the News section are Human Genome, History, Sanctions, Energy and California:
Description of the illustration bf_hottopics.jpg
The element BurlingtonFinancial/Common/LeftNavColumn includes the pagelet BurlingtonFinancial/Query/ShowHotTopics. This element receives the ID of a page asset, passed through the variable p. If it cannot find a value for p, it defaults to using the Home page. It loads that page asset and looks for the top stories collection associated with the page and loads it. The element then loops through each of the articles in the collection and builds a list of keywords, pulled from the keyword field of the article (multiple keywords for an article must be delimited by commas). After it has made a list of the keywords, the element loops over that list, listing each keyword as a hyperlink to a page that runs a query for that keyword, by rendering the query asset named HotTopics.
When visitors click a link, they are taken to a page that renders the query asset HotTopics, using the HotTopicFront template. The HotTopics query does a straight SQL match against articles that contain the selected keyword. The keyword search is not constrained in any way, it searches all articles in the Burlington Financial site, not just those in a particular section or category.
Each article returned by the HotTopics query inherits the parent ID of the page asset where the visitor first started looking at the keywords. Clicking on the Shell Oil story from the list of Energy stories under the News page causes the story to be displayed with News as its parent page. Clicking on the same Shell Oil story from the list of Energy stories under the World News page causes the story to be displayed with World News as its parent.
This design is not a problem in the dynamic live site; however it does cause duplicate files to be exported to a static delivery site.
33.3.4 Topic Directory
At the bottom of the left navigation column, and also in the navigation links at the bottom of each page, there is a hyperlink to the Topic Directory:
Description of the illustration bf_topics.jpg
This page consists of the Hot Topics pagelet for every section. Since the pagelet that is used here is also used in the left navigation column, it is displayed in the browser very quickly. Each topic inherits its parent page and passes it to the list of articles the query returns.
33.3.5 Related Stories
The query asset used for an article's Related Stories list is similar to the previously described HotTopics query, but instead of getting the keywords from another page, it gets the keyword from the article that the query is associated to. The Article template Full includes the Related Stories pagelet, and passes the Article's first keyword to the query asset. When the Related Stories query is executed, it looks for other articles with the same keyword.
For example, from the Home page, click on the Hot Topic Microsoft and choose the story Microsoft launches worldwide campaign against counterfeit software. This article (cid=984156689788) has the world Microsoft in its keyword field. It also has the Related Keyword query associated with it. When this Query is executed during rendering, the SQL looks up five other Articles with the term Microsoft in their keyword field. The query is designed to exclude the article that it is associated with, so you don't see the Microsoft Campaigns Against Counterfeit Software subheadline in the Related Stories.
In a dynamic environment, the list of articles returned by this query can change as articles are added to the site.
33.3.6 Text-Only Versions
Creating a text-only version of a web page (for printing it) is very easy to implement with WebCenter Sites. Using the WebCenter Sites rendering model, you can override a template that displays a given asset just by changing the page name used to render it. You do not need to pass the override template as a separate parameter. Creating a printer-friendly version of a page is simply a matter of adding a hyperlink that uses the plain-text version of the appropriate template.
For example, if you are pointing to an article:
http://myserver/servlet/ContentServer?pagename=BurlingtonFinancial/Article/Full&cid=987654321
You can change to the text-only version of the page by pointing to the text version of the template:
http://myserver/servlet/ContentServer?pagename=BurlingtonFinancial/Article/FullText&cid=987654321
Burlington Financial uses the convention of adding Text to the end of a Template asset name to indicate different styles of templates and elements. Some examples:
-
Web format:
BurlingtonFinancial/Article/Summary -
Plain text:
BurlingtonFinancial/Article/SummaryText -
Web format:
BurlingtonFinancial/Page/SectionFront -
Plain text:
BurlingtonFinancial/Page/SectionFrontText
33.3.7 Plain Text Parallel Site
In most websites, the text-only pages have hyperlinks that take you back to the full web format pages. Or there are simply no navigable links on the printer friendly page. Burlington Financial's templates, though, are designed to show the visitor an entire plain text version of the site.
After you switch to the plain text version, you can continue to navigate around the plain text pages. However, not every single page in the Burlington Financial site is represented in the plain text version of the site. And the plain text pages do not have all the same content or hyperlinks as their graphics-rich versions. This was done intentionally, as a plain-text visitor would probably prefer a less complex version of a site. Extending Burlington Financial to include other parallel styles (WAP templates, WebTV, PDF, XML) would be very straightforward.
33.3.8 Email This Story
Another very common feature on websites is the ability to email a story. This feature is relatively straightforward in Burlington Financial.
Note:
Before you can email users, you have to configure WebCenter Sites and Content Centre to use the email feature.
First, in the futuretense.ini file, set these two properties:
cs.emailreturnto=<your email address> cs.emailhost=po-1.example.com (or the emailhost is)
Second, set this property in futuretense_xcel.ini:
xcelerate.emailnotification=true
The BurlingtonFinancial/Util/EmailFront and BurlingtonFinancial/Util/EmailPost elements call the article pagelet BurlingtonFinancial/Article/Summary to display the story in summary form. A more robust version of this code would check to make sure that the visitor entered a valid email address before submitting the form. A real site would also keep records of which stories have been emailed, the sender's email address, and the recipient's email address.
33.3.9 AssetMaker Asset Types
AssetMaker is a WebCenter Sites utility for constructing basic asset types. Two sample AssetMaker asset types are included in Burlington Financial: ImageFile and Stylesheet. These asset types use standard elements from AssetMaker without modification. Both have file upload fields for storing files in the database.
Burlington Financial includes JavaScript at the top of every page to do client-side browser detection and then load one of four corresponding Stylesheet assets. The element BurlingtonFinancial/Common/SetHTMLHeader, called at the top of each full-page template, uses the WebCenter Sites element GetBlobURL to get four different BlobServer URLs, one for each of the four different Stylesheet assets used by Burlington Financial. The actual .css file from the Stylesheet asset is served via the BlobServer, even though it isn't binary data.
33.3.10 Mimetype
Both the imagefile and stylesheet asset types are served to the browser using the BlobServer servlet. To ensure that the browser knows how to handle arbitrary chunks of content, a mimetype code is saved and passed to the browser. WebCenter Sites includes a MimeType table for storing these codes.
The AssetMaker also allows asset types to define their own mimetype fields. Both the ImageFile and Stylesheet asset types include mimetype fields as part of their asset descriptor files. You can add your own mimetype codes and extensions to the MimeType table using Oracle WebCenter Sites Explorer or some other database tool.
33.3.11 Collections of Collections
The collection asset type is how WebCenter Sites arranges content into manageable groups. Burlington Financial also demonstrates the use of a collection whose child asset type is a collection. This allows editors to easily rearrange groups of content on a web page simply by re-ranking a collection. These sub-collections can be used to build a library of favorite stories, breaking news, hot topics, etc.
In Burlington Financial, a named asset association called "HomeStoryGroups" was created from the page asset type to the collection asset type. The page template SectionFront looks for a collection in the StoryGroups slot. It forces the collection to be displayed using the BurlingtonFinancial/Collection/StoryGroups template:
<ASSET.CHILDREN NAME="SectionFrontPage" LIST="StoryGroups" CODE="HomeStoryGroups"/
<IF COND="IsList.StoryGroups=true"
<THEN
<RENDER.SATELLITEPAGE PAGENAME="BurlingtonFinancial/Collection/StoryGroups"
ARGS_cid="StoryGroups.oid"
ARGS_p="Variables.asset:id"/
</THEN
</IF
The StoryGroups template then loops over each collection in the asset:
<LOOP LIST="theGroups"
<RENDER.SATELLITEPAGE PAGENAME="BurlingtonFinancial/Collection/PlainList"
ARGS_cid="theGroups.oid"
ARGS_p="Variables.p"/
<img src="/futuretense_cs/bf/images/dot_rule_125.gif" width="125" height="1"/<P/
</LOOP
This can be seen on the news page. There is a collection called NewsGroup that is associated with the news page. This collection contains one child collection, called Energy List, which itself contains three articles. This lets an editor add or remove items from the News page by re-ranking the NewsGroup collection.
33.3.12 Membership
The Burlington Financial sample site includes a membership component that has elements to sign up new members and log in existing members. These visitor registration elements are not robust enough for use on a real-world website, but can give you a starting point for your own designs. For example, Burlington Financial has sample visitor account screens, allowing visitors to register and set their own preferences, but does not use this information to restrict visitor access to certain web pages, or to make recommendations based on a member's profile.
For more information about visitor registration in Burlington Financial and about security in general, see Chapter 31, "User Management on the Delivery System."
33.3.13 Wire Feed
Both the home page template and the section front page template include a list of stories called From the Wires. This represents content that flows automatically onto the site. Large sites often subscribe to wire feed services or other content aggregators. Stories from these sources are moved onto a site with little human intervention.
Each of the page assets that make up the major sections of Burlington Financial are associated with a query asset. For the wire feed section, this query asset contains a query to look for article assets whose source field is set to WireFeed. The queries also look at the category field of each article. Each section in Burlington Financial contains certain categories of stories, so the wire feed queries try to match those categories.
The page asset named WireFeed contains a query to return wire feed stories regardless of their category.
33.3.14 Featured Funds
The fund section front page template includes a list of funds called Featured Funds. This list contains funds that are selected using a Engage segment asset. Segment assets divide visitors into groups based on common characteristics.
You build a segment asset by first creating visitor data assets. A visitor data asset stores a single piece of information about visitors to the website; a zip code, for example. Segments are built by selecting visitor data assets to base them on, and then setting qualifying values for those criteria. For example, you can create a zip code segment that uses the value in the zip code visitor data asset to display advertisements for local businesses.
The Featured Funds list displays funds based upon whether the website visitor belongs to the BFfrequentvisitor segment or the Highriskinvestor segment.
33.3.15 Fund Finder
Fund Finder is a form that lets you search for funds based on the criteria that you select. Some of the Fund Finder form drop-downs are hard-coded into the form; the Fund Families that the form searches, however, are listed dynamically, using the concept of assetsets and searchstates.
A searchstate is a set of search constraints based on the attribute values
<SEARCHSTATE.CREATE NAME="ss"/> <ASSETSET.SETSEARCHEDASSETS NAME="as" ASSETTYPES="ProductGroups" CONSTRAINT="ss"/> <ASSETSET.GETATTRIBUTEVALUES NAME="as" TYPENAME="PAttributes" ATTRIBUTE="FundFamily" LISTVARNAME="fflist"/> <P> <SELECT name="FundFamily" SIZE="3" MULTIPLE="1"> <OPTION SELECTED="" VALUE="NoPreference"/>No Preference <LOOP LIST="fflist"><OPTION/><csvar NAME="fflist.value"/> </LOOP> </SELECT> </P>
33.3.16 Page Cache Parameters
By default, WebCenter Sites sets the cacheinfo property to cs.pgcachefolder,* for any SiteCatalog page entries that it creates when a you save a Template asset. However, there are times when you may not want pages to be cached.
Pages like BurlingtonFinancial/Util/LoginPost and BurlingtonFinancial/Page/AccountAccess are specifically set to cs.nevercache. This is necessary since they are visitor-specific, and you don't want one visitor to see another visitor's cached page results. Real customer sites need cache fine tuning for their pages.
WebCenter Sites has a set of default page criteria for creating SiteCatalog entries. You can also add additional page criteria variables, but the defaults should not be removed. For more information about caching and page criteria, see Chapter 5, "Page Design and Caching."