AEM 6 developer guide, Study Guides, Projects, Research of Java Programming

Download AEM 6 developer guide and more Study Guides, Projects, Research Java Programming in PDF only on Docsity!

ADOBE® TRAINING SERVICES

Student Workbook

Adobe® Experience Manager

Sites: Developer

ii AEM Sites: Developer Training Student Workbook

©2014 Adobe Systems Incorporated. All rights reserved. AEM Sites: Developer If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.

The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commit- ment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unau- thorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.

Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.

Adobe, Acrobat, Adobe AIR, Adobe Analytics, Adobe Target, AIR, Distiller, Flash, Flash Builder, Flash Catalyst, Flex, Adobe Digital Enterprise Platform, MXML, PostScript, Reader, SiteCatalyst, SearchCenter, Discover, Recommendations, Insight, Test&Target, Report Builder, Survey, Search&Promote, and Social Media are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

All other trademarks are the property of their respective owners.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished- rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

ADOBE COPYRIGHT PROTECTED

• 1 Getting Started 1- Table of Contents
  • Introduction to AEM 1-
  • AEM Platform 1-
    • Installation and deployment 1-
    • What is an Author Instance? 1-
    • What is a Publish Instance? 1-
  • Installing AEM 1-
    • EXERCISE 1.1 - Install AEM 1-
    • EXERCISE 1.2 - Log in to AEM 1-
  • The AEM User Interfaces 1-
  • Authoring in AEM 1-
  • Touch-Optimized UI 1-
    • EXERCISE 1.3 - Open a page in Touch-Optimized UI 1-
  • Developer mode 1-
  • Classic UI 1-
  • AEM Web Consoles 1-
  • Administration interfaces 1-
  • Developer Community 1-
• 2 OSGi Framework 2-
  • OSGi and Apache Sling 2-
    • Clustering 2-
    • AEM functional building blocks 2-
  • Granite platform 2-
  • Architecture stack 2-
  • OSGi framework 2-
  • OSGi bundles 2-
  • Additional information 2-
• 3 Content Repository 3-
  • Java Content Repository (JCR) 3-
  • JCR Structure 3-
  • Content Services of the JCR 3-
  • Apache Jackrabbit 3-
  • Apache Jackrabbit Oak 3-
  • Oak Architecture (also known as Hamburger Architecture) 3-
  • Oak vs CRX 3-
  • Microkernels 3-
  • Built-in Protocols/APIs for the CRX Platform 3- iv AEM Sites: Developer Training Student Workbook
  • Repository Structure 3-
    • EXERCISE 3.1 - Familiarize yourself with repository structure 3-
  • Best Practices 3-
• 4 Web Framework 4-
  • Representational State Transfer (REST) 4-
  • Apache Sling 4-
    • Everything is a Resource 4-
    • EXERCISE 4.1 - Accessing Data in different formats 4-
  • Sling Resolution 4-
  • SlingPostServlet 4-
• 5 Scripting language - Sightly 5-
  • Sightly 5-
    • Moving to Sightly 5-
    • Markup 5-
  • Sightly Syntax 5-
    • Comments 5-
    • Expressions 5-
    • Literals 5-
    • Variables 5-
    • Enumerable Objects 5-
    • Java-backed Objects 5-
  • Sightly Block statements 5-
    • use 5-
    • unwrap 5-
    • text 5-
    • element 5-
    • test 5-
    • list 5-
    • resource 5-
    • include 5-
  • Sightly Tooling - AEM Sightly Brackets Extension 5-
    • EXERCISE 5.1 - Work with the Brackets plugin 5-
• 6 AEM Authoring Framework - Templates 6-
  • Creating your website 6-
  • Structure your application 6-
    • EXERCISE 6.1 - Create the structure of your website 6-
  • Create templates 6-
    • EXERCISE 6.2 - Create a template for your website 6-
  • Testing the template 6-
  • Create a page-rendering component 6-
    • EXERCISE 6.3 - Create a page-rendering component 6-
  • Create pages 6-
    • EXERCISE 6.4 - Create a website structure 6-
  • Modify page-rendering scripts 6-
    • EXERCISE 6.5 - Modify page-rendering script to use Sightly script 6-
  • Use APIs to display basic page content 6-
    • EXERCISE 6.6 - Display basic page content using available APIs (in Sightly) 6-
  • Displaying the basic page content using JSP 6- Table of Contents v
  • Recap of Sling framework 6-
    • EXERCISE 6.7 - Create multiple scripts for the page component 6-
