View
191
Download
3
Category
Tags:
Preview:
DESCRIPTION
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
Citation preview
MAGNOLIA APP DEVELOPMENT
OCTOBER 16, 2014
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
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.
ANDREAS WEDER HEAD OF USER EXPERIENCE @ MAGNOLIA
JAN HADERKA CHIEF INTEGRATION OFFICER @ MAGNOLIA
MIKAËL GELJIĆ SOFTWARE ENGINEER @ MAGNOLIA
Split work into smaller tasks Use an app to solve each task Piece the results together
HOW APPS WORK
A GREAT APP …adds clear value for users has a narrow focus plays well with other apps is easy to understand and use.
An app fulfills a need.
An app works well.
An app is a single piece …
… of an entire experience.
HOW DO I BUILD GREAT APPS?Quick-bite recipe cards that capture best practicesfor making your apps look // work // play well.
Part of our online documentation at: https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
WHEN TO USE WHICH ALERT STYLE?
HOW TO NAME AND SPELL ACTIONS?
SHOULD THIS ERROR INTERRUPT THE USER?
Content apps - great for managing custom data sets Custom apps - if you need something really different
WHAT TYPE OF APP SHOULD I BUILD?
CONTENT APPS
CONTENT APPSBy config, no Java necessary Design guidelines Cookbook in Magnolia documentation
“LIBERATED” CONTENT APPS
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
CUSTOM APPS
APP SETUPDefine a module Write a service to encapsulate business logic Create app launcher entry Define & implement subapps Define & implement actions
APP BASE CLASSESMight be able to use EmbeddedPageSubApp (which shows external content in iframe) Use BaseSubApp Try to use SmallAppLayout
MAVEN ARCHETYPEmvn archetype:generate -DarchetypeCatalog=\ http://nexus.magnolia-cms.com/content/groups/public/
SCRIPT DEMO
JCR CONTENT APP
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
PHOTO SCOUTA content app displaying photos from Instagram !
Demo time
FROM PLAIN VAADIN...
Data sourceUI
Table / TreeTable
com.vaadin.ui
Container
com.vaadin.data
Item Item Item
Item Item
...OFF TO MAGNOLIA
Data sourceUIContent app
Table / TreeTableWorkbench
com.vaadin.ui com.vaadin.data
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
VAADIN’S DATA MODELRead 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)
CONTAINER INTERFACESHierarchical
Indexed
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
The InstagramContainer
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
FINE, WHAT ABOUTTHE CONTENT CONNECTOR?
InstagramPhoto Scout
Workbench
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
inst
agra
m4j
THE CONTENT CONNECTORMap arbitrary objects to three main representations:
a unique itemId
a Vaadin Item
a URL fragment
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)
The InstagramContentConnector
DEPENDENCIES
InstagramPhoto Scout
Workbench
Container
Item Item Item
Item Item
ContentConnector
ImageProvider
inst
agra
m4j
12
3
HOOKING THE CONTAINERExtend Magnolia's default ContentPresentersListPresenter, TreePresenter, ThumbnailPresenter
Override #initializeContainer()
Configure these presenters to be used .../browser/workbench/contentViews
Want to dive deeper?/** * Want to see more code? * Have I overlooked anything? * * Please do ask & let us know :) */
DISCUSSION
THANKYOU!
Recommended