April 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Exposing Spring Controllers as Magnolia CMS Templates, Page 2

As previously noted, every Magnolia CMS template has two components: a template script, written in either JSP or FreeMarker, and a template definition. Spring comes in particularly handy when defining the latter.

To illustrate, let's expose a Spring controller for a Web form as a paragraph template. Here's the controller code, which should be saved to src/main/java/info/magnolia/module/PizzaFormParagraph.java.

package info.magnolia.module.example;
import info.magnolia.module.blossom.annotation.Paragraph;
import info.magnolia.module.blossom.annotation.ParagraphDescription;
import info.magnolia.module.blossom.annotation.TabFactory;
import info.magnolia.module.blossom.dialog.TabBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
/**
* Displays a pizza order form and a confirmation page after the form is submitted.
*/
@Controller
@Paragraph(value="Pizza Form", name="pizzaForm")
@ParagraphDescription("A form for users to order a pizza")
public class PizzaFormParagraph {
@RequestMapping("/pizza/new")
public String form(ModelMap model, HttpSession session, HttpServletRequest request) {
if ("POST".equals(request.getMethod())) {
return "pizzaFormResult";
}
return "pizzaForm";
}

@TabFactory("Content")
public void contentTab(TabBuilder tab) {
tab.addStatic("This paragraph requires no configuration");
tab.addHidden("bogus", "");
}
}

Notice the @Paragraph and @ParagraphDescription annotations in the controller; these specify the paragraph template label, internal name and description, and they're used by Blossom when auto-detecting and registering templates with Magnolia CMS. The name and description, in particular, are displayed to content authors when creating pages using the template.

The handleRequest() method will be automatically called by Spring's DispatcherServlet, and returns the name of the template script, either pizzaForm.jsp or pizzaFormResult.jsp. These scripts contain the HTML markup for the template.

Here's what pizzaForm.jsp looks like:

<!--taglib uri="cms-taglib" prefix="cms"-->
<!--taglib uri="blossom-taglib" prefix="blossom"--><h2>Order a Pizza</h2>
<form action="?" enctype="application/x-www-form-urlencoded" method="post" target=newFrame>
Size: <select name="size" target=newFrame> <option selected="selected" value="7" target=newFrame>Small</option> <option value="10" target=newFrame>Medium</option> <option value="12" target=newFrame>Large</option> <option value="18" target=newFrame>Monster</option></select>

Toppings: <input name="toppings[]" type="checkbox" value="cheese" />Cheese
<input name="toppings[]" type="checkbox" value="tomato" />Tomato
<input name="toppings[]" type="checkbox" value="onion" />Onion
<input name="toppings[]" type="checkbox" value="ham" />Ham
<input name="toppings[]" type="checkbox" value="bacon" />Bacon
<input name="toppings[]" type="checkbox" value="anchovies" />Anchovies

Crust: <input name="crust" type="radio" value="thin" />Thin and crisp
<input name="crust" type="radio" value="thick" />Thick and cheesy

Name: <input name="name" type="text" />

Email address: <input name="email" type="text" />

Notes: <textarea class="textinput" cols="40" rows="5" name="message" target=newFrame></textarea>

<input name="submit" type="submit" value="Save" />
</form></pre>
And here's what pizzaFormResult.jsp looks like:
<pre><!--taglib uri="cms-taglib" prefix="cms"--><h2>Thanks for your pizza order.</h2>
We will be in touch with you shortly.

These scripts should be saved to the src/main/resources/mgnl-files/WEB-INF/example/paragraphs directory.

You're almost done! Add an applicationContext.xml file containing the Blossom configuration for your Spring application to src/main/resources/applicationContext.xml, as shown below:

<!--l version="1.0" encoding="UTF-8-->
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:blossom="http://www.magnolia-cms.com/schema/blossom"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.magnolia-cms.com/schema/blossom http://www.magnolia-cms.com/schema/blossom-1.1.xsd">

Then, add a servlet configuration file that specifies the location of the template scripts (both page and paragraph templates) for the module:

<!--l version="1.0" encoding="UTF-8-->
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

Save this file as src/main/resources/blossom-servlet.xml.

At this point, your source directory structure should look something like Figure 3.

Magnolia Project Directory Structure

Figure 3: Project Directory Structure


Tags: Spring, Magnolia



Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel