Magnolia CMS

A Content Management System for the Java Stack

Peter Wayner

Magnolia

A Content-Management System written in Java using the best of the Java stack.

Java?

Many CMS systems are written in PHP.

Java brings robust, enterprise-ready power to the server.

Java ecosystem brings solid foundation like Spring, JSP, Freemarker and Groovy.

Great libraries and code already built.

History

Magnolia began in 1997 as a consulting company.

Built their own CMS tools to handle jobs for clients.

Released them as open source in 2003.

Growing partnerships with it ever since.

Today

Magnolia has been through hundreds of releases, big and small.

5.0 comes in June.

Community Edition is Open Source(GPL). Enterprise comes with support.

Pages and Paragraphs

• Pages are the top of the hierarchy. Each URL is mapped to a page.
• Areas are next. A Page may have any number Areas. An Area can have sub-areas.
• Components are the bottom. They were once called "paragraphs" but that was confusing. They could always hold text, images or forms.

Static Sites

These blocks (areas & components) can be tossed together in a static way.

The areas are designed for reuse. They're great for the blocks on the side of a page.

Stack them together like blocks of HTML.

Many of the standard tools like teasers and images are baked in.

Demo Site

click

Dynamic

MVC

You create Java objects for model and controller.

Use your standard Java database skills to populate it. (Default comes with DerbyDB.)

Display It

Templates format the data.

JSPs were once the main template.

Freemarker templates are favored by some.

Grails is new and evolving.

Geotracking Application

The Java backend converts your IP address into a location.

Magnolia CMS searches for articles about the location.

Template displays them in a component.

Geo Location

First we need to interaction with an API.

Let's use the jSoup library to parse some HTML.

Just include the dependency in Maven. (Java stack power!)

 
<dependency>
  <!-- jsoup HTML parser library @ http://jsoup.org/ -->
  <groupId>org.jsoup</groupId>
  <artifactId>jsoup</artifactId>
  <version>1.6.3</version>
</dependency>
					

Geo Location

Now extract the IP address.

Dig through Magnolia to get the Servlet information,HttpServletRequest/

Java stack power!

String getIPAddress(){
    WebContext c = MgnlContext.getWebContext();
     
    String path = c.getContextPath();
    HttpServletRequest request = c.getRequest();
    String addr=request.getRemoteAddr();
    if (CheckForLocalHostDuringDebugging){
        addr=cleanseIPAddress(addr);
    }
    return addr;
}
					

getIPAddress -> IP address

192.168.1.1
					

Convert

The location API from ipinfodb.com takes an IP address as a parameter and returns a String separated by semi-colons.

Java stack power!

public String[] getParts(String addr){
    String fetchMe=urlBase+addr;
    Document doc;
    try {
        doc = Jsoup.connect(fetchMe).get();
            String text=doc.text();
            String[] parts=text.split(splittingCharacter);  
            return parts;
    } catch (IOException e) { 
        e.printStackTrace();
    }
    return null;
}
					

getParts -> Location

"Reston Virginia"
					

Find It

Magnolia implements the Java Content Repository Standard

Search it with either SQL or Xpath like syntax.

Java stack power!

public Collection search(String s){
    String q="select * from mgnl:content where contains(*,'"+s+"')";
    Collection ans = QueryUtil.query("website", q);
    return ans;
}
					

search -> Articles

Converts "Reston Virginia" to a Collection.

     Collection
					

Format it with Freemarker

[#assign cms=JspTaglibs["cms-taglib"]]
 
[@cms.editBar /] 
 
 

[#list model.textsBasedUponIP as n]
 
<li> <a href="${mgnl.createLink(n)}">${n?node_type} 
   -- ${n.title}-- ${n.metaData.creationDate}-- ${n.@name}
   -- ${n.@handle}-- ${n.@uuid}</a> 
 
</li>
[/#list]
</ul>
					

(You can also use a JSP.)

Template to Component

Then the Java MVC is added as a component.

And then the components are placed where you want them.

Plugin Architecture

You can preload templates for the user.

Makes it easy for plugins to migrate.

Grails Integration

You can use Magnolia as a Grails plugin with Maglev.

All of the table-building CRUD power of Grails can be used in templates.

Next

Version 5.0 is rewritten for mobile.

Touch events treated slightly differently than clicks.

Cleaner APIs and easier Theming

http://www.magnolia-cms.com/

Point of View

Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.

rvl.io

If you don't like writing slides in HTML you can use the online editor rvl.io.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

• No order here
• Or here
• Or here
• Or here

Fantastic Ordered List

1. One is smaller than...
2. Two is smaller than...
3. Three!

Transition Styles

You can select from different transitions, like:
Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Themes

Reveal.js comes with a few themes built in:
Sky - Beige - Simple - Serif - Night - Default

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.

Pretty Code

function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
}
					

Courtesy of highlight.js.

Intergalactic Interconnections

You can link between slides internally, like this.

Spectacular image!

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

• Source code on GitHub
• Leave feedback on my site
• Follow me on Twitter

It's free

reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.

THE END

BY Hakim El Hattab / hakim.se