Exercise: Advanced

Could be based off of this: Code Snippets and https://documentation.magnolia-cms.com/display/DOCS56/Developing+a+custom+content+editor+app

1. We'll be using the FreeMarker directive continue, so we need to update the version of FreeMarker that came with Magnolia (2.3.25 - you could find it in your WEB-INF/lib).  Add the following to your webapp pom:

   Click here to expand...

   <dependency>
     <groupId>org.freemarker</groupId>
     <artifactId>freemarker</artifactId>
     <version>2.3.27-incubating</version>
   </dependency>

2. Now we need a content app for managing something, call them 'offers'. 

   Click here to expand...

   Use the Groovy App to create a content app called 'Offers'. (this is just to create the workspace and get us the roles)

   Delete /modules/groovy/apps/offers (you will use my copy instead later)


   Delete /modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps/offers (you will put it somewhere else later)


   Log out of Magnolia and log back in (this is for your user environment to pick up the new roles)

   Add this: offers.yaml to light_modules/rewe/apps/ (I've made some useful changes and made sure it has no errors)


   Import this configuration: config.modules.ui-admincentral.config.appLauncherLayout.groups.rewe.xml (This will put the app in it's own group)

   
   

3. Add 3 offers using your new Offers app. 

   Make sure for 'Country', you use 'cn' and 'gb'.  This is for later testing in the exercise.

   Click here to expand...

   

   Now we'll need to create a component to display the offers, a page for that component to live on, and some styling:

   Create an Offers Component

   /rewe/templates/components/offersList.yaml

   title: Offers List
   renderType: freemarker
   templateScript: /rewe/templates/components/offersList.ftl

   /rewe/templates/components/offersList.ftl

   [#assign previewCountry = ctx.getParameter('previewCountry')!?html] [#-- there are other ways to do this! --]
   
   <div class='offers-list'>
       [#assign page = cmsfn.page(content)]
       [#assign pageLink = cmsfn.link(page)]
       [#assign offerName = state.getSelector()]
       [#assign offerNode = cmsfn.contentByPath("/"+(offerName!), "offers")]
   
       [#if offerName?has_content && offerNode?has_content]
   
           [#if offerNode.name?has_content]
               <h3>${offerNode.name}</h3>
           [/#if]
           [#if offerNode.location?has_content]
               <h4>[#if offerNode.date?has_content] ${offerNode.date?string["dd.MM.YYYY"]!} - [/#if]${offerNode.location}</h4>
           [/#if]
   
           ${offerNode.description!}
   
           [#if pageLink?has_content]
               <a href="${pageLink!}">Show all offers</a>
           [/#if]
   
       [#else] [#-- IF THERE IS NO SELECTOR, LIST OF offerS WILL BE DISPLAYED --]
   
           [#assign offersRoot = cmsfn.contentByPath("/", "offers")]
           [#assign offers = cmsfn.children(offersRoot,"offer")![]]
   
           [#list offers]
               <ul class="list-group">
                   <li class="list-group-item active">Total offers: ${offers?size} </li>
                   [#items as offer]
               [#if previewCountry != offer.country] [#-- there are other ways to do this! --]
               [#continue] [#-- go to the next item if it's not the right country --]
               [/#if]
                       [#-- It might be, that the page link does not contain '.html' and/or ends with '/' --]
                       [#assign linkWithSelector = ensureLinkEndsWithDotHtml(pageLink)?replace('.html','~'+offer.@name+'~.html')]
   
                       [#if linkWithSelector?has_content && offer.name?has_content]
                           <a href="${linkWithSelector}" class="list-group-item"><small>offer #${offer_index+1}: </small> ${offer.name} [#if offer.date?has_content][${offer.date?string["dd.MM.YY"]}][/#if]</a>
                       [#else]
                           <li class="list-group-item"><small>offer #${offer_index+1}: </small> ${offer.name} [#if offer.date?has_content][${offer.date?string["dd.MM.YY"]}][/#if]</li>
                       [/#if]
                   [/#items]
               </ul>
           [/#list]
   
       [/#if]
   
   </div>
   
   [#function ensureLinkEndsWithDotHtml link]
   
       [#if !link?contains(".html")]
           [#if link?ends_with("/")]
               [#assign link = link?keep_before_last('/')]
           [/#if]
           [#return link+'.html']
       [/#if]
   
       [#return link]
   
   [/#function]

   Create an Offers Page

   /rewe/templates/pages/offers.yaml

   renderType: freemarker
   title: Offers Page
   templateScript: /rewe/templates/pages/offers.ftl
   
   areas:
     main:
       availableComponents:
         eventsList:
           id: rewe:components/offersList
         textImage:
           id: mtk:components/textImage

   /rewe/templates/pages/offers.ftl

   <!DOCTYPE html>
   <html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
     <head>
       [@cms.page /]
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>${content.windowTitle!content.title!}</title>
       <meta name="description" content="${content.description!""}" />
       <meta name="keywords" content="${content.keywords!""}" />
   
       ${resfn.css(["/rewe/.*css"])!}
     </head>
     <body class="three ${cmsfn.language()}">
       [@cms.area name="main"/]
   
       <div class="container ">
   
       </div>
   
       ${resfn.js(["/rewe/.*js"])!}
     </body>
   </html>

   Add Some Styling

   Copy these files into your /rewe/webresources/js and /rewe/webresources/css as appropriate:

   bootstrap.css ----- bootstrap.min.js ----- jquery.min.js

4. yz