Friday 12 December 2014

Winners of the AEM 2014 Community Code Contest

During the month of November 2014, the AEM community team held a code contest where AEM Developers submitted functioning AEM code. For more information about the contest see:
AEM Code/Developer Community Contest.

The AEM community team is excited to present you with the three winning submissions:

AEM Dashboard application

AEM platform users spend time clicking links and moving between tools, pages and environments. The AEM Dashboard application reduces this time to a minimum by letting users search from a common dashboard. Using this tool, an AEM user can use AEM platform tools, search pages in the Site Admin, and access JCR nodes quickly. 


Congratulations to Krystian Panek for this winning submission. 

AEM timeline video component

When an AEM video is playing, Digital Marketers may need to showcase content at specific point(s) during the video. For example, a marketing team would like to highlight a feature of a product along with their product video. The AEM Timeline video component solves this business use case by letting an AEM author set  the timeline point(s) of a video and specify the content to display.


Congratulations to Lokesh Bs for this winning submission.

AEM dynamic grid component

The AEM dynamic grid component lets AEM authors plot content into a grid. Then visitors to the web site can dynamically move around the content as they see fit. Users can  build draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.



Congratulations to Jaison Sunny  for this winning submission.

Each of these winners will win the prize specified in the contest rules. Look for AEM community articles in 2015 that relate to these submissions. 


Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Thursday 4 December 2014

Querying Adobe Experience Manager 6 data using the Sling getServiceResourceResolver method

You can create an Adobe Experience Manager (AEM) 6 application that queries data located in the AEM Java Content Repository (JCR). To query data, you use a javax.jcr.query.Query instance that belongs to the JCR Query API. This API supports both searching and querying operations. For example, assume that your AEM application tracks your organization’s customers. You can query the JCR to obtain a customer result set in which a digital marketer is interested.

As of AEM 6, you get a session instance (required to work with the JCR API) by using a Sling method named getServiceResourceResolver(). This new method replaces the use of the following API code:

 ResourceResolver resourceResolver = resolverFactory.getAdministrativeResourceResolver(null);
  session = resourceResolver.adaptTo(Session.class);

 The following code shows use of the more secure getServiceResourceResolver API call.

Map<String, Object> param = new HashMap<String, Object>();
param.put(ResourceResolverFactory.SUBSERVICE, "datawrite");
ResourceResolver resolver = null;

