Start Developing Apps for Magnolia CMS

DEVELOPING APPS FOR MAGNOLIA 5

KAREL DE WITTE

WEDNESDAY, JUNE 11, 2014

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.

QUICK POLL WHAT’S YOUR INTEREST IN APPS?

Photo Credit: hand by jakub

KAREL DE WITTE MAGNOLIA SENIOR CONSULTANT/DEVELOPER

WHAT IS A MAGNOLIA 5 APP?

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

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

BITS AND PIECESAn app mostly consists of:

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

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/

BITS AND PIECESA piece of configuration:

BITS AND PIECESSome code:

An extension of the BrowserSupApp class

THE APP FRAMEWORK

Photo Credit: red_scaffold (guess where berlin)

DIFFERENT TYPES OF APPSContent (Sub)apps

It is an extension the sub app framework

DIFFERENT TYPES OF APPSIndie apps ;-)

Extend the App framework Play with JS

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

CONTAINERS, PRESENTERS & VIEWS

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

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

CONTAINERS, PRESENTERS & VIEWS

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

CONTAINERS, PRESENTERS & VIEWS

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

CONTAINERS, PRESENTERS & VIEWS

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

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

Photo Credit: Watch This by Justin Jensen

ACTIONSActions are first declared ...

ACTIONS… then placed where we want them.

ACTIONSA custom action has two classes: !

!

!

!

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

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

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.

API'SHow do I use them? !

!

!

Just @Inject them!

APP DESIGN GUIDELINES

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

Photo Credit: Praying Mantis by Yaniv Golan

ENTRY POINTS Some common use cases & possible solutions

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

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

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

MODIFY MY WORKBENCHSpecifically, modify the standard view of my workbench

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

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

QUESTIONS?

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

THANKYOU!

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