magnolia app developer roundtable
DESCRIPTION
Slide deck for an October 16, 2014 webinar about developing Magnolia Apps. Visit http://www.magnolia-cms.com/resources-directory/webinar-recordings.html for the recording of this webinar (and other webinars.)TRANSCRIPT
![Page 1: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/1.jpg)
MAGNOLIA APP DEVELOPMENT
OCTOBER 16, 2014
![Page 3: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/5.jpg)
ANDREAS WEDER HEAD OF USER EXPERIENCE @ MAGNOLIA
![Page 6: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/6.jpg)
JAN HADERKA CHIEF INTEGRATION OFFICER @ MAGNOLIA
![Page 7: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/7.jpg)
MIKAËL GELJIĆ SOFTWARE ENGINEER @ MAGNOLIA
![Page 8: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/8.jpg)
![Page 9: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/9.jpg)
![Page 10: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/10.jpg)
![Page 11: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/11.jpg)
![Page 12: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/12.jpg)
![Page 13: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/15.jpg)
An app fulfills a need.
![Page 16: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/16.jpg)
An app works well.
![Page 17: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/17.jpg)
An app is a single piece …
![Page 18: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/18.jpg)
… of an entire experience.
![Page 19: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/20.jpg)
Part of our online documentation at: https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
![Page 21: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/21.jpg)
WHEN TO USE WHICH ALERT STYLE?
![Page 22: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/22.jpg)
HOW TO NAME AND SPELL ACTIONS?
![Page 23: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/23.jpg)
SHOULD THIS ERROR INTERRUPT THE USER?
![Page 24: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/25.jpg)
CONTENT APPS
![Page 26: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/26.jpg)
CONTENT APPSBy config, no Java necessary Design guidelines Cookbook in Magnolia documentation
![Page 27: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/27.jpg)
“LIBERATED” CONTENT APPS
![Page 28: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/29.jpg)
CUSTOM APPS
![Page 30: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/32.jpg)
MAVEN ARCHETYPEmvn archetype:generate -DarchetypeCatalog=\ http://nexus.magnolia-cms.com/content/groups/public/
![Page 33: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/33.jpg)
SCRIPT DEMO
![Page 34: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/34.jpg)
JCR CONTENT APP
![Page 35: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/36.jpg)
PHOTO SCOUTA content app displaying photos from Instagram !
Demo time
![Page 37: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/39.jpg)
VAADIN’S DATA MODELRead 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)
![Page 40: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/40.jpg)
CONTAINER INTERFACESHierarchical
Indexed
![Page 41: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/42.jpg)
The InstagramContainer
![Page 43: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/47.jpg)
The InstagramContentConnector
![Page 48: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/48.jpg)
DEPENDENCIES
InstagramPhoto Scout
Workbench
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
inst
agra
m4j
12
3
![Page 49: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/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 App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/51.jpg)
DISCUSSION
![Page 52: Magnolia App Developer Roundtable](https://reader038.vdocument.in/reader038/viewer/2022102813/547e40efb4af9f7f4e8b45a8/html5/thumbnails/52.jpg)
THANKYOU!