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.

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

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

3. QUICK POLL
WHAT’S YOUR INTEREST IN APPS?
Photo Credit: hand by jakub

4. KAREL DE WITTEMAGNOLIA SENIOR CONSULTANT/DEVELOPER

5. WHAT IS A
MAGNOLIA 5
APP?

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

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

8. BITS AND PIECES
An app mostly consists of:
A module (not mandatory)
A piece of configuration (Node2Bean mechanism)
Some code (also not mandatory)

9. BITS AND PIECES
A 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/

10. BITS AND PIECES
A piece of configuration:

11. BITS AND PIECES
Some code:
An extension of the BrowserSupApp class

12. THE APP
FRAMEWORK
Photo Credit: red_scaffold (guess where berlin)

13. DIFFERENT TYPES OF APPS
Content (Sub)apps
It is an extension the sub app framework

14. DIFFERENT TYPES OF APPS
Indie apps ;-)
Extend the App framework
Play with JS

15. CONTAINERS, PRESENTERS & VIEWS
Magnolia 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

16. CONTAINERS, PRESENTERS & VIEWS
https://www.youtube.com/watch?v=vx3U8Woj3HU

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

18. CONTAINERS, PRESENTERS & VIEWS
http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

19. CONTAINERS, PRESENTERS & VIEWS
http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

20. CONTAINERS, PRESENTERS & VIEWS
http://documentation.magnolia-cms.com/display/DOCS/Model-view-presenter+pattern

21. ACTIONS/APIS
Actions allow the author to decide
what to do with their content
Photo Credit: Watch This by Justin Jensen

22. ACTIONS
Actions are first declared ...

23. ACTIONS
… then placed where we want them.

24. ACTIONS
A custom action has two classes:
!
!
!
!
A definition class which is instantiated when
the module is initialized.

25. ACTIONS
The actual action class which is instantiated
upon action click, executed and disposed

26. API'S
Many 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.

27. API'S
How do I use them?
!
!
!
Just @Inject them!

28. APP
DESIGN
GUIDELINES

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

30. Photo Credit: Praying Mantis by Yaniv Golan
ENTRY POINTS
Some common use cases
& possible solutions

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

32. ADD A SUBAPP TO MY CONTENT APP
Duplicate 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

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

34. MODIFY MY WORKBENCH
Specifically, modify the standard view of my
workbench
Extend the WorkBenchView implementation.
Tell guice to use your implentation.
Do additional stuff

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

36. QUESTIONS?

37. RESOURCES
Magnolia 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

38. THANK
YOU!

39. CREDITS
red 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