Search

AEM HUB

Author

Madhu Samala

AEM Developer

Synchronizing the code between AEM Instance and Eclipse

In this post, we will learn how to sync the code between AEM Instance and Eclipse.

Versions Used : AEM -> 6.3 , Eclipse -> Oxygen 3a

We will use AEM Developer tools eclipse plugin to do the sync operation.

Install AEM Developer tools in Eclipse

1) Open eclipse -> Go to Help -> click on Eclipse Marketplace.

EclipseContentSync-1

2) Search for AEM Developer tools and install the plugin.

EclipseContentSync-2

Import AEM maven project into Eclipse

In Project explorer view -> right click and select Import option.

On Import popup window -> select maven -> existing maven projects.

EclipseContentSync-3

Click Next -> browse maven project root directory.

EclipseContentSync-4

Click finish. Now our AEM project is imported into eclipse.

Change the default perspective to AEM perspective

Go to Windows -> perspective -> open perspective -> select AEM -> click open

EclipseContentSync-5

Now we have our project on AEM perspective.

EclipseContentSync-5-1

Convert the maven modules into content and bundle projects

Right click on demo.core module -> configure -> click on convert to Bundle Project.

EclipseContentSync-6

similarly right click on demo.ui.apps module -> select configure -> click on convert to Content Project.

Configure AEM server connector in Eclipse Servers view

To connect eclipse to AEM server click on “no servers are available” link in servers view.

EclipseContentSync-7

Click finish. To edit the server connection details like port , debug port, username and password,  double click on the configured server connector.

EclipseContentSync-9

Edit the properties and save.

To add the bundle and ui.apps package to the configured server -> right click on the server connector -> select Add or Remove.

EclipseContentSync-9.1

Add the bundles from left section to the right using Add button and click finish.

EclipseContentSync-8

Start AEM Instance

EclipseContentSync-11

Once the AEM Instance is started, go to eclipse and start the configured server in the Eclipse.

EclipseContentSync-10

once server is started, the bundle and ui.apps modules will be published to the AEM server.

To verify go to OSGi bundles console and find the demo.core module.

EclipseContentSync-12

If the bundle and ui.apps module is not published to the AEM server, republish the modules by removing all modules and adding them again to the Eclipse server connector.

EclipseContentSync-13

Now the Demo project is deployed to AEM.

Importing the Code changes from AEM Instance to Eclipse

open CRXDE and edit a component html file.

EclipseContentSync-14

Helloword.html file is updated with text “welcome to my world”as shown above.

To get the updated component to eclipse workspace, in eclipse right click on helloworld.html file and click on Import from server.

EclipseContentSync-15

The file will be imported from the AEM Instance to eclipse.

EclipseContentSync-17

Exporting the code changes from Eclipse to AEM

Updated helloword.html with some text in eclipse workspace as shown below.

EclipseContentSync-18

The updated file will automatically synchronized/pushed to AEM Instance.

EclipseContentSync-19

Thanks,

Madhu Samala 

Customizing Granite UI Form Field Component

In this article, I will be showing how to customize a Granite UI Field component with an example.

Use case: Customize the Granite UI Textarea field component to display the number of characters the author has entered in the field.

