Blossom Q&A Webinar

Blossom Q&A Webinar
1
Monday, September 30, 13

2
Zak Greant
Community Manager, Magnolia

Questions?
Use the questions tool
built into the GoToWebinar
client.
3

4
forums.magnolia-cms.com

#blossomqa
5

Sr. Software Engineer, Magnolia
Lead developer of Magnolia’s Spring integration
Spring Framework user since 2005
Tobias Mattsson
6

Blossom 3.0
7
Update for Magnolia 5 series
Requires Magnolia 5.1
Release candidate available
Final release next week

Magnolia + Spring = Blossom 8

@Template
9

TEMPLATEREQUEST CONTENT
CMS
10

TEMPLATEREQUEST CONTENT
CMS + Blossom
11
CONTROLLER
MODEL
VIEW

Page Template
@Controller
@Template(id="myModule:pages/main", title="Main")
public class MainTemplate {
   @RequestMapping("/main")
   public String render(ModelMap model) {
       return "pages/main";
   }
}
12

13
PAGE

PAGES CONTAIN 0:n AREAS
14
PAGE
AREA
A
R
E
A
AREA

PAGES CONTAIN 0:n AREAS
15
PAGE
AREA
A
R
E
A
AREA
AREAS HAVE 0:n COMPONENTS
COMPONENT
COMPONENT
Etiam porta sem malesuada magna mollis
euismod. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia
odio sem nec elit.
COMPONENT
Etiam porta sem malesuada magna mollis
euismod. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Aenean lacinia
bibendum nulla sed consectetur. Aenean eu
leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Sed
posuere consectetur est at lobortis.
C
O
M
P
O
N
E
N
T

Area Template
@Controller
@Template(id="myModule:pages/main",title="Main Template")
public class MainTemplate {
   @Controller
   @Area("main")
   public static class MainArea {
       @RequestMapping("/main/mainArea")
       public String render() {
           return "areas/main";
       }
   ...
16

Component Template
@Controller
@Template(id="myModule:components/shoppingCart",
         title="Shopping Cart")
@TemplateDescription("Shopping cart")
public class ShoppingCartComponent {
   @RequestMapping("/shoppingCart")
   public String handleRequest() {
       ...
       return "components/shoppingCart";
   }
...
17

SERVLET
CONTAINER
RENDERING
FILTER
RENDERING
ENGINE
BLOSSOM
DISPATCHER
SERVLET
CONTROLLER
18
How Blossom Works

Blossom 3.0
19
What’s new?

20
Dialogs

Fluent Builder-style API
@TabFactory("Content")
public void contentTab(UiConfig cfg, TabBuilder tab) {
tab.fields(
cfg.fields.text("heading").label("Heading"),
cfg.fields.richText("body").label("Text body"),
cfg.fields.websiteLink("categoryLink").label("Link"),
cfg.fields.basicUpload("image").label("Image"),
cfg.fields.checkbox("inlineImage").label("Inline Image")
);
}
21

Blossom 2 Style Dialog
public void contentTab(TabBuilder tab) {
DialogEdit dialogEdit = tab.addEdit("title", "Title", "");
dialogEdit.setRequired(true);
dialogEdit.setConfig("i18n", "true");
dialogEdit.setConfig("rows", 5);
}
22

Page Template with Dialog
@Controller
@Template(title="Article", id="myModule:pages/article")
public class ArticleTemplate {
       tab.fields(cfg.fields.text("title").label("Title"));
   }
}
23

Page Template with Dialog
@Controller
       tab.fields(cfg.fields.text("title").label("Title"));
   }
} <title>${content.title}</title>

23

@Controller
@Area("main")
@Controller
tab.fields(
cfg.fields.text("border").label("Border width")
);
Area Template with Dialog 24

@Controller
@Area("main")
@Controller
tab.fields(
cfg.fields.text("border").label("Border width")
);
Area Template with Dialog 24
<div id="main"
style="border:${content.border}px solid #000">
<h2>${content.heading}</h2>
<c:forEach items="${components}" var="component">
<cms:component content="${component}" />
</c:forEach>
</div>

Component Template with Dialog
@Controller
@Template(title="Text", id="myModule:components/text")
public class TextComponent {
@RequestMapping("/text")
return "components/text";
}
tab.fields(
cfg.fields.richText("body").label("Text body")
25

Component Template with Dialog
@Controller
return "components/text";
}
tab.fields(
cfg.fields.richText("body").label("Text body")
25
<h1>${content.heading}</h1>
<p>${cmsfn:decode(content).body}</p>

YouTube Video Component
@Controller
@Template(title="YouTube Video", id="myModule:components/youtube")
@TemplateDescription("Embed a YouTube video")
public class YoutubeComponent {
@RequestMapping("/youtube")
public String render(Node node, ModelMap model) throws RepositoryException {
model.put("videoId", node.getProperty("videoId").getString());
return "components/youtube";
}
tab.fields(
cfg.fields.text("videoId").label("Video ID")
);
}
}
26

