How to Use ExtJS Widgets

Widgets, also known as xtypes, are a core feature of Adobe Experience Manager (AEM formerly Adobe CQ), and understanding them is crucial. AEM provides many different widgets for use out of the box. While it is nice to have so many to choose from to create your site, it can be difficult to know which one best fits your needs. There are two great ways to find out what widgets exist and how to use them. The first is Adobe’s online documentation, and the second is trial and error.

Learning by Documentation
Adobe’s Widget documentation is a great resource for reading about the features and functionality of each widget type. You can browse by hierarchy or directly search for the name of the widget you are looking for. Each widget description page contains detailed information about the widget. You can see its class ancestry, descendants, configuration options, properties, events, and more. Each description gives information about the method/property such as common uses and provided parameters.

Note that the link above provides documentation on the current version of AEM. If you want to find information about a specific version, modify the “current” portion of the URL with the version you are looking for (e.g. http://dev.day.com/docs/en/cq/5-5/widgets-api/index.html).

Learning by Use
The other way to learn more about out of the box widgets is to simply try them. It can often be best to see them in action before attempting to use them yourself. One way to find an already existing component containing a widget is to query the JCR for its use with the query tool provided in AEM. This tool can be located from the Tools->Query… link on the CRXDE Lite page (highlighted below). Using the query tool, you can search for any widget you want, and it will display all components that use that widget. A sample of the query to execute for SQL2 would be SELECT * FROM [nt:base] AS s WHERE [xtype] = ‘pathfield’. For XPath, you could use //*[xtype=’pathfield’] (highlighted below).

Once you know of an existing component that uses the widget you want to use, you can create an instance of that component on a page. You can then experiment with the dialog and see the way the widget functions.

As you become familiar with the out of the box widgets that AEM provides, you will be able to use multiple and various widgets in your dialogs in unity to create the authoring experience you are looking for while being able to best leverage the native power of AEM and its flexible dialog/widget system.

In many situations, the out of the box widgets will be sufficient for what you will need. If your situation requires a more complex widget, AEM allows for the creation of powerful, highly customizable widgets. Instructions on sample custom widget creation will be provided in another tutorial.

Creating a Sightly and Sling Model DOM parser component

Check below url to create a sightly and sling model dom parser component :)
https://helpx.adobe.com/experience-manager/using/domparser.html


Images retrieved from the AEM Dom Parser component

How to include CQ package from other projects as dependency in your project

We often come across situation where we want to include package or jar files from other CQ project across organization to your project.

Set Up: This assumes that you already have your project set up using Maven, Nexus. You need Nexus or any other repository management system to store artifact of jar or CQ package zip artifact you need to use in your project.

Assumption: You are using "content-package-maven-plugin" to create CQ package. More information about this artifact can be found here 
http://dev.day.com/docs/en/cq/current/core/how_to/how_to_use_the_vlttool/vlt-mavenplugin.html

Solution:

For jar file it is simply adding it to your embed statement and for zip file you could use subPackages configuration. Once you will run maven install with this configuration, Other project package will also get installed with your package. Same works for uninstall of package as well. Geometrixx all package uses similar approach.

your final pom will look like this,

	<plugin>
	<groupId>com.day.jcr.vault</groupId>
	<artifactId>content-package-maven-plugin</artifactId>
	<!--Your other properties and build definition -->
	<configuration>
	<!-- All CQ package you want to install as part of your build -->
	<subPackages>
	<subPackage>
	<groupId>YOUR SHARED GROUPID</groupId>
	<artifactId>YOUR SHARED ARTIFACT</artifactId>
	<filter>true</filter>
	</subPackage>
	</subPackages>
	<!-- All third party OSGI bundle and jar you want to install as part of your build -->
	<embeddeds>
	<embedded>
	<groupId>YOUR SHARED GROUPID</groupId>
	<artifactId>YOUR SHARED ARTIFACT</artifactId>
	<target>PATH WHERE YOU WANT THIS TO GO/target>
	</embedded>
	</embeddeds>
	</configuration>
	<executions>
	<execution>
	<goals>
	<goal>package</goal>
	<goal>install</goal>
	</goals>
	</execution>
	</executions>
	</plugin>
	</dependencies>
	<!-- Your other dependencies -->
	<dependency>
	<groupId>YOUR SHARED GROUPID</groupId>
	<artifactId>YOUR SHARED ARTIFACT</artifactId>
	<version>JAR FILE VERSION/version>
	<scope>provided</scope>
	</dependency>
	<!-- CQ PACKAGE FROM OTHER PROJECT DEPENDENCY -->
	<dependency>
	<groupId>YOUR SHARED GROUPID</groupId>
	<artifactId>YOUR SHARED ARTIFACT</artifactId>
	<version>STABLE VERSION OF CQ PACKAGE FROM DIFFERENT PROJECT</version>
	<type>zip</type>
	</dependency>
	</dependencies>

