39
DEVELOPING APPS FOR MAGNOLIA 5 KAREL DE WITTE WEDNESDAY, JUNE 11, 2014

Start Developing Apps for Magnolia CMS

Embed Size (px)

DESCRIPTION

Apps can take advantage of Magnolia CMS' built-in best-practice framework, reducing development time and improving end-user experience. They're also faster to develop, easier to maintain and more secure on account of Magnolia CMS' sophisticated, documented Apps API and encapsulated environment.

Citation preview

Page 1: Start Developing Apps for Magnolia CMS

DEVELOPING APPS FOR MAGNOLIA 5

KAREL DE WITTE

WEDNESDAY, JUNE 11, 2014

Page 2: Start Developing Apps for Magnolia CMS

QUESTIONS?Submit your questions using the Questions panel of the GoToWebinar control panel.

When possible, we will 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 3: Start Developing Apps for Magnolia CMS

QUICK POLL WHAT’S YOUR INTEREST IN APPS?

Photo Credit: hand by jakub

Page 4: Start Developing Apps for Magnolia CMS

KAREL DE WITTE MAGNOLIA SENIOR CONSULTANT/DEVELOPER

Page 5: Start Developing Apps for Magnolia CMS

WHAT IS A MAGNOLIA 5 APP?

Page 6: Start Developing Apps for Magnolia CMS

DEVELOPER PERSPECTIVEA framework that lets me easily integrate existing  functionality (3rd party services,...) into Magnolia CMS, adding UI interaction and workflows for authors.

Page 7: Start Developing Apps for Magnolia CMS

AUTHOR PERSPECTIVEAn accessible UI that enables me to quickly and easily use functionality or services to enhance, create, publish my content.

Page 8: Start Developing Apps for Magnolia CMS

BITS AND PIECESAn app mostly consists of:

A module (not mandatory) A piece of configuration (Node2Bean mechanism) Some code (also not mandatory)

Page 9: Start Developing Apps for Magnolia CMS

BITS AND PIECESA module is translated as a jar. You can create one using the maven archetype.

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

Page 10: Start Developing Apps for Magnolia CMS

BITS AND PIECESA piece of configuration:

Page 11: Start Developing Apps for Magnolia CMS

BITS AND PIECESSome code:

An extension of the BrowserSupApp class

Page 12: Start Developing Apps for Magnolia CMS

THE APP FRAMEWORK

Photo Credit: red_scaffold (guess where berlin)

Page 13: Start Developing Apps for Magnolia CMS

DIFFERENT TYPES OF APPSContent (Sub)apps

It is an extension the sub app framework

Page 14: Start Developing Apps for Magnolia CMS

DIFFERENT TYPES OF APPSIndie apps ;-)

Extend the App framework Play with JS

Page 15: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWSMagnolia app framework follows MVP.

JCR

Flickr API

Content connector

Content connector

JCR Container

Flickr Container

JCR Presenter

JCR View

Flickr Presenter

Flickr View

FS API

Content connector

FS Container

FS Presenter

FS View

Page 16: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWS

https://www.youtube.com/watch?v=vx3U8Woj3HU

Page 17: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWS•Views define the formatting of the UI

•The Presenter controls how things are displayed and interact.

•The Container will prepare all the data to show for the presenter to display it in the view

Page 18: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWS

http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

Page 19: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWS

http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

Page 20: Start Developing Apps for Magnolia CMS

CONTAINERS, PRESENTERS & VIEWS

http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

Page 21: Start Developing Apps for Magnolia CMS

ACTIONS/APIS Actions allow the author to decide what to do with their content

Photo Credit: Watch This by Justin Jensen

Page 22: Start Developing Apps for Magnolia CMS

ACTIONSActions are first declared ...

Page 23: Start Developing Apps for Magnolia CMS

ACTIONS… then placed where we want them.

Page 24: Start Developing Apps for Magnolia CMS

ACTIONSA custom action has two classes: !

!

!

!

A definition class which is instantiated when the module is initialized.

Page 25: Start Developing Apps for Magnolia CMS

ACTIONSThe actual action class which is instantiated upon action click, executed and disposed

Page 26: Start Developing Apps for Magnolia CMS

API'SMany APIs were created for M5 App development, including:

Definitions: Node2Bean definitions in your implementation LocationController: Use it to make your author travel from one place to another JcrItemAdapter: Get the node of a selected item in a browser MessagesManager: Send messages and spread your love SubAppContext, SystemContext, ..: Access the current context Shell: Notify and alert EventBus: Transmit events and register handlers.

Page 27: Start Developing Apps for Magnolia CMS

API'SHow do I use them? !

!

!

Just @Inject them!

Page 28: Start Developing Apps for Magnolia CMS

APP DESIGN GUIDELINES

Page 29: Start Developing Apps for Magnolia CMS

http://documentation.magnolia-cms.com/display/DOCS/App+design+guidelines

Page 30: Start Developing Apps for Magnolia CMS

Photo Credit: Praying Mantis by Yaniv Golan

ENTRY POINTS Some common use cases & possible solutions

Page 31: Start Developing Apps for Magnolia CMS

HAVE MORE PROPERTIES IN AN ACTIONAdd the additional property to the action definition Add the property to your extended ConfiguredActionDefinition class

Page 32: Start Developing Apps for Magnolia CMS

ADD A SUBAPP TO MY CONTENT APPDuplicate a subapp node in your content app Keep what you need Add your own sub app class implementation Create your own view or change the view implementation in the module descriptor

Page 33: Start Developing Apps for Magnolia CMS

FILTER CONTENT IN A SPECIFIC VIEWDuplicate a contentview in your browsersubapp Extend the presenter class of the view ( for instance list view) Extend the container and modify the where clause

Page 34: Start Developing Apps for Magnolia CMS

MODIFY MY WORKBENCHSpecifically, modify the standard view of my workbench

Extend the WorkBenchView implementation. Tell guice to use your implentation. Do additional stuff

Page 35: Start Developing Apps for Magnolia CMS

CREATE AN "INDIE" SUB APP OR APPDuplicate a subapp node Leave only the class,label and subAppClass property Implement your own subAppClass and view logic

Page 36: Start Developing Apps for Magnolia CMS

QUESTIONS?

Page 37: Start Developing Apps for Magnolia CMS

RESOURCESMagnolia Docs Apps Home documentation.magnolia-cms.com/display/DOCS/Apps

Content App Tutorial documentation.magnolia-cms.com/display/DOCS/My+first+content+app

App Design Guidelines documentation.magnolia-cms.com/display/DOCS/App+design+guidelines

Magnolia Academy: Working with Apps http://academy.magnolia-cms.com/display/MA/S2C3.+Working+with+apps

Page 38: Start Developing Apps for Magnolia CMS

THANKYOU!

Page 39: Start Developing Apps for Magnolia CMS

CREDITSred scaffold (guess where berlin) by Jonas K.

Watch This by Justin Jensen

Praying Mantis by Yaniv Golan

hand by jakub

Licensed under the Creative Commons Attribution License v2.0

Licensed under the Creative Commons Attribution License v2.0

Licensed under the Creative Commons Attribution License v2.0

Licensed under the Creative Commons Attribution-ShareAlike License v2.0

https://www.flickr.com/photos/jonask/3531177621

https://www.flickr.com/photos/justinjensen/4947663237

https://www.flickr.com/photos/yanivg/49658629

https://www.flickr.com/photos/75227967@N00/98193355