Develop Sandbox Application develop-sandbox-application

In this section, now that the template is set up in the initial application section, and the initial pages established in the initial content section, you can develop the application. You do so by using foundation scripts that include the ability to enable authoring with Communities components. At the end of this section, you have a website that is fully functional.

Using Foundation Page Scripts using-foundation-page-scripts

The default script, created when the component which renders the playpage template was added, is modified to include the foundation page’s head.jsp and a local body.jsp.

Super Resource Type super-resource-type

The first step is to add a resource super type property to the /apps/an-scf-sandbox/components/playpage node so that it inherits the scripts and properties of the super type.

Using CRXDE Lite:

  1. Select node /apps/an-scf-sandbox/components/playpage.

  2. In properties tab, enter a new property with the following values:

    Name: sling:resourceSuperType

    Type: String

    Value: foundation/components/page

  3. Click the green +Add button.

  4. Click Save All.

    page-script

Head and body scripts head-and-body-scripts

  1. In CRXDE Lite explorer pane, navigate to /apps/an-scf-sandbox/components/playpage and double-click the file playpage.jsp to open it in the edit pane.

    /apps/an-scf-sandbox/components/playpage/playpage.jsp

    code language-xml
    <%--
    
      An SCF Sandbox Play Component component.
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %><%
    %><%
     // TODO add your code here
    %>
    
  2. Being aware of open/close script tags, replace " // TODO …" with includes of scripts for the head and body parts of <html>.

    With a super type of foundation/components/page, any script not defined in this same folder is resolve to a script in /apps/foundation/components/page folder (if it exists), or else to a script in /libs/foundation/components/page folder.

    /apps/an-scf-sandbox/components/playpage/playpage.jsp

    code language-xml
    <%--
    
        An SCF Sandbox Play Component component: playpage.jsp
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %>
    <html>
      <cq:include script="head.jsp"/>
      <cq:include script="body.jsp"/>
    </html>
    
  3. Overlaying the foundation script head.jsp is not necessary, but the foundation script body.jsp is empty.

    To set up for authoring, overlay body.jsp with a local script and include a paragraph system (parsys) in the body:

    1. Navigate to /apps/an-scf-sandbox/components.

    2. Select the playpage node.

    3. Right-click and select Create > Create File...

      • Name: body.jsp
    4. Click Save All.

    Open /apps/an-scf-sandbox/components/playpage/body.jsp and paste in the following text:

    code language-xml
    <%--
    
        An SCF Sandbox Play Component component: body.jsp
    
      This is the component which renders content for An SCF Sandbox page.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %>
    <body>
        <h2>Community Play</h2>
        <cq:include path="par" resourceType="foundation/components/parsys" />
    </body>
    
  4. Click Save All.

View the page in a browser in edit mode:

  • Standard UI: http://localhost:4502/editor.html/content/an-scf-sandbox/en/play.html

You should not only see the heading Community Play, but also the UI for editing page content.

The Assets/Component side panel is seen when both the side panel is toggled open and the window is wide enough for both the side content and the page content to be displayed.

view-page

  • Classic UI: http://localhost:4502/cf#/content/an-scf-sandbox/en/play.html

Following is how the play page appears in the classic UI including with content finder (cf):

play-page-view

Communities Components communities-components

To enable Communities components for authoring, start by following these instructions:

For the purposes of this sandbox, start with these Communities components (enable by checking the box):

  • Comments
  • Forum
  • Rating
  • Reviews
  • Reviews Summary (Display)
  • Voting

In addition, choose General components, such as

  • Image
  • Table
  • Text
  • Title (Foundation)
NOTE
The components enabled for the page par are stored in the repository as the value of the components property of the
Node /etc/designs/an-scf-sandbox/jcr:content/playpage/par.

Landing Page landing-page

In a multi-language environment, the root page would include a script which would parse the request from the client to determine the preferred language.

In this example, the root page is being statically set to redirect to the English page, which may be developed in the future to be the main landing page with a link to the play page.

Change the browser URL to the root page: http://localhost:4502/editor.html/content/an-scf-sandbox.html

  • Select the Page Information icon

  • Select Open Properties

  • On the ADVANCED tab

    • For the Redirect entry, browse to Websites > SCF Sandbox Site > SCF Sandbox
    • Click OK
  • Click OK

After the site is published, browsing to the root page on a publish instance redirects to the English page.

The last step before playing with the Communities SCF components is to add a Client Library Folder (clientlibs) … Add Clientlibs

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791