• 7 AEM Authoring Framework - Components & Design 7-
  • Modularize the Page component 7-
    • EXERCISE 7.1 - Modularize the page component 7-
  • Inherit the component hierarchy 7-
    • EXERCISE 7.2 - Inherit the Sightly foundation component page 7-
  • Add the design 7-
    • EXERCISE 7.3 - Add a design to the page 7-
  • Create components and include them into script 7-
    • Create a top navigation component 7-
    • How do I create dynamic navigation? 7-
    • EXERCISE 7.4 - Create a top navigation component and include it into script 7-
      • 7- EXERCISE 7.5 - Create a top navigation component by accessing the root node
    • EXERCISE 7.6 - Create a top navigation component using Java 7-
    • EXERCISE 7.7 - Add log message using the JavaScript file of a script 7-
• 8 AEM Authoring Framework - Dialogs 8-
  • Create dialog boxes for components 8-
    • Touch-Optimized UI 8-
    • Classic UI 8-
    • EXERCISE 8.1 - Create a Training Title component 8-
    • EXERCISE 8.2 - Create a dialog for a Classic UI 8-
    • EXERCISE 8.3 - Create a dialog for Touch-Optimized UI 8-
    • Extra Credit - Create a ListChildren component 8-
  • Use Design Dialogs for global content 8-
    • EXERCISE 8.4 - Create a Logo component 8-
    • Extra Credit: Modify your topnav component 8-
  • Use cq:EditConfig to enhance the component 8-
    • EXERCISE 8.5 - Enable inplace editing in the Title component 8-
• 9 AEM Authoring Framework - Foundation Components, Internationalization, ClientLibraries 9-
  • Work with the foundation components 9-
    • EXERCISE 9.1 - Include a breadcrumb foundation component 9-
    • Extra credit: Foundation Breadcrumb component 9-
  • Include the paragraph system 9-
    • EXERCISE 9.2 - Include the paragraph system component 9-
    • EXERCISE 9.3 - Use the Toolbar component 9-
    • EXERCISE 9.4 - Include iParsys component 9-
  • Internationalize the Authoring Interface 9-
    • EXERCISE 9.5 - Internationalizing the Title component’s GUI 9-
  • Add Client Libraries 9-
    • Client- or HTML Libraries 9-
    • Client Library Conventions 9-
    • Examples of Client Libraries 9-
    • Include Client Libraries 9-
    • EXERCISE 9.6 - Include a JavaScript function from Client Libraries 9-
• 10 Mobile Websites 10- vi AEM Sites: Developer Training Student Workbook
  • Responsive design 10-
    • Pros and Cons of responsive web design 10-
    • Pros 10-
    • Cons 10-
    • Challenges 10-
    • EXERCISE 10.1 - Preview the site in various devices 10-
  • Mobile components 10-
    • EXERCISE 10.2 - Create a mobile time component 10-
  • Creation of Mobile website using MSM 10-
    • EXERCISE 10.3 - Create a mobile website 10-
  • Mobile Emulators 10-
    • WURFL 10-
    • Emulator Groups 10-
    • Emulator Framework 10-
• 11 Complex Components Using JSP 11-
  • EXERCISE 11-1 Create a complex component 11-
  • End User Search 11-
  • EXERCISE 11-2 - Create a Search component 11-
  • Using jQuery with Ajax, and Apache Sling 11-
  • EXERCISE 11-3 - Create dynamic user account grid 11-
• 12 OSGi Bundles & Workflow 12-
  • Creating OSGi bundles 12-
    • What exactly is an OSGi Bundle? 12-
    • EXERCISE 12.1 - Consume an OSGi bundle 12-
  • Overview of the main workflow objects 12-
    • Model 12-
    • Steps 12-
    • Transition 12-
    • WorkItem 12-
    • Payload 12-
    • Lifecycle 12-
    • Inbox 12-
    • Workflow Console 12-
    • Starting a Workflow 12-
    • EXERCISE 12.2 - Explore basic workflow 12-
  • Create a Workflow implementation step 12-
    • EXERCISE 12.3 - Define a process step using a Java 12-
    • EXERCISE 12.4 - Implement a process step 12-
