32 The HelloAssetWorld Sample Site
The HelloAssetWorld sample site is a sample website built using WebCenter Sites. It is meant to provide a simple entry point into the process of building a website with WebCenter Sites. This chapter focuses on the steps that a developer would take in creating this simple website; further information on HelloAssetWorld's configuration and users are in the Oracle Fusion Middleware WebCenter Sites Administrator's Guide.
This chapter contains the following sections:
32.1 Overview of the HelloAssetWorld Sample Site
The HelloAssetWorld site has a simple design; it is composed of one page, as shown in the following screen capture:
Description of the illustration helloworld.gif
The stories that appear on this web page change depending upon the article that you choose to view, but the layout of the page remains the same.
To view the HelloAssetWorld sample site yourself, enter the following URL into your web browser:
http://server_name/servlet/ContentServer?pagename=HelloAssetWorld/Page/HelloPageTemplate
This section contains the following topics:
32.1.1 HelloAssetWorld Templates
The HelloAsset World web page is composed of three templates:
-
The HelloArticle template, which displays the article that you select and that article's associated image.
-
The HelloCollection template, which displays hyperlinks to a collection of articles that you can view.
-
The HelloPage template, which is the containing page. It displays the HelloAssetWorld banner graphic and calls the HelloArticle and Hello Collection templates.
32.1.2 HelloAssetWorld Asset Types
The asset types used in the HelloAssetWorld site are modified from asset types used in the Burlington Financial sample site, described in Chapter 33, "The Burlington Financial Sample Site" A list of the asset types used in HelloAssetWorld follows:
-
The Page asset type, which performs several functions:
-
It allows uses to create a site hierarchy by placing the page. Placing a page gives it an entry in the SitePlanTree table and allows it to be viewed under the Placed Pages node of the Site Plan Tree.
-
It lets you associate assets of various types with it. For example, you can associate Collection assets and Article assets with a Page asset.
The instance of the Page asset type used in the HelloAssetWorld site, HelloPage, has a collection called HelloCollectionHello associated with it. The Page asset type is a core asset type which is provided with WebCenter Sites, and has not been modified.
-
-
The HelloArticle asset type, which contains an article. HelloArticle assets can have HelloImage assets associated with them. The HelloArticle asset type has been modified from the Article asset type that is provided with Burlington Financial.
-
The HelloImage asset type, which contains an image. The HelloImage asset type has been modified from the ImageFile asset type that is provided with Burlington Financial.
-
The Query asset type, which queries the database and returns the HelloArticle assets that display on the website. This is a core asset type, which is provided with WebCenter Sites and has not been modified.
-
The Collection asset type, which orders the results that the query asset returns. This is a core asset type, which is provided with WebCenter Sites and has not been modified.
-
The Template asset type, which renders the various asset types. This is a core asset type, which is provided with WebCenter Sites and has not been modified.
32.2 Modified Asset Types
Most of the asset types used in the HelloAssetWorld sample site are core asset types, and hence cannot be modified. The HelloArticle and HelloImage asset types, however, are simplified versions of the Article and ImageFile asset types that are provided with
WebCenter Sites. Each asset type has a new asset descriptor file that is based on the asset descriptor files for the Article and ImageFile asset types. The simplified asset descriptor files are shown in the following sections.
This section contains the following topics:
32.2.1 The HelloArticle Asset Type
The ASSET tag, shown in the following code, is the standard opening for all asset descriptor files. Among other things, it names the new asset type and specifies the asset's DEFDIR, the default directory where uploaded items are stored.
<ASSET NAME="HelloArticle" DESCRIPTION="HelloArticle" MARKERIMAGE="/Xcelerate/data/help16.gif" PROCESSOR="4.0" DEFDIR="c:\FutureTense\Storage\HelloArticle">
The next code section create a text field for the article's headline.
<PROPERTIES> <PROPERTY NAME="Headline" DESCRIPTION="Headline"> <STORAGE TYPE="VARCHAR" LENGTH="255" /> <INPUTFORM TYPE="TEXT" WIDTH="48" MAXLENGTH="255" REQUIRED="YES" /> <SEARCHFORM DESCRIPTION="Headline contains" TYPE="TEXT" WIDTH="48" MAXLENGTH="255" /> </PROPERTY>
The next code section create a text field for the article's byline.
<PROPERTY NAME="Byline" DESCRIPTION="Byline"> <STORAGE TYPE="VARCHAR" LENGTH="100" /> <INPUTFORM TYPE="TEXT" WIDTH="48" MAXLENGTH="100" REQUIRED="YES" /> <SEARCHFORM DESCRIPTION="Byline contains" TYPE="TEXT" WIDTH="48" MAXLENGTH="100" /> </PROPERTY>
The following code create an upload field where content editors and authors can type in the content of an article's body. This content will be stored in the DEFDIR specified in the ASSET tag.
<PROPERTY NAME="urlBody" DESCRIPTION="Body"> <STORAGE TYPE="VARCHAR" LENGTH="2000" /> <INPUTFORM TYPE="TEXTAREA" COLS="300" ROWS="300" REQUIRED="YES" /> </PROPERTY> </PROPERTIES> </ASSET>
32.2.2 The HelloImage Asset Type
The ASSET tag, shown below, is the standard opening for all asset descriptor files. Among other things, it names the new asset type and specifies the asset's DEFDIR, the default directory where uploaded items are stored.
<ASSET NAME="HelloImage" DESCRIPTION="HelloImage" MARKERTEXT="*" PROCESSOR="4.0" DEFDIR="c:\FutureTense\Storage\HelloImage">
Then, the next code section creates an upload field for the image file.
<PROPERTIES> <PROPERTY NAME="urlfile" DESCRIPTION="Image File"> <STORAGE TYPE="VARCHAR" LENGTH="255"/> <INPUTFORM TYPE="UPLOAD" WIDTH="36" REQUIRED="NO" LINKTEXT="HelloImage"/> </PROPERTY>
The following code creates a drop-down select and specifies how the search field for mimetypes will appear on the Advanced Search form. The SQL statement supplied as a value for the SQL parameter for the INPUTFORM tag queries the database to supply mimetypes for the text of the drop-down.
<PROPERTY NAME="mimetype" DESCRIPTION="Mimetype"> <STORAGE TYPE="VARCHAR" LENGTH="36"/> <INPUTFORM TYPE="SELECT" SOURCETYPE="TABLE" TABLENAME="mimetype" OPTIONDESCKEY="description" OPTIONVALUEKEY="mimetype" SQL="SELECT mimetype, description FROM mimetype WHERE keyword = 'image' AND isdefault = 'y'" INSTRUCTION="Add more options to mimetype table with isdefault=y and keyword=image"/>
The next code section specifies how the mimetype field will appear on the Advanced Search form. As shown above, the SQL supplied here queries the database for mimetypes to fill the drop-down select with.
<SEARCHFORM DESCRIPTION="Mimetype" TYPE="SELECT" SOURCETYPE="TABLE" TABLENAME="mimetype" OPTIONDESCKEY="description" OPTIONVALUEKEY="mimetype" SQL="SELECT mimetype, description FROM mimetype WHERE keyword = 'image' AND isdefault = 'y'"/> </PROPERTY>
The following code create a text field that allows users of the management system to input alternate text for the image. The SEARCHFORM tag specifies how the Alt Text contains field will appear on the Advanced Search form.
<PROPERTY NAME="alttext" DESCRIPTION="Alt Text"> <STORAGE TYPE="VARCHAR" LENGTH="255"/> <INPUTFORM TYPE="TEXT" WIDTH="48" MAXLENGTH="255" REQUIRED="NO"/> <SEARCHFORM DESCRIPTION="Alt Text contains" TYPE="TEXT" WIDTH="48" MAXLENGTH="255"/> </PROPERTY> </PROPERTIES> </ASSET>
32.3 HelloAssetWorld Templates
The HelloAssetWorld sample site uses three Template assets to render the assets that were described previously. The following sections describe these Template assets.
This section contains the following topics:
32.3.1 The HelloArticle Template
The HelloArticleTemplate renders HelloArticle assets. The template uses the following variables:
Table 32-1 HelloArticle Template
| Variable | Value | Source |
|---|---|---|
|
|
The current template's ID. |
The |
|
|
The type of content that the template displays. |
The |
|
|
The ID of the asset to load. |
The |
|
|
The object ID of a HelloImage asset that is associated with the HelloArticle asset. |
The |
|
|
The alternate text for the associated |
The picture:alttext variable is obtained by loading the current HelloArticle asset and using the ASSET.CHILDREN tag to find information on associated HelloImage assets. |
|
|
The mimetype of the associated HelloImage asset. |
The |
|
|
The value in the Headline field of this HelloArticle asset. |
The |
|
|
The value in the Byline field of this HelloArticle asset. |
The |
|
|
The ID of the article to display in the HelloArticle template. |
On the first page view, this is set in the |
The following code is the standard beginning for an article template. They appear when you click the XML or JSP buttons on the New Template form in the WebCenter Sites user interface.
<?xml version="1.0" ?> <!DOCTYPE FTCS SYSTEM "futuretense_cs.dtd"> <FTCS Version="1.1"> <!-- HelloArticle/HelloArticleTemplate - - INPUT - - OUTPUT - -->
The RENDER.LOGDEP tag marks the template as a cache dependency item. This means that when the template is modified, any outdated copies of the template will be removed from the WebCenter Sites and Satellite Server caches and replaced with current versions automatically.
<IF COND="IsVariable.tid=true"> <THEN> <RENDER.LOGDEP cid="Variables.tid" c="Template"/> </THEN> </IF> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td>
The following ASSET.LOAD tag loads a HelloArticle asset using the asset's ID, which is stored in Variables.cid. This value is passed in to the HelloArticle template by the HelloPage template.
<!-- asset load will mark the asset as an 'exact' dependent of the pagelet being rendered --> <ASSET.LOAD NAME="helloArticleAsset" TYPE="Variables.c" OBJECTID="Variables.cid"/>
The next code section uses the ASSET.CHILDREN tag to load any HelloImage assets that are associated with the article. ASSET.CHILDREN creates a list which contains the information necessary to display the HelloImage asset.
<ASSET.CHILDREN NAME="helloArticleAsset" LIST="picture" TYPE="HelloImage"/>
This code checks to see if there is a HelloImage asset associated with the current article. If there is no associated HelloImage asset, the template only displays the text of the article.
<!--Check to see if the list (which contains information to display an image) exists--if the list doesn't exist, display the article text only. --> <IF COND="IsList.picture=true"> <THEN> <!--Log the image as a dependency.--> <RENDER.LOGDEP cid="picture.oid" c="HelloImage"/>
This code uses the RENDER.SATELLITEBLOB tag to display the associated image.
<!--Display the image.--> <RENDER.SATELLITEBLOB BLOBTABLE="HelloImage" BLOBKEY="id" BLOBCOL="urlfile" BLOBWHERE="picture.oid" BLOBHEADER="picture.mimetype" SERVICE="IMG SRC" ARGS_ALT="picture.alttext" ARGS_ALIGN="left"/> </THEN> </IF> </td> </tr> <tr> <td>
Then this ASSET.SCATTER tag gets all of the HelloArticle asset's primary fields.
<!-- get all the primary table fields of the asset --> <ASSET.SCATTER NAME="helloArticleAsset" PREFIX="asset"/>
The following CSVAR tag displays the contents of the asset's fields.
<!-- display the headline--> <h3><CSVAR NAME="Variables.asset:headline"/></h3> </td> </tr> <tr> <td> <CSVAR NAME="Variables.asset:byline"/> </td> </tr> <tr> <td>
Because the Body field may contain an embedded link, it must be retrieved using the ics.getvar tag and displayed using the RENDER.STREAM tag, as shown in the following code:
<!-- display the body--> <ics.getvar name="asset:urlbody" encoding="default" output="bodyvar"/> <RENDER.STREAM VARIABLE="bodyvar" /><br/> </td></tr> </table> </FTCS>
32.3.2 The HelloCollection Template
The collection template displays the HelloCollectionHello collection. It uses the following variables:
Table 32-2 HelloCollection Template
| Variable | Value | Source |
|---|---|---|
|
|
The current template's ID. |
The |
|
|
The type of content that the template displays. |
The |
|
|
The ID of the asset to load. |
The |
|
|
The current template's ID. |
The |
|
|
The ID of the page that generates the hyperlink. In this case, the current template. |
n/a |
|
|
The ID of the current HelloArticle in the collection. |
n/a |
|
|
The name of the current HelloArticle in the collection. |
n/a |
|
|
The |
If the current article in the list is not the article being displayed by the HelloArticle template, then a URL is generated to create a hyperlink to that article. The URL is created by the |
|
|
The ID of the HelloPage asset. |
n/a |
|
|
The URL generated by the |
n/a |
<IF COND="IsVariable.tid=true"> <THEN> <RENDER.LOGDEP cid="Variables.tid" c="Template"/> </THEN> </IF>
The following ASSET.LOAD tag loads the HelloCollectionHello asset, based upon the value of its ID, contained in Variables.cid. Variables.cid is passed in by the HelloPage template. ASSET.LOAD also names the asset HelloCollection. This does not change the name of the asset in the database; rather it sets the name which the rest of the code in the template uses to refer to the collection asset.
<ASSET.LOAD NAME="HelloCollection" TYPE="Collection" OBJECTID="Variables.cid"/> <ASSET.SCATTER NAME="HelloCollection" PREFIX="asset"/>
Then the following ASSET.CHILDREN tag loads a list containing the HelloArticles that compose the collection.
<ASSET.CHILDREN NAME="HelloCollection" LIST="theArticles" OBJECTTYPE="HelloArticle"/>
The next codes section uses the RENDER.FILTER tag to filter out articles that are not approved for Export to Disk Publishing. This allows the template to be used for both Mirror Publishing and Export to Disk Publishing.
<!--Filter out assets which aren't approved for export to disk publishing.--> <RENDER.FILTER LIST="theArticles"LISTVARNAME="ApprovedArticles" LISTIDCOL="oid"/>
In the following code, the LOOP tag loops through the list of approved article and the RENDER.LOGDEP tag logs each item in the list as a cache dependency.
<LOOP LIST="ApprovedArticles"> <RENDER.LOGDEP cid="ApprovedArticles.id" c="Article"/>
The following code uses an IF tag to check whether the current article in the list is the article being displayed by the HelloArticle template. The ID of the article being displayed by the HelloArticle template is contained in Variables.artID. This variable is passed in by the HelloPage template. If the article IDs are the same, the name of the article is displayed in bold text and is not a hyperlink.
<IF COND="Variables.artID=ApprovedArticles.id"> <THEN> <B><CSVAR NAME="ApprovedArticles.name"/></B><P/> </THEN>
If the current article in the list is not the article being displayed by the HelloArticle template, then a URL is generated to create a hyperlink to that article. The URL is created by the RENDER.GETPAGEURL tag in the following code. The RENDER.GETPAGEURL tag appends the artID variable to the URL that it creates. This variable contains the ID of the article to display.
<ELSE> <RENDER.GETPAGEURL PAGENAME="HelloAssetWorld/Page/HelloPageTemplate" cid="Variables.pageID" c="Page" p="Variables.p" OUTSTR="referURL" ARGS_artID="ApprovedArticles.id"/>
The code example below displays the hyperlink. The REPLACEALL argument evaluates Variables.referURL, which contains the URL for the hyperlink. The CSVAR tag, shown below, displays the name of the article that the hyperlink links to.
<A HREF="Variables.referURL" REPLACEALL="Variables.referURL"> <CSVAR NAME="ApprovedArticles.name"/> </A><P/> </ELSE> </IF> </LOOP> </FTCS>
32.3.3 The HelloPage Template
The HelloPage template acts as a containing page. It renders the HelloPage asset, displays a header graphic, and calls the HelloCollection and HelloArticle templates, creating the finished page layout.
The HelloPage template uses the following variables:
| Variable | Value | Source |
|---|---|---|
|
|
The current template's ID. |
The |
|
|
The type of content that the template displays. |
The |
|
|
The ID of the asset to load. |
The cid variable is set in the |
|
|
The ID of the TopImage ImageFile asset. |
The |
|
|
The alternate text for the TopImage asset. |
The |
|
|
The mimetype of the TopImage asset |
The |
|
|
The ID of the Page asset that this template renders. |
The |
|
|
The ID of the HelloCollectionHello collection, to be passed to the HelloCollection template for display. |
The collection, and hence its ID, are associated with the Page asset. |
|
|
The ID of the article to display in the HelloArticle template. |
On the first page view, this is set in the |
The code for the HelloPage template follows, along with a description of what it does:
<IF COND="IsVariable.tid=true"> <THEN> <RENDER.LOGDEP cid="Variables.tid" c="Template"/> </THEN> </IF> <!--Table for formatting--> <table border="1" cellpadding="5" cellspacing="5"> <tr> <td colspan="2">
This code loads a HelloImage asset and display that asset using the RENDER.SATELLITEBLOB tag.
<!--Embedded Image Asset--> <!-- The following two lines of code load the image file and scatter the information in its fields. --> <ASSET.LOAD NAME="TopImage" TYPE="HelloImage" OBJECTID="1024605735822"/> <ASSET.SCATTER NAME="TopImage" PREFIX="topImg"/> <!-- This code creates a URL to display the image file.--> <RENDER.SATELLITEBLOB BLOBTABLE="HelloImage" BLOBKEY="id" BLOBCOL="urlfile" BLOBWHERE="Variables.topImg:id" BLOBHEADER="Variables.topImg:mimetype" SERVICE="IMG SRC" ARGS_alt="Variables.topImg:alttext" ARGS_WIDTH="600" ARGS_HEIGHT="90"/> </td> </tr> <tr> <td>
Next, the code loads the HelloPage asset based on the value of Variables.cid, which is set in the resargs1 field of the template's SiteCatalog entry.
<!-- This loads the HelloPage asset and names it HelloPage. -->
<ASSET.LOAD NAME="HelloPage" TYPE="Variables.c" OBJECTID="Variables.cid"/>
<!-- This scatters the fields of the HelloPage asset for use later in the element. -->
<ASSET.SCATTER NAME="HelloPage" PREFIX="asset"/>
<!-- This finds the collection asset associated with the HelloPage asset and puts the information the collection into a list. -->
<ASSET.CHILDREN NAME="HelloPage" LIST="theCollection" />
<RENDER.LOGDEP C="Collection" CID="theCollection.oid"/>
<!-- This checks to see whether ASSET.CHILDREN really generated a list. -->
<IF COND = "IsList.theCollection=true">
<THEN>
<!-- This displays the HelloCollectionTemplate template and passes the template the ID of the collection to display and the ID of the current page. -->
<RENDER.SATELLITEPAGE PAGENAME="HelloAssetWorld/Collection/HelloCollectionTemplate" ARGS_cid="theCollection.oid" ARGS_p="Variables.asset:id" ARGS_artID="Variables.artID"/>
</THEN>
</IF>
</td>
<td>
<!-- This displays the HelloArticleTemplate template and passes the template the ID of the article to display and the ID of the current page. The artID variable is passed in by the URL.-->
<RENDER.SATELLITEPAGE PAGENAME="HelloAssetWorld/HelloArticle/HelloArticleTemplate" ARGS_cid="Variables.artID" ARGS_p="Variables.asset:ID"/>
</td>
</tr>
</table>
</FTCS>
32.4 The HelloQuery Asset
The HelloAssetWorld site uses a query asset named HelloQuery to retrieve HelloArticles from the database. A content provider then creates and builds a collection, ranking the items that the HelloQuery asset returns in the order that they will be displayed.