4 Building a Site Studio Web Site Tutorial

This section describes the steps for creating a Site Studio web site in the JDeveloper environment. This tutorial demonstrates how to create a simple web site with navigation. It covers the following topics:

4.1 Creating a Site Studio Project and Connection

These are the steps for creating a Site Studio project and content server connection:

4.1.1 Creating a New Application and Project

Follow these steps to create a new application and new site studio project:

  1. From the JDeveloper main menu, select File, and then New.

  2. In the New Gallery dialog, expand the General category and click Applications.

  3. From the Items list, select Generic Application.

  4. Click OK.

  5. In the Name Your Application step:

    • For Application Name, enter SiteStudioDemo.

    • For Application Package Prefix, enter demo.SiteStudioDemo.

  6. Click Next.

  7. In the Name Your Project step:

    • For Project Name, enter SiteStudioDemo.

    • For Available Technologies, select Site Studio Technology and click the shuttle button to transfer the selection to the Selected Technologies list.

      If you intend to deploy this Site Studio project to a WebSphere application server, you must also select ADF Library Web Application Support and click the shuttle button to transfer the selection to the Selected Technologies list.

  8. Click Finish.

  9. From the JDeveloper main menu, select File, and then Save All.

4.1.2 Creating a Content Server Connection

Follow these steps to create a connection to the content server and add it to your Site Studio project:

  1. If the Application Navigator is not already open, select View, and then Application Navigator.

  2. Select the Application Resources panel.

  3. Right-click Connections, select New Connection, and then Site Studio.

  4. In the Create Content Server Connection dialog:

    • Enable the Application Resources option (if not already selected).

    • For Connection Name, enter the hostname of your content server (for example, developmentserver2 or developmentserver2.mycompany.com).

    • The Design Time URL field is auto-filled based on the connection name you provided. If you are not using default settings on your server you may need to edit this field.

    • The Run Time URL field is auto-filled based on the connection name you provided. If you are not using default settings on your server you may need to edit this field.

    • Enable the Specify Credentials for this JDeveloper Session option.

    • For Username, enter your content server administrative username.

    • For Password, enter your content server administrative password.

  5. Click Test Connection and Login.

    If the connection fails, verify that you have the correct connection name and URL for the content server and have supplied valid login credentials.

  6. Click OK.

4.1.3 Adding the Connection to the Project

Follow these steps to add a content server connection to your Site Studio project.

  1. In the Application Navigator, select the Applications Resources panel.

  2. Expand Connections, and then expand Site Studio.

  3. Right-click the new content server connection, and select Add to Project.

  4. In the Select Project dialog, select SiteStudioDemo.jpr from the list.

  5. Click OK.

  6. From the JDeveloper main menu, select File and then Save All.

4.2 Creating a Sample Web Site

These are the steps for creating a sample web site:

4.2.1 Creating a New Web Site in the Content Server

Follow these steps to create a new web site in the content server.

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Web Content, and then expand WEB-INF.

  4. Right-click wcm-config.xml and select Open.

  5. Select the Server tab, and then expand Sites.

  6. Click the Create button.

  7. In the Create New Site dialog, enter SiteStudioDemo for both Name and ID fields.

  8. Click OK.

  9. From the main menu, select File and then Save All.

4.2.2 Specifying User Credentials for Contribution Mode

Follow these steps to specify user credentials for contribution mode:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Web Content, and then expand WEB-INF.

  4. Right-click weblogic.xml and select Open.

  5. Select Security and expand Security Role Assignments.

  6. Click the Create button.

  7. For Role Name, enter WCMContributor.

  8. In the Principals section, click the Create button.

    For the newly created security role name add a principal (a user) that matches a principal that exists in your content server. For this tutorial we will use the weblogic principal.

  9. For Principal Name, enter weblogic.

  10. From the main menu, select File and then Save All.

4.2.3 Editing the Web Application Deployment Descriptor

Follow these steps to edit the web application to process JSPF files:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Web Content, and then expand WEB-INF.

  4. Right-click web.xml and select Open.

  5. Select Pages and expand JSP Property Groups.

  6. Click the Create button.

  7. In the new JSP Property Group, select the General tab:

    • For Display Name, enter Fragments.

    • For Page Encoding, enter UTF-8.

    • Enable the Is XML option.

  8. Select the URL Patterns tab.

  9. Click the Create button.

  10. Enter *.jspf as a new URL pattern.

  11. From the main menu, select File, and then Save All.

Note:

To set the Environment Encoding to UTF-8, select Tools and then Preferences from the main menu.

4.2.4 Creating the Home Page