• 13 AEM Environment 13-
  • Package Manager 13-
    • EXERCISE 13.1 - Create a Content Package of everything we have done 13-
  • Useful Tools 13-
  • Developer mode in Touch-Optimized UI 13-
    • Components 13-
    • Errors 13-
  • Tests 13- Table of Contents vii
  • debug=layout 13-
  • debugConsole=true 13-
  • debugClientLibs=true 13-
• Performance Consideration 13-
  • Author Environment 13-
  • Publish Environment 13-
• Planning for Optimization 13-
  • Simulate Reality 13-
  • Establish Solid Goals 13-
  • Stay Relevant 13-
  • Agile Iteration Cycles 13-
  • Basic Performance Guidelines 13-
  • EXERCISE 13.2 - Monitor page response 13-
  • EXERCISE 13.3 - Find the response performance 13-
  • EXERCISE 13.4 - Monitor Component based timing 13-
• AEM Deployment 13-
  • Replication 13-
  • Reverse Replication 13-
  • Dispatcher 13-

AEM Sites: Developer Training Student Workbook Chapter 01 | 1-

Getting Started

This chapter provides you with an introduction to AEM. You will learn the following:

• Installation and deployment
• User interfaces
• Various web console

Introduction to AEM

Adobe® Experience Manager helps you organize, create, and manage the delivery of creative assets and other content across your digital marketing channels, including web, mobile, email, communities, and video. AEM provides digital marketers with easy-to-use, web-based applications for creating, managing, and delivering personalized online experiences. AEM provides out-of-the-box integration with other Adobe Marketing Cloud solutions.

Following are the major capabilities of AEM:

• Social communities: Include user-generated content and social media into your brand’s message to create loyal communities on your own sites.
• Mobile content management: Integrate mobile into all your marketing efforts, maintaining consistency and confidence that the content functions on any device.
• Commerce: Quickly deliver branded, personalized shopping experiences to make the most of every customer interaction.

ADOBE COPYRIGHT PROTECTED

AEM Sites: Developer Training Student Workbook Chapter 01 | 1-

While different instances in different environments are all installations of the same AEM software—installed in different places in the overall system infrastructure—they differ mainly in the way they are configured. For example, it is that configuration, or run mode, that determines whether an AEM instance behaves as an author instance or a publish instance.

What is an Author Instance?

Author instances are usually located behind the internal firewall. This is the environment where you and your colleagues will perform authoring tasks, such as:

• Administer the web properties
• Input your content
• Configure the layout and design your content
• Activate your content to the publish environment

Content that has been activated is packaged and placed in the author environment’s replication queue. The replication process then transports that content to the publish environment.

An Author instance is the AEM installation—content authors will login to and manage pages. This includes creating, editing, deleting, moving, etc. In addition, it is the instance run mode, you will use for development, as you can easily observe both Author and Publish views from this mode.

What is a Publish Instance?

A publish environment is usually located in the Demilitarized Zone (DMZ). This is the environment where visitors will access your web site and interact with it, be it public or within your intranet.

• Holds content replicated from the author environment
• Makes that content available to the visitors of your web site
• Stores user data generated by your visitors, such as comments or other form submissions
• Can be configured to add such user data to outbox for reverse replication back to the author environment The publish environment generates your web site’s content pages dynamically in real-time, and the content can be personalized for each individual user.

ADOBE COPYRIGHT PROTECTED

1-4 | Chapter 01 AEM Sites: Developer Training Student Workbook

Installing AEM

Unlike many other applications, you install AEM by using a Quickstart, self-extracting jar file. When you double-click the jar file for the first time, everything you need is automatically extracted and installed. The AEM quickstart jar file includes all files and repository structures required for:

• CRX repository (a fully JCR 2.0/JSR-283 compliant repository and Apache Sling), virtual repository services, index and search services, workflow services, security, and a web server.
• You can run AEM without an application server, but you need a Servlet Engine. Both CRX and AEM WCM ship with built-in servlet engine (Jetty 8.1), which is fully supported and can be used for free. The first time you start the jar file, it creates an entire JCR-compliant repository in the background, which may take several minutes. After this, startup is much quicker, as the applications have been installed and the repository is already created.

EXERCISE 1.1 - Install AEM

1. Create a folder structure on your file system where you will store, install, and start AEM. For

