4 Building a Site Studio Web Site Tutorial

4.1.1 Step 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.

   The New Gallery opens.

2. In the Categories list, select General, and then Applications.

3. In the Items list, select Generic Application.

4. Click OK.

   The Create Generic Application wizard appears.

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.

   • From the Available Technologies list, select Site Studio Technology 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 Step 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:

   • Application Resources: If not already selected, enable this option.

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

   • Design Time URL: This 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.

   • Run Time URL: This 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.

   • Specify credentials for this JDeveloper session: Enable this option.

   • Username: Enter your content server administrative username.

   • 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 Step 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.1 Step 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 Sites button.

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

8. Click OK.

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

4.2.2 Step 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 Security Role Assignment button.

7. For Role Name, enter WCMContributor .

8. In the Principal section, click the Create Principal Name button.

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

9. For Principal Name, enter weblogic.

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

4.2.3 Step 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 the JSP Property Group.

6. Click the Create JSP Property Group 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 URL Pattern button.

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

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

4.2.4 Step 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. Select JSP in the Items section.

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 the SiteStudioDemo site.

9. Click OK.

10. The new page template opens in the editor. Select the Source tab.

11. The page template should have content similar to this:

    <?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"/>
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>SiteStudioDemo Site</title>
      <link type="text/css" rel="stylesheet"
      href="../wcm/support/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.2.5 Step 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.

   The Site Structure editor displays.

5. Right-click Home and select Select Primary Page Template.

   The Select a Page Template dialog displays.

6. Select the SiteStudioDemo-home page template.

7. Click OK.

4.2.6 Step 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 Step 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.

   The New Gallery dialog displays.

5. From the Categories list, select All Items.

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

7. Click OK.

   The Create Folder dialog displays.

8. For Folder Name, enter fragments.

9. Click OK.

Create a JSP Segment (Header)

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

    The New Gallery dialog displays.

11. From the Categories list, expand Web Tier and select JSP.

12. From the Items list, select JSP Segment.

13. Click OK.

    The Create JSP Segment dialog displays.

14. For File Name, enter header.jspf.

15. Click OK.

16. Right-click the header.jspf page and select Open.

17. Select the Source tab.

18. Add the following content:

    <?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 Demo</a>
      </b>
     </div>
    </jsp:root>
    

Create a Second JSP Segment (Footer)

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

   The New Gallery dialog displays.

2. From the Categories list, expand Web Tier and select JSP.

3. From the Items list, select JSP Segment.

4. Click OK.

   The Create JSP Segment dialog displays.

5. For File Name, enter footer.jspf.

6. Click OK.

7. Right-click the footer.jspf page and select Open.

8. Select the Source tab.

9. Add the following content:

   <?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>
   

Create a Third JSP Segment (Sidebar)

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

   The New Gallery dialog displays.

2. From the Categories list, expand Web Tier and select JSP.

3. From the Items list, select JSP Segment.

4. Click OK.

   The Create JSP Segment dialog displays.

5. For File Name, enter sidebar.jspf.

6. Click OK.

7. Right-click the sidebar.jspf page and select Open.

8. Select the Source tab.

9. Add the following content:

   <?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>
    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>
   

Create a Fourth JSP Segment (Menu)

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

   The New Gallery dialog displays.

2. From the Categories list, expand Web Tier and select JSP.

3. From the Items list, select JSP Segment.

4. Click OK.

   The Create JSP Segment dialog displays.

5. For File Name, enter menu.jspf.

6. Click OK.

7. Right-click the menu.jspf page and select Open.

8. Select the Source tab.

9. Add the following content:

   <?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>
   

4.2.8 Step 8: Creating the Element Definitions

Follow these steps to create two element definition files in the content server.

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.

   Note: 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, 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 the Create New Asset Type button again and select New WYSIWYG Element Definition.

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

4.2.9 Step 9: Creating a Region Definition

Follow these steps to create a region definition:

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. Right-click the ssd-content_rd asset and select Edit.

5. Click Add.

6. In the Element Instance dialog:

   • For both Name and Label, enter content.

   • For location, click Browse button and select the ssd-plaintext-ed element definition.

7. Click OK.

8. Click Add.

9. In the Element Instance dialog:

   • For both Name and Label, enter content.

   • For location, click Browse button and select the ssd-wysiwyg-ed element definition.

10. Click OK.

11. Save the ssd-content-rd file and check it in.

4.2.10 Step 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.

   The New Gallery dialog displays.

5. From the Categories list, 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 and select the ssd-content-rd region definition.

9. Click OK.

10. The new content.jspx file should have content similar to this:

<?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>

4.2.11 Step 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. Right-click the ssd-content-phd asset and select Edit.

5. For the Region Definition table, click Add and enter ssd-content-rd.

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

7. Select all the Allowed Actions options.

8. Save, check-in, and close the Placeholder Definition.

4.2.12 Step 12: Adding a Placeholder to the Home Page

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

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

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

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

4. 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.

5. Expand your Site Studio project (SiteStudioDemo).

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

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

   The Site Structure editor displays.

8. Expand the Web Site (SiteStudioDemo) node.

9. Click the Switch Placeholder Definition Role value, and select the admin security role from the drop-down list.

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

11. Click the Placeholder Definition Mappings button.

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

    The Edit Placeholder Definition Mapping dialog displays.

13. For Primary Definition ID, click Search.

14. Select ssd-content-phd and click OK.

15. Click OK again.

4.2.13 Step 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. Click the Assign Content button on the content placeholder.

5. From Switch Content, select New Contributor Data File.

6. Click Next.

7. In the check-in content page:

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

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

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

8. Click Finish.

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

10. For Title, enter Introduction.

11. In the content editor add some text.

12. Click Save and Close.

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

