M6.3 - Magnolia Templating Development for the Front-end Developers

Total time: ~1 day

Learn about Light Development and Magnolia's CLI tool to build the templates (pages, areas, component) quickly without the need to program in Java.

Prerequisites

Work on the file system and use technologies that you already know, such as CSS and HTML5. Define templates and configurations, faster and easier. This course is for front-end developers who want to learn how to build templates and apps for Magnolia. This course does not require any prior Magnolia knowledge. However, we highly recommend that participants have used scripting languages, and are familiar with Terminal or Command Prompt and Git.

This training is based on Magnolia 6.3.

Chapters

1. Getting started with Light Development 4 min
2. Preparation: Setting up the environment 20 min
3. Magnolia CLI 10 min
4. Light modules 5 min
5. Exercise: Create a light module 5 min
6. Knowledge check 1 min
7. Resource files app 6 min
8. Exercise: Check the light module in the app 2 min
9. Template 6 min
10. Page template 6 min
11. FreeMarker directives - page 5 min
12. Exercise: Create a page template 5 min
13. JCR 6 min
14. Exercise: Check entries in the JCR browser 4 min
15. Resource linking 4 min
16. Exercise: Use 'Twitter Bootstrap' CSS Resource 7 min
17. Knowledge check (CSS) 1 min
18. Dialog 7 min
19. Exercise: Add dialog definition and content 7 min
20. Accessing the content 5 min
21. Render the first Page's content 8 min
22. Area template 5 min
23. FreeMarker directives - area 5 min
24. Exercise: Create an area 7 min
25. Component template 5 min
26. FreeMarker directives - component 3 min
27. Exercise: Create a component template textImage 8 min
28. Knowledge check (FreeMarker) 1 min
29. FreeMarker: Basics 9 min
30. Exercise: 'Text & Image' Component - Create Headline 8 min
31. Templating functions 7 min
32. Exercise: Make use of cmsfn to decode a property 7 min
33. Dam TemplatingFunctions 6 min
34. Exercise: Make Use of the Dam TemplatingFunctions 13 min
35. Linking in JCR & Magnolia 7 min
36. Exercise: Create a Teaser Component 8 min
37. Definition Objects - Parameters 5 min
38. Exercise: Parameterize a new 'textImageParameters' Component 9 min
39. Area Definition - Area Script 5 min
40. Exercise: Use the Area Script 2 min
41. Definition decorator 8 min
42. Exercise: Decorate an app label 5 min
43. Definitions App 10 min
44. Congratulations! 1 min