try {
           
    //Invoke the adaptTo method to create a Session used to create a QueryManager
resolver = resolverFactory.getServiceResourceResolver(param);
    session = resolver.adaptTo(Session.class);

This code uses a specific AEM account with JCR read and write privileges to access the AEM 6 JCR.

Note: As of AEM 6, the getAdministrativeResourceResolver method is deprecated.

This article creates the following AEM Query application.



To watch the video, click: 




Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel



Wednesday 26 November 2014

Creating an Adobe Experience Manager Touch UI Tree component

You can create an Adobe Experience Manager (AEM) component that displays data within a tree structure. For example, the component can read the AEM JCR, query data, and then display the results in a tree structure. The following illustration shows an AEM component displaying data.


To read this development article, see  http://helpx.adobe.com/experience-manager/using/creating-touchui-tree.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Tuesday 11 November 2014

Creating Enterprise Mobile Applications for Adobe Experience Manager 6

You can develop an Enterprise PhoneGap mobile application for Adobe Experience Manager (AEM) 6. By creating a mobile AEM application, you can create content-rich cross-platform mobile applications that interact with device features:


  • Use the AEM authoring environment to create and manage rich content for your applications.
  • Use the PhoneGap (Cordova) APIs to create components with device-native capabilities, exposed through the PhoneGap javascript bridge.
  • Build and manage mobile content into pre-existing native applications through Cordova WebViews integration with Adobe Experience Manager.

The following illustration shows the mobile AEM application created in this development article.


To read this community developer article, click http://helpx.adobe.com/experience-manager/using/creating-mobile-aem.html

Ask the AEM Community Experts

On Tues Nov 25, join the AEM community team for a session on how to build AEM Mobile applications. Adobe's Bruce Lefebvre and Scott Macdonald will conduct the session. If you are interested in mobile development with AEM 6, then do not miss this session. 

Here is the link to AEM ASK the Experts on this subject:


https://communities.adobe.com/content/dam/cush/aem_technologistsdevelopersarchitects/AEM-Ask-the-Expert-November.mp4.form.html/content/cush/en/communities/aem_technologistsdevelopersarchitects/resources/internal-video-detail


Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Monday 3 November 2014

Creating Logo Components for Adobe Experience Manager

You can create an Adobe Experience Manager (AEM) Logo component that displays your company's logo in an AEM web site. A logo component can also provide a link to the home page of your AEM web site. A logo component also contains a design-mode dialog so that property values are stored in the site design (/etc/designs/mywebsite):
  • The property values apply to all instances of the component that are added to pages that use the design.
  • The properties can be configured using any instance of the component that is on a page that uses the design.
  • Your design-mode dialog contains properties for setting the image and the link path. The logo component will be placed on the upper left side of all pages in the website.
A logo component lets an author select a logo during design time, as shown in the following illustration. 

When the author selects the image, it is displayed within the AEM web page, as shown in the following illustration. 

To read this development article, click http://helpx.adobe.com/experience-manager/using/creating-logo.html



Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Thursday 30 October 2014

AEM Code/Developer Community Contest




During the month of November 2014, the AEM community team is running a special contest open to AEM developers. Have you written an AEM application, a custom login module, Sightly component, an xtype, Touch UI component, an OSGi bundle, or any other type of AEM content that you want to share with the AEM community and compete in the contest? If so, consider entering the AEM code community contest. 

To enter the contest, send the AEM community manager, Scott Macdonald, an email at scottm@adobe.com to let him know that you are entering the contest. In the subject line, enter AEM Community Code Contest. Describe the AEM application/code (considered the entry) that you are going to submit.

Be creative and show us and the AEM community how you use AEM. We are looking forward to seeing your submissions.

To see the winners of this content - see: http://scottsdigitalcommunity.blogspot.ca/2014/12/winners-of-aem-2014-community-code.html

Official Rules


Participation constitutes entrant’s full and unconditional agreement to and acceptance of these Official Rules. The ADOBE EXPERIENCE MANAGER CODE COMMUNITY CONTEST
starts at 12 a.m. PST on NOV 1, 2014 and ends at 11:59 p.m. PST on NOV 30, 2014. 

(1) Eligibility:  The AEM Community Code Contest (now referred to as the Contest) is open to AEM community members from the United States, India, Canada, Australia, and European Union countries whom are at least eighteen (18) years of age (or the age of majority in his/her jurisdiction).

(2) How To Enter; Entry Limits:
To enter the contest, send the AEM community manager, Scott Macdonald, an email at scottm@adobe.com to let him know that you are entering the contest. In the subject line, enter AEM Community Code Contest. Describe the AEM application/code (considered the entry) that you are going to submit. You are free to submit screen shots and as much details as you feel is necessary. You can then submit the final AEM code by Nov 30, 2014. To submit AEM code, package up your AEM application in a package and email the package. In the email, describe your application and how it works. To be considered a wining submission, the code must be functional and work within AEM 5.6, 5.6.1, or 6.0. Code that works with previous AEM versions is not considered valid for the purposes of this Contest. This Contest is not open to Adobe employees. 

Limit on Entries:  You may only submit one submission. Multiple submissions are not allowed. 

(3) Prize:  Three (3) total prize will be awarded in this Contest as follows:
Prize:  Each winner will each receive one (1) Amazon Gift Card worth $100 USD each.
Odds of winning a prize in this contest will depend on the total number of eligible entries received.
All prize entries, including functioning AEM code is at the community members’ sole discretion. All prizes are awarded “as is” with no warranty or guarantee, either express or implied. The prizes are delivered via email. Winners are responsible for all applicable federal, state, territorial, provincial, municipal and local taxes, any costs associated with currency exchange, or any other costs and expenses associated with prize receipt, acceptance and/or use not specified herein as being provided. 

(4) Selection of Winner:
Early December 2014, three (3) potential winners will be selected by a committee of Adobe AEM employees. Potential winners will be notified by a direct message from Adobe through his/her email account.

  (5)  Entrants’ and Winners’ Agreement to these Official Rules and the Decisions of Sponsor: Participation in the Contest and/or receipt of any prize constitute each Entrant’s and winner’s full and unconditional agreement to and acceptance of these Official Rules, Sponsor’s online Terms of Use and Privacy Policy (available by region and incorporated herein by reference), and Sponsor’s decisions, which are final and binding in all matters related to the Contest. Sponsor will not enter into any correspondence. Winning a prize is contingent upon Entrant(s) fulfilling all applicable requirements as set forth herein.

 (6)  General Conditions; Sponsor’s Right to Cancel, Terminate or Modify the Contest, Disqualify Entrants or Eliminate or Void Entries: Proof of submission of an Entry is not proof of delivery or receipt of such Entry by Sponsor. Entries generated by script, macro or other automated means, or otherwise intended to subvert or circumvent the entry process or any stated entry limits are void. Use of a false email account will disqualify an Entry. In the event of a dispute as to any Entry, or the identity of a Participant, the Entry at issue will be declared to be made by the authorized account holder and natural person assigned by an Internet access provider to the email addressed associated with the Entry and he/she must comply with these Official Rules. Participants may be required to show proof of being the authorized account holder. Sponsor has the right, in its sole discretion, to reject or void any Entry, and/or to disqualify any Entrant who (whether in fact or by attempt) subverts, circumvents, or tampers with the entry process or the lawful operation of the Contest, or who it finds to be acting in an unsportsmanlike or disruptive manner or in a manner otherwise in violation of these Official Rules.

 (7) Release of Claims; Limitations of Liability; Warranty and Indemnity: Adobe does not guarantee that only by submitting code you will win the Contest. Adobe is not in any way responsible or liable for: (i) any loss (including loss of opportunity), injury, damage (including, but not limited to, direct, indirect or consequential loss), cost, expense, or claim arising from or in relation to the Contest, participation in the Contest or any Contest -related activity, or (ii) the authorized or unauthorized or fraudulent actions of Participants or other third parties, or (iii) events requiring a cancellation or postponement of the Contest, or (iv) for Entries that are lost, late, intercepted, incomplete, incorrect, delayed, illegible, garbled, damaged, misdirected or not otherwise received by Sponsor, or (v) for difficulties or impediments of any kind, whether human, electrical or technical in nature, relating to or in connection with the Contest, its administration, the processing of Entries or the announcement of prizes or winners.
Participants assume sole liability and accept all risk of loss for injuries, including personal injuries and/or damage to property, caused or claimed to be caused by participating in the Contest, or the acceptance, shipping and handling, receipt, possession, loss, use or misuse of any prize. By participating in the Contest, each Participant agrees to the maximum extent allowable under applicable law, to indemnify and keep indemnified, to defend, release and hold the Released Parties at all times harmless from and against any liability, personal injury, death, damages, losses, claims, demands, causes of action, suits or proceedings, costs and expenses (including reasonable attorney’s fees) arising from, accruing out of, or in any way connected with his/her participation in the Contest, or for the shipping and handling, receipt, possession, loss, use or misuse of any prize awarded.

(8) Governing Law; Venue; Disputes: All issues and questions concerning the construction, validity, interpretation, and enforceability of these Official Rules, or the rights and obligations of Sponsor and Participants hereunder, shall be governed by, and construed in accordance with, the laws of the state of California, United States of America, without giving effect to any choice of law or conflict of law rules or provisions (whether of the State of California or any other jurisdiction) that would cause the application of laws of any jurisdiction other than the State of California, and all claims must be resolved in the appropriate State Court located in Santa Clara County, California.

(9) Personal Data: AEM code and other IP data collected from Participants may be used in public-facing Adobe AEM content including: Adobe AEM developer articles, Knowledge base articles, or videos. The community whom contributed the code featured in the article will have their name appear in the article. 
By entering, each Participant consents to the collection, use and disclosure of his/her personal information as described herein. Nothing in these Official Rules shall be deemed to restrict or exclude any Participant’s statutory consumer rights pertaining to personal data. Except as otherwise stated in these Official Rules or on the Site, personal information collected by Sponsor from Participants online is subject to Sponsor’s online Privacy Policy at http://www.adobe.com/privacy/policy.html.

 (10) Winners’ List:  Following conclusion of the Contest, and after three winners have been determined and verified, a winners’ list will be available at http://help-forums.adobe.com/content/adobeforums/en/community/top-contributors.html.

See the PDF version of these rules by clicking here: http://helpx.adobe.com/content/dam/help/attachments/contest.pdf.


© Adobe Systems Incorporated. All Rights Reserved. All trademarks are the property of their respective owners. 

Monday 20 October 2014

Creating Adobe Experience Manager Touch UI components that consume web services

You can create an Adobe Experience Manager (AEM) 6 Touch component that displays data obtained from a third-party web service. For example, assume that you use AEM to create a web site for a government department that tracks weather information. In this situation, you can create an AEM Touch UI component that retrieves data from a third-party web service and displays the data in an AEM web page.

The following illustration shows AEM retrieving data from a third-party web service.



You can develop an AEM Touch UI component that can be dragged from the AEM 6 side rail and dropped onto an AEM web page.




The component displays weather information obtained from a third party WSDL. The Touch UI component invokes an OSGi bundle that contains Java proxy classes that are created by using Apache CFX. The following illustration shows the AEM Touch UI component displaying information obtained from a third-party web service. Notice that the USA ZIP code is entered into the Touch UI dialog.





Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Wednesday 15 October 2014

Using Granite DataSource objects to populate AEM Touch UI objects

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that contains drop-down controls that can be used within the AEM Touch UI view. A drop-down control can be populated by using a com.adobe.granite.ui.components.ds.DataSourceobject. For information, see DataSource
Once you create a DataSource object, its data can be used to dynamically populate a drop-down control, as shown in this illustration. 


This article modifies the Hero Touch UI component that was created by following this AEM community article:
Before you read this article, its is strongly recommended that you create the Hero Touch UI component by following the article listed here. 
To read this article, click http://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Wednesday 8 October 2014

Creating Replication Event Handlers for Adobe Experience Manager

You can develop a custom replication event handler for Adobe Experience Manager (AEM) that is invoked when AEM content is activated. For example, a custom replication event handler can track details when an AEM web page is activated, as shown in this illustration.



To create an AEM replication event handler, you create an OSGi bundle that contains a class that implements org.osgi.service.event.EventHandler. For information, see EventHandler.

To read this development article, click http://helpx.adobe.com/experience-manager/using/replication_events.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Wednesday 24 September 2014

Creating your first Adobe Experience Manager HTML Template Language component

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use HTL to develop the AEM component. HTL is the new AEM 6 template language that can be used to replace the use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. The HTL component developed in this development article is located on the AEM Touch UI side rail. You can drag the component from the side rail onto an AEM page, as shown in this illustration.




This development walks you through how to build an AEM Touch UI component using HTL. To read this development article, click https://helpx.adobe.com/experience-manager/using/creating-htl-component.html.

.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Friday 19 September 2014

Downloading Adobe Experience Manager DAM Assets using Sling Servlets and the Query Builder API

You can create an AEM Sling Servlet that uses the AEM Query Builder API to search the AEM Digital Asset Manager (DAM) and return a collection of assets within a ZIP file. The client web browser downloads the ZIP file that contains the DAM assets.

You can create a Sling Servlet that performs these tasks:

  • Uses the QueryBuilder API to search a specific DAM folder
  • Retrieves assets (for example, PNG files)
  • Places the assets in a ZIP file
  • Returns the ZIP file  

The following illustration shows the use case described in this development article.


To read this development article, click:  http://helpx.adobe.com/experience-manager/using/downloading-dam-assets.html.


Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Thursday 4 September 2014

Using custom xtypes in Adobe Experience Manager 6 Touch UI

You can configure Adobe Experience Manager (AEM) 6 so that a custom xtype (that may be developed in an earlier version of AEM) works in the AEM 6 Touch UI. A custom xtype is an ExtJS script that uses the AEM widget API. By default, an AEM component that uses  a custom xtype works in AEM classic view. However, by default, it will not work in AEM Touch UI. You have to further configure AEM 6 to make a custom xtype work in AEM 6 Touch UI, as shown in this illustration.


This is an illustration of a custom xtype working in AEM 6 Touch UI. This development article walks you through how to make a custom xtype work in AEM 6 Touch UI. To read it, click http://helpx.adobe.com/experience-manager/using/creating-touchui-xtypes.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Thursday 21 August 2014

Creating your first Adobe Experience Manager Touch UI component

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI environment. An AEM Touch UI component is located on the side rail. You can drag the component from the side rail onto an AEM page, as shown in this illustration.



NOTE: In the Touch UI environment, components are located on the side rail. In the Classic UI environment, components are located in the AEM Sidekick.

Once you drag the component onto the AEM page, you can access its Touch UI dialog to enter component values. For example, you can enter text that is displayed by the component. 



After you enter the component's values, you click the checkmark icon and the values are entered onto the AEM page.




This development article walks you though how to create your first AEM Touch UI component that you can drag from the side rail onto an AEM page in the Touch UI environment. To read this development article, click http://helpx.adobe.com/experience-manager/using/creating-touchui-component.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel