Developing with CRXDE Lite

Last update: August 15, 2024

CREATED FOR:

  • Developer

This section describes how to develop your Adobe Experience Manager (AEM) application using CRXDE Lite.

Seethe overview documentation for more information on the different development environments that are available.

CRXDE Lite is embedded into AEM and enables you to perform standard development tasks in the browser. With CRXDE Lite, you can create a project, create, and edit files (like .jsp and .java), folders, templates, components, dialogs, nodes, properties, and bundles while logging.
CRXDE Lite is recommended when you do not have direct access to the AEM server. Or, when you develop an application by extending or modifying the out-of-the-box components and Java™ bundles, or when you do not need a dedicated debugger, code completion and syntax highlighting.

NOTE
From AEM 6.5.5.0 onwards, anonymous access of CRXDE Lite is not possible anymore.
Users are redirected to the login screen.
NOTE
Adobe recommends that you use the AEM Developer Tools for Eclipse and the AEM HTL Brackets Extension during project development.

Getting Started with CRXDE Lite

To get started with CRXDE Lite, proceed as follows:

  1. Install AEM.

  2. In your browser, enter https://<host>:<port>/crx/de. By default it is https://localhost:4502/crx/de.

  3. Enter your username and password. By default it is admin and admin.

  4. Click OK.

The CRXDE Lite User Interface looks as follows in your browser:

chlimage_1-18

You can now use CRXDE Lite to develop your application.

Overview of the User Interface

CRXDE Lite offers the following functionality:

Top switcher barQuickly switch between CRXDE Lite, Package Manager, and Package Share.
Node path widget

Displays the path to the selected node.

You can also use it to jump to a node, by entering the path by hand, or pasting it from somewhere else, and hitting Enter.

It also provides support looking for nodes with a specific node name. Enter the name of the node that you would like to find, and wait (or hit the search symbol on the right-hand side). You can try entering, for example, the string oak into the widget to see how it works. If a given node or nodes is loaded into the explorer pane, the list is displayed, and you can select the path and hit Enter to navigate to it. It only works for the nodes loaded into the CRXDE client application in the browser. If you want to search the whole repository, use Tools, then Query.

Explorer pane

Displays a tree of all the nodes in the repository.

Click a node so you can display its properties in the Properties tab. After clicking a node, you can select an action in the toolbar. Click the node again to rename it.

Tree Navigation Filter (binocular icon): enables you to filter the nodes in the repository for which the name contains the input text. It only applies to nodes that have been loaded locally.

Edit pane

Home tab: lets you search content and/or documentation and access developer resources (documentation, developer blog, knowledge base) and support (Adobe homepage and support center).

Double-click a file in the Explorer pane so you can display its content. For example, a .jsp or a .java file. You can then modify it and save the changes.

Once a file is edited in the Edit pane, the following tools are available on the toolbar:

- Show in tree: shows the file in the repository tree.
- Search/Replace ...: do search or replace.

Double-click the status line of the Edit pane opens the Go to line dialog so you can enter a specific line number to go to.

Properties tabDisplays the properties of the node that you have selected. You can add new properties or delete existing ones.
Access Control tab

Display permissions based on the path, repository-level, or principal.

The permissions are broken down into

- Applicable Access Control Policy: The policies that can be applied to the selection.

- Local Access Control Policies: The policies applied locally to the selection.

- Effective Access Control Policies: The policies applied for the selection, might be set locally or inherited from parent nodes.

Note. To be able to see the Access Control information at all, the user logged in to CRXDE Lite must have read-rights to ACL entries. The anonymous user cannot see this information by default - log in as admin to see the information, for example.

Replication tabDisplay the replication status of the node. You can replicate and replicate delete the node.
Console tab

Server Logs:

Displays logs messages. You can configure the log level, clear the console, pin at the selected scroll position, and enable or disable the displaying of messages.

Version Control:

Displays version control messages.

Build Info tabDisplays information when a bundle is being built.
RefreshRefreshes the selection. Changes from other users are updated in your view of the repository. Changes you have made are unaffected.
Save All

Save All:

Saves all the changes that you have made. Until you click save, the changes are temporary, and are lost when you exit the console.

Revert:

Discards all the changes that you have made on the selected node since the last save action, then reloads the state of the repository for the selected node.

Revert All:

Discards all the changes that you have made throughout the entire repository since the last save action, then reloads the state of the repository.

Create ...

Drop-down menu to create the following under the selected node:

- Node: a node with an arbitrary node type

- File: nt:file node and its nt:resource subnode

- Folder: nt:folder node

- Template: AEM template

- Component: AEM component

- Dialog: AEM dialog

DeleteDeletes the selected node.
CopyCopies the selected node.
PastePastes the copied node under the selected node.
Move ...Moves the selected node to the node that is set through the dialog.
Rename ...Renames the selected node.
Mixins ...Lets you add mixin types to the node type. The mixin types are mostly used to add advanced features such as versioning, access control, referencing, and locking to the node.
Tools

Drop-down menu with the following tools:

- Server Config ...: to access the Felix Console.

- Query ...: to query the repository.

- Privileges ...: to open privilege management, where you can view and add privileges.

- Test Access Control ...: a place where you can test the permission for a certain path and/or principal.

- Export Node Type: to export node types in the system as cnd notation.

- Import Node Type ...: to import node types using cnd notation.

- Install SiteCatalyst Debugger ...: instructions on how to install Analytics Debugger.

Login widget

Displays the logged-in users and the workspace that they are logged into, for example, admin@crx.default.

Click it to log in or relogin as a specific user. If you do not specify a workspace to log in to, you are logged into the default workspace, crx.default.

If you want to browse the repository as an Anonymous user, use anonymous as the login name, and any password (for example, a space or a dot).

If your authorization is no longer valid (for example, it is expired), the login widget displays "Unauthorized - Login...". Click it to log in again.

Creating a Folder

To create a folder with CRXDE Lite:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, right-click the folder under which you want to create the folder, select Create …, then Create Folder ….

  3. Enter the folder Name and click OK.

  4. Click Save All to save the changes on the server.

Creating a Template

To create a template with CRXDE Lite:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, right-click the folder where you want to create the template, select Create …, then Create Template ….

  3. Enter the Label, Title, Description, Resource Type, and Ranking of the template. Click Next.

  4. This step is optional: set the Allowed Paths. Click Next

  5. This step is optional: set the Allowed Parents. Click Next.

  6. This step is optional: set the Allowed Children. Click OK.

  7. Click Save All to save the changes on the server.

It creates:

  • A node of type cq:Template with Template properties

  • A child node of type cq:PageContent with Page Content properties

You can add properties to your template: see the Creating a Property section.

Creating a Component

The feature described here is only available if CQ5 is installed, that is if the node type cq:Component is available in the repository.

To create a component with CRXDE Lite:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, right-click the folder where you want to create the component, select Create …, then Create Component ….

  3. Enter the Label, Title, Description, Super Resource Type, and Group of the component. Click Next.

  4. This step is optional: set the component properties Is Container, No Decoration, Cell Name, and Dialog Path. Click Next.

  5. This step is optional: set the component property Allowed Parents. Click Next.

  6. This step is optional: set the component property Allowed Children. Click OK.

  7. Click Save All to save the changes on the server.

It creates:

  • A node of type cq:Component
  • Component properties
  • A component .jsp script

Creating a Dialog

To create a dialog with CRXDE Lite:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, right-click the component where you want to create the dialog, select Create …, then Create Dialog ….

  3. Enter the Label and the Title. Click OK.

  4. Click Save Al l to save the changes on the server.

It creates a dialog with the following structure:

dialog[cq:Dialog]/items[cq:Widget]/items[cq:WidgetCollection]/tab1[cq:Panel]

You can now adapt the dialog to your needs by modifying properties or creating nodes.

You can also use the Dialog Editor to edit a dialog. Double-clicking the dialog node in CRXDE Lite brings up the editor. See Dialog Editor for more details.

Creating a Node

To create a node with CRXDE Lite:

  1. Open CRXDE Lite in your browser.
  2. In the Navigation pane, right-click the node where you want to create the node, select Create …, then Create Node ….
  3. Enter the Name and the Type. Click OK.
  4. Click Save All to save the changes on the server.

You can now adapt the node to your needs by modifying properties or creating nodes.

NOTE
Most of the edit operations, including Create Node, keeps all the changes in memory, and only stores them into the repository upon saving (by way of the “Save All” button). However some operations such as move are automatically persisted.
The validation regarding whether the newly created node is allowed by the node type of the parent node is also carried out by the JCR repository first when saving changes. If you receive an error message while saving a node, check whether the content structure is valid (for example, you cannot create an nt:unstructured node as a child of nt:folder node).

Creating a Property

To create a property with CRXDE Lite:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, select the node where you want to add the new property.

  3. In the Properties tab in the bottom pane, enter the Name, the Type, and the Value. Click Add.

  4. Click Save All to save the changes on the server.

Creating a Script

To create a script:

  1. Open CRXDE Lite in your browser.

  2. In the Navigation pane, right-click the component where you want to create the script, select Create …, then Create File ….

  3. Enter the File Name including its extension. Click OK.

  4. The new file opens as a tab in the Edit pane.

  5. Edit the file.

  6. Click Save All to save the changes.

Exporting and Importing Node Types

With CRXDE Lite, you can import and/or export node type definitions in CND (Compact Namespace and Node Type Definition) notation.

To export a node type definition:

  1. Open CRXDE Lite in your browser.

  2. Select your required node.

  3. Select Tools then Export Node Type.

  4. The definition, in cnd notation, is displayed in your browser. Save the information, if necessary.

To import a node type definition:

  1. Open CRXDE Lite in your browser.

  2. Select Tools then Import Node Type….

  3. Enter the CND notation for the definition in the text box.

  4. Check Allow Update if you are updating an existing definition.

  5. Click Import.

Logging

With CRXDE Lite, you can display the file error.log that is on the file system at <crx-install-dir>/crx-quickstart/server/logs and filter it with the appropriate log level. Proceed as follows:

  1. Open CRXDE Lite in your browser.

  2. In the Console tab at the bottom of the window, in the drop-down menu on the right, select Server Logs.

  3. Click the Stop icon to display the messages.

You can:

  • Adjust the log parameters in the Felix Console by clicking the Logging Configurations icon.
  • Clear the messages by clicking the Brush icon.
  • Pin the message at the selection by clicking the Pin icon.
  • Enable or disable the displaying of messages by clicking the Stop icon.

Access Control

NOTE

Experience Manager


The True Cost of a Failed Implementation

Online | Session | General Audience

A failed implementation isn’t just an inconvenience — it costs real revenue. Poor execution and misaligned tools disrupt pipelines,...

Wed, Mar 19, 2:00 PM PDT (9:00 PM UTC)

Register

Rapid Feature Releases with AEM Cloud: Telegraph Media Group’s RDE Strategy

Online | Session | Intermediate

Hear how Telegraph Media Group, the award-winning publisher of The Daily Telegraph, The Sunday Telegraph, The Telegraph Magazine,...

Wed, Mar 19, 3:30 PM PDT (10:30 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now