IMMERSE 2016 Introducing content fragments

A virtual developer conference for Adobe Experience Manager

Introducing Content FragmentsStefan Grimm | Senior Developer

Introducing Content Fragments

1 | Welcome and Overview

2 | Theory

3 | A real world example …

4 | … and its implementation

5 | Q&A

Theory

Building blocks

Overview, part 1

Semantic content structure Defined by template Multiple formats supported Rich text Plain text Markdown (limited)

Elements

Variants of element content Global – shared by all elements For example: Channel-specific Defined by author Multiple formats Same as supported for elements

Variations

Example

Overview, part 2

Tags for classification Standard asset metadata Uses metadata schemas

Metadata

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

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

Renders a Content Fragment on an AEM page Options for rendering Element to display Variation to use Paragraph ranges

Component

DAM integration

A Content Fragment is an Asset (hierarchy)

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)

“Use the API, young padawan!”

com.adobe.cq.dam.cfm

A real world example

Introducing:The Adobe Times

(An imaginary news site)

Our goal …

Out of the box …

Simple fragment template Single element

Generic component for page authoring provides “in-between” content feature

AEM 6.2

Hands on …Using Content Fragments

Too much work, huh?

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!

Articles

Section

Teaser

Fragment Elements Title Teaser Text

Metadata Section

Articles

A real world implementation

Create an article template Create an article component Create a page component

TODOs ...

No production-ready codein this session!

Disclaimer

Article template

Hands on …Article template

/apps/settings/dam/cfm/templates/article

Article component

Access the elements Title, Teaser, Text

Access metadata Section

Bring everything together Rendering

We need to …

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

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”);

Accessing content:String content = element.getContent();String contentType = element.getContentType();

Changing content:element.setContent(“Content”, “text/plain”);

… works similar for variations!

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

Currently no API to get HTML for plain text or Markdown Need to use a internal include

(Missing) API – Getting HTML

Hands on …Article component

/apps/cfm-efficient-publishing/components/article

Page component

“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!

And … Action!The new article creation process

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

Epilogue

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

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

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

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

Stefan Grimmsgrimm@adobe.com

IMMERSE 2016 Introducing content fragments

Technology

Android Fragments · Android Fragments. In this Lecture, you will learn: Fragments Creating Fragments Adding Fragment to Activity Communicating with the Activity Mobile Application

Philosophical Fragments

Bag-of-Fragments: Selecting and Encoding Video Fragments ...isis-data.science.uva.nl/cgmsnoek/pub/mettes-bag-of-fragments-icmr2015.pdf · Bag-of-Fragments: Selecting and Encoding

IMMERSE 2012 Kick-off Meeting

Menander - Fragments

Android Fragments

Tables - Haworthmedia.haworth.com/asset/88294/Immerse-BrochureFINAL2.pdf · Immerse With Immerse tables, creativity and collaboration can take shape at a moment’s notice. Designed

Interesting fragments

Immerse 2016 Efficient publishing with content fragments

Sentence Fragments Overview - What is a “fragment” - Types of fragments - How to fix fragments - Activity

EXPLORE, IMMERSE and LEARN

Submerge vs Immerse

Immerse rgb compressed

Fragments anyone

Immerse yourself in Facebook - Nia

The Luxury Brand of Pleasant Holidays INTRODUCING CAMBODIA ... · Explore Phnom Penh’s ornate Royal Palace and tickle your senses at the Central Market. Delight in Siem ... Immerse

Immerse - Augmented Reality Services

Immerse Yourself with His Promises

Hi arm immerse

immerse yourself! MEDIA KIT