Ask the Community Experts Session: AEM Workflows Update

Workflows are a wonderful tool in AEM that allow you to automate activities. If you missed the "Ask the Community Experts Session" on workflows, do not fear. They have released an article on this session, and they have released a video of the session.

You can find a link to the to article here: Workflow Article

You can find a link to the video here: Workflow Video

Some of the topics the article and session will cover are:

• Create an AEM workflow
• Invoking the AEM workflow
• Checking if the workflow is successful
• Workflow sessions
• Managing data in your workflow

AEM Interview Questions Part 2

This is part two of my AEM interview questions. You can find the other parts here:

Part 1 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 - Part 8 - PDF

Here are some more AEM interview questions that could come up during a technical interview:

Q: Why is a Content Management System (CMS) required?

A: A content management system is a piece of software that is used to create and manage documents and Web sites. Many websites are dynamic, so their content needs to be updated frequently. In order manage these changes efficiently, it is recommend that a content management system be used. Which is why AEM is a content management system.

Q: What is RESTful?

A: Representational State Transfer (REST) is an architectural style and an approach to communications that is often used in the development of web services. It relies on a stateless, client server, cacheable communications protocol. RESTful applications use HTTP requests to post data, read data, and delete data.

The six architectural constraints of REST are: uniform interface, stateless, cacheable, client server, layered system, and code on demand.

Q: What are the benefits of using OSGI?

A: The main benefits of using OSGI are:

• It reduces the complexity of the system by having everything in bundles.
• It makes the components loosely coupled and easy to manage since they can be installed, deleted, updated, started, and stopped at run time.
• It increases the performance of the system since parts of the application that are not in use, do not need to be loaded in the memory.

Q: What is the listener property in AEM?

A: The listener property in AEM for a component is used to define what happens before or after an action on the component. This is added by using the “cq:listeners” node with a node type of “cq:EditListenersConfig”.

The listener property can also be added to any widget in AEM. In order to add a listener to that widget you just need to add to add a node that is called “listeners” with a type of “nt:unstructured”. Then you just need to add child nodes to the “listeners” node that are events of that widget. You can find a list of events for each widget by searching CQ Widget API documentation.

Q: How do you load digital assets in dam?

A: You can add digital assets to your dam by using the graphical user interface or through WebDav access. If you are using the graphical user interface, you would just browse for the selected files you would like to add, and then cq will create the metadata for those assets in the dam folder. You would generally use the WebDav option when you want to upload a large number or assets at once.

I plan to add more interview questions to this blog, so make sure to check back.

I hope you enjoyed this post. Please feel free to post any comments below.

AEM CQ:Listeners Node Tutorial

The purpose of this tutorial is to show you how to add the "cq:listeners" node to a component so when the component is modified the page will automatically refresh. You can read more about "cq:listeners" from a previous post I made here: cq:listeners node

For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

In order to follow along with this tutorial, you will need to have complete the following tutorial:

ShareThis Component Tutorial

If you have not completed the tutorial listed above, you can download a package from GitHub that has the completed component from here: ShareThis-AEM-Component. Just follow the instructions in the "readme" file to install the package into your instance of AEM.

If you have completed the previous steps, we can get started.

1. Once your instance of AEM is up and running, navigate to crxde lite. Navigate to the "shareThis" component in your projects "components" folder.

2. Right click on the component and choose "Create Node". Enter the following information:

• Name: cq:editConfig
• Type: cq:EditConfig

3. On the node you just created, right click and choose "Create Node". Enter the following information:

• Name: cq:listeners
• Type: cq:EditListenersConfig

4. On the "cq:listeners" node that you just created, add the following property:

• Name: afteredit
• Type: String
• Value: REFRESH_PAGE

5. Now, open the web page the has the "ShareThis Component" on it. If you click on the component to open the dialog box, and click the "OK" button, you will see that the page will automatically refresh.

Summary: This tutorial showed you how to add the "cq:listeners" node to a component and how to use the "afteredit" property to refresh the page when the component is modified.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: ShareThis Component 1.1

AEM ShareThis Component Tutorial