4.3.1 Step 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.

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

7. Click Elements and add two elements.

8. First Element:

   • For both Name and Label, enter label.

   • For Location, click Browse button and select the ssd-plaintext-ed element definition.

9. Click OK.

10. Second Element:

    • For both Name and Label, enter url.

    • For Location, click Browse button and select the ssd-plaintext-ed element definition

11. Click OK and then click OK again.

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

4.3.2 Step 2: Creating a Sidebar Region Definition

Follow these steps to create a sidebar region definition:

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-links-rd.

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

5. Click Add and enter these values in the Element Instance dialog:

   • For both Name and Label, enter links.

   • For Location, click Browse button and select the ssd-links-staticlist-ed element definition.

6. Click OK.

7. Save the ssd-links-rd file and check it in.

4.3.3 Step 3: Creating Static List Data File

Follow these steps to create a static list data file:

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

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

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

4. For Region Definition, click Browse snd select the ssd-links-rd region definition.

5. Click OK.

4.3.4 Step 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.

   The New Gallery dialog displays.

3. From the Categories list, 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 and select the ssd-links-rd region definition.

7. Click OK.

8. The links.jspx file should have content similar to this:

<?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>

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.

4.3.5 Step 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. The file should have content similar to this:

<?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="XABLOG_SIDEBAR_DF"
                           template="@ssd-sidebarlinks-df"/>
  </div>
</jsp:root>

In the above sidebar region template note how we are using a data file and referencing the properties of the data file.

4.3.6 Step 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 (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-text-rd.

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

5. Click Add and enter these values in the Element Instance dialog:

6. • For both Name and Label, enter text.

   • For Location, click Browse button and select the ssd-wysiwyg-ed element definition.

7. Click OK.

8. Save the ssd-text-rd file and check it in.

4.3.7 Step 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 the region node and select New.

   The New Gallery dialog displays.

3. From the Categories list, 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-simple-rt.

   • For Description, enter Text Region Template.

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

7. Click OK.

8. The new simple.jspx file should have content similar to this:

<?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>

4.3.8 Step 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 (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-simple-phd.

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

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

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

7. Select all Allowed Actions options.

8. Save, check-in, and close the placeholder definition.

4.3.9 Step 9: Adding a Sidebar Placeholder Mapping to the Site

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

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

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

3. Click the Placeholder Definition Mappings button.

4. Click Add to add a new Placeholder Definition mapping.

5. For Name, enter sidebar.

6. For Primary Definition ID, click Search and select ssd-simple-phd.

7. Click OK.

8. Click OK again.

4.3.10 Step 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 Assign Content button on the sidebar placeholder.

5. From Switch Content, select New Contributor Data File.

6. Click Next

7. On the check-in content page, enter ssd-sidebarcontent-df for Content ID.

8. For Web Sites, select SiteStudioDemo.

9. For Region Definition, select ssd-text-rd.Click Finish.

10. Return to contribution mode by clicking the Switch to Contribution Mode button.

11. For the sidebar placeholder, click the Edit Region Definition button.

12. In the text enter, enter the title Messages.

13. Click Save and Close.

    Next we will assign content to the ssd-sidebar-df static placeholder.

14. Switch to contribution mode using Ctrl+Shift+F5.

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

16. In the links editor add the following link rows:

    Link 1:

    • For Label, enter Google.

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

    Link 2:

    • For Label, enter Yahoo!.

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

    Link 3:

    • For Label, enter Bing.

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

17. Click Save and Close.

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

4.4.1 Step 1: Creating a Conversions Definition

Follow these steps to create a conversions definition:

1. From the Asset Type drop-down list (top right), 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.

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

5. Click Add to add a dynamic conversion rule to the definition.

6. In the Native Document Conversion Settings dialog:

   • For Name, enter simple

   • For Options, enable Use simple inline dynamic conversion.

7. Click OK.

8. Save the ssd-default-sd file and check it in.

9. Expand Wed Content, then WEB_INF, and then sites.

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

11. Expand the Web Site (SiteStudioDemo) node.

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

13. Click OK.

4.4.2 Step 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. Select JSP in the Items section.

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.

8. Click OK.

9. The new page template should have content similar to this:

<?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/support/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 Step 3: Creating a New Section for the Native Document

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

1. Expand Wed 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.

6. Click OK.

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

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

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

10. Click OK.

4.4.4 Step 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 (top right), 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.

4. Click OK.

5. Refresh the list.

6. Right-click ssd-native-rd and select Edit to open the file in the editor.

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

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

9. For Document Types, click Select.

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

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

4.4.5 Step 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. Select JSP in the Items section.

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.

8. Click OK.

9. The new conversion.jspx file should have content similar to this:

<?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 Step 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 (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-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. Save, check-in, and close the placeholder definition.

4.4.7 Step 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.

4. Click OK.

5. Expand Wed Content, then WEB_INF, and then sites.

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

7. Click the Placeholder Definition Mappings button.

8. Right-click the native Placeholder Definition Mapping and select Edit. The Edit Placeholder Definition Mapping dialog displays.

   The Edit Placeholder Definition Mapping dialog displays.

9. For Primary Definition ID, click Search and select ssd-native-phd.

10. Click OK.

11. Click OK again.

4.4.8 Step 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. For Switch Content, select the ssd-native-rd region definition.

6. Click Next.

7. On the Choose Content File wizard page, select the Existing Local File association.

8. Click Next.

9. On the check-in content page, enter ssd-about-native-df for both Title and Content ID.

10. Browse to the primary file, and select it.

11. For Web Sites, select SiteStudioDemo.

12. For Region Definition, select ssd-native-rd.Click Finish.

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

14. The content of ssd-about-native-df.doc is displayed on the About page.