immerse 2016 introducing content fragments
TRANSCRIPT
![Page 1: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/1.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
A virtual developer conference for Adobe Experience Manager
Introducing Content FragmentsStefan Grimm | Senior Developer
![Page 2: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/2.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Introducing Content Fragments
2
1 | Welcome and Overview
2 | Theory
3 | A real world example …
4 | … and its implementation
5 | Q&A
![Page 3: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/3.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
Theory
![Page 4: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/4.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
Building blocks
![Page 5: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/5.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
Overview, part 1
![Page 6: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/6.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
Semantic content structure Defined by template Multiple formats supported Rich text Plain text Markdown (limited)
Elements
![Page 7: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/7.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
Variants of element content Global – shared by all elements For example: Channel-specific Defined by author Multiple formats Same as supported for elements
Variations
![Page 8: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/8.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
Example
![Page 9: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/9.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Overview, part 2
![Page 10: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/10.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
Tags for classification Standard asset metadata Uses metadata schemas
Metadata
![Page 11: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/11.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
Associate media with a fragment Work as suggestion for the author of the final page No concept of semantic association (no “title image”, etc.)
Based on DAM collections
Associated content
![Page 12: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/12.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
Structure of a Content Fragment Elements Predefined Variations (optional) Initial associated content (optional)
Copied to the fragment Template changes not reflected in fragment after creation
Use Granite’s ConfMgr feature
Fragment Templates
![Page 13: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/13.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
Renders a Content Fragment on an AEM page Options for rendering Element to display Variation to use Paragraph ranges
Component
![Page 14: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/14.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
DAM integration
![Page 15: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/15.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
A Content Fragment is an Asset (hierarchy)
![Page 16: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/16.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
Elements are assets/sub-assets Content is stored in the original rendition
Variations are renditions Variations are tied to elements
Metadata stored on main asset Additional structural data (“fragment model”) MIME type specified on rendition
A Content Fragment is an Asset (hierarchy)
![Page 17: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/17.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
“Use the API, young padawan!”
com.adobe.cq.dam.cfm
![Page 18: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/18.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
A real world example
![Page 19: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/19.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
Introducing:The Adobe Times
(An imaginary news site)
![Page 20: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/20.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
Our goal …
![Page 21: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/21.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
Out of the box …
![Page 22: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/22.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
Simple fragment template Single element
Generic component for page authoring provides “in-between” content feature
AEM 6.2
![Page 23: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/23.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hands on …Using Content Fragments
23
![Page 24: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/24.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Too much work, huh?
![Page 25: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/25.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
Create article. Enter title. Teaser. Text. Classify. Save. Create page. (*) Add Content Fragment. (*) Reference article. (*) Publish. (*)
(*) We’ll get rid of these steps in the “Efficient Publishing with Content Fragments” session later today
Efficiency!
![Page 26: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/26.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
Articles
![Page 27: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/27.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
Articles
Section
Title
Teaser
Text
![Page 28: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/28.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
Fragment Elements Title Teaser Text
Metadata Section
Articles
![Page 29: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/29.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
A real world implementation
![Page 30: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/30.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Create an article template Create an article component Create a page component
TODOs ...
![Page 31: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/31.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
No production-ready codein this session!
Disclaimer
31
![Page 32: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/32.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
Article template
![Page 33: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/33.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hands on …Article template
/apps/settings/dam/cfm/templates/article
33
![Page 34: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/34.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
Article component
![Page 35: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/35.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
Access the elements Title, Teaser, Text
Access metadata Section
Bring everything together Rendering
We need to …
![Page 36: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/36.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
Creating a fragment:Resource fragmentResource = resolver.getResource(“/path/to/fragment”);ContentFragment fragment = fragmentResource.adaptTo(ContentFragment.class);
Accessing elements:Iterator<ContentElement> elements = fragment.getElements();while (elements.hasNext()) {
ContentElement element = elements.next();// …
}
API – Basic patterns, part 1
![Page 37: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/37.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
Accessing variation:Iterator<ContentVariation> variations = element.getVariations();while (variations.hasNext()) {
ContentVariations variation = variations.next();// …
}
Accessing elements/variations by name:ContentElement titleElement = fragment.getElement(“title”);ContentVariation twitterVariation = titleElement.getVariation(“twitter”);
API – Basic patterns, part 2
![Page 38: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/38.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
Accessing content:String content = element.getContent();String contentType = element.getContentType();
Changing content:element.setContent(“Content”, “text/plain”);
… works similar for variations!
API – Basic patterns, part 3
![Page 39: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/39.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
Map<String, Object> getMetaData();void setMetaData(String name, Object value) throws ContentFragmentException;
Just a wrapper for DAM metadata methods! - Same rules & restrictions apply.
API – Accessing metadata
![Page 40: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/40.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
Currently no API to get HTML for plain text or Markdown Need to use a internal include
(Missing) API – Getting HTML
![Page 41: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/41.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hands on …Article component
/apps/cfm-efficient-publishing/components/article
41
![Page 42: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/42.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
Page component
![Page 43: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/43.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
“Just a simple page template” Header (”The Adobe Times”) hardcoded Single paragraph system holding the article
/apps/cfm-efficient-publishing/components/page No design No ”fancy stuff” like responsiveness, etc. Remember? - No production-ready code in this session!
JASPT
![Page 44: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/44.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
And … Action!The new article creation process
44
![Page 45: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/45.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
Recap
Workflow designed for efficiency Template defining three elements Title Teaser Text
Article component Fixed layout Tags for classification Image taken from collection
Page component Basic page layout
![Page 46: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/46.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
Epilogue
![Page 47: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/47.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Decide if creating a customized component makes sense Sufficiency of the OOTB component Flexibility vs. efficiency
Use OOTB component as a starting point Use tagging and metadata to classify your content Use API, don’t access the content structure directly Adobe might need to change it
Recommendations
![Page 48: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/48.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
Security: Publish considerations
Provide read-access to everyone wherever required Ensure that everything required is available on publish Common mishap: Application Content Package not replicated to publish
Collection can not/should not be accessed on publish References need to be resolved before publishing – manually (OOTB component) or ”on save” (*)
(*) Details will be revealed in the “Efficient Publishing with Content Fragments” session later today
![Page 49: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/49.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
Not mentioned in this session …
Variations/channel-specific publishing would rectify a separate session may be a focus for 6.3
Translation services neatly integrated
Metadata schemas
![Page 50: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/50.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
Resources
Content Package with example code available from the “Resources” pod in Adobe Connect
Documentation Overview/Authoring Editor - https://docs.adobe.com/docs/en/aem/6-2/author/assets/content-fragments.html Page Authoring - https://docs.adobe.com/docs/en/aem/6-2/author/page-authoring/content-
fragments.html Development Templates - https://docs.adobe.com/docs/en/aem/6-2/develop/templates/content-fragment-
templates.html Extending (WIP) - https://docs.adobe.com/docs/en/aem/6-2/develop/extending/content-fragments.html
![Page 51: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/51.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Q&A51
Stefan [email protected]
![Page 52: IMMERSE 2016 Introducing content fragments](https://reader031.vdocument.in/reader031/viewer/2022021815/5873d1711a28ab9d168b64cd/html5/thumbnails/52.jpg)
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.