The purpose of this tutorial is to create an AEM Component that uses the ShareThis plugin that will allow users to share your content easily. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

ShareThis is a tool that makes it easy to share your content across many social media websites. ShareThis also allows you to track when your content is shared. This is all accomplished by using their simple to use plugin. You can find more information here:

http://www.sharethis.com/

In order to follow along with this tutorial, you will need an account with ShareThis. The reason you need an account is because they will assign you a publisher id, which you will need in order to use their plugin. If you do not have an account, click on the link above and then sign up for their site. Registering is free and only takes a few seconds.

Now that you have an account with ShareThis, we can get started.

1. Once you have your local instance of AEM running, navigate to crxde lite. In your project folder, go to the "components" folder, right click and choose "Create Component". An example is posted below:

Just keep clicking "Next" until the component is created.

2. Open the JSP file that was just created for your component and replace the content with the following code:


3. Next, right click on the component you just created, and choose "Create Dialog". An example is posted below:

4. Navigate to the "tab1" node under the dialog you just created. Right click on the node and choose "Create Node". Enter the following information:

• Name: items
• Type: cq:WidgetCollection

5. On the "items" node that you just created, right click and choose "Create Node". Enter the following information:

• Name: pubID
• Type: cq:Widget

6. Your dialog node for the component should look similar to this:

7. On the "pubID" node that you created, add the following properties:

8. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 13. 

9. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

10. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

11. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

12. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

13. Now, open the web page and add the ShareThis component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "Share This Component". Then switch back to edit mode, and add the component to your page.

Now click on the component to go into the dialog and enter your developer ID. Once the page is refreshed, the component will display the ShareThis buttons.

Summary: This tutorial showed you how to create a component that uses the ShareThis plugin, how to add a custom dialog to the component for the publisher ID, and how to add this component to a page.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: GitHub AEM Component

AEM Basic Project Setup Tutorial

The purpose of this tutorial is to show you how to set up a basic project structure in AEM. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this project for learning purposes.

For this tutorial I was using AEM 6.0. You should be able to follow along with other versions of this software.

Lets get started.

1. Once your instance of AEM is up and running, navigate to crxde lite. Right click on the "apps" folder and choose "Create Folder". An example is posted below:

2. Now right click on the "myProject" folder and choose "Create Folder". You will want to create the following folders under the "myProject" folder.

• components
• page
• install
• src
• templates

3. Your folder structure should look like this when you are done:

4. Now we will create the page component. Right click on the "page" folder that you created and choose "Create Component". An example is posted below:

Keep clicking the "Next" button until you can click the "OK" button to create the component.

Note: In AEM 6, you have to specify the "Super Type" for the page component, otherwise it will not show up in the template list. This was not required in previous versions.

5. Open the JSP file that was just created with your component and replace the code inside with the following:

6. Now we need to create a template that will display the page component. Right click on the templates folder and choose "Create Template". An example is posted below:

Click the "Next" button. Click the "+" icon on Allowed Paths and enter the following value: /content(/.*)?. Then keep clicking the "Next" button until you can click the "OK" button to create the template.

7. Make sure you save everything and then head over to the site admin console to create a new web page. Click on "Websites", click the "New..." drop down button, and then choose "New Page". In the window that pops up, make sure you choose the "Simple Page Template" and type in the following title - My Site.

8. Finally, open up the new page you just created. All you should see is a simple parsys component that will let you add components to the page.

You now have a sample project setup that you can use to start creating your first AEM web site. You can use this sample project as a starting point in any of the tutorials on this blog.

Summary: This tutorial showed you how to create the basic project structure in AEM, a page component, a template, and how to create a web page using this template.

You can read more information on creating your first site in AEM here: Create a web site.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: AEM-Getting-Started.

AEM CQ:Listeners Node For A Component

There are many times when an author is modifying a component on a page, and they will have to manually refresh the page in order to see the changes that were made to it. Now, this does not take up a lot of time, but if it happens often it can add up significantly.

There is a way to have the page automatically refresh when a change is made to the component. This can be accomplished by using the "cq:listeners" node that is the following type: "cq:EditListenersConfig". This node type is used when you want the page to refresh whenever a certain action is done to the component.

