Sample Project Creation in AEM
There are 2 ways to
create project in AEM
1.
Manually
2.
Using
Maven Archetype
Adobe Recommended way is to build AEM project
using Maven Archetype
(Latest
version is Maven Archetype 21)
Building AEM Project based on Maven
offers several benefits:
·
An IDE-agnostic development
environment.
·
Usage of Maven Archetypes and
Artifacts provided by Adobe.
·
Usage of Apache Sling and Apache
Felix tool sets for Maven based development setups.
·
Ease of import into an IDE; for
example, Eclipse and/or IntelliJ.
·
Easy integration with Continuous
Integration Systems.
Steps to create AEM
sample project using Maven archetype 21.
Step 1: Open the command
prompt and go to your working directory (for example, F:\sampleproject).
Step 2: Run the following
Maven command:
mvn archetype:generate
-DarchetypeGroupId=com.adobe.granite.archetypes
-DarchetypeArtifactId=aem-project-archetype
-DarchetypeVersion=21-SNAPSHOT
Step 3: When prompted, specify the following information:
·
groupId - sampleproject
·
artifactId – sampleproject
·
version - 1.0-SNAPSHOT
·
package - com.aem.sampleproject
·
appsFolderName - sampleproject
·
artifactName - sampleproject
·
componentGroupName - sampleproject
·
confFolderName - sampleproject
·
contentFolderName - sampleproject
·
cssId - sampleproject
·
packageGroup - sampleproject
·
siteName – sampleproject
Step 4:
When prompted, specify Y.
Step 5: Once done, you will see a message like:
Reactor Summary for
sampleproject 1.0-SNAPSHOT:
[INFO] sampleproject
...................................... SUCCESS [ 51.113 s]
[INFO] sampleproject - Core
............................... SUCCESS [01:53 min]
[INFO] sampleproject - UI apps
............................ SUCCESS [01:06 min]
[INFO] sampleproject - UI
content ......................... SUCCESS [
3.973 s]
[INFO] sampleproject -
Integration Tests Bundles .......... SUCCESS [
7.451 s]
[INFO] sampleproject -
Integration Tests Launcher ......... SUCCESS [04:48 min]
[INFO]
------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO]
------------------------------------------------------------------------
[INFO] Total time: 09:04 min
[INFO] Finished at: 2019-06-20T15:45:14+05:30
[INFO]
------------------------------------------------------------------------
Step 6: Enter the following command:
F:\sampleproject >mvn eclipse:eclipse
Once
done, you will see a message like:
[INFO] Wrote Eclipse project for
"sampleproject.it.launcher" to F:\Projects\sampleproject\it.launcher.
[INFO]
[INFO]
------------------------------------------------------------------------
[INFO] Reactor Summary for
sampleproject 1.0-SNAPSHOT:
[INFO]
[INFO] sampleproject ......................................
SUCCESS [ 0.921 s]
[INFO] sampleproject - Core
............................... SUCCESS [
0.722 s]
[INFO] sampleproject - UI apps
............................ SUCCESS [
0.670 s]
[INFO] sampleproject - UI
content ......................... SUCCESS [
0.087 s]
[INFO] sampleproject -
Integration Tests Bundles .......... SUCCESS [
0.168 s]
[INFO] sampleproject -
Integration Tests Launcher ......... SUCCESS [
0.747 s]
[INFO]
------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO]
------------------------------------------------------------------------
[INFO] Total time: 5.741 s
[INFO] Finished at:
2019-06-24T20:25:33+05:30
[INFO]
------------------------------------------------------------------------
Note: To generate the Eclipse project
files from your POM you need to execute this command.
After
you run this command, you can import the project into Eclipse.
Step 7:
Importing project under Eclipse
From
the menu bar, select File > Import > Existing Maven Projects
·
core - where Java
files that are used in OSGi services and sling servlets are located
·
launcher - where
additional Java files are located
·
tests - Java files for
tests like JUNIT tests
·
apps - content under
/apps
·
content - content under
/content
Check whether uber-jar dependency is present in
pom.xml file
<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.5.0</version>
<classifier>apis</classifier>
<scope>provided</scope>
</dependency>
What
is UberJar?
This JAR file that
contains all of the public Java APIs exposed by AEM. It includes limited
external libraries as well, specifically all public APIs available in AEM which
come from the Apache Sling, Apache Jackrabbit, Apache Lucene, Google Guava etc.
In
the past, developers had to manage a relatively large number of individual
dependencies to different AEM libraries and when each new API was used, one or
more individual dependencies had to be added to the project. On one project,
the introduction of the UberJar resulted in 30 separate dependencies being
removed from the project.
Step 8: Deploying project into CRXDE:
Go
to http://localhost:4502/crx/packmgr/index.jsp
Upload
and install below packages:
1. \sampleproject\ui.apps\target\ sampleproject.ui.apps-1.0-SNAPSHOT
2. \sampleproject \ui.content\target\ sampleproject.ui.content-1.0-SNAPSHOT
Step 9: Go to http://localhost:4502/system/console/bundles
Install
bundle from \sampleproject\core\target\sampleproject.core-1.0-SNAPSHOT
Check whether Status is Active as follows:
Project Structure under CRXDE
/apps/sampleproject
– Contains components and templates.
/conf/sampleproject
– This holds all editable templates for the project.
/content/sampleproject
– All created pages resides under this folder
/content/dam/sampleproject
– All DAM Assets like images, pdf’s etc.
Creating HTL Component and writing model or servlets,
calling them in our component.html file as follows:
The HelloWorldModel is a
sample class that uses Sling Models. This class uses Sling Model annotations
such as @Model.
The class is annotated
with @Model and the adaptable class. Fields which need to be injected
are annotated with @Inject
Adobe Recommends using Sightly(HTL), a template language of
HTML for creating components in AEM.
The HTML Template Language (HTL)
Java Use-API enables a HTL file to access helper methods in a custom Java
class. This allows all complex business logic to be encapsulated in the Java
code, while the HTL code deals only with direct markup production.
Local Vs Bundle Java Class
Local Java use-class: It is recommended when the use-class is specific to the
component.
When
a local install is used, the package name of the use-class must match that of
the repository folder location, with any hyphens in the path replaced by
underscores in the package name.
In
this case Info.java is
located at /apps/my-example/components/info so
the package is apps.my_example.components.info:
File info.java
package
apps.my_example.components.info;
import
com.adobe.cq.sightly.WCMUsePojo;
public
class Info extends WCMUsePojo {
private
String lowerCaseTitle;
private
String lowerCaseDescription;
@Override
public
void activate() throws Exception {
lowerCaseTitle
= getProperties().get("title", "").toLowerCase();
lowerCaseDescription
= getProperties().get("description", "").toLowerCase();
}
File info.html
<div
data-sly-use.info="Info">
<h1>${info.lowerCaseTitle}</h1>
<p>${info.lowerCaseDescription}</p>
</div>
Bundle Java use-class: It is recommended when the
Java code implements a service that is accessed from multiple HTL components.
Value returned by model will be
printed when we use that component in our page as follows:
Here,
com.aem.sample.core.models.HelloWorldModel
is a bundle java use-class.
To build the OSGi bundle using
Maven, perform these steps:
1.
Open the command prompt and go to
the project path i.e. f:\sampleproject>
2. Run the following maven command: mvn clean install –PautoInstallPackage
[The command
-PautoInstallPackage automatically deploys the OSGi bundle to AEM].
AEM
Core Components
The use of foundation components is still
supported, but they have been mostly deprecated in AEM 6.5 and superseded by
Core Components which offer more extensibility and flexibility that can be
found on
http://opensource.adobe.com/aem-core-wcm-components.html.
The current release of the Core Components is
2.4.0 is compatible with AEM 6.5.
Core components are sorted according to various
categories called component groups including:
General: Includes basic components, including text,
images, tables, and charts.
Columns: Includes components necessary for organizing
the layout of the content.
Form: Includes
all the components needed to create a form.
When to
Use Core Components?
As the
Core Components are all-new, and offer multiple benefits, it is recommended for
new AEM projects to use them. For existing projects, a migration should be part
of a larger project effort, for example a rebranding or overall refactoring.
The
current version (2.4.0) of the
Core Components features the following components:
