Incorporating Javascript Libraries into Magnolia
-
Upload
magnolia-cms -
Category
Technology
-
view
351 -
download
2
description
Transcript of Incorporating Javascript Libraries into Magnolia
![Page 1: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/1.jpg)
![Page 2: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/2.jpg)
(ACTUALLY, JUST ANGULARJS)
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
Incorporating JS Libraries into Magnolia
![Page 3: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/3.jpg)
INTEGRATING TO MAGNOLIA
HOW TO CODE IN ANGULARJS
WHY WE LIKE ANGULARJS
WHAT WE DO NOW
Table of Contents
![Page 4: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/4.jpg)
Interactive Marketing Team
![Page 5: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/5.jpg)
Atlassian University
![Page 6: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/6.jpg)
Atlassian University is a training tool that teaches your company how to use Atlassian’s products through videos and step-by-step interactive tutorials. It’s the fastest path to becoming a master of Atlassian tools.
-ATLASS IAN’S WEBS ITE
”
“
![Page 7: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/7.jpg)
Atlassian University
![Page 8: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/8.jpg)
Atlassian University
![Page 9: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/9.jpg)
Atlassian University
![Page 10: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/10.jpg)
Atlassian University
![Page 11: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/11.jpg)
What is a JS Framework?
![Page 12: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/12.jpg)
A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
-WIKIPEDIA
”
“
![Page 13: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/13.jpg)
A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
-WIKIPEDIA
”
“
![Page 14: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/14.jpg)
The Atlassian order form redesign
![Page 15: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/15.jpg)
![Page 16: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/16.jpg)
We realized we needed a JS Framework
![Page 17: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/17.jpg)
![Page 18: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/18.jpg)
![Page 19: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/19.jpg)
-HIPSTER DEV
“ Have you tried Angular JS?
![Page 20: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/20.jpg)
![Page 21: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/21.jpg)
Just text by itself, for impact.
![Page 22: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/22.jpg)
Two way data binding
![Page 23: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/23.jpg)
Data-binding in Angular web apps is the automatic synchronization of data between the model and view components. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
-ANGULARJS DOCS - ht tp ://docs .angular js .org/guide/datab inding
”
“
![Page 24: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/24.jpg)
Two-Way Data Binding
![Page 25: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/25.jpg)
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
Two-Way Data Binding
![Page 26: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/26.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
![Page 27: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/27.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> </ul>
![Page 28: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/28.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
![Page 29: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/29.jpg)
![Page 30: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/30.jpg)
What/Who is AngularJS?
![Page 31: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/31.jpg)
AngularJS is an open-source JavaScript framework, started in 2010, now maintained by Google.
![Page 32: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/32.jpg)
AngularJS with Magnolia is fun
![Page 33: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/33.jpg)
...Magnolia proved once again to be an exceptionally flexible CMS and in combination with its REST API making this proof of concept was indeed extremely easy, fast and fun..
-FEDERICO GRILL I - SOFTWARE DEV @ MAGNOLIA , on h is b log
”
“
http://igorstravinskij.blogspot.com/2014/01/magnolia-rest-and-angularjs-proof-of.html
![Page 34: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/34.jpg)
NOW FOR SOME LIVE CODING!code found here:
https://bitbucket.org/willyp/angularjs-magnolia-basics/
![Page 35: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/35.jpg)
How to get this into Magnolia
![Page 36: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/36.jpg)
• Change your .html file to a .ftl
• Create paragraph and dialog definitions for:
• A question
• A answer
• Create an editing table
• Build your json structure based on that template*
• Insert quiz paragraph as an option to your layout
Steps to Magnoliafy™
![Page 37: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/37.jpg)
Create new freemarker template and define the paragraphs
![Page 38: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/38.jpg)
Define paragraph with new template
![Page 39: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/39.jpg)
Define new dialogs for the
questions/answers
![Page 40: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/40.jpg)
Create your content editing area
![Page 41: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/41.jpg)
![Page 42: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/42.jpg)
Create your JSON data with freemarker
![Page 43: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/43.jpg)
Create your JSON data with freemarker
![Page 44: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/44.jpg)
Now I add it to my layout template
![Page 45: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/45.jpg)
Lets go back to the browser and pray this works!
![Page 46: Incorporating Javascript Libraries into Magnolia](https://reader034.fdocuments.in/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/46.jpg)
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
THANK YOU!