YouTube Video Component
@Controller
@Template(title="YouTube Video", id="myModule:components/youtube")
@TemplateDescription("Embed a YouTube video")
public class YoutubeComponent {
@RequestMapping("/youtube")
public String render(Node node, ModelMap model) throws RepositoryException {
model.put("videoId", node.getProperty("videoId").getString());
return "components/youtube";
}
tab.fields(
cfg.fields.text("videoId").label("Video ID")
);
}
}
26
<iframe width="100%" height="400" src="//www.youtube.com/
embed/${videoId}" frameborder="0" allowfullscreen></iframe>

Dialogs and the Class Hierarchy
public abstract class BasePageTemplate {
@TabFactory("Meta")
public void metaTab(UiConfig cfg, TabBuilder tab) {
tab.fields(
cfg.fields.text("metaAuthor").label("Author"),
    cfg.fields.text("metaKeywords").label("Keywords"),
    cfg.fields.text("metaDescription").label("Description")
   );
}
}
27

Input Validation
...
tab.fields(
cfg.fields.text("name").label("Name").required(),
cfg.fields.text("email").label("Email")⏎
.validator(cfg.validators.email())
);
}
...
28

Dynamic Dialog
@Template(id="myModule:components/bookCategory", title="Book category")
@TemplateDescription("A list of books in a given category.")
@Controller
public class BookCategoryComponent {
   @Autowired
   private SalesApplicationWebService service;
   @RequestMapping("/bookcategory")
   public String render(Node content, ModelMap model) throws RepositoryException {
       String category = content.getProperty("category").getString();
       model.put("books", service.getBooksInCategory(category));
       return "components/bookCategory";
   }
       Collection<String> categories = service.getBookCategories();
       tab.fields(
cfg.fields.select("category").label("Category").options(categories)
       );
   }
}
29

Dynamic Dialog
@Controller
   @Autowired
   }
       tab.fields(
       );
   }
}
30

Dynamic Dialog
@Controller
   @Autowired
   }
       tab.fields(
       );
   }
}
31

Questions
32

How do I get started on my project?
33

mvn archetype:generate -DarchetypeCatalog=http://nexus.magnolia-cms.com/
content/groups/public/
choose magnolia-blossom-module-archetype
Define value for property 'groupId': : com.acme
Define value for property 'artifactId': : acme-module
Define value for property 'version': 1.0-SNAPSHOT:
Define value for property 'package': com.acme:
Define value for property 'magnolia-version': : 4.5.11
Define value for property 'module-class-name': : AcmeModule
Define value for property 'module-name': acme-module: acmeModule
http://wiki.magnolia-cms.com/display/WIKI/
Creating+a+new+Blossom+project+using+maven+archetypes

How would I build a REST interface to my CMS
content using Blossom?
35

REST servlet in module descriptor
<servlets>
  <servlet>
    <name>rest</name>
    <class>org.springframework.web.servlet.DispatcherServlet</class>
    <mappings>
      <mapping>/rest/*</mapping>
    </mappings>
    <params>
      <param>
        <name>contextConfigLocation</name>
        <value>classpath:/rest-servlet.xml</value>
      </param>
    </params>
  </servlet>
</servlets>
36

REST Controller
@Controller
public class ProductsRestController {
@RequestMapping("/products/{productId}")
public Product findProduct(@PathVariable String productId) {
// implementation omitted
}
}
37

Can I leverage Magnolia's caching functionality
to improve the performance of my Spring app?
38

Influencing caching 39
@Controller
public String render(HttpResponse response) {
response.setHeader("Cache-Control", "no-cache");
return "components/text.jsp";
}
}

How can I present dialogs in different languages
using Blossom?
40

@Controller
@Template(title = "Text", id = "blossomSampleModule:components/text")
@I18nBasename("info.magnolia.blossom.sample.messages")
@TabFactory("textComponent.contentTab.label")
tab.fields(
cfg.fields.text("heading").label("textComponent.contentTab.heading")
);
}
}
41I18n Blossom Dialog

/info/magnolia/blossom/sample/messages_en.properties
textComponent.contentTab.label = Content
textComponent.contentTab.heading = Heading
/info/magnolia/blossom/sample/messages_sv.properties
textComponent.contentTab.label = Innehåll
textComponent.contentTab.heading = Rubrik
42I18n Blossom Dialog

How do I migrate my existing site to Magnolia/
Blossom?
43

How can I integrate Spring Security?
44

How can I dependency inject spring beans into
RenderingModels?
46

Autowired RenderingModel
public class MyRenderingModel extends RenderingModelImpl<TemplateDefinition> {
@Autowired
private MyService service;
public MyRenderingModel(ServletContext servletContext, Node content, TemplateDefinition definition, Render
super(content, definition, parent);
WebApplicationContext wac = WebApplicationContextUtils.getWebApplicationContext(servletContext);
AutowireCapableBeanFactory beanFactory = wac.getAutowireCapableBeanFactory();
beanFactory.autowireBean(this);
}
47

Autowired RenderingModel
public class MyRenderingModel extends AbstractAutowiredRenderingModel<TemplateDefinition> {
@Autowired
private MyService service;
public MyRenderingModel(ServletContext servletContext, Node content, TemplateDefinition definition, Render
super(content, definition, parent, servletContext);
}
48

Blossom Q&A Webinar

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Blossom Q&A Webinar