Follow these steps to create a simple home page for your application:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Site Files, and then expand templates.

  4. Right-click page and select New.

  5. In the New Gallery dialog, expand Web Tier and select JSP.

  6. From the Items list, select JSP.

  7. Click OK.

  8. In the Create JSP dialog:

    • For File Name, enter home.jspx.

    • Enable the Create as XML Document option.

    • Enable the Register Site File option.

    • For Asset Type, select Page Template from the list.

    • For Site File ID, enter ssd-home-pt.

    • For Description, enter Homepage for SiteStudioDemo site.

    • Click OK.

    Note:

    This tutorial uses JSPX templates stored locally (typically, in a subdirectory within your project on JDeveloper). For additional information on creating and editing JSPX templates see Section 1.10, "Understanding Site Studio JSP/JSPX Templates".
  9. After the new page template opens in the editor, select the Source tab.

  10. This tutorial assumes your default encoding is set to UTF-8,. If you have a different encoding, edit the encoding and charset entries as needed or replace the entries with this code:

    <?xml version='1.0' encoding='UTF-8'?>
      <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
      <jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
        doctype-system="http://www.w3.org/TR/html4/loose.dtd"
        doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    

    In the <head> section:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
  11. Add your style sheet to the <head> section.

    Note:

    You can complete this tutorial without using a style sheet or you can (optionally) add a style sheet to the site at a later time.

    For example:

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>SiteStudioDemo</title>
      <link type="text/css" rel="stylesheet"
        href="../wcm/css/template.css"/>
    </head>
    

    Note:

    This is an example only. You must provide the correct subdirectory and name of your style sheet. For example, href="../styles/basicstyle4.css".

    The SiteStudioDemo site uses a header, menu, sidebar, and footer (JSP Segments). You can use an existing CSS file, create a new style sheet, or copy the sample style sheet provided with this tutorial. See Section 4.5, "Adding a Style Sheet" for more information.

  12. Replace the <body> section with this code:

    Note:

    This code includes references to four JSPF files. These JSP Segments will be created later in this tutorial.
    <body>
    <jsp:include page="/wcm/templates/fragments/header.jspf"/>
      <div id="container">
        <jsp:include page="/wcm/templates/fragments/menu.jspf"/>
        <jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
        <!-- add content here -->
        <jsp:include page="/wcm/templates/fragments/footer.jspf"/>
      </div>
    </body>
    
  13. From the main menu, select File and then Save All.

4.2.5 Associating the Page Template with the Site

Follow these steps to associate the newly created home.jspx page template with your SiteStudioDemo site.

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Web Content, then WEB-INF, and then sites.

  4. Right-click SiteStudioDemo.xml and select Open.

  5. In the Site Structure editor, right-click Home and choose Select Primary Page Template.

  6. Select ssd-home-pt and click OK.

  7. From the main menu, select File and then Save All.

4.2.6 Running the Site and Viewing the Home Page

Followed these steps to view the Home page:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Web Content.

  4. Right-click startSiteStudioDemo.jspx and select Run.

  5. The integrated WebLogic Server launches and displays startup information in the Log panel. After the application has started, a browser window will open and display the SiteStudioDemo home page.

4.2.7 Creating Site Fragments

Follow these steps to add JSP segments for the header, footer, sidebar, and menu:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Site Files.

  4. Right-click Templates and select New.

  5. In the New Gallery dialog, select All Items.

  6. From the Items list, select Folder (General).

  7. Click OK.

  8. In the Create Folder dialog, for Folder Name. enter fragments.

  9. Click OK.

Create a JSP Segment (Header)

  1. Right-click the new fragments folder and select New.

  2. In the New Gallery dialog, expand Web Tier and select JSP.

  3. From the Items list, select JSP Segment.

  4. Click OK.

  5. In the Create JSP Segment dialog, for File Name, enter header.jspf.

  6. Click OK.

  7. After the new JSP Segment opens in the editor, select the Source tab.

  8. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
     <div id="top">
      <b>
       <a href="#">SiteStudioDemo</a>
      </b>
     </div>
    </jsp:root>
    
  9. From the main menu, select File and then Save All.

Create a Second JSP Segment (Footer)

  1. Right-click the new fragment folder and select New.

  2. In the New Gallery dialog, expand Web Tier and select JSP.

  3. From the Items list, select JSP Segment.

  4. Click OK.

  5. In the Create JSP Segment dialog, for File Name, enter footer.jspf.

  6. Click OK.

  7. After the new JSP Segment opens in the editor, select the Source tab.

  8. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
     <div id="footer">
      <p align="center">
       Copyright © 2010 | SiteStudioDemo 
      </p>
     </div>
    </jsp:root>
    
  9. From the main menu, select File and then Save All.

Create a Third JSP Segment (Sidebar)

  1. Right-click the new fragment folder and select New.

  2. In the New Gallery dialog, expand Web Tier and select JSP.

  3. From the Items list, select JSP Segment.

  4. Click OK.

  5. In the Create JSP Segment dialog, for File Name, enter sidebar.jspf.

  6. Click OK.

  7. After the new JSP Segment opens in the editor, select the Source tab.

  8. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
    <div id="sidebar">
      <h1 class="first">The Sidebar</h1>
      <p><!-- add content here -->
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In sit amet lacus sed lacus egestas fringilla eu sit amet leo.
      In hac habitasse platea dictumst.
      </p>
      <h1>Linkroll</h1>
      <ul class="linkroll">
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
        <li>
          <a href="#">Link 4</a>
        </li>
      </ul>
    </div>
    </jsp:root>
    
  9. Replace the "Lorem ipsum" text with your own content.

  10. From the main menu, select File and then Save All.

Create a Fourth JSP Segment (Menu)

  1. Right-click the new fragment folder and select New.

  2. In the New Gallery dialog, expand Web Tier and select JSP.

  3. From the Items list, select JSP Segment.

  4. Click OK.

  5. In the Create JSP Segment dialog, for File Name enter menu.jspf.

  6. Click OK.

  7. After the new JSP Segment opens in the editor, select the Source tab.

  8. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
      xmlns:wcm="http://www.oracle.com/jsp/wcm/"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <div id="menu">
      <ul id="nav">
        <li>
          <wcm:url var="root" type="node"
            url="${wcmContext.project.structure.rootSection.ID}"/>
          <a href="${root}">
            ${wcmContext.project.structure.rootSection.properties.label}
          </a>
        </li>
        <c:set var="sections"
          value="${wcmContext.project.structure.rootSection.activeChildren}"/>
    
    <!-- Iterate through the site structure nodes and add them to the menu -->
        <c:forEach var="section" items="${sections}">
        <wcm:url var="sectionUrl" type="node" url="${section.ID}"/>
        <li>
          <a title="${section.properties.label}" href="${sectionUrl}">
            <em>${fn:substring(section.properties.label, 0, 1)}</em>
            ${fn:substring(section.properties.label, 1, -1)}
          </a>
        </li>
      </c:forEach>
      </ul>
    <br class="clear"/>
    </div>
    </jsp:root>
    
  9. From the main menu, select File and then Save All.

4.2.8 Creating the Element Definitions

Follow these steps to create two element definition files:

  1. From the main menu, select View, then Site Studio, and then Site Assets.

  2. From the Project drop-down list (top left), select the SiteStudioDemo project.

    If your project is not listed, it means you are not logged in to your connection. From the Application Resources panel, expand Connections, then Site Studio, then right-click the connection and select Login.

  3. From the Asset Type drop-down list (top right), select Element Definition.

  4. Click the Create New Asset Type button and select New Plain Text Element Definition.

  5. For both Title and Content ID, enter ssd-plaintext-ed.

  6. Click OK.

  7. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  8. Click the Create New Asset Type button again and select New WYSIWYG Element Definition.

  9. For both Title and Content ID, enter ssd-wysiwyg-ed.

  10. Click OK.

  11. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  12. From the main menu, select File and then Save All.

4.2.9 Creating a Region Definition

Follow these steps to create a region definition in the content server:

  1. From the Asset Type drop-down list (top right), select Region Definition.

  2. Click the Create New Asset Type button and select New Region Definition.

  3. For both Title and Content ID, enter ssd-content-rd.

  4. Click OK.

  5. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  6. Right-click the ssd-content_rd asset and select Edit.

  7. After the region definition opens in the editor, click Add.

  8. In the Element Instance dialog:

    • For both Name and Label, enter title.

    • For location, click Browse.

    • Select the ssd-plaintext-ed element definition and click OK.

    • Click OK again.

  9. Click Add.

  10. In the Element Instance dialog:

    • For both Name and Label, enter content.

    • For location, click Browse.

    • Select the ssd-wysiwyg-ed element definition and click OK.

    • Click OK again.

  11. From the main menu, select File and then Save All.

  12. In the Check In dialog, click OK.

4.2.10 Creating a Region Template

Follow these steps to create a region template that uses a region definition file:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Site Files then Templates.

  4. Right-click region and select New.

  5. In the New Gallery dialog, expand Web Tier and select JSP.

  6. From the Items list, select JSP.

  7. Click OK

  8. In the Create JSP dialog:

    • For File Name, enter content.jspx.

    • Select the Create as XML Document option.

    • Select the Register Site File option.

    • Select Region Template from the Asset Type drop-down list.

    • For Site File ID, enter ssd-content-rt.

    • For Description, enter Content Region Template.

    • For Region Definition, click Browse.

    • Select the ssd-content-rd region definition and click OK.

    • Click OK again.

  9. After the new region template opens in the editor, select the Source tab.

  10. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
      <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
        xmlns:wcm="http://www.oracle.com/jsp/wcm/">
         <wcm:dataFile var="dataFile"/>
          <div id="content">
            <h1><a href="#">${dataFile.title}</a></h1>
            <p>${dataFile.content}</p>
          </div>
      </jsp:root>
    
  11. From the main menu, select File and then Save All.

4.2.11 Creating a Placeholder Definition

Follow these steps to create a placeholder definition that uses the new region template and new region definition:

  1. From the Asset Type drop-down list (top right), select Placeholder Definition.

  2. Click the Create New Asset Type button and select New Placeholder Definition.

  3. For both Title and Content ID, enter ssd-content-phd.

  4. Click OK.

  5. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  6. Right-click ssd-content_phd and select Edit to open in the editor

  7. Select all the Allowed Actions options.

  8. For the Region Definition table, click Add.

  9. Select ssd-content-rd and click OK.

  10. For the Region Template table, click Add and enter ssd-content-rt.

  11. Select ssd-content-rt and click OK.

  12. From the main menu, select File and then Save All.

  13. In the Check In dialog, click OK.

4.2.12 Adding a Placeholder to the Home Page

Follow these steps to add a placeholder to home.jspx:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Site Files, then templates, then page.

  4. Right-click home.jspx and select Open.

  5. After the home page opens in the editor, select the Source tab.

  6. From the main menu, select View, and then Component Palette.

  7. On the Component Palette, select Site Studio from the drop-down list.

  8. In the Insert Placeholder dialog:

    • For Name, enter content.

    • Enable the Add Name to Placeholder Definition Mappings option.

    • Select SiteStudioDemo from the drop-down list.

    • Click OK.

  9. Your home page should look something like this:

    <body>
    <jsp:include page="/wcm/templates/fragments/header.jspf"/>
      <div id="container">
        <jsp:include page="/wcm/templates/fragments/menu.jspf"/>
        <jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
        <!-- add content here -->
        <wcm:placeholder name="content"/>
        <jsp:include page="/wcm/templates/fragments/footer.jspf"/>
      </div>
    </body>
    
  10. From the main menu, select File and then Save All.

  11. Expand your Site Studio project (SiteStudioDemo).

  12. Expand Web Content, then WEB-INF, and then sites.

  13. Right-click SiteStudioDemo.xml and select Open.

  14. In the Site Structure editor, expand the Web Site (SiteStudioDemo) node.

  15. Click Design Mode Role, and select the admin security role from the drop-down list.

  16. Click the Placeholder Definition Mappings button.

  17. From the list, select content and click Edit.

  18. In the Edit Placeholder Definition Mapping dialog:

    • For Primary Definition ID, click Search.

    • Select ssd-content-phd and click OK.

    • Click OK again.

  19. Click OK.

  20. From the main menu, select File and then Save All.

