Slide deck for an October 16, 2014 webinar about developing Magnolia Apps. The webinar demoed a script for quickly creating content apps, along with an overview of building "liberated" content apps that access external data sources. Visit http://www.magnolia-cms.com/resources-directory/webinar-recordings.html for the recording of this webinar (and other webinars.) Content App Generation Script: https://weblogs.java.net/blog/rah003/archive/2014/09/28/geeky-script-speed-your-app-development Code for Photoscout App (shows Instagram and Magnolia CMS integration): https://github.com/mkgl/photo-scout

1. OCTOBER 16, 2014
MAGNOLIA APP
DEVELOPMENT

2. ZAK GREANT
TECHNICAL EVANGELIST @ MAGNOLIA
Credit:

3. BACKGROUND INFO
Need 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

4. 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.

5. ANDREAS WEDER
HEAD OF USER EXPERIENCE @ MAGNOLIA

6. JAN HADERKA
CHIEF INTEGRATION OFFICER @ MAGNOLIA

7. MIKAËL GELJIĆ
SOFTWARE ENGINEER @ MAGNOLIA

13. HOW APPS WORK
Split work into smaller tasks
Use an app to solve each task
Piece the results together

14. A GREAT APP …
adds clear value for users
has a narrow focus
plays well with other apps
is easy to understand and use.

15. An app fulfills a need.

16. An app works well.

17. An app is a single piece …

18. … of an entire experience.

19. HOW DO I BUILD GREAT APPS?
Quick-bite recipe cards that capture best practices
for making your apps look // work // play well.

20. APP DESIGN GUIDELINES
Part of our online documentation at:
https://wiki.magnolia-cms.com/x/CAFcAw

21. WHEN TO USE WHICH ALERT STYLE?

22. HOW TO NAME AND SPELL ACTIONS?

23. SHOULD THIS ERROR INTERRUPT THE USER?

24. WHAT TYPE OF APP SHOULD I BUILD?
Content apps - great for managing custom data sets
Custom apps - if you need something really different

25. CONTENT APPS

26. CONTENT APPS
By config, no Java necessary
Design guidelines
Cookbook in Magnolia documentation

27. “LIBERATED” CONTENT APPS

28. LIBERATED CONTENT APPS
A 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

29. CUSTOM APPS

30. APP SETUP
Define a module
Write a service to encapsulate business logic
Create app launcher entry
Define & implement subapps
Define & implement actions

31. APP BASE CLASSES
Might be able to use EmbeddedPageSubApp
(which shows external content in iframe)
Use BaseSubApp
Try to use SmallAppLayout

32. MAVEN ARCHETYPE
mvn archetype:generate -DarchetypeCatalog=
http://nexus.magnolia-cms.com/content/groups/public/

33. SCRIPT DEMO

34. JCR
CONTENT APP

35. LIBERATED CONTENT APPS
Available since Magnolia 5.3
Key terms: Containers, ContentConnectors, itemIds...
Great, where should I start?
Here's your shot of Vaadin
Photo scout app
A content app displaying photos from Instagram, over their REST API

36. PHOTO SCOUT
A content app displaying photos from Instagram
!
Demo time

37. FROM PLAIN VAADIN...
com.vaadin.ui
com.vaadin.data
UI Container
Data source
Table / TreeTable
Item Item
Item Item Item

38. ...OFF TO MAGNOLIA
com.vaadin.ui com.vaadin.data
CUoI ntent app Container
Data source
TWaobrlkeb /e TnrceheTable
Item Item
Item Item Item
ContentConnector
ImageProvider

39. VAADIN’S DATA MODEL
Read 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)

40. CONTAINER INTERFACES
Hierarchical
Indexed

41. 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

42. The InstagramContainer

43. GOOD ITEM IDs
Most simple unique representation of your content
e.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

44. FINE, WHAT ABOUT
THE CONTENT CONNECTOR?
Photo Scout Container
Instagram
Workbench
Item Item
Item Item Item
ContentConnector
ImageProvider
instagram4j

45. THE CONTENT CONNECTOR
Map arbitrary objects to three main representations:
a unique itemId
a Vaadin Item
a URL fragment

46. CONTENT CONNECTOR BENEFITS
Actions and Availability
Operate 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 apps
e.g. Linking to an image from a page component (pages app)

47. The InstagramContentConnector

48. DEPENDENCIES
Photo Scout Container
Instagram
Workbench
Item Item
Item Item Item
ContentConnector
ImageProvider
instagram4j
1
2
3

49. HOOKING THE CONTAINER
Extend Magnolia's default ContentPresenters
ListPresenter, TreePresenter, ThumbnailPresenter
Override #initializeContainer()
Configure these presenters to be used
.../browser/workbench/contentViews

50. Want to dive deeper?
/**
* Want to see more code?
* Have I overlooked anything?
*
* Please do ask & let us know :)
*/

51. DISCUSSION

52. THANK
YOU!