Exploring root objects

When running in the presentation tier, there are a number of root objects available to your Surf project.

This tutorial builds on the project created in the previous tutorial.

There are a number of root objects exposed to your JavaScript code and FreeMarker templates in your Surf project. This tutorial shows how you can explore what's available. All of the Surf root objects are documented in the Surf API Reference for web scripts.

In the Eclipse Package Explorer, expand out your simple-surf-project to find the file src/main/webapp/WEB-INF/webscripts/home/body.get.html.ftl. This is the FreeMarker template whose output is injected into the body of the page found at: http://localhost:8080/simple-surf-project/page/home.
Load the file into your editor.

Change the code to be as follows:

                        
<#-- This is an example of how to request a CSS dependency. The resource request will
     be made in the <head> element of the page (because this is where the <@outputCSS>
     directive has been placed. A checksum suffix generated from the file contents 
     will be appended to the request so that the browser can cache it indefinitely.
     The group attribute is used when dependencies are aggregated together into a single
     request. -->

<#-- APB
<@link href="${url.context}/res/css/body.css" group="default"/>
-->

<div class="body">
    <!-- The body class defined in the "css/body.css" file sets a background image to 
         provide an example of how images referenced from within CSS files are encoded
         when the "generate-css-data-images" configuration option is enabled (see the
         "WEB-INF/surf.xml" file). -->
         
         <h2>Root Object Test</h2>
         
		 <hr/>
         <p>theme: ${theme}</p>
         <p>locale: ${locale}</p>
                  
		 <hr/>
		 <p>Page root object:</p>		 
         <p>page.url.url: ${page.url.url}</p>
         <p>page.id: ${page.id}</p>
         <p>page.title: ${page.title}</p>
         
         <hr/>
         <p>context: ${context}</p>

		<hr/>
		<p>User root object:</p>
		<p>user.id: ${user.id}</p>
		<p>user.name: ${user.name}</p>
		<p>user.fullName: ${user.fullName}</p>
		<p>user.firstName: ${user.firstName}</p>        
		 
 		<hr/>
 		<p>List page properties:</p>
        <#assign keys = page.properties?keys/>
        <#list keys as k>
          ${k} => ${page.properties[k]}
        </#list>
         
 		<hr/>
 		<p>List user properties:</p>
        <#assign keys = user.properties?keys/>
        <#list keys as k>
          ${k} => ${user.properties[k]},
        </#list>
         
 		<hr/>
 		<p>List context properties:</p>
 		<table border="2">
        <#assign keys = context.properties?keys/>
        <#list keys as k>
        	<#if context.properties[k]??>
        		<tr>
          		<#if context.properties[k]?is_boolean>
          			<#if context.properties[k]>
          				<td>${k} => TRUE</td>
          			<#else>
          				<td>${k} => FALSE</td>
          			</#if>
          			<br/>
          		<#else>
          			<td>${k} => ${context.properties[k]}</td>
          		</#if>
          		</tr>
          	</#if>
        </#list>
        </table>

 		<hr/>
 		<p>List template properties:</p>
 		<table border="2">
        <#assign keys = template.properties?keys/>
        <#list keys as k>
        	<#if template.properties[k]??>
        		<tr>
          		<#if template.properties[k]?is_boolean>
          			<#if template.properties[k]>
          				<td>${k} => TRUE</td>
          			<#else>
          				<td>${k} => FALSE</td>
          			</#if>
          			<br/>
          		<#else>
          			<td>${k} => ${template.properties[k]}</td>
          		</#if>
          		</tr>
          	</#if>
        </#list>
        </table>
</div>

First, you comment out the code that places a background image using the CSS. This is no longer required. Then code has been added that explores the root objects as documented in the Surf API Reference for web scripts.

Make sure you have no instances of SkyVault Content Services running.
Rebuild your project on the command line using the command mvn clean install.
Run the project by entering the command: mvn jetty:run.
You can also set up Eclipse so that it is possible to run your Maven project from within Eclipse.
In your web browser navigate to http://localhost:8080/simple-surf-project/page/home.
Information will be displayed about the various root objects.
You can expand your FreeMarker code to include more root objects. Then refresh the page to display the results.

You have seen how to explore some of the root objects.

Search form

Search form

You are here