Search

AEM HUB

Category

Uncategorized

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 

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 ↑