Some of the properties that the node can have are:

• beforeedit
• beforecopy
• afteredit
• aftermove
• afterdelete

You can find more properties that the node can have here: cq:listeners

In order to use this node you need to create a "cq:editConfig" node under your component, and then add the "cq:EditListenersConfig" node as a child of the "cq:editConfig" node.

You can find an example here: Refresh Page When Component Is Modified

AEM Brackets Extension Tutorial

The purpose of this tutorial is to install the AEM Sightly Brackets Extension and see how easy it is to transfer content back and forth between Brackets and your local instance of AEM.

For this tutorial I was using: AEM 6.0, AEM Brackets Extension 0.0.12, and Brackets 1.1. You should be able to follow along with other versions of this software.

In order to follow along you will need the following:

• The Brackets text editor. If you do not already have this installed, you can get a copy from here: http://brackets.io/. Just follow the download and install instructions from the website to get started.
• You will need to download the following package from GitHub to install into your local instance of AEM: 3D-Model-Component-AEM. You are welcome to create your own package to follow along with the tutorial, but that will not be covered here.

If you have completed the following steps, we can get started.

1. The first thing you need to do is open up Brackets. Then you need to go to "File" and then choose "Extension Manager". Then in the search bar, type in "sightly". This should bring up the AEM Brackets Extension. 

2. Click on "Install", and restart your instance of Brackets when it prompts you.

3. You will need to unzip the "3D-Model-Component-AEM" file that you downloaded from GitHub. Once you do this, navigate to the "3dmodelcomponent-1.0" zipped folder, and unzip this file as well. You will want to keep the zipped version, and the unzip version for use in this tutorial.

4. In your instance of AEM, go to crxde lite, and go to the package manager. Once you are here, click on "upload package". Now browse to the location of the "3dmodelcomponent-1.0" zipped folder on your local file system. Then just click on "install" to install the package in your AEM instance.

5. Now switch back to Brackets, and click on the new "AEM" menu item at the top and choose "Project Settings". You will want to fill in the pop up window with the settings for your local instance of AEM. An example is posted below:

6. You will then need to open the "3dmodelcomponent-1.0" folder in Brackets. Go up to "File" and choose "Open Folder". Then browse your local file system for this folder, not the zipped folder. You should see a similar project structure like this:

7. Next, navigate to "3dmodel" folder, by going clicking on "jcr_root/apps/test/components/3dmodel". Once you are here, right click on the folder and click "New File". Type in the name "text.txt". Then just type in some text, such as "hello all".

8. Now just save the file. Now you should see the AEM Brackets Extension Icon flash blue to show it is syncing with your AEM instance, and then turn green to show that everything is synced up. 

9. To make sure that it worked, switch back to your local instance of AEM, and go to crxde lite. If you navigate to "apps/test/components/3dmodel" you should see the new "test.txt" file, and if you open up the file it should show your text. If you already had crxde lite open, you will need to refresh your folder structure, or the web page.

10. While in crxde lite, add some text to the "text.txt" file, such as "hello". Now, save the file and switch back to Brackets. 

11. Click on the "AEM" menu item, and choose "Import Content Package", in order to have it update your files. If you still have the "text.txt" file open, close it, and reopen it. You should see the new text in the file. 

Summary: This tutorial showed us how to install the AEM Brackets Extension into Brackets, set up the setting to connect to your instance of AEM, and how to sync content between AEM and Brackets.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

AEM Sightly Brackets Extension

With the release of AEM 6, sightly has become the new go to language instead of using JSP. With the switch to this there has a been a new tool that was released, a sightly brackets extension. This extension offers some great features such as sightly syntax highlighting, code completion for sightly expressions, and bidirectional synchronization.

What does this all mean? Well, Brackets is an open source text editor that focuses on web design, and with sightly being a HTML5 template, it is a great tool to edit it with. Here is a link if you are interested: Brackets

The best feature of this extension is that you can package up your code, open it in Brackets and start editing it right away. Once you are done, you just click a button and your code is automatically uploaded to your AEM instance. It works the same way if you are editing that code in crxde lite, you just click a button and your code is updated in Brackets.