view rawThirdPartyCQDep.xml hosted with ❤ by GitHub

  

NOTE:  When you are using other CQ projects as dependency in to your project, make sure that other project is not overriding configurations in your project. You might have to adjust other project package filter accordingly.                  

How to include all AEM dependencies in AEM6

Prior to CQ6 you have to add dependencies for each class you are using in your pom.xml, Way to find dependencies was (Maven org http://mvnrepository.com or using adobe central http://repo.adobe.com/nexus/content/groups/public through dependency finder HOST:PORT/system/console/depfinder). With CQ6 now all dependencies are provided through one artifactID.

Prerequisite: Maven, CQ Project Set Up 

Include following line in your dependency management for your pom.xml (Depending upon project this could be at any location usually it is your Project parent pom)

<dependencyManagement>
<!-- All Your Third party dependency -->
<!-- AEM 6.0 -->

      <!-- All AEM Dependencies for JSP compilation -->

      <dependency>
        <groupId>com.adobe.aem</groupId>
        <artifactId>aem-api</artifactId>
        <version>6.0.0.1</version>
        <scope>provided</scope>
      </dependency>

      <!-- All AEM 6.1 Dependency added to end of file -->

      <dependency>
        <groupId>com.adobe.cq.social</groupId>
        <artifactId>cq-socialcommunities-api</artifactId>
        <version>1.7.197</version>
        <scope>provided</scope>
      </dependency>

      <dependency>
        <groupId>com.adobe.aem</groupId>
        <artifactId>uber-jar</artifactId>
        <version>6.1.0</version>
        <scope>provided</scope>
        <classifier>obfuscated-apis</classifier>
      </dependency>

</dependencyManagement>

Note that this version could change depending upon new releases of CQ, You can track them from http://repo.adobe.com/nexus/content/repositories/releases/com/adobe/aem/aem-api/

Some Trick: Note that above will include all AEM-API dependencies, other way to check what minimum dependency is needed is to create a multi module project using AEM plugin for eclipse more examplehttp://docs.adobe.com/content/docs/en/dev-tools/aem-eclipse.html .

You can also upload uber-jar with apis classifiers instead of obfuscate-apis classifier to your Nexus or dependency management system. 

To upload this uber-jar to your nexus you can use something like,

mvn deploy:deploy-file -Durl=YOUR-REPO -Dfile=uber-jar-6.1.0-apis.jar -DartifactId=uber-jar -Dversion=6.1.0 -DgroupId=com.adobe.aem -Dclassifier=apis -Dpackaging=jar -DrepositoryId=YOUR-REPO-ID

Once you have uber-jar with apis classifier ready, You can use something like

      <dependency>
        <groupId>com.adobe.aem</groupId>
        <artifactId>uber-jar</artifactId>
        <version>6.1.0</version>
        <classifier>apis</classifier>
        <scope>provided</scope>
      </dependency>

I see that minimum these are needed when you use this,

	<dependencies>
	<!-- OSGi Dependencies -->
	<dependency>
	<groupId>org.apache.felix</groupId>
	<artifactId>org.apache.felix.scr</artifactId>
	</dependency>
	<dependency>
	<groupId>org.apache.felix</groupId>
	<artifactId>org.apache.felix.scr.annotations</artifactId>
	</dependency>
	<dependency>
	<groupId>org.apache.felix</groupId>
	<artifactId>org.osgi.core</artifactId>
	</dependency>
	<dependency>
	<groupId>org.apache.felix</groupId>
	<artifactId>org.osgi.compendium</artifactId>
	</dependency>
	<!-- Other Dependencies -->
	<dependency>
	<groupId>org.slf4j</groupId>
	<artifactId>slf4j-api</artifactId>
	</dependency>
	<dependency>
	<groupId>javax.jcr</groupId>
	<artifactId>jcr</artifactId>
	</dependency>
	<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>servlet-api</artifactId>
	</dependency>
	<dependency>
	<groupId>com.adobe.aem</groupId>
	<artifactId>aem-api</artifactId>
	</dependency>
	<dependency>
	<groupId>junit</groupId>
	<artifactId>junit</artifactId>
	</dependency>
	<dependency>
	<groupId>org.mockito</groupId>
	<artifactId>mockito-all</artifactId>
	</dependency>
	<dependency>
	<groupId>junit-addons</groupId>
	<artifactId>junit-addons</artifactId>
	</dependency>
	</dependencies>

view rawCQMinimumDep.xml hosted with ❤ by GitHub