4.2.13 Assigning Content to the Placeholder

Follow these steps to enter contribution mode and add content to the placeholder on the homepage:

  1. Expand your Site Studio project (SiteStudioDemo) and expand Web Content.

  2. Right-click startSiteStudioDemo.jspx and select Run.

  3. Once the application is loaded, use Ctrl+Shift+F5 to enter contribution mode.

  4. For the content placeholder, click the Assign Content button.

  5. In the Switch Content wizard, enable the New Contributor Data File option for the Choose Content File step.

  6. Click Next.

  7. For the Check-in Content step:

    • For Content ID, enter ssd-home-df.

    • For Web Sites, make sure that SiteStudioDemo is listed (this should be done automatically).

    • For Region Definition, make sure that ssd-content-rd is listed (this should be done automatically.).

  8. Click Finish.

  9. Click the Edit Region Content button for the content placeholder.

  10. On the Elements tab, for Title, enter Introduction.

  11. In the content editor add some text.

  12. Click the Save and Close button.

  13. Exit contribution mode using Ctrl+Shift+F5.

4.3 Creating Sidebar Links

This section builds on the previous sections in this tutorial. Follow these steps to create a static placeholder and display several links on the site sidebar:

4.3.1 Creating a Static List Element Definition

Follow these steps to create a static list element definition:

  1. From the main menu, select View, then Site Studio, and then Site Assets.

  2. From the Project drop-down list (top left), select the SiteStudioDemo project.

  3. From the Asset Type drop-down list (top right), select Element Definition.

  4. Click the Create New Asset Type button and select New Static List Element Definition.

  5. For both Title and Content ID, enter ssd-links-staticlist-ed and click OK.

  6. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  7. Right-click the ssd-links-staticlist-ed asset and select Edit.

  8. Click Elements.

  9. In the Elements dialog, click Add.

  10. In the Elements Instance dialog:

    • For both Name and Label, enter label.

    • For Location, click Browse.

    • Select the ssd-plaintext-ed element definition and click OK.

    • Click OK again.

  11. Click Add and add a second element.

  12. In the Elements Instance dialog

    • For both Name and Label, enter url.

    • For Location, click Browse.

    • Select the ssd-plaintext-ed element definition and click OK.

    • Click OK again.

  13. Click OK on the Elements dialog.

  14. From the main menu, select File then Save All.

  15. In the Check In dialog, click OK.

4.3.2 Creating a Sidebar Region Definition

Follow these steps to create a sidebar region definition:

  1. From the main menu, select View, then Site Studio, and then Site Assets.

  2. From the Asset Type drop-down list (top right), select Region Definition.

  3. Click the Create New Asset Type button and select New Region Definition.

  4. For both Title and Content ID, enter ssd-links-rd and click OK.

  5. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  6. Right-click the ssd-links-rd asset and select Edit.

  7. After the region definition opens in the editor, click Add

  8. In the Element Instance dialog:

    • For both Name and Label, enter links.

    • For Location, click Browse.

    • Select the ssd-links-staticlist-ed element definition and click OK.

    • Click OK again.

  9. From the main menu, select File then Save All.

  10. In the Check In dialog, click OK.

4.3.3 Creating Static List Data File

Follow these steps to create a static list data file:

  1. From the main menu, select View, then Site Studio, and then Site Assets.

  2. From the Asset Type drop-down list, select Data File.

  3. Click the Create New Asset Type button and select New Contributor Data File.

  4. In the Create New Asset dialog:

    • For both Title and Content ID, enter ssd-sidebarlinks-df.

    • For Region Definition, click Browse.

    • Select the ssd-links-rd region definition and click OK.

    • Click OK again.

  5. From the main menu, select File then Save All.

4.3.4 Creating a Region Template

Follow these steps to create a region file that uses a region template:

  1. Expand Site Files, and then expand templates.

  2. Right-click the region node and select New.

  3. In the New Gallery dialog, expand Web Tier and select JSP.

  4. From the Items list, select JSP.

  5. Click OK.

  6. In the Create JSP dialog:

    • For File Name, enter links.jspx.

    • Select the Create as XML Document option.

    • Select the Register Site File option.

    • Select Region Template from the Asset Type drop-down list.

    • For Site File ID, enter ssd-links-rt.

    • For Description, enter Sidebar Region Template.

    • For Region Definition, click Browse.

    • Select the ssd-links-rd region definition and click OK.

    • Click OK again.

  7. After the new region definition opens in the editor, select the Source tab.

  8. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:wcm="http://www.oracle.com/jsp/wcm/"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
      <wcm:dataFile var="dataFile"/>
      <ul class="linkroll">    <c:forEach var="row" items="${dataFile.links.rows}">
          <li>
            <a href="${row.url}">${row.label}</a>
          </li>
        </c:forEach>
      </ul>
    </jsp:root>
    
  9. In the above sidebar region template, note how we are using the new ssd-sidebarlinks-df data file and referencing the properties to format the data.

  10. From the main menu, select File and then Save All.

4.3.5 Updating the Sidebar Fragment

Follow these steps to update the sidebar fragment:

  1. Expand Site Files, then templates, and then fragments.

  2. Right-click the sidebar.jspf fragment and select Open.

  3. After the file opens in the editor, select the Source tab.

  4. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:wcm="http://www.oracle.com/jsp/wcm/"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:fn="http://java.sun.com/jsp/jstl/functions">
      <div id="sidebar">
        <h1 class="first">Sidebar</h1>
        <p>
          <wcm:placeholder name="sidebar"/>
        </p>
        <h1>Linkroll</h1>
         
        <wcm:staticPlaceholder dataFile="ssd-sidebarlinks-df"
                               template="@ssd-links-rt"/>
      </div>
    </jsp:root>
    
  5. In the above sidebar region template note how we are using a data file and referencing the properties of the data file.

  6. From the main menu, select File and then Save All.

4.3.6 Creating a Sidebar Content Region Definition

Follow these steps to create a sidebar content region definition:

  1. From the Asset Type drop-down list, select Region Definition.

  2. Click the Create New Asset Type button and select New Region Definition.

  3. For both Title and Content ID, enter ssd-text-rd and click OK.

  4. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  5. Right-click the ssd-text-rd asset and select Edit.

  6. After the region definition opens in the editor, click Add.

  7. In the Element Instance dialog:

    • For both Name and Label, enter text.

    • For Location, click Browse.

    • Select the ssd-wysiwyg-ed element definition and click OK.

  8. Click OK again.

  9. From the main menu, select File and then Save All.

  10. In the Check In dialog, click OK.

4.3.7 Creating a Sidebar Content Region Template

Follow these steps to create a sidebar content region template file:

  1. Expand Site Files, and then expand templates.

  2. Right-click region and select New.

  3. In the New Gallery dialog, expand Web Tier and select JSP.

  4. From the Items list, select JSP.

  5. Click OK.

  6. In the Create JSP dialog:

    • For File Name, enter simple.jspx.

    • Select the Create as XML Document option.

    • Select the Register Site File option.

    • Select Region Template from the Asset Type drop-down list.

    • For Site File ID, enter ssd-text-rt.

    • For Description, enter Text Region Template.

    • For Region Definition, click Browse.

    • Select the ssd-text-rd region definition and click OK.

  7. Click OK again.

  8. After the file opens in the editor, select the Source tab.

  9. Add the following code:

    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:wcm="http://www.oracle.com/jsp/wcm/"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
      <wcm:dataFile var="dataFile"/>
      <p>${dataFile.text}</p>
    </jsp:root>
    
  10. From the main menu, select File and then Save All.

  11. In the Check In dialog, click OK.

4.3.8 Creating a Sidebar Content Placeholder Definition

Follow these steps to create a sidebar content placeholder definition:

  1. From the Asset Type drop-down list, select Placeholder Definition.

  2. Click the Create New Asset Type button and select New Placeholder Definition.

  3. For both Title and Content ID, enter ssd-simple-phd and click OK.

  4. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  5. Right-click the ssd-simple-phd asset and select Edit.

  6. Select all the Allowed Actions options.

  7. For the Region Definition table, click Add.

  8. Select ssd-text-rd and click OK.

  9. For the Region Template table, click Add.

  10. Select ssd-simple-rt and click OK.

  11. From the main menu, select File and then Save All.

  12. In the Check In dialog, click OK.

4.3.9 Adding a Sidebar Placeholder Mapping to the Site

Follow these steps to add a sidebar placeholder mapping to the site:

  1. Expand Web Content, then WEB_INF, and then sites.

  2. Right-click SiteStudioDemo.xml and select Open.

  3. Click the Placeholder Definition Mappings button.

  4. In the Placeholder Definition Mappings dialog, click Add.

  5. In the Define Placeholder Definition Mapping dialog:

    • For Name, enter sidebar.

    • For Primary Definition ID, click Search.

    • Select ssd-simple-phd and click OK.

    • Click OK again.

  6. In the Placeholder Definition Mappings dialog, click OK.

  7. From the main menu, select File and then Save All.

4.3.10 Assigning Content to the Sidebar

Follow these steps to enter contribution mode and add content to the placeholders on the sidebar:

  1. Expand your Site Studio project (SiteStudioDemo) and expand Web Content.

  2. Right-click startSiteStudioDemo.jspx and select Run.

  3. Once the application is loaded, use Ctrl+Shift+F5 to enter contribution mode.

  4. Click the Switch to Design Mode button (upper right corner).

  5. For the sidebar placeholder, click the Assign Content button.

  6. In the Switch Content wizard, select ssd-text-rd for the Choose Content Region step.

  7. For the Choose Content File step, select the New Contributor Data File option.

  8. Click Next

  9. For the Check-in Content step:

    • For Content ID, enter ssd-sidebarcontent-df.

    • For Web Sites, make sure that SiteStudioDemo is listed (this should be done automatically).

    • For Region Definition, make sure that ssd-text-rd is listed (this should be done automatically.).

  10. Click Finish.

  11. Click the Switch to Design Mode button (upper right corner).

  12. For the sidebar placeholder, click the Edit Region Content button.

  13. In the text editor enter Introduction.

  14. Click the Save and Close button.

  15. For the ssd-sidebarlinks-df placeholder, click the Edit Region Content button.

  16. In the links editor, click Add Row and then Edit Row and add the following links:

    Link 1:

    • For Label, enter Google.

    • For URL, enter http://www.google.com.

    • Click Update Row and Close.

    Link 2:

    • For Label, enter Yahoo!.

    • For URL, enter http://www.yahoo.com.

    • Click Update Row and Close.

    Link 3:

    • For Label, enter Bing.

    • For URL, enter http://www.bing.com.

    • Click Update Row and Close.

  17. Click the Save and Close button.

  18. Exit contribution mode using Ctrl+Shift+F5.

