Download - Magnolia CMS App Developer Roundtable
![Page 1: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/1.jpg)
MAGNOLIA APP DEVELOPMENT
OCTOBER 16, 2014
![Page 3: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/3.jpg)
BACKGROUND INFONeed more background information on Magnolia 5 and Apps? Watch the recording of the “Start Developing Apps for Magnolia 5” webinar here: http://magnolia-cms.com/company/events/start-developing-apps-for-magnolia-five.html
![Page 4: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/4.jpg)
QUESTIONS?Use the GoToWebinar control panel.
When possible, we’ll answer questions immediately via text. We’ll repeat key questions at the end of the webinar as well. We may not be able to answer all questions during the webinar.
![Page 5: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/5.jpg)
ANDREAS WEDER HEAD OF USER EXPERIENCE @ MAGNOLIA
![Page 6: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/6.jpg)
JAN HADERKA CHIEF INTEGRATION OFFICER @ MAGNOLIA
![Page 7: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/7.jpg)
MIKAËL GELJIĆ SOFTWARE ENGINEER @ MAGNOLIA
![Page 8: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/8.jpg)
![Page 9: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/9.jpg)
![Page 10: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/10.jpg)
![Page 11: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/11.jpg)
![Page 12: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/12.jpg)
![Page 13: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/13.jpg)
Split work into smaller tasks Use an app to solve each task Piece the results together
HOW APPS WORK
![Page 14: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/14.jpg)
A GREAT APP …adds clear value for users has a narrow focus plays well with other apps is easy to understand and use.
![Page 15: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/15.jpg)
An app fulfills a need.
![Page 16: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/16.jpg)
An app works well.
![Page 17: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/17.jpg)
An app is a single piece …
![Page 18: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/18.jpg)
… of an entire experience.
![Page 19: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/19.jpg)
HOW DO I BUILD GREAT APPS?Quick-bite recipe cards that capture best practicesfor making your apps look // work // play well.
![Page 20: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/20.jpg)
Part of our online documentation at: https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
![Page 21: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/21.jpg)
WHEN TO USE WHICH ALERT STYLE?
![Page 22: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/22.jpg)
HOW TO NAME AND SPELL ACTIONS?
![Page 23: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/23.jpg)
SHOULD THIS ERROR INTERRUPT THE USER?
![Page 24: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/24.jpg)
Content apps - great for managing custom data sets Custom apps - if you need something really different
WHAT TYPE OF APP SHOULD I BUILD?
![Page 25: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/25.jpg)
CONTENT APPS
![Page 26: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/26.jpg)
CONTENT APPSBy config, no Java necessary Design guidelines Cookbook in Magnolia documentation
![Page 27: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/27.jpg)
“LIBERATED” CONTENT APPS
![Page 28: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/28.jpg)
LIBERATED CONTENT APPSA new (5.3) type of content app Liberated from the JCR Java coding required Vaadin know-how is helpful Blossom can help customize just about anything
![Page 29: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/29.jpg)
CUSTOM APPS
![Page 30: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/30.jpg)
APP SETUPDefine a module Write a service to encapsulate business logic Create app launcher entry Define & implement subapps Define & implement actions
![Page 31: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/31.jpg)
APP BASE CLASSESMight be able to use EmbeddedPageSubApp (which shows external content in iframe) Use BaseSubApp Try to use SmallAppLayout
![Page 32: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/32.jpg)
MAVEN ARCHETYPEmvn archetype:generate -DarchetypeCatalog=\ http://nexus.magnolia-cms.com/content/groups/public/
![Page 33: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/33.jpg)
SCRIPT DEMO
![Page 34: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/34.jpg)
JCR CONTENT APP
![Page 35: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/35.jpg)
LIBERATED CONTENT APPSAvailable since Magnolia 5.3Key terms: Containers, ContentConnectors, itemIds...
Great, where should I start?
Here's your shot of Vaadin
Photo scout appA content app displaying photos from Instagram, over their REST API
![Page 36: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/36.jpg)
PHOTO SCOUTA content app displaying photos from Instagram !
Demo time
![Page 37: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/37.jpg)
FROM PLAIN VAADIN...
Data sourceUI
Table / TreeTable
com.vaadin.ui
Container
com.vaadin.data
Item Item Item
Item Item
![Page 38: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/38.jpg)
...OFF TO MAGNOLIA
Data sourceUIContent app
Table / TreeTableWorkbench
com.vaadin.ui com.vaadin.data
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
![Page 39: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/39.jpg)
VAADIN’S DATA MODELRead 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)
![Page 40: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/40.jpg)
CONTAINER INTERFACESHierarchical
Indexed
![Page 41: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/41.jpg)
CONTAINER IMPLEMENTATION TIPS#1 Start by extending the AbstractContainer
#2 Focus on READ operations Leave WRITE operations unimplemented
Read 8.5 Collecting Items in Containers https://vaadin.com/book/-/page/datamodel.container.html
![Page 42: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/42.jpg)
The InstagramContainer
![Page 43: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/43.jpg)
GOOD ITEM IDsMost simple unique representation of your contente.g. workspace + uuid in Magnolia for JCR items, photo id in flickr,path on a simple file-system Don't build itemIds by concatenating strings, use a typed POJO instead (eg. JcrItemId)
In challenging situations, you might need more than strict uniqueness e.g. browse flickr photos by album, in a tree
![Page 44: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/44.jpg)
FINE, WHAT ABOUTTHE CONTENT CONNECTOR?
InstagramPhoto Scout
Workbench
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
inst
agra
m4j
![Page 45: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/45.jpg)
THE CONTENT CONNECTORMap arbitrary objects to three main representations:
a unique itemId
a Vaadin Item
a URL fragment
![Page 46: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/46.jpg)
CONTENT CONNECTOR BENEFITSActions and AvailabilityOperate on one or multiple items Sync selection with e.g. image preview capabilities
Bookmark content / Add to favorites
Chooser capability Integrate external content with other appse.g. Linking to an image from a page component (pages app)
![Page 47: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/47.jpg)
The InstagramContentConnector
![Page 48: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/48.jpg)
DEPENDENCIES
InstagramPhoto Scout
Workbench
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
inst
agra
m4j
12
3
![Page 49: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/49.jpg)
HOOKING THE CONTAINERExtend Magnolia's default ContentPresentersListPresenter, TreePresenter, ThumbnailPresenter
Override #initializeContainer()
Configure these presenters to be used .../browser/workbench/contentViews
![Page 50: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/50.jpg)
Want to dive deeper?/** * Want to see more code? * Have I overlooked anything? * * Please do ask & let us know :) */
![Page 51: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/51.jpg)
DISCUSSION
![Page 52: Magnolia CMS App Developer Roundtable](https://reader033.vdocument.in/reader033/viewer/2022061206/5481e04bb4af9f5a428b45cc/html5/thumbnails/52.jpg)
THANKYOU!