Magnolia- Working with Areas and components in magnolia

Pages are organized into smaller elements called areas. Areas are controllable blocks, rendered as div elements in the generated HTML. Areas make it possible to have exact control over the page layout and over what content can be placed inside the area. There are three types of areas. The type defines how many components editors can add inside the area. single area can contain one component list can contain many components noComponent cannot contain any editor-added components. The system creates the components automatically. You can name your areas as you wish but some conventions exist. The main area is typically where primary content resides. For example, on a news page the actual news story would be in the main area. Other page components such as headers, footers, and navigation would reside in their own areas. Areas can be defined globally for the whole site in the site definition or per page template in the template definition. Create the below structure under Configuration- > Modules. Also make a component textBlock available to the area as shown below.   Make changes to the home.ftl to include main area: <html> <head> [@cms.init /] <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>${content.title!}</title> </head> <body> <h1>${content.title!}</h1> <p>${content.text!}</p> [@cms.area name="main" /] </body> </html> Create an area script under \template\src\main\resources\template\areas\mainArea.ftl and save with the following code: <div id="main"> [#list components as component ] [@cms.component content=component /] [/#list] </div> Create a component definition as shown in the below diagram: Create a component script( under \template\src\main\resources\template\components\textBlock.ftl)  in the similar way as an area script and save the below code in the textBlock.ftl file: <p> ${content.text!} </p> Next, create a component dialog, it allows editors to edit the content of the component. Create the following structure...

Magnolia- Creating your first page using magnolia page template

This blog is the continuation of the blog post – “Magnolia- Setting up a CE project using Maven and Eclipse IDE”. Once your site is up and running, you can start first by creating a script and then a template. Every page in magnolia is defined by a page template. To create a script, go to template->src->main->resources->template->pages and create a new file home.ftl. Paste below content into file and save. <h1>${content.title!}</h1> Now, open Configuration in Magnolia.Under Modules, go to template. Add folder “templates” to template and Add folder “pages” to templates. Add Content Node “homePageTemplate” to the pages. Add  three Properties to homePageTemplate as given below: Now let us create a page and Save Changes. Check out your first page at: http://localhost:8080/sms-webapp/Home.html     Next is to make changes to your home.ftl to include CMS tag library. Save home.ftl under your /template/src/main/resources/template/pages/home.ftl. <html> <head> [@cms.init /] <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>${content.title!}</title> </head> <body> <h1>${content.title!}</h1> <p>My template content</p> </body> </html> Next, create the below structure under your Magnolia template configuration. Next, Go to Configuration > /modules/template/templates/pages/homePageTemplate. Create a new property dialog and set its value to template:pageProperties. No need to worry about “areas”, we will cover it in next blog. To render the text you typed. Make below changes to your home.ftl <html> <head> [@cms.init /] <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>${content.title!}</title> </head> <body> <h1>${content.title!}</h1> <p>${content.text!}</p> </body> </html> Congratulations!!! You’re DONE!!! Click on edit page and then edit page properties. Save your changes. Check out your first page in...

Magnolia- Setting up a CE project using Maven and Eclipse IDE

Magnolia is an open-source content management system (CMS) developed by Magnolia International Ltd., based in Basel, Switzerland. It is based on Content repository API for Java (JSR-283). It is a digital business platform with a CMS at its core. It’s more than just a content management system, even though it’s also one of the best in the world – we’re not shy to admit it. Companies like Airbus Group, Al Arabiya, Avis and Virgin America use Magnolia as the central hub for their web, mobile and IoT initiatives. Magnolia’s unique open suite approach allows organisations to go to market fast, adapt quickly to changing business priorities and integrate easily with third-party systems. This enables them to create outstanding multi-channel personalized customer experiences. So let us start. Before we start, let us have the prerequisites in place: Install latest JDK ,Maven,Apache Tomcat and Eclipse IDE on your system. Open command prompt in Windows (Start- > cmd) and follow the steps below: $ mkdir capetownnoida $ cd capetownnoida $ mvn archetype:generate -DarchetypeCatalog=https://nexus.magnolia-cms.com/content/groups/public/ $ cd sms $ mvn archetype:generate -DarchetypeCatalog=https://nexus.magnolia-cms.com/content/groups/public/ $ mvn clean install $ cd sms-webapp $ mvn war:inplace Download Tomcat from Apache site and unzip it into Tomcat Installation Directory: C:\Program Files\apache\apache-tomcat-8.0.23. Download Eclipse IDE for Java EE Developers from Eclipse Downloads page. Open eclipse with new workspace “sms”. In the workspace, create a new application server using File -> New ->Server. Select Apache- > Tomcat v8.0 Server. Enter Tomcat Installation Directory: C:\Program Files\apache\apache-tomcat-8.0.23. Click on Finish. Select the newly created Server. Under Server options, check Server Modules without publishing. Increase Timeouts to 450 and 150 respectively. Now, import the project into Eclipse using File-> Import -> Existing Maven Projects. Select...