4.4 Creating A Dynamic Conversion Page

This section builds on the previous sections in this tutorial. These steps add a dynamic conversion page that demonstrates the use of native documents in the application. Before proceeding, make sure the DynamicConverter component for the content server is enabled and configured properly.

4.4.1 Creating a Conversions Definition

Follow these steps to create a conversions definition:

  1. From the Asset Type drop-down list, select Conversions Definition.

  2. Click the Create New Asset Type button and select New Conversions Definition.

  3. For both Title and Content ID, enter ssd-default-cd and click OK.

  4. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  5. Right-click the ssd-default-cd asset and select Edit.

  6. After the conversion definition opens in the editor, click Add to add a dynamic conversion rule to the definition.

  7. In the Native Document Conversion Settings dialog:

    • For Name, enter simple.

    • For Options, enable Use simple inline dynamic conversion

    • Click OK.

  8. From the main menu, select File and then Save All.

  9. In the Check In dialog, click OK.

  10. Expand Web Content, then WEB_INF, and then sites.

  11. Right-click SiteStudioDemo.xml and select Open.

  12. Expand the Web Site (SiteStudioDemo) node.

  13. Double-click the Conversions Definition value to display the Select a Conversions Definition Dialog. Select the ssd-default-cd conversion definition.

  14. Click OK.

  15. From the main menu, select File and then Save All.

4.4.2 Creating a Page Template for the Native Document

Follow these steps to create a page template for the native document:

  1. Expand your Site Studio project (SiteStudioDemo).

  2. Expand Site Files, and then expand templates.

  3. Right-click the page node and select New.

  4. In the New Gallery dialog, expand Web Tier and select JSP.

  5. From the Items list, select JSP.

  6. Click OK.

  7. In the Create JSP dialog:

    • For File Name, enter native.jspx.

    • Enable the Create as XML Document option.

    • Enable the Register Site File option.

    • For Asset Type, select Page Template from the list.

    • For Site File ID, enter ssd-native-pt.

    • For Description, enter Native Documents Page for the SiteStudioDemo site.

    • Click OK.

  8. Add the following content and save the file:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:wcm="http://www.oracle.com/jsp/wcm/">
  <jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
              doctype-system="http://www.w3.org/TR/html4/loose.dtd"
              doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>SiteStudioDemo - Demo Blog</title>
      <link type="text/css" rel="stylesheet"
            href="../wcm/css/template.css"/>
    </head>
    <body>
      <jsp:include page="/wcm/templates/fragments/header.jspf"/>
      <div id="container">
        <jsp:include page="/wcm/templates/fragments/menu.jspf"/>
         
        <jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
        <!--
          Add content below.
         -->
         <jsp:include page="/wcm/templates/fragments/footer.jspf"/>
      </div>
    </body>
  </html>
</jsp:root>

4.4.3 Creating a New Section for the Native Document

Follow these steps to associate the new page template with your site:

  1. Expand Web Content, then WEB_INF, and then sites.

  2. Right-click SiteStudioDemo.xml and select Open.

  3. Expand the Web Site (SiteStudioDemo) node.

  4. Right-click Home and select Add New Section.

  5. In the Add New Section dialog:

    • For Label, enter About.

    • For URL, enter About.

    • Click OK.

  6. Right-click on the About section node and select Include Section in Navigation.

  7. Right-click on the About section node and select Select Primary Page Template.

  8. In the Select a Page Template dialog, select the ssd-native-pt page template.

  9. Click OK.

  10. From the main menu, select File and then Save All.

4.4.4 Creating a Region Definition for the Native Document

Follow these steps to create a region definition:

  1. From the Asset Type drop-down list, select Region Definition.

  2. Click the Create New button and select New Region Definition.

  3. For both Title and Content ID, enter ssd-native-rd and click OK.

  4. Click the Refresh button to refresh the list. This may take a few minures as the new asset must be indexed by the content server before displaying in the list.

  5. Right-click ssd-native-rd and select Edit.

  6. Select an element from the table and click Switch Region Content.

  7. In the Region Content Options dialog, enable the Create new native document option.

  8. For Document Types, click Select.

  9. Choose any document type from the list and click OK.

  10. From the main menu, click File then Save All.

4.4.5 Creating a Region Template for the Native Document

Follow these steps to create a region template file that uses a region definition file:

  1. Expand your Site Studio project (SiteStudioDemo).

  2. Expand Site Files, and then expand templates.

  3. Right-click the region node and select New.

  4. In the New Gallery dialog, expand Web Tier and select JSP.

  5. In the Items section, select JSP.

  6. Click OK.

  7. In the Create JSP dialog:

    • For File Name, enter conversion.jspx.

    • Enable the Create as XML Document option.

    • Enable the Register Site File option.

    • For Asset Type, select Region Template from the list.

    • For Site File ID, enter ssd-conversion-rt.

    • For Description, enter Native File Region Template.

    • For Region Definition, click Browse and select the ssd-native-rd region definition.

    • Click OK.

  8. Add the following content and save the file:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:wcm="http://www.oracle.com/jsp/wcm/">
 <div id="content">
  <wcm:dynamicConversion rule="simple"/>
 </div>
