Following the approach suggested by JaideepBrar for 6.5 I've managed to get the contents of experience fragments displaying on a react app. This is based on the AEM react SPA tutorial.
First, a model interface for the component that extends the ContainerExporter interface was created. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial.)
package com.adobe.aem.guides.wkndevents.core.models;
import com.adobe.cq.export.json.ComponentExporter;
import javax.annotation.Nonnull;
import com.adobe.cq.export.json.ContainerExporter;
import org.osgi.annotation.versioning.ConsumerType;
@ConsumerType
public interface ExperienceFragment extends ContainerExporter {
@Nonnull
default String getExportedType() {
throw new UnsupportedOperationException();
}
}
Some of the logic from the HierarchyPageImpl class of the tutorial was borrowed to implement the interface methods. But the "getItemModels" method was modified so that it retrieved the children of the Experience Fragment page content:
package com.adobe.aem.guides.wkndevents.core.models.impl;
import com.adobe.aem.guides.wkndevents.core.models.ExperienceFragment;
import com.adobe.cq.export.json.ComponentExporter;
import javax.annotation.Nonnull;
import javax.inject.Inject;
import com.adobe.cq.export.json.SlingModelFilter;
import org.apache.commons.lang3.ArrayUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.jcr.resource.api.JcrResourceConstants;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.apache.sling.models.factory.ModelFactory;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import java.util.LinkedHashMap;
import java.util.Map;
@Model(
adaptables = {SlingHttpServletRequest.class},
adapters = {ExperienceFragment.class, ComponentExporter.class},
resourceType = {ExperienceFragmentImpl.RESOURCE_TYPE}
)
@Exporter(
name = "jackson",
extensions = {"json"}
)
public class ExperienceFragmentImpl implements ExperienceFragment {
protected static final String RESOURCE_TYPE = "cq/experience-fragments/editor/components/experiencefragment";
private static final Logger LOG = LoggerFactory.getLogger(ExperienceFragmentImpl.class);
private static final String JCR_CONTENT = "/jcr:content";
@Self
private SlingHttpServletRequest request;
@Inject
private ResourceResolver resourceResolver;
@Inject
private Resource resource;
@Inject
private ModelFactory modelFactory;
@Inject
private SlingModelFilter slingModelFilter;
@ValueMapValue(
injectionStrategy = InjectionStrategy.OPTIONAL
)
private String fragmentPath;
private Map<String, ComponentExporter> childModels = null;
public ExperienceFragmentImpl() {
LOG.debug("Creating ExperienceFragmentImpl");
}
@Override
@Nonnull
public String getExportedType() {
return this.resource.getResourceType();
}
@Nonnull
@Override
public Map<String, ? extends ComponentExporter> getExportedItems() {
if (childModels == null) {
childModels = getItemModels(request, ComponentExporter.class);
}
LOG.debug("childModels: {}", childModels);
return childModels;
}
/**
* Returns a map (resource name => Sling Model class) of the given resource children's Sling Models that can be adapted to {@link T}.
*
* @param slingRequest The current request.
* @param modelClass The Sling Model class to be adapted to.
* @return Returns a map (resource name => Sling Model class) of the given resource children's Sling Models that can be adapted to {@link T}.
*/
@Nonnull
private <T> Map<String, T> getItemModels(@Nonnull SlingHttpServletRequest slingRequest,
@Nonnull Class<T> modelClass) {
Map<String, T> itemWrappers = new LinkedHashMap<>();
if(StringUtils.isBlank(fragmentPath)) {
return itemWrappers;
}
Resource experienceFragmentContent = resourceResolver.getResource(fragmentPath + JCR_CONTENT);
if (experienceFragmentContent == null) {
return itemWrappers;
}
Iterable<Resource> iterable = slingModelFilter.filterChildResources(experienceFragmentContent.getChildren());
if (iterable == null) {
return itemWrappers;
}
for (final Resource child : iterable) {
LOG.debug("child.getPath(): {}", child.getPath());
T model = modelFactory.getModelFromWrappedRequest(slingRequest, child, modelClass);
LOG.debug("model: {}", model);
itemWrappers.put(child.getName(), model);
}
return itemWrappers;
}
@Nonnull
@Override
public String[] getExportedItemsOrder() {
Map<String, ? extends ComponentExporter> models = getExportedItems();
if (models.isEmpty()) {
return ArrayUtils.EMPTY_STRING_ARRAY;
}
return models.keySet().toArray(ArrayUtils.EMPTY_STRING_ARRAY);
}
}
Because the ContainerExporter interface was used in the component exporter the Container module to be used from the cq-react-editable-components JavaScript library as opposed to the Component module:
/*
ExperienceFragment.js
Maps to cq/experience-fragments/editor/components/experiencefragment
*/
import React from 'react';
import {MapTo, Container} from '@adobe/cq-react-editable-components';
require('./ExperienceFragment.scss');
/**
* Default Edit configuration for the Text component that interact with the Core ExperienceFragment component.
*
* @type EditConfig
*/
const ExperienceFragmentConfig = {
emptyLabel: 'Experience Fragment',
isEmpty: function(props) {
var itemsOrder = props["cqItemsOrder"];
return !(itemsOrder && itemsOrder.length);
}
};
/**
* Text React component
*/
export default class ExperienceFragment extends Container {
render() {
return (<div className="ExperienceFragment">
{ this.childComponents }
</div>);
}
}
MapTo('cq/experience-fragments/editor/components/experiencefragment')(ExperienceFragment, ExperienceFragmentConfig);
But this will only show components in the experience fragment where the type has already been mapped. So after completing the tutorial it will only display the image, text and list components used in a fragment.
I hope this answers the question.