Granite UI already provided a range of components designed to be used in Touch UI dialogs, and in AEM these form field components are available under /libs/granite/ui/components/foundation/form/*

Every Granite UI Form field component inherits /libs/granite/ui/components/foundation/form/field component.

The Granite UI base field component is composed of three files:

field.jsp: handles the generic processing, labelling, description and calls init.jsp and render.jsp

init.jsp:  provides form value that we will need when rendering the field.

render.jsp: this is where the actual rendering of the field is performed and needs to be overridden for our custom field.

ootb-field-comp

By default all the OOTB Granite UI form components uses the sling:resourceSuperType property to inherit from base field component and overrides the render.jsp.

ootb-textarea-comp

To customize the Textarea component and show the number of characters the author has entered and recommended character count.

Step 1 : overlay or override the OOTB Textarea component into /apps/<project>/<any> folder.

custom-textarea

Step 2 : modify the render.jsp file to show the  recommended character count/no. of characters entered using coral UI character count api below the field.

Ref : https://docs.adobe.com/docs/en/aem/6-1/ref/coral-ui/docs/2.17.0-granite-004/character-count.html

Highlighted is the new code added to the overriden Textarea render.jsp file.

custom-render-jsp

Step3: Assign the custom Textarea component to the dialog field nodes.

custom-field-asign

dialog-char-count

When the maxLength property is set on the field node its shows the assigned max length value else it shows zero.

I have assigned maxLength 20 on short description field and on long description field maxLength property is not set.

shortDesc

longDesc

When the maximum Length has reached it displays error by highlighting the field with red border and the count goes to negative. If the MaxLength is not set then the count will be increased from zero to the number of characters entered.

text-error

Hope this will be useful.:)

Thank you!

Madhu Samala

AEM with Angular2

In this post, I will be sharing my view on Integrating AEM 6.1 with Angular2 and other front-end technologies with an example.

Getting started 

Requirement

AEM component with Angular2.

  • Create an AEM with Angular2 Form Component which displays address suggestions to the user when the user starts typing in the address field and when the user selects one of the address suggestions, it should auto populate the country, state and zip code fields.
  • Leverage Angular2 Http Service to make Ajax calls to google maps API for the address suggestions and address details and display the response using Angular data-binding feature.
  • Leverage AEM Authoring capabilities to make the Form component labels authorable from the component dialog.

AEM Project Setup

Generate the project structure using maven archetype 10 and remove unwanted modules (ui.content, it.tests and it.launcher) for this project. Now we have two modules.

  • Core – contains Java files.
  • ui.apps – contains templates, components, Clientlibs and Angular2 code.

project-layout-allmodules

Maven archetype 10 gives the basic project setup with template, page components and Clientlibs. So I’m directly jumping on to creating the Form component.

Creating the Contact Details Form Component

  • Create an AEM component with the name “contactdetails” under apps/ng2-aem/components/content/.
  • Use bootstrap ui framework to build the Form component UI.
  • Create the Touch UI dialog to make the Form title, description, first name, last name, email and address field’s labels authorable.

Backend Code

ContactDetails POJO class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/models/ContactDetails.java

The ContactDetails class contains class members to match the fields specified in the component’s dialog, and also contains their getter and setter methods.

java-model-class

ContactDetailsUse class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/components/ContactDetailsUse.java

The ContactDetailsUse is the server-side part of the AEM component and it extends the WCMUsePojo class.

java-wcmuse-class

Contactdetails component HTL file

– apps/ng2-aem/components/content/contactdetails/contactdetails.html

Assuming that you are already familiar with creating component and dialog in AEM, i’m not showing the steps here to create it.

component-basic-html

Component Dialog

component-dialog

Setting up the Angular2 code

Create a folder named “web” under /NG2-AEM.ui.apps/src/main/. This folder will contain our Angular2 code and its build configuration.

Build configuration

Create the following files under web folder.

 package.json

packageJson

Few words about scripts

build   :  invokes the “gulp build” task which then calls the “run-webpack” task to transpile Typescript code into JavaScript and bundle all the JS files into two files and place it into the AEM clientlib folder.

aemsync :  invokes the “gulp aemsync” task to sync the generated JavaScript files under “etc/designs” to running AEM Instance.

watch   :  invokes the “gulp watch” task to watch the for the changes in typescript files, and when there is a change in typescript files it calls the “run-webpack” task.

NPM Packages

Angular 2 is broken into a lot of packages under @angular organization in NPM. We’ll need to install them and also need RxJS, Zone.js, and some shims which Angular2 depends on.

tsconfig.json

tsconfigjson

typings.json

typingsjson

Typings will be downloaded to typings folder and they will be downloaded on “npm install”.

Webpack.config.js

In Webpack config file we specify all the source files where they are available and how to compile and then after compilation where to put them.

Here I’m using webpack to transpile the Typescript code to JavaScript and bundle all the files into two JS files and place them into /etc/designs/ng2-aem/clientlib-site/js Clientlib folder.

  • app.js – contains the application code.
  • pollifills.js – contains the browser supporting libraries.

webpack

gulpfile.js

Gulp JS file contains following tasks.

  • clean   : deletes the JS files from “/etc/designs/Ng2-AEM/clientlib-site/js” clientlib folder before webpack task runs.
  • run-webpack   : executes the webpack config file.
  • aemsync  : sync the JS files created with webpack to running AEM Instance.
  • watch   : watches for the changes made on Typescript files and runs run-webpack task.

gulp

Angular2 Components

Angular2 is component based. Component is the combination of an HTML template and a component class that controls a portion of the screen.

Every component begins with a @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component’s html inside a custom () tag.

The templateUrl property specifies the URL to an external file containing the html for the view.

ContactDetails Angular2 component

– web/src/app/components/contactdetails.component.ts

ng-comp1

ng-comp2

AddressSuggestion Model class

– web/src/app/models/address-suggestion.ts

address-model

ContactForm Model class

– web/src/app/models/contact-form.ts

conact-model

ContactDetailsService Interface

– web/src/app/services/Icontactdetails.service.ts

service-interface

ContactDetailsService class

– web/src/app/services/contactdetails.service.ts

service-class

Application Module

– web/src/app/app.module.ts

ng-app-module

Application bootstrap

– web/src/main.ts

ng-app-bootsrap

Part2 : Click here to continue

AEM with Angular2 – part2

Modify AEM Component to render Angular2 component content

In the AEM component’s HTL file “contactdetails.html” replace the entire Form html portion with the following Angular2 component selector,

<contact-details message=’${contactForm.contactDetails.contactJson}’>Loading contact form……</contact-details>

this selector will be used to render the Angular2 component’s html on the page, and we will need to pass the AEM dialog authored values as an input to the Angular2 component.

Angular2 root components do not allow to pass inputs using @Input(), so we will pass the dialog values as an selector tag attribute value.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.html

modified-htl-file

To display the content of Angular2 component we must have a separate .html template file, so create a new file “contactdetails.component.html” in the AEM component and copy the Form html in it. The path of this file need to be assigned to the templateUrl metadata property of Angular2 component.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.component.html

ng-comp-htm-1

ng-comp-htm-2

ng-comp-htm-3

 

ng-htm-comp-pointing

Modify UI.apps Maven POM file

– /NG2-AEM.ui.apps/pom.xml

Add the following exec maven plugin to the POM file.

ng2-maven-plugin

Building

mvn clean install -PautoInstallPackage

The maven build will invoke the Exec maven plugin which will trigger “npm install” and “npm run build” tasks which then executes the gulp build task which does the whole build process for the Angular2 code.

npm run aemsync : to manually sync the generated js files to running AEM instance without maven build.

Final Project Structure

project-layout-ui.apps

ng2-folder-structure

Output

comp-page-authoring

Drag the component on to the page and author the field labels in the dialog.

page-sugvalues-display1

When the user starts typing in the address field, suggestions will be shown below the field and when the user clicks on one of the address suggestions, the country, state and zip code fields are auto populated.

page-sugvalues-debug

page-values-results

Thank you!

Madhukar Reddy

Powered by WordPress.com.

Up ↑