</jsp:root>

4.4.6 Creating a Placeholder Definition for the Native Document

Follow these steps to create a placeholder definition that utilizes the newly created region template and region definition:

  1. From the Asset Type drop-down list, select Placeholder Definition.

  2. Click the Create New Asset Type button and select New Placeholder Definition.

  3. For both Title and Content ID, enter ssd-native-phd.

  4. Right-click the ssd-content-phd asset and select Edit.

  5. For the Region Definition table, click Add, and select ssd-native-rd.

  6. For the Region Template table, click Add, and select ssd-conversion-rt.

  7. Select all the Allowed Actions options.

  8. From the main menu, select File and then Save All.

  9. Check-in and close the placeholder definition.

4.4.7 Adding the Placeholder to the Native Document Page

Follow these steps to add a placeholder to the native.jspx file:

  1. From the Component Palette, select Site Studio.

  2. Drag the Placeholder tag below the Add Content Below comment.

  3. In the Insert Placeholder dialog:

    • For Name, enter native.

    • Select the Add Name to Placeholder Definition Mappings option.

    • Select SiteStudioDemo as the site.

    • Click OK.

  4. Expand Web Content, then WEB_INF, and then sites.

  5. Right-click SiteStudioDemo.xml and select Open.

  6. Click the Placeholder Definition Mappings button.

  7. Select the native Placeholder Definition Mapping and click Edit.

  8. In the Edit Placeholder Definition Mapping dialog:

    • For Primary Definition ID, click Search.

    • Select ssd-simple-phd and click OK.

    • Click OK again.

  9. From the main menu, select File and then Save All.

4.4.8 Assigning Content to the Placeholder on the Native Document Page

Follow these steps to enter contribution mode and assign content to the placeholder on the native document page.

  1. Expand your Site Studio project (SiteStudioDemo) and expand Web Content.

  2. Right-click startSiteStudioDemo.jsp and select Run.

  3. On the About page, use Ctrl+Shift+F5 to enter contribution mode.

  4. Click the Assign Content button on the native placeholder.

  5. In the Switch Content wizard, select the ssd-native-rd region definition.

  6. Click Next.

  7. On the Choose Content File step, select the Existing Local File option.

  8. Click Next.

  9. For the Check-in Content step:

    • For both Title and Content ID, enter ssd-about-native-df.

    • Browse to the primary file, and select it.

    • For Web Sites, make sure that SiteStudioDemo is listed (this should be done automatically).

    • For Region Definition, make sure that ssd-native-rd is listed (this should be done automatically.).

  10. Use Ctrl+Shift+F5 to exit contribution mode.

  11. The content of the document displays on the About page.

4.5 Adding a Style Sheet

This section provides information related to adding a style sheet to the example site and covers these topics:

The SiteStudioDemo site uses a header, menu, sidebar, and footer (JSP Segments). You can use an existing CSS file, create a new style sheet, or copy the sample style sheet provided in this section.

Graphics (optional)

The sample style sheet provided in this section references several JPG and GIF files. See Section 4.5.4, "Sample CSS Document" to view the sample CSS code provided with this tutorial. If you use this style sheet for the SiteStudioDemo site, you can create your own images, edit the references, or remove the references:

body.jpg
content.jpg
header.jpg
menu.jpg
menu_a.jpg
menu_a_hoover.jpg
menu_link.jpg
sidebar.jpg
top.jpg
linkroll.gif
linkroll_hoover.gif

4.5.1 Creating a New Style Sheet

Follow these steps to create a new CSS file:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Right-click Web Content and select New.

  4. In the New Gallery dialog, select All Items.

  5. From the Items list, select CSS File (HTML).

  6. Click OK.

  7. In the Cascading Style Sheet dialog:

    • Provide a name for the new style sheet. For example, template.css.

      The code samples in this tutorial reference a style sheet called template.css located in the Web Content /wcm/css sub-folder. Both the style sheet and directory are examples only. See Section 4.5.2, "Creating a Subdirectory for Your CSS File" for the steps required to create this subdirectory.

    • Click OK.

  8. Expand your Site Studio project (SiteStudioDemo).

  9. Expand Web Content, and then expand css.

  10. Right-click template.css and select Open.

  11. After the CSS file opens in the editor, select the Source tab.

  12. The SiteStudioDemo site uses a header, menu, sidebar, and footer (JSP Segments). You can create a new style sheet by entering your own code or copy the sample style sheet provided with this tutorial. See Section 4.5.4, "Sample CSS Document" to view the sample CSS code provided with this tutorial.

  13. From the main menu, select File and then Save All.

4.5.2 Creating a Subdirectory for Your CSS File

Code samples in this tutorial reference the Web Content /wcm/css subdirectory as the location for the style sheet. This is an example only.

Note:

To create subfolders, right-click a folder and select New, then All Items, then Folder (General), and click OK.

