Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
OCTOBER 16, 2014 
MAGNOLIA APP 
DEVELOPMENT
ZAK GREANT 
TECHNICAL EVANGELIST @ MAGNOLIA 
Credit:
BACKGROUND INFO 
Need more background information on 
Magnolia 5 and Apps? 
Watch the recording of the “Start Developing 
...
QUESTIONS? 
Use the GoToWebinar control 
panel. 
When possible, we’ll answer questions 
immediately via text. 
We’ll repea...
ANDREAS WEDER 
HEAD OF USER EXPERIENCE @ MAGNOLIA
JAN HADERKA 
CHIEF INTEGRATION OFFICER @ MAGNOLIA
MIKAËL GELJIĆ 
SOFTWARE ENGINEER @ MAGNOLIA
HOW APPS WORK 
Split work into smaller tasks 
Use an app to solve each task 
Piece the results together
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 practices 
for making your apps look // work // play...
APP DESIGN GUIDELINES 
Part of our online documentation at: 
https://wiki.magnolia-cms.com/x/CAFcAw
WHEN TO USE WHICH ALERT STYLE?
HOW TO NAME AND SPELL ACTIONS?
SHOULD THIS ERROR INTERRUPT THE USER?
WHAT TYPE OF APP SHOULD I BUILD? 
Content apps - great for managing custom data sets 
Custom apps - if you need something ...
CONTENT APPS
CONTENT APPS 
By config, no Java necessary 
Design guidelines 
Cookbook in Magnolia documentation
“LIBERATED” CONTENT APPS
LIBERATED CONTENT APPS 
A new (5.3) type of content app 
Liberated from the JCR 
Java coding required 
Vaadin know-how is ...
CUSTOM APPS
APP SETUP 
Define a module 
Write a service to encapsulate business logic 
Create app launcher entry 
Define & implement s...
APP BASE CLASSES 
Might be able to use EmbeddedPageSubApp 
(which shows external content in iframe) 
Use BaseSubApp 
Try t...
MAVEN ARCHETYPE 
mvn archetype:generate -DarchetypeCatalog= 
http://nexus.magnolia-cms.com/content/groups/public/
SCRIPT DEMO
JCR 
CONTENT APP
LIBERATED CONTENT APPS 
Available since Magnolia 5.3 
Key terms: Containers, ContentConnectors, itemIds... 
Great, where s...
PHOTO SCOUT 
A content app displaying photos from Instagram 
! 
Demo time
FROM PLAIN VAADIN... 
com.vaadin.ui 
com.vaadin.data 
UI Container 
Data source 
Table / TreeTable 
Item Item 
Item Item I...
...OFF TO MAGNOLIA 
com.vaadin.ui com.vaadin.data 
CUoI ntent app Container 
Data source 
TWaobrlkeb /e TnrceheTable 
Item...
VAADIN’S DATA MODEL 
Read 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)
CONTAINER INTERFACES 
Hierarchical 
Indexed
CONTAINER IMPLEMENTATION TIPS 
#1 Start by extending the AbstractContainer 
#2 Focus on READ operations 
Leave WRITE opera...
The InstagramContainer
GOOD ITEM IDs 
Most simple unique representation of your content 
e.g. workspace + uuid in Magnolia for JCR items, photo i...
FINE, WHAT ABOUT 
THE CONTENT CONNECTOR? 
Photo Scout Container 
Instagram 
Workbench 
Item Item 
Item Item Item 
ContentC...
THE CONTENT CONNECTOR 
Map arbitrary objects to three main representations: 
a unique itemId 
a Vaadin Item 
a URL fragmen...
CONTENT CONNECTOR BENEFITS 
Actions and Availability 
Operate on one or multiple items 
Sync selection with e.g. image pre...
The InstagramContentConnector
DEPENDENCIES 
Photo Scout Container 
Instagram 
Workbench 
Item Item 
Item Item Item 
ContentConnector 
ImageProvider 
ins...
HOOKING THE CONTAINER 
Extend Magnolia's default ContentPresenters 
ListPresenter, TreePresenter, ThumbnailPresenter 
Over...
Want to dive deeper? 
/** 
* Want to see more code? 
* Have I overlooked anything? 
* 
* Please do ask & let us know :) 
*...
DISCUSSION
THANK 
YOU!
Magnolia App Developer Roundtable
Magnolia App Developer Roundtable
Magnolia App Developer Roundtable
Magnolia App Developer Roundtable
Magnolia App Developer Roundtable
Próxima SlideShare
Cargando en…5
×

Magnolia App Developer Roundtable

584 visualizaciones

Publicado el

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

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Magnolia App Developer Roundtable

  1. 1. OCTOBER 16, 2014 MAGNOLIA APP DEVELOPMENT
  2. 2. ZAK GREANT TECHNICAL EVANGELIST @ MAGNOLIA Credit:
  3. 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. 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. 5. ANDREAS WEDER HEAD OF USER EXPERIENCE @ MAGNOLIA
  6. 6. JAN HADERKA CHIEF INTEGRATION OFFICER @ MAGNOLIA
  7. 7. MIKAËL GELJIĆ SOFTWARE ENGINEER @ MAGNOLIA
  8. 8. HOW APPS WORK Split work into smaller tasks Use an app to solve each task Piece the results together
  9. 9. A GREAT APP … adds clear value for users has a narrow focus plays well with other apps is easy to understand and use.
  10. 10. An app fulfills a need.
  11. 11. An app works well.
  12. 12. An app is a single piece …
  13. 13. … of an entire experience.
  14. 14. HOW DO I BUILD GREAT APPS? Quick-bite recipe cards that capture best practices for making your apps look // work // play well.
  15. 15. APP DESIGN GUIDELINES Part of our online documentation at: https://wiki.magnolia-cms.com/x/CAFcAw
  16. 16. WHEN TO USE WHICH ALERT STYLE?
  17. 17. HOW TO NAME AND SPELL ACTIONS?
  18. 18. SHOULD THIS ERROR INTERRUPT THE USER?
  19. 19. WHAT TYPE OF APP SHOULD I BUILD? Content apps - great for managing custom data sets Custom apps - if you need something really different
  20. 20. CONTENT APPS
  21. 21. CONTENT APPS By config, no Java necessary Design guidelines Cookbook in Magnolia documentation
  22. 22. “LIBERATED” CONTENT APPS
  23. 23. 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
  24. 24. CUSTOM APPS
  25. 25. APP SETUP Define a module Write a service to encapsulate business logic Create app launcher entry Define & implement subapps Define & implement actions
  26. 26. APP BASE CLASSES Might be able to use EmbeddedPageSubApp (which shows external content in iframe) Use BaseSubApp Try to use SmallAppLayout
  27. 27. MAVEN ARCHETYPE mvn archetype:generate -DarchetypeCatalog= http://nexus.magnolia-cms.com/content/groups/public/
  28. 28. SCRIPT DEMO
  29. 29. JCR CONTENT APP
  30. 30. 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
  31. 31. PHOTO SCOUT A content app displaying photos from Instagram ! Demo time
  32. 32. FROM PLAIN VAADIN... com.vaadin.ui com.vaadin.data UI Container Data source Table / TreeTable Item Item Item Item Item
  33. 33. ...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
  34. 34. VAADIN’S DATA MODEL Read 8. Binding Components to Data (https://vaadin.com/book/-/page/datamodel.html)
  35. 35. CONTAINER INTERFACES Hierarchical Indexed
  36. 36. 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
  37. 37. The InstagramContainer
  38. 38. 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
  39. 39. FINE, WHAT ABOUT THE CONTENT CONNECTOR? Photo Scout Container Instagram Workbench Item Item Item Item Item ContentConnector ImageProvider instagram4j
  40. 40. THE CONTENT CONNECTOR Map arbitrary objects to three main representations: a unique itemId a Vaadin Item a URL fragment
  41. 41. 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)
  42. 42. The InstagramContentConnector
  43. 43. DEPENDENCIES Photo Scout Container Instagram Workbench Item Item Item Item Item ContentConnector ImageProvider instagram4j 1 2 3
  44. 44. HOOKING THE CONTAINER Extend Magnolia's default ContentPresenters ListPresenter, TreePresenter, ThumbnailPresenter Override #initializeContainer() Configure these presenters to be used .../browser/workbench/contentViews
  45. 45. Want to dive deeper? /** * Want to see more code? * Have I overlooked anything? * * Please do ask & let us know :) */
  46. 46. DISCUSSION
  47. 47. THANK YOU!

×