Featured

Tuesday 26 May 2015

How to pass json data to a dialog in cq5



By following this process, we can pass the sample data in json format to a dropdown in dialog.

Step 1 : Create component  --> create a node for it
             in tab1 --> create "items" node of type cq:WidgetCollection
             in items --> create node called "counts" of type "cq:widget"
             add these properties to "counts" node as follows







Step 2 : Now we need to define a servlet to expose json as return parameter.

For this create a java class called "JsonDataExtractor.java"
Here it follows,


package com.demo.serv;

/*
*Author SONYC
*
*/
import org.apache.felix.scr.annotations.*;
import org.apache.sling.api.servlets.*;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import javax.servlet.ServletException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.*;
import java.util.ArrayList;

import org.json.*;
import javax.servlet.Servlet;

@SuppressWarnings({"deprecation", "serial"})
@Component
@Service(Servlet.class)
@Properties(value = {
    @Property(name = "sling.servlet.paths", value = "/bin/jsondataextractor.json")
})
public class JsonDataExtractor extends SlingAllMethodsServlet{    

    private static final Logger log = LoggerFactory.getLogger(JsonDataExtractor.class);

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException,IOException {      
        init(request, response);
    }
 
    @Override
    protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException,IOException {      
        init(request, response);
    }
 
    @SuppressWarnings("static-access")
    private void init(SlingHttpServletRequest request, SlingHttpServletResponse response ){    
 
    try
      {
        log.info("-------------In Json Provider class--------------");  
        ArrayList jsonAr=new ArrayList();      
        JSONObject obj=new JSONObject();
        String jsonData=null;        
   for(int i=0;i<=4;i++)
{
 obj.put("id",i);
 obj.put("value",i);
 jsonData = obj.toString();
 jsonAr.add(jsonData);
 obj=new JSONObject();        
   }
        //Return the JSON formatted data
        response.getWriter().write(jsonAr.toString());
      }
      catch(Exception e)
      {
log.info("-------------exception-------------"+e.getMessage());
        e.printStackTrace();
      }
    }  
}


Step 3 : Now you are able to get the values as json , and can check by hitting http://localhost:4502/bin/jsondataextractor.json

Step 4 :
Place this below code in your component jsp to get selected value.

<%@include file="/libs/foundation/global.jsp"%>
<%@page import="com.day.cq.wcm.api.WCMMode"%><%
%><%@page session="false" %>

<%
    pageContext.setAttribute("counVal", properties.get("count",""));
    if ( (WCMMode.fromRequest(request) == WCMMode.EDIT))
   {
       %>
           Please click here to add HTML
       <%
   }
%>
<c:if test="${not empty counVal}">
    <div class="container">
        ${counVal}
    </div>
</c:if>


Hope it helps :)
Thanks,
SonyCharan

How to use i18n in cq5


These are the steps to implement Internationalization with i18n in Adobe CQ5.

Step-1: Need to create the base folder(sling:Folder) called "i18n" in your project("/apps/<project>").
          (You can create in global level called "/apps")           
          jcr:primaryType = sling:Folder

Step-2: Need to create the language folders(sling:Folder) called "en" in  "/apps/<project>/i18n/" .
                                                                                             "fr" in  "/apps/<project>/i18n/" .
                                                                                            "de" in  "/apps/<project>/i18n/" .
          jcr:primaryType = sling:Folder
         Assign mixin to the language folders created in the previous step (e.g. en, ar etc) from crx                   (http://localhost:4502/crx/explorer)console mix:language
         For the language nodes (e.g. en, ar etc) add String property jcr: language, value = ISO language code   (en,fr, de etc)


Step-3: Create nodes of type sling:MessageEntry for each field label, and add below properties.
           sling:key = <keyname> and sling:message = <message>



Setting properties for English(en) node
Setting properties for English(en) node

Setting properties for France(fr) node
Setting properties for France(fr) node



Now we can use this "key" to get the "value" of the appropriate locale string .


Use this below code in your jsp file.

<%@page session="false"%>
<%@page import="java.util.Locale,java.util.ResourceBundle,com.day.cq.i18n.I18n"%>
<%@include file="/libs/foundation/global.jsp"%>
<cq:setContentBundle/>
<%
      final Locale pageLocale = currentPage.getLanguage(false);
      final ResourceBundle resourceBundle = slingRequest.getResourceBundle(pageLocale);
      I18n i18n = new I18n(resourceBundle);
%>
<div class="item_label">
      <%= i18n.get("itemname") %>
</div>

Now you can manage this through i18n console as well.

    Go to "http://localhost:4502/libs/cq/i18n/translator.html"
    In filters choose your projects i18n directory path("/apps/<project>/i18n").
    You can get the appropriate strings for different locales which we mentioned above.

Accessing properties in translator console ( http://localhost:4502/libs/cq/i18n/translator.html )
Accessing properties in translator console ( http://localhost:4502/libs/cq/i18n/translator.html )
After setting up of required langauge nodes in i18n folder, you can modify these strings from here directly from now as shown above.

Now we can start work on I18N .

Hope it helps :)
Thanks,
SonyCharan

Thursday 21 May 2015

Configuring OSGi in cq5

                 
           
           OSGI is a fundamental element in the technology stack of Adobe Experience Manager (AEM). It is used to control the composite bundles of AEM and their configuration.

        OSGi provides the standardized primitives that allow applications to be constructed from small, reusable and collaborative components. These components can be composed into an application and deployed".

       This allows easy management of bundles as they can be stopped, installed, started individually. The interdependencies are handled automatically. Each OSGi Component (see the OSGI specification) is contained in one of the various bundles.  

The run modes you can set for configs are :
  • config - for all run modes
  • config.author - for the author environment
  • config.publish - for the publish environment
  • config.<run-mode> - as appropriate

Creating the Configuration in the Repository

        To actually add the new configuration to the repository:

        The structure is as follows : You can follow and create 



1) Use CRXDE Lite to navigate to: /apps/<yourProject>
2) If not already existing, create the config folder (sling:Folder):
           config - applicable to all run modes
           config.<run-mode> - specific to a particular run mode