Follow these steps to re-create the subdirectory used as the location for the CSS file in this tutorial:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Right-click Web Content and select New.

  4. In the New Gallery dialog, select All Items.

  5. From the Items list, select Folder (General).

  6. Click OK.

  7. In the New Folder dialog:

    • Provide a name for the new folder. For example, wcm.

    • Click OK.

  8. Expand Web Content, and then expand wcm.

  9. Right-click wcm and select New.

  10. In the New Gallery dialog, select All Items.

  11. From the Items list, select Folder (General).

  12. Click OK.

  13. In the New Folder dialog:

    • Provide a name for the new sub-folder. For example, css.

    • Click OK.

  14. From the main menu, select File and then Save All.

4.5.3 Adding a Style Sheet to a Page Template

Follow these steps to add a CSS file to a page template:

  1. In the Application Navigator, select the Projects panel.

  2. Expand your Site Studio project (SiteStudioDemo).

  3. Expand Site Files, then templates, and then expand page.

  4. Right-click home.jspx (if adding a CSS to the home page) and click Open.

  5. From the main menu select View, then Component Palette.

  6. In the Component Palette, select the CSS option from the list.

  7. Drag a Project CSS File (for example, template.css) to the <head> section.

  8. From the main menu, select File and then Save All.

4.5.4 Sample CSS Document

/* CSS Document */

body {
background-color:#fff;
background-image:url(../images/body.jpg);
background-position:top;
background-repeat:repeat-x;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:78%;
color:#666;
margin:0;
}

#top {
width:715px;
padding:12px 25px 15px 25px;
background-image:url(../images/top.jpg);
background-position:top;
background-repeat:no-repeat;
color:#fff;
margin:0 auto;
text-align:right;
}

#top a {
padding:0 10px 0 10px;
color:#fff;
border:none;
}

#top a:hover {
text-decoration:none;
}

#top b {
float:left;
font-weight:normal;
}

#top b a {
border-left:1px dotted #ccc;
border-right:none;
border:none;
}

#container {
width:765px;
margin:0 auto;
background-image:url(../images/header.jpg);
background-position:top;
background-repeat:no-repeat;
padding:30px 0 0 0;
}

#menu {
width:706px;
margin:0 auto;
text-align:left;
background-image:url(../images/menu.jpg);
background-position:top;
background-repeat:repeat-x;
}

#menu #nav {
margin:0;
padding:0;
float:left;
}

#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
}

#nav li a {
display:block;
width:100px;
text-align:center;
margin:0 1px 0 0;
background-image:url(../images/menu_link.jpg);
background-position:left;
background-repeat:no-repeat;
color:#ccc;
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
padding:55px 0 23px 0;
border:none;
}

#nav li a em {
font-style:normal;
text-decoration:underline;
}

#nav li a.last {
margin:0;
}

#nav li a:hover {
background-image:url(../images/menu_link.jpg);
background-position:right;
color:#fff;
}

#nav li a.active {
background-image:url(../images/menu_link.jpg);
background-position:right;
color:#fff;
}

.clear {
clear:both;
}

#sidebar {
width:262px;
float:right;
background-image:url(../images/sidebar.jpg);
background-position:top;
background-repeat:no-repeat;
margin:0 29px 0 0 !important;
margin:0 15px 0 0;
padding:7px 20px 20px 20px;
color:#777;
line-height:18px;
font-size:90%;
word-spacing:-1px;
}

#sidebar h1 {
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#F2C21C;
font-weight:normal;
margin:10px 0 10px 0;
}

#sidebar h1.first {
color:#fff;
margin:10px 0 35px 0;
}

#content {
margin:0 331px 0 20px;
background-image:url(../images/content.jpg);
background-position:top right;
background-repeat:no-repeat;
padding:10px 20px 10px 20px;
}

#content {
line-height:20px;
word-spacing:2px;
overflow: auto;
height: 400px;
}

#content h1, p.ID11A, p.IDDF {
font-family:Trebuchet MS, sans-serif;
font-size:24px;
color:#333;
font-weight:normal;
margin:30px 0 35px 0;
border-bottom:2px solid #F4C833;
padding:0 0 2px 0;
}

p.IDAC{
font-family:Trebuchet MS, sans-serif;
font-size:16px;
color:#333;
font-weight:normal;
margin:20px 0 20px 0;
letter-spacing:-2px;
font-style: italic;
padding:0 0 2px 0;
}

#content h1 a {
color:#333;
text-decoration:none;
border:none;
}

#content h1 a:hover {
color:#666;
}

#content p {
text-indent:15px;
}

#sidebar .linkroll {
margin:10px 0 10px 0;
padding:0;
border-top:1px solid #eee;
}

.linkroll li {
margin:1px;
padding:0 !important;
padding:1px;
list-style:none;
}

.linkroll li a {
padding:2px 2px 2px 18px;
display:block;
margin:0;
color:#777;
text-decoration:none;
border-bottom:1px solid #eee;
background-image:url(../images/document.gif);
background-position:left;
background-repeat:no-repeat;
}

.linkroll li a:hover {
border-bottom:1px solid #ccc;
background-color:#fbfbfb;
color:#444;
}

h2 {
font:120% Verdana;
color:#333;
border-bottom:1px dotted #ccc;
}

blockquote {
margin:0;
padding:5px 15px 5px 15px;
background:#f6f6f6;
}

a {
color:#333;
border-bottom:1px solid #ccc;
text-decoration:none;
}

a:hover {
border-bottom:1px solid #999;
}

#footer {
padding:10px;
border-top:2px solid #f6f6f6;
text-align:center;
margin:20px 0 0 0;
}