example:

› Windows : C:/adobe/AEM/author › MacOS X: /Applications/adobe/AEM or *x : /opt/adobe/AEM/author).

2. Copy the AEM quickstart JAR and license.properties file from /distribution/AEM into the

newly created folder structure.

AEM author install folder structure

NOTE: In production, you may install AEM in any directory structure. However, for the purposes of this class, we recommend the above directory structures so that you can easily find the directory structures mentioned in the course materials.

3. Rename the AEM quickstart JAR to cq-author-4502.jar.

› cq = the application › author = the WCM mode it will run in (e.g. author or publish) › 4502 = the port it will run in (any available port is acceptable)

4. In a Windows or MacOS X environment, you can simply double-click the cq-author-4502.jar file.

ADOBE COPYRIGHT PROTECTED

1-6 | Chapter 01 AEM Sites: Developer Training Student Workbook

Tuning the JVM is a very important and delicate task and requires a more realistic environment in terms of resources (hardware, operating system, etc) and workload (content, requests, etc). For now, it will be sufficient to know that, you can start your instance (either author or publish) using the following parameters:

-Xms --> assigns initial heap size

• Xmx --> assigns the maximum heap size

-XX:MaxPermSize --> assigns the heap to hold reflective data of the VM (e.g.Java objects)

You can now install or start AEM from the command line together with increasing the Java heap and perm gen size, which will improve performance.

ADOBE COPYRIGHT PROTECTED

AEM Sites: Developer Training Student Workbook Chapter 01 | 1-

Once AEM has started successfully, the dialog will change to something similar to the following:

AEM startup dialog

In addition, once the AEM is started, your default browser will automatically open to AEM’s start URL

(where the port number is the one you defined on installation), e.g., http://localhost:.

Use the following command to install AEM, without installing the Geometrixx sites:

java -jar AEM-author-p4502.jar -r author, nosamplecontent

ADOBE COPYRIGHT PROTECTED

AEM Sites: Developer Training Student Workbook Chapter 01 | 1-

2. Log in using the following credentials:

user: admin password: admin

3. After a successful login, the following screen appears.

You can see the projects by default. The Sites section displays various sites you have created.

The AEM User Interfaces

Following are the important user interfaces that you need to be familiar with:

• Projects
• Sites: Displays all existing sites. These sites are the sample implementation that you can refer to when you work with your actual sites.
• Publications
• Forms: Allows you to create forms using Adobe LiveCycle.
• Assets: Provides you with your digital assets. It was formerly known as DAM.
• Communities: Provides you with various communities’ support.
• Tools: Provides you with various tools to manage operations and assets. It also provides you a code inspection tool named CRXDE Lite and a web console.

ADOBE COPYRIGHT PROTECTED

1-10 | Chapter 01 AEM Sites: Developer Training Student Workbook

Authoring in AEM

AEM provides you with following distinct user experiences while editing your web content:

• Classic UI—provides you with a desktop-like UI
• Touch-optimized UI—provides you UI that is optimized to use in various hand-held devices, such as tablets and phones.

You can use the UI based on your choice. Note that the Touch-Optimized UI works on a Desktop too. At any point of time, you can switch from Classic UI to Touch-Optimized UI.

The classic UI and administrative interfaces use AJAX to enable a desktop-like user experience. For example, when editing content on a website, authors can drag and drop elements like text paragraph and images right onto the page, and immediately see how their changes affect the appearance of the page.

Touch-Optimized UI

By default, when you open a page, it appears in the Touch-Optimized UI.

EXERCISE 1.3 - Open a page in Touch-Optimized UI

1. Log into Site Admin.

http://localhost:4502/siteadmin

2. Using the left navigation pane, go to Geometrixx Outdoors Site > English > Activities > Skiing.

ADOBE COPYRIGHT PROTECTED

1-12 | Chapter 01 AEM Sites: Developer Training Student Workbook

Note that the Edit dialog appears. You can update various properties of the image in the dialog. Click the check mark (or the X icon) to close the window.

6. Click the Toggle button in the top-left corner.

ADOBE COPYRIGHT PROTECTED

AEM Sites: Developer Training Student Workbook Chapter 01 | 1-

The Assets tab appears in the screen as shown below:

7. Click the Component tab.

The Component tab appears with available components.

ADOBE COPYRIGHT PROTECTED