3)Under this folder create a node:
           Type: sling:OsgiConfig
           Name: the persistent identity (PID);
                    for example for Customised property for requirement use com.eqsa.semicoll here.
4)For each parameter that you want to configure, create a property on this node:
           Name: the parameter name as shown in the Web console; the name is shown in brackets at the end of the                                     field description.
                    For example, for com.eqsa.semicoll  use com.eqsa.semicoll.ID
          Type: as appropriate.
          Value: as required.
              You only need to create properties for the parameters that you want to configure, others will still take the default      values as set by AEM.
5)Save all changes.
             Changes are applied as soon as the node is updated by restarting the service (as with changes made in the Web console).

Now you will get the configuration with the name " com.eqsa.semicoll "  in configMgr (http://localhost:4502/system/console/configMgr), as shown


and can set the properties for the configuration as follows 





Like wise you can add as much as config properties in one configuration.


Hope it helps :)


Listeners in cq5 / Configuring the Edit Behaviour of a Component

                
                 The edit behaviour of a component is configured by adding a cq:editConfig node of type cq:EditConfig below the component node (of type cq:Component) and by adding specific properties and child nodes. The following properties and child nodes are available:
  
cq:editConfig node properties: (Can apply these fields & props to editConfit child node)

  • cq:actions (String array):    defines the actions that can be performed on the component.
  • cq:layout (String):    defines how the component is edited.
  • cq:dialogMode (String):    defines how the component dialog is opened.
  • cq:emptyText (String):    defines text that is displayed when no visual content is present.
  • cq:inherit (Boolean):    defines if missing values are inherited from the component that it inherits from.


cq:editConfig child nodes: (Can apply these fields & props to editConfit child node)

  • cq:dropTargets (node type nt:unstructured):    defines a list of drop targets that can accept a drop from an asset of the content finder.
  • cq:actionConfigs (node type nt:unstructured):    defines a list of new actions that are appended to the cq:actions list.
  • cq:formParameters (node type nt:unstructured):    defines additional parameters that are added to the dialog form.
  • cq:inplaceEditing (node type cq:InplaceEditingConfig):    defines an inplace editing configuration for the component.
  • cq:listeners(node type cq:EditListenersConfig):    defines what happens before or after an action occurs on the component.

Note :Node (properties and child nodes) is represented as XML, as shown in the following example.

Applying with cq:EditConfig Properties: 

CQ:ACTIONS

       cq:actions="[edit,-,delete,insert]"
       cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>

Applying cq:EditConfig Child Nodes 

CQ:DROPTARGETS

<cq:dropTargets jcr:primaryType="nt:unstructured">
  <file
       jcr:primaryType="cq:DropTargetConfig"
       accept="[.*]"
       groups="[media]"
       propertyName="./fileReference"/>
</cq:dropTargets>


Drop targets



CQ:ACTIONCONFIGS

     cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
     jcr:primaryType="cq:EditConfig">
           <cq:actionConfigs jcr:primaryType="nt:unstructured">
                               <separator0
                  jcr:primaryType="nt:unstructured"
                  xtype="tbseparator"/>
                                             <manage
                       jcr:primaryType="nt:unstructured"
                       handler="function(){CQ_collab_forum_openCollabAdmin();}"
                       text="Manage comments"/>
         </cq:actionConfigs>
</jcr:root>

CQ:FORMPARAMETERS

<cq:formParameters
   jcr:primaryType="nt:unstructured"
   name="photos/primary"/>

CQ:LISTENERS

<cq:listeners
    jcr:primaryType="cq:EditListenersConfig"
    afterdelete="REFRESH_PAGE"
    afteredit="REFRESH_PAGE"
    afterinsert="REFRESH_PAGE"
    afterMove="REFRESH_PAGE"/>





Source : https://docs.adobe.com/docs/en/cq/5-5/developing/components/edit_config.html



Hope it helps :)
Thanks,
SonyCharan