Magnolia App Developer Roundtable

52
MAGNOLIA APP DEVELOPMENT OCTOBER 16, 2014

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 of Magnolia App Developer Roundtable

Page 1: Magnolia App Developer Roundtable

MAGNOLIA APP DEVELOPMENT

OCTOBER 16, 2014

Page 2: Magnolia App Developer Roundtable

Credit:

ZAK GREANT TECHNICAL EVANGELIST @ MAGNOLIA

Page 3: Magnolia App Developer Roundtable

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

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

ANDREAS WEDER HEAD OF USER EXPERIENCE @ MAGNOLIA

Page 6: Magnolia App Developer Roundtable

JAN HADERKA CHIEF INTEGRATION OFFICER @ MAGNOLIA

Page 7: Magnolia App Developer Roundtable

MIKAËL GELJIĆ SOFTWARE ENGINEER @ MAGNOLIA

Page 8: Magnolia App Developer Roundtable
Page 9: Magnolia App Developer Roundtable
Page 10: Magnolia App Developer Roundtable
Page 11: Magnolia App Developer Roundtable
Page 12: Magnolia App Developer Roundtable
Page 13: Magnolia App Developer Roundtable

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

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

An app fulfills a need.

Page 16: Magnolia App Developer Roundtable

An app works well.

Page 17: Magnolia App Developer Roundtable

An app is a single piece …

Page 18: Magnolia App Developer Roundtable

… of an entire experience.

Page 19: Magnolia App Developer Roundtable

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

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

APP DESIGN GUIDELINES

Page 21: Magnolia App Developer Roundtable

WHEN TO USE WHICH ALERT STYLE?

Page 22: Magnolia App Developer Roundtable

HOW TO NAME AND SPELL ACTIONS?

Page 23: Magnolia App Developer Roundtable

SHOULD THIS ERROR INTERRUPT THE USER?

Page 24: Magnolia App Developer Roundtable

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

CONTENT APPS

Page 26: Magnolia App Developer Roundtable

CONTENT APPSBy config, no Java necessary Design guidelines Cookbook in Magnolia documentation

Page 27: Magnolia App Developer Roundtable

“LIBERATED” CONTENT APPS

Page 28: Magnolia App Developer Roundtable

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

CUSTOM APPS

Page 30: Magnolia App Developer Roundtable

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

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

MAVEN ARCHETYPEmvn archetype:generate -DarchetypeCatalog=\ http://nexus.magnolia-cms.com/content/groups/public/

Page 33: Magnolia App Developer Roundtable

SCRIPT DEMO

Page 34: Magnolia App Developer Roundtable

JCR CONTENT APP

Page 35: Magnolia App Developer Roundtable

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

PHOTO SCOUTA content app displaying photos from Instagram !

Demo time

Page 37: Magnolia App Developer Roundtable

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

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

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

Page 40: Magnolia App Developer Roundtable

CONTAINER INTERFACESHierarchical

Indexed

Page 41: Magnolia App Developer Roundtable

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

The InstagramContainer

Page 43: Magnolia App Developer Roundtable

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

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

THE CONTENT CONNECTORMap arbitrary objects to three main representations:

a unique itemId

a Vaadin Item

a URL fragment

Page 46: Magnolia App Developer Roundtable

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

The InstagramContentConnector

Page 48: Magnolia App Developer Roundtable

DEPENDENCIES

InstagramPhoto Scout

Workbench

Container

Item Item Item

Item Item

ContentConnector

ImageProvider

inst

agra

m4j

12

3

Page 49: Magnolia App Developer Roundtable

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

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

DISCUSSION

Page 52: Magnolia App Developer Roundtable

THANKYOU!