Versions Compared

Old Version 1

changes.mady.by.user Christoph Meier

Saved on

compared with

New Version Current

changes.mady.by.user Christoph Meier

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Use new javadoc macro and set versions

...

Localtab Group
Localtab
activetrue
titleYAML file
Code Pro
languagejs
titleflickr-templates/templates/components/flickr-image-simple.yaml
urlhttps://git.magnolia-cms.com/projects/DOCUMENTATION/repos/flickr-integration/browse/flickr-templates/src/main/resources/flickr-templates/templates/components/flickr-image-simple.yaml?at=master&raw
 
Localtab
titleJCR node
Advanced Tables - Table Plus
heading0
multiplefalse
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
Node nameValue

Mgnl f
templates

 

Mgnl f
components

 


Mgnl n
flickr-image-simple

 


Mgnl p
dialog

flickr-templates:components/flickr-image-simple

Mgnl p
modelClass

info.magnolia.flickr.templates.templates.components.FlickrImageSimpleModel

Mgnl p
renderType

freemarker

Mgnl p
templateScript

/flickr-templates/templates/components/flickr-image-simple.ftl

Mgnl p
title

Flickr simple image 

Mgnl p
visible

true 

Dialog definition

A Dialog definition defines the edible content properties of a template.

...

Localtab Group
Localtab
activetrue
titleYAML file
Code Pro
languagejs
titleflickr-templates/dialogs/components/flickr-image-simple.yaml
linenumberstrue
urlhttps://git.magnolia-cms.com/projects/DOCUMENTATION/repos/flickr-integration/browse/flickr-templates/src/main/resources/flickr-templates/dialogs/components/flickr-image-simple.yaml?at=master&raw
 
Localtab
titleJCR node
Advanced Tables - Table Plus
heading0
multiplefalse
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
Node nameValue

Mgnl f
dialogs

 


Mgnl f
components

 

Mgnl n
flickr-image-simple

 


Mgnl n
actions

 

Mgnl p
extends

/flickr-templates/dialogs/common/common-actions

Mgnl n
form

 


Mgnl n
tabs

 


Mgnl n
tabMain

 


Mgnl n
fields

 


Mgnl n
flickrPictureId

 

Mgnl n
contentPreviewDefinition

 


Mgnl p
contentPreviewClass

info.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent

Mgnl p
appName

flickr-browser

Mgnl p
class

info.magnolia.ui.form.field.definition.LinkFieldDefinition

Mgnl p
label

Flickr pic

Note:

  • Line 7: The field uses the
    Javadoc
    0info.magnolia.ui.form.field.definition.LinkFieldDefinition
    rangeHigherVersion5.6
    classNameinfo.magnolia.ui.form.field.definition.LinkFieldDefinition
    renderTypeasynchronous
     for the class. 
  • Line 9: It references flickr-browser in the appName.
  • Line 10, 11: It uses a custom contentPreviewDefinition. We will have a look at the contentPreviewClass 
    Javadoc
    0info.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent
     later.

...

Here is the relevant freemarker script which renders the image.

Code Pro
languagexml
titleflickr-templates/templates/components/flickr-image-simple.ftl
urlhttps://git.magnolia-cms.com/projects/DOCUMENTATION/repos/flickr-integration/browse/flickr-templates/src/main/resources/flickr-templates/templates/components/flickr-image-simple.ftl?at=master&raw
 

Note: The template uses a Model class.

...

We use the model to load another Java bean which represents the Flickr picture. The model exposes this "photo bean" as a bean property.

Code Pro
languagejava
titleinfo.magnolia.flickr.templates.templates.components.FlickrImageSimpleModel
linenumberstrue
sections%%(public class)%% -
urlhttps://git.magnolia-cms.com/projects/DOCUMENTATION/repos/flickr-integration/browse/flickr-templates/src/main/java/info/magnolia/flickr/templates/templates/components/FlickrImageSimpleModel.java?at=master&raw
 

Note:

  • The type of the bean property photo is com.flickr4java.flickr.photos.Photo (which is provided by the 3rd party library Flickr4java).
  • Line 56: The model injects 
    Javadoc
    0info.magnolia.flickr.app.flickrservice.FlickrService
    rangeHigherVersion1.1
    classNameinfo.magnolia.flickr.app.flickrservice.FlickrService
    renderTypeasynchronous
    .
  • Line 61: Photo can be retrieved with FlickrService and the flickrPictureId which is stored on the content of the component.

...

Here we create a FlickrItemPreviewComponent which displays a thumbnail and photo title.

Code Pro
collapseTypeClassic
languagejava
titleinfo.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent
linenumberstrue
sections%%(public class)%% -
urlhttps://git.magnolia-cms.com/projects/DOCUMENTATION/repos/flickr-integration/browse/flickr-browser/src/main/java/info/magnolia/flickr/browser/app/field/FlickrItemPreviewComponent.java?at=master&raw
 

To build the custom preview component extend 

Javadoc
0AbstractContentPreviewComponent
rangeHigherVersion5.6
classNameinfo.magnolia.ui.form.field.component.AbstractContentPreviewComponent
renderTypeasynchronous
: