Adobe Experience Manager Blog

AEM concepts, snippets and implementation

Tag Archives: AEM 6.3

DS Annotations – dependency updates

0

With AEM 6.2, we can use the new Declarative Service annotations. These are improvements over Felix annotations. Adding the recommendation excerpt from Apache Felix website:

While the Apache Felix Maven SCR Plugin is a great tool (see below), for developing OSGi components using Declarative Services you should use the official annotations from the OSGi R6 specification. The development of the Apache Felix SCR Plugin is in maintenance mode.

The examples and dependencies have been verified on AEM 6.3 Instance

Maven dependency changes:

In order to use the new OSGi annotations, we need to add following dependencies to pom.xml.

 <dependency>
     <groupId>org.osgi</groupId>
     <artifactId>osgi.core</artifactId>
     <version>6.0.0</version>
     <scope>provided</scope>
 </dependency>
 <dependency>
     <groupId>org.osgi</groupId>
     <artifactId>osgi.cmpn</artifactId>
     <version>6.0.0</version>
     <scope>provided</scope>
 </dependency>
 <dependency>
     <groupId>org.osgi</groupId>
     <artifactId>osgi.annotation</artifactId>
     <version>6.0.1</version>
     <scope>provided</scope>
 </dependency>
 

Use latest version of mvn-bundle-plugin (>=3.2.0)

For a project upgrading from Felix to DS annotations, you can remove following:

  • All Felix dependencies. Example:
    • org.apache.felix.scr.annotations
    • biz.aQute.bnd
  • Plugins
    • maven-scr-plugin: is required to resolve felix annotations at build time

Code changes:

You can choose to update java files at once, or one-by-one.

  • Incase you wish to modify all files together, then remove felix dependencies and plugins. The IDE would now recognize all the files that need modifcation.
  • However, if you wish to change files one-by-one, then you can keep both DS and Felix dependencies in pom.xml. A bundle with both types of annotations would still be good. Once all the code changes are done, you should remove all felix dependencies.

How to identify the changes:

You can easily identify the files, by looking for package imports of “org.apache.felix.scr.annotations.*”.

We would be using the following packages instead:

  • org.osgi.service.component.annotations.*
  • org.osgi.service.metatype.annotations.*

For more details on code changes involved, please visit the specific links:

Verify annotation resolution

To verify if the DS annotation is generated:

  • decompile the jar created after mvn clean install
  • Check for the Service description available below /OSGI-INF/ folder

service-description.PNG

 

Advertisements

DS Annotations – Component, property and configurations

1

@Component Annotation

An component is a piece of code that is managed by OSGi container. The container would be responsible for its instantiation and management.

A component is activated only after all its service dependencies are satisfied by the container.

Attributes of a component: 

component-attributes.PNG

The above table have been noted from: https://www.knopflerfish.org/releases/5.2.0/docs/javadoc/org/osgi/service/component/annotations/Component.html

  • configurationPolicy: The attribute can hold following values of ConfigurationPolicy
    • IGNORE: Always allow the component configuration to be satisfied and do not use the corresponding Configuration object even if it is present.
    • OPTIONAL: Use the corresponding Configuration object if present but allow the component to be satisfied even if the corresponding Configuration object is not present.
    • REQUIRE: There must be a corresponding Configuration object for the component configuration to become satisfied.
  • factory: used to create a configuration factory. More implementation details are available on link.
  • name: The attribute doesn’t support special characters. If invalid, the component will not be registered.
  • property: A replacement for “@Properties felix annotation used at Class-level”.
  • service: registers component as a Service. More implementation details available on link.

Example:

To create a component, add @Component annotation to a class. Also, configure its attributes as per your need.

In the following example, we have:

  • @Activate annotation is used to mark a function which would be called when the component activates. The function can have any name.
  • @Deactivate annotation is used to mark a function which would be called when the component deactivates. The function can have any name.
  • Declared a custom property using property attribute.
    • The property value is read from componentContext in @Activate/@Deactivate methods.

More on defining property:

One may also need to declare multiple properties of a component. In such scenarios, declare an array of values for property attribute:

To define multiple values of a property, create each value as a separate element of the property Array.

 

 

Creating configurable properties

The annotations described in this section will help you to create Components whose configurations can be edited via OSGi console. To achieve the same:

  1. Create a separate or an inner interface which would hold configurations. In example, we have created Config interface.
  2. Add @ObjectClassDefinition annotation to the interface. Also, add desired attributes
    • name: The name would help you search the configuration in OSGi’s configuration manager.
  3. Add @Designate to the Component that would consume the configurations.  The ocd attribute should refer to the Configuration interface created in Step-2.
  4. Declare properties that you would like to configure via @AttributeDefinition
    • Following image maps annotation attributes with the OSGi UI.osgi.PNG
    • Please note that there are 2 ways to define default values:
      • defaultValue attribute of @AttributeDefinition: The value is displayed to the user, when he/she tries to configure the interface via Configuration manager. OSGi will NOT pick this default value, if no Configuration exists. Thus, when you install a bundle, the output would appear as:default-values.PNG
      • Specifying default value in variable declarartion: The value is displayed to the user, when he/she tries to configure the interface via Configuration manager. OSGi will pick this default value, even if no Configuration exists.