You can find more information here if you are interested in the extension: Sightly Brackets Extension

Create A Swing Application To Post Files To AEM

While reading through some AEM forums, I came across this tutorial called "Creating Java Swing applications that posts files to AEM ClientLibs folder". 

Here is a link to the tutorial: Swing Tutorial

The tutorial walks you through creating an application that will upload a Text, CSS, or JavaScript file to a file path that you specify in the application.

Once you do this, then you need to create an OSGI bundle that contains a Swing Servlet. After this is done, you just upload the bundle to the Felix Console, start the bundle, and then you can run your application to start uploading files.

I thought this was great tool because it is a nice alternative to getting local files into AEM without having to use CRXDE.

Here are some tips if you run through the tutorial: 

The tutorial states that it was tested on 5.5 and 5.6. I ran through the tutorial using AEM 6.0, and it worked fine, so you are welcome to try it out with that version.

When you are creating the Swing application, it has you create some image icons, and reference images in a image folder. You can upload your own images to your project and update the file path to those images. The application will work fine without the images, but it adds a nice look to the application.

Also, during the creation of your Swing application, you can update the default path text to something more relevant to your application. Just change "path.setText("/apps/slingSevletApp/components/clientlibs");" to any path you would like.

Lastly, just make sure you export your Swing application as a runnable jar file so you can run it at any time without having to have Eclipse, or any other IDE open.

AEM Interview Questions Part 1

When you are preparing for technical interview, it is sometimes beneficial to know what types of questions that may be asked during your interview. I am going to list some questions that may be asked during an AEM interview, and the answers to these questions. This is not a definitive guide by any means, but a way to get going in the right direction.

This is part one of my AEM interview questions. You find the other parts here:

Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 - Part 8 - PDF

Q: What is AEM?

A: Adobe Experience Manager (AEM), is a java based content management system that is offered from Adobe. It was previously called Day CQ5, but was acquired from Adobe in 2010. AEM is based on a content repository and uses the JCR to access the content in the repository. AEM uses the Apache Sling framework to map request url to the corresponding node in the content repository. It also uses the OSGI framework to internally allow modular application development.

Q: What are the advantages of AEM over another CMS?

A: One big advantage of AEM over another CMS is how it integrates with other products from Adobe and with the Adobe Marketing Cloud. AEM comes built in with features like workflows to control content in the CMS, the use of search queries to find anything you are looking for, setting up social collaboration, tagging content, and a way to manage your digital content.

AEM also includes a way to manage mobile applications, mobile websites, e-commerce, and marketing campaign management. 

Q: What is the technology stack that CQ5 is based on?

A: The CQ5 technology stack is based on three technologies. These technologies are: Apache Sling, OSGI (Apache Felix), and the Java Content Repository (JCR).

Apache Sling is a RESTful framework that is used to access a jcr over http protocol. It will then map that request url to the node in the jcr.

OSGI is a framework that is used for modular application development using Java. Each module, which is called a bundle, can be stopped and started independently during runtime.

The Java Content Repository uses the JSR-170 API to access the content repository by using Java independently of the physical implementation. CQ5 uses its own implementation of the jcr called CRX.

Q: What is the role of the dispatcher?

A: The dispatcher is AEM’s caching and/or load balancing tool. By using the dispatcher it can also help protect your AEM server from attack since it will be using cached pages. The goal of the dispatcher is to cache as much content as possible, so it does not need to access the layout engine.

Load balancing is the practice of distributing computational load of the website across several instances of AEM.

The benefits of using the dispatcher as a load balancing tool is so that you gain increased processing power since the dispatcher shares document requests between several instances of AEM, and to have increased fail-safe coverage. This is accomplished by if the dispatcher does not receive responses from an instance, it will automatically relay the request to another instance.

Q: What is sightly?

A: Sightly is an HTML templating language that was introduced in AEM 6.0. It is meant to take the place of JSP files and is the preferred templating system for HTML. The name sightly means “pleasing to the eye”, and its focus is to keep your markup beautiful and maintainable.

I plan to add more interview questions to this blog, so make sure to check back.

I hope you enjoyed this post. Please feel free to post any comments below.

AEM Dialog Conversion Tool

Adobe has recently released a new tool that can extend your existing components dialog that is defined for the classic view and update it to the new Touch UI dialog. The tool will use the original dialog that was built with ExtJS and create a duplicate dialog that is based on the Granite UI.

Even though your classic dialog will work on the Touch UI, it does not have the nice new design that fits in with the Touch UI and it really stands out. If you wanted a new dialog before, you would have to create a new dialog for your component. Now with this new tool, it can be done automatically for you, which will save you time as a developer and allow you to focus elsewhere.

The tool is not perfect and cannot always create a dialog for you. So, you need to verify that your new dialog works correctly and that it meets your needs. It is a great tool that will help you get started with your dialog creation, and will save you time in the long run.

For more information go to the following link: Dialog Conversion Tool

AEM Developer Chrome Extension

Finding a new tool to help you as a developer is always exciting. One that I would like to share with you that recently became available is the AEM Developer Chrome Extension. This extension is a great tool that can save you a lot of time when working with AEM. The extension was created by Nate Yolles, and you can check it out here on GitHub: aem-developer-chrome

You can also find the extension on the Google Chrome store here: AEM Developer Chrome Extension

Now you may be wondering what the tool has to offer. Here are some of its features:

• You can open the current page you are on in any of your defined environments with a click of one button.
• You can impersonate any user without having to go to the User Admin page. When you impersonate a user using the extension, it will simply reload the current page as that user.
• You can switch between classic view and the Touch UI with a click of a button. You can toggle the content finder off and on with a click of a button.
• It allows you to clear cached clientlibs, compiled JSPs, and run the garbage collector without going to the Felix console.
• You can go to crxde lite with a click of a button. If you have a page open and click the button, it will navigate to that page and that exact node in crxde lite.

As you can see, this extension is a powerful tool that can save you time as developer. If you are interested in adding another tool to your set, check out the above links.

Here is what the extension looks like:

Ask the Community Experts Session: AEM Workflows

Adobe will be holding another "Ask the Community Experts Session" this month on March 24th at 11 A.M. - 12:00 P.M. EST. This session will be focusing on workflows in AEM. The session will be giving an in depth look at building workflow models, custom workflow steps, using the workflow launcher, and available workflow operations.

If you have not attended one of these AEM sessions, they are a great chance to listen to some of the best experts in the industry, a great place to ask questions, and a good way to start networking. I look forward to seeing you all there.

Here is a link to sign up if you are interested: Ask the Community Experts

This session will be hosted by Scott Macdonad and Will McGauley. You can find Scott Macdonad's blog here: http://scottsdigitalcommunity.blogspot.com/

AEM Component To Send An Email Tutorial

The purpose of this tutorial is create a component for AEM that will send an email and then display a confirmation message. This is accomplished by using the ACS AEM Commons Email API. The ACS AEM Commons package adds a lot of features to the out of the box AEM implementation. For the purpose of this tutorial we will be creating the component in crxde lite. This tutorial does not go into full detail, but does provide all of the code that was used in the creation of this component for learning purposes.

This tutorial uses the following website: ACS AEM Commons

Lets get started -

1. The first thing you need to do is download and install ACS AEM Commons package into your instance of AEM. There are a few ways to do this. For this project we will be installing it as a package using the package manager in crxde lite. You can download the package from github here: ACS Commons Github

2. The second thing you need to do is have an email account that you want to use with this service. For the purpose of this tutorial, we will be using a Gmail account. If you do not already have one, you can set one up quickly here: Gmail

For the Gmail account you might have to update your settings to allow AEM to send emails with this account. Go to the following site: https://www.google.com/settings/security/lesssecureapps. Once you do this, turn on access for less secure apps. If this is turned off, there is a possibility that the emails will not send, and you will receive an email that Gmail blocked access to your account.

3. After you upload and install the package you will be able to use the ACS AEM Commons features. In order to send emails through AEM you need to configure the Day CQ Mail Service component. There are a few ways to do this. For this project we will be configuring the OSGI through crxde lite.

4. Go to your project folder under apps and create a "config" folder if you do not have one. Inside this folder is where we will put your OSGI configuration.

5. Right click on your config folder and create a node. An example is posted below:

6. Add the following properties to the node you just created:

7. You will want to replace the "youremail@gmail.com" with your Gmail email address, and "smtp.password" with your password to your Gmail account.

8. The next step is to create an email template that will be sent with your email service. Email templates are kept under "etc/notification/email". Navigate here and create a new file called "en.html". This file can be a text file or an html file. The main difference is that you can use html code in the template if you choose to make it an html file.

9. Inside the file you just created put in the following code:

The code that is like this "${example}", will be updated dynamically by the component that we will create in the next few steps. You can replace the code with normal text, however it will be the same in every email that gets sent out.

10. Now it is time to create a component that will be able to use this email service and email template. Inside your component folder create a new component. An example is posted below:

11. On the component you just created add a dialog to it so it will show up in the sidekick.

12. Open the jsp file that was created for your component and put in the following code:

13. In the jsp file you will want to update the recipient address with your email address so you can test out the email service.

14. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 19. 

15. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

16. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

17. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

18. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

19. Now, open the web page and add the email component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "Simple Email Component". Then switch back to edit mode, and add the component to your page.

If everything works correctly you should see a message on your page that the email was sent successfully.  Every time this page is visited, or refreshed, the code will be called and will send out a new email.

Now this is a very simple component that you can build upon. One example of building upon this component is that you could add in a html form where a user would put in their their name and email address, and then take that information and send that user an email.

I hope you enjoyed this tutorial. If you have any questions or comments please feel free to post them below.

Note: On the ACS AEM Commons website there is a tutorial on how to use their email API, however it did not work right out the box for me. That is why I created this tutorial on how I was able to get this feature to work.

You can download a package of the component on GitHub from here:

AEM-Email-Example.

You will have to update the OSGI settings and the email template with you email information.

AEM Component To Dispaly X3D File Tutorial

The purpose of this tutorial is to develop a component for AEM, which will allow you to display 3D models. This is accomplished by loading in an X3D file and then displaying it on your webpage. For this tutorial we will be creating the component in crxde lite. This tutorial does not go into full detail, but does provide all of the code that was used in the creation of this component for learning purposes.

This tutorial uses the following website: http://www.x3dom.org/

Lets get started -

1. Once you have your version of AEM up and running, head over to crxde and create a component. An example is posted below.

2. Add the following node to the component you just created:

On the clientlibs node add the following property - Name: categories, Value: 3dmodel

3. Add the following files to your clientlibs folder:

• css.txt
• js.txt
• x3dom.css
• x3dom.js

4. Open the css.txt file and add the following line - x3dom.css

5. Open the js.txt file and add the following line - x3dom.js

6. Open the following link and copy the content into the x3dom.css file:

x3dom.css

7. Open the following link and copy the content into the x3dom.js file:

x3dom.js

8. Add a dialog to the component that you created. Once this is created, navigate to the tab1 node and add the following node - Name: items, Value: cq:WidgetCollection

9. On the items node you just created add the following node - Name: linkURL, Value: cq:Widget

10. Your dialog should look like the following:

11. Add the following properties to the linkURL node:

12. Open your jsp file that was created with your component and add the following code to it:

13. Upload a X3D file to your assets folder. Here is a link to a sample x3d file: Deer X3D File

14. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 19. 

15. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:

You can keep clicking next until you have the option to create the component.

16. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:

17. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:

You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

18. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

19. Now, open the web page and add the 3D component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "3D Model Component". Then switch back to edit mode, and add the component to your page.

Now click on the component to go into the dialog and choose a X3D file. Once the page is refreshed, the component will display that file.

I hope you enjoyed this tutorial. If you have any questions or comments please feel free to post them below.

You can download a package of the component on GitHub from here:
3D-Model-Component-AEM

My First Post

I just wanted to say hello to everyone, and say thank you for visiting my blog. I am new to blogging, so I am hoping to get into the swing of things, and I am able to post some content on a regular basis. I plan to post my first tutorial later today, and I hope you all find it useful.