Also, note that we no longer need PropertiesUtil to resolve OSGi configurations. 🙂

Notes:

Via Declarative Services, the number of annotations have been reduced. For example: @Component annotation is used for:

  • Component
  • Service
  • Servlet
  • Filter etc..

All of the above can be created by utilizing attributes of @Component details. More details are available on specific links

 

 

Coral 3 – Granite UI components

1

There are few modifications to the way Granite UI components are configured for Coral 3 components. Example: radio, checkbox, multifield etc.

Sharing snippets for frequently used Granite UI components (verified on AEM 6.3):

Alert:

<readonlySelectedAlert
   granite:class="cmp-form-textfield-readonlyselected-alert"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/alert"
   size="S"
   text="Alert text"
   variant="warning"/>

Accordian:

<accordion
    granite:class="js-cq-IPEPlugin-container"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/accordion"
    variant="quiet">
    <items jcr:primaryType="nt:unstructured">
        <source
           jcr:primaryType="nt:unstructured"
           jcr:title="Source"
           sling:resourceType="granite/ui/components/coral/foundation/container"
           maximized="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
                <allowupload
                    granite:class="js-cq-ImageEditor-allowUpload"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    checked="{Boolean}true"
                    deleteHint="{Boolean}false"
                    name="./allowUpload"
                    text="Allow asset upload from file system"
                    uncheckedValue="{Boolean}false"
                    value="{Boolean}true"/>
            </items>
           <parentConfig
               jcr:primaryType="nt:unstructured"
               active="{Boolean}true"/>
       </source>
       <orientation
               granite:class="js-cq-IPEPlugin-group"
               jcr:primaryType="nt:unstructured"
               jcr:title="Orientation"
               sling:resourceType="granite/ui/components/coral/foundation/container"
               maximized="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
               <rotate
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Rotate"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="right"
                   name="rotate"/>
               <flip
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Flip"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="horizontal,vertical"
                   name="flip"/>
           </items>
       </orientation>
       <crop
           granite:class="js-cq-IPEPlugin-group"
           jcr:primaryType="nt:unstructured"
           jcr:title="Cropping"
           sling:resourceType="granite/ui/components/coral/foundation/container"
           maximized="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
               <crop
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Allow crop"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="*"
                   name="crop"/>
                   <configWrapper
                       jcr:primaryType="nt:unstructured"
                       sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/wrapper"
                       configPath="./plugins/crop/aspectRatios">
                       <aspectratios
                           granite:class="cq-AspectRatio"
                           jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                           composite="{Boolean}true"
                           fieldLabel="Aspect ratios">
                           <field
                               granite:class="cq-AspectRatio-field"
                               jcr:primaryType="nt:unstructured"
                               sling:resourceType="granite/ui/components/coral/foundation/container"
                               name="./plugins/crop/aspectRatios">
                               <items jcr:primaryType="nt:unstructured">
                                   <name
                                       granite:class="cq-AspectRatio-name"
                                       jcr:primaryType="nt:unstructured"
                                       sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                       fieldLabel="Name"
                                       name="name"/>
                                   <ratio
                                       granite:class="cq-AspectRatio-ratio"
                                       jcr:primaryType="nt:unstructured"
                                       sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                       fieldLabel="Ratio"
                                       min="0"
                                       name="ratio"
                                       step="0.0001"/>
                               </items>
                           </field>
                       </aspectratios>
                </configWrapper>
            </items>
        </crop>
    </items>
</accordion>

Checkbox:

  • value: The submit value of the field when it is checked.
  • uncheckedValue: The submit value of the field when it is unchecked.
  • defaultChecked: Indicates if the checkbox is checked.
    warning:: When setting “defaultChecked” = “true”, you have to set the value of “uncheckedValue” so that the form values will be always populated.
    Otherwise Sling Post Servlet will remove the property from the form values, which makes the checkbox to be always checked.
<showDateFilter
    granite:class="cmp-form-option-item-active"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    name="./selected"
    text="Show Date Filter"
    uncheckedValue="{Boolean}false"
    defaultChecked="{Boolean}true"
    value="{Boolean}true"/>

Text:

<inputgroup
    jcr:primarytype="nt:unstructured"
    sling:resourcetype="granite/ui/components/coral/foundation/text"
    text="Some text"/>

Textfield:

<filterSectionText
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Some Text"
    name="./someText"/>

TextArea:

<pathbrowser
    jcr:primarytype="nt:unstructured"
    sling:resourcetype="granite/ui/components/coral/foundation/form/pathbrowser"
fieldlabel="Path Browser"
name="./searchPath"
rootpath="/etc/tags">

Fileupload:

<upload granite:class="cq-wcm-fileupload"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"     async="{Boolean}true"     autoStart="{Boolean}false"     multiple="{Boolean}false"     name="./image/file.sftmp"     sizeLimit="100000000"     text="Upload Image"     uploadUrl="will_be_replaced">
    <granite:data
        jcr:primaryType="nt:unstructured"
        cq-msm-lockable="./image"/>
</upload>

Pathbrowser:

<pathBrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Path Browser"
    name="./searchPath"
    rootPath="/etc/tags"/>

Pathfield:

 <buttonLinkTo
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
    fieldLabel="Link to"
    name="./buttonLinkTo"
    rootPath="/content"
    suffix=".html"/>

Datepicker:

<datepicker
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
    displayedFormat="MM-DD-YYYY HH:mm"
    fieldLabel="datepicker"
    name="./datepicker"
    type="datetime"
    typeHint="Date"/>

Userpicker:

<userpicker
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/userpicker"
    fieldLabel="User Picker"
    hideServiceUsers="{Boolean}true"
    impersonatesOnly="{Boolean}false"
    name="./user"/>

Select List:

					<listFrom
    granite:class="cmp-options--editor-type-v1"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="List Item"
    name="./listItem">
    <items jcr:primaryType="nt:unstructured">
        <children
            jcr:primaryType="nt:unstructured"
            text="Child pages"
            value="children"/>
        <static
            jcr:primaryType="nt:unstructured"
            text="Fixed list"
            value="static"/>
        <search
            jcr:primaryType="nt:unstructured"
            text="Search"
            value="search"/>
        <tags
            jcr:primaryType="nt:unstructured"
            text="Tags"
            value="tags"/>
    </items>
 </listFrom>

Radio:

<radio
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
   name="./color"
   vertical="{Boolean}true"
   fieldLabel="Radio">
     <items jcr:primaryType="nt:unstructured">
         <op1
             jcr:primaryType="nt:unstructured"
             text="OP 1"
             value="op1"/>
         <op2
            jcr:primaryType="nt:unstructured"
            text="OP 2"
            value="op2"/>
     </items>
 </radio>

Number field:

<radio jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
    name="./color"
    vertical="{Boolean}true"
    fieldLabel="Radio">
    <items jcr:primaryType="nt:unstructured">
        <op1  jcr:primaryType="nt:unstructured"
            text="OP 1"
            value="op1"/>
        <op2  jcr:primaryType="nt:unstructured"
            text="OP 2"
           value="op2"/>
   </items>
</radio>

Heading

<MainHeading
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/heading"
    level="{Long}3"
    text="Main"/>

Multifield:

The attached snippet has been verified for:

  • Checkbox
  • Textfield
  • Pathbrowser
  • Pathfield
  • Datepicker
  • Select list
 <pages
     jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
     composite="{Boolean}true"
     fieldDescription="Click '+' to add a new page"
     fieldLabel="URLs">
     <field
         granite:clas="cmp-options--editor-item-multifield-composite-item coral-Well"
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/coral/foundation/container"
         name="./items">
         <items jcr:primaryType="nt:unstructured">
             <column
                 granite:clas="cmp-options--editor-item-multifield-composite-item coral-Well"
                 jcr:primaryType="nt:unstructured"
                 sling:resourceType="granite/ui/components/foundation/container">
                 <items jcr:primaryType="nt:unstructured">
                     <showDateFilter
                        granite:class="cmp-form-option-item-active"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/checkbox"
                        name="./selected"
                        text="Show Date Filter"
                        uncheckedValue="{Boolean}false"
                        value="{Boolean}true"/>
                     <filterSectionText
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Some Text"
                        name="./someText"/>
                     <pathBrowser
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                        fieldLabel="Path Browser"
                        name="./searchPath"
                        rootPath="/etc/tags"/>
                     <buttonLinkTo
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                        fieldLabel="Link to"
                        name="./buttonLinkTo"
                        rootPath="/content"
                        suffix=".html"/>
                     <datepicker
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                        displayedFormat="MM-DD-YYYY HH:mm"
                        fieldLabel="datepicker"
                        name="./datepicker"
                        type="datetime"
                        typeHint="Date"/>
                    						<listFrom
                            granite:class="cmp-options--editor-type-v1"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                            fieldLabel="List Item"
                            name="./listItem">
                          <items jcr:primaryType="nt:unstructured">
                              <children
                                  jcr:primaryType="nt:unstructured"
                                  text="Child pages"
                                  value="children"/>
                              <static
                                  jcr:primaryType="nt:unstructured"
                                  text="Fixed list"
                                  value="static"/>
                        </items>
                    </listFrom>
                </items>
             </column>
         </items>
     </field>
 </pages>

More Granite UI components for Coral 3 are available at /libs/granite/ui/components/coral/foundation

Errors and resolution:

Error 1: Executing maven command, throws following error:

“The prefix “granite” for attribute “granite:class” associated with an element type “background-color-palette” is not bound.”

  • Resolution: Add following xml namespace to your content.xml

xmlns:granite=”http://www.adobe.com/jcr/granite/1.0&#8243;