Reflection on AEM 5.6 release and preview of mid-year Release by Cedric Huesler

Cedric Huesler (the product manager of AEM/CQ) will give a talk at the OC CQ User Group meeting (May-22, 6pm at the offices of Capital Group)

http://www.meetup.com/OC-CQ-Sling-JCR-User-Group/events/112309702/

Would be great if you can make it!

Webinar: Increase Online Sales with Persuasive Content through Magnolia CMS’ Shop Module

I will be moderating a Magnolia CMS webinar for the Open Source Magnolia Shop Module developed by fastforward and maintained by fastforward and magnolia. You can see a fully JCR based shop solution in action – join us for this great event!

Thursday, April 25, 2013
5:00 PM – 6:00 PM CET (11:00 to Noon, EDT)

register here >

---

Creating unique online storefronts that are secure, integrated with back-office inventory and catalog management and also easy for customers to use, is a challenge for any e-commerce integrator. The Magnolia CMS Shop module is a toolkit that adds e-commerce functionality to Magnolia CMS and makes it possible to enhance shop pages with compelling content that attracts new customers and increases sales.

Some of the key benefits of this integration include:

• Products, product categories, prices and currencies are managed in Magnolia CMS’ AdminCentral.
• All data is stored in the Data module except shopping carts in their own workspace.
• Developers can get started quickly by using the default website structure containing shop, product detail and shopping cart pages.

On 25 April 2013, Ulrich Scheidegger, co-founder and managing director of fastforward websolutions and one of the developers of the Magnolia CMS Shop module, will present a webinar on creating Magnolia CMS-powered e-commerce websites without needing to add or run other shop software. This webinar will demonstrate how to build unique, branded online storefronts that are tightly integrated with Magnolia CMS’ intuitive editing and administration tools.

The webinar will be moderated by Ruben Reusser, CTO at headwire and expert in KonaKart e-commerce integrations. This webinar is extremely useful for Java and CMS developers of all levels, as well as IT professionals and system integrators interested in e-commerce solutions.

Device Detection Problems in AEM5.6 on Windows 8

When exploring AEMs default website geometrixx or geometrixx-media with a Windows8 device that has a touch screen (some of the newer laptops on the market for example)  you are either forwarded to a .tablet.html page (geometrixx) or the mobile site (geometrixx-outdoors). This seems to be a problem with the device detection that is part of AEM5.6. A tool called BrowserMap is used to perform a client slide test to determine your type of device and then you are redirected based on your device and a set of settings on the site.

The documentation from Adobe on how to set up your site for device detection can be found here

To see what AEM thinks your device is, you can go to http://localhost:4502/etc/mobile/browsermap/detect.html - with a Windows 8 Laptop with touch screen and Chrome you will get something like this as the output:

As you can see, the detection thinks the browser is running on a tablet.

Looking at the /content/geometrixx/jcr:content/cq:siteVariant node and the /content/geometrixx_mobile/jcr:content/cq:siteVariant node they both have a cq:variantFamily property with the value ‘geometrixx’. For the main website the media property is set to ‘browser, oldBrowser, highResolutionDisplay’, for the _mobile site to ‘smartphone, tablet, highResolutionDisplay’ – for whatever reason, this is not a String Array property but just a comma separated list and the node type is nt:unstructured – cq:siteVariant is the actual name that the browser detection is looking for.

What’s interesting to me is that on geometrixx, a selector called tablet is added and the browser stays on the same page while the setup in geometrixx-outdoors seems to be the same but there the browser is redirected to the mobile version of the site.

You can force AEM to use a specific device and bypass the BrowserMap detection by adding the parameter device=[device group name] to the URL. The supported device groups by default are:

• smartphone
• tablet
• highResolutionDisplay
• browser
• oldBrowser (the latest version of Firefox is considered an oldBrowser)

The BrowserMap library is available on github at https://github.com/raducotescu/browsermap. The testpage that’s available within AEM is also available online at http://raducotescu.github.com/browsermap/index.html – the library in AEM seems to be a bit more up to date since it can detect IE10 on Windows 8 (although it thinks that it does not have touch capabilities) – the one on github just reports it does not know the browser.

On the bright side, geometrixx-media does not need the browser detection since it’s a responsive design based website. I highly recommend going that route.

Setting up a Clean Instance of CQ5.6 without the Samples

While installing CQ5.6 I found a log entry that sounded quite interesting:

SlingSettingsServiceImpl Active run modes: [ author, crx2, crx3mongo, samplecontent ]

apparently (not sure if this is new in CQ5.6) you can pass in a runmode during installation to trigger different features of CQ to be installed or not.

Running CQ the first time with these arguments will not install the geometrixx samples at all and to me seems to be the better approach than installing CQ first and then uninstalling the geometrixx samples as suggested in various places and the security guide for CQ.

java -jar cq.5.6.jar -r nosamplecontent

After this installation, your copy of CQ (AEM) will be almost clean of any geometrixx atrifacts (there are however some geometrixx-media users that are left over, they are probably not contained in the example geometrixx code.

Other Available Options

It seems the following options can be set for installation purposes (one from each row, if non is selected the first one is taken):

• author | publish
• crx2 | crx3
• crx3mongo | crx3h2
• samplecontent | nosamplecontent

I gave the crx3 | crx3mongo runmodes a try but did not really get a working version of AEM out of that combination – I am sure there will be some sort of documentation from Adobe about those features soon

Watch out for Pitfalls – Things to navigate around if you do a Demo of Adobe CQ5.6

As mentioned in my last post Adobe cq5.6 (or AEM 5.6) was recently released. It is a very nice and feature rich product but while browsing the documentation and looking at the new examples, I discovered a couple of pitfalls on the way, mostly in the newly added features. I figured I’ll start recording them here for others to see as well, comment, suggest workarounds, etc.

Note: I have been using a windows 8 machine with a touchscreen while exploring AEM5.6

Geometrixx-Media

The geometrixx-media site is a great example of a responsive website that works well on your phone, tabled or desktop. The preview mode allows you to directly switch between different devices for a quick review of your site.

If you are demoing the page, I’d stay away from the following things (or remember the workarounds):

• Don’t try to search on the geometrixx-media website. The search uses a regular jcr search within the geometrixx-media/en site, however, since the articles are all stored somewhere else (in the DAM through the new manuscript feature) the search does not return a result for articles. As an example:
  • Search for ‘blues festival’ and you’ll get a ‘your search did not return any documents’ response, however, ‘blues festival’ is in the first sentence on ‘/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for.html’
    In order to fix this, you’ll need to switch the search component to search in ‘/content/dam/geometrixx-media/articles’ instead (of course, then it does not search the regular content anymore, so modifying the search to search multiple paths would probably be a good idea) and then you may want to alter the search results display to point to the pages that are using the article instead of just the article in the dam since that exposes a text only version of the article (note to self: since the manuscripts/articles are in the DAM and can be exposed as clear text there it may be a good idea to think about how to protect these articles)
• Don’t navigate away from the page you’re on if you are in preview mode. You will not be able to switch the device anymore and it will show up in the wrong device. There is a workaround for this by removing the cf# in the URL. Once you do that, browsing around and changing devices works like a charm. In case you forgot to remove the cf#, then just do a reload of the page to make everything work again.
• Don’t switch over to the ‘Nexus 7′ device – while not a big problem, the collapsed menu oddly is displayed outside of the ‘viewable’ area of the page and therefore doesn’t make for a good demo.
  
• The footer component does not work well – if you are looking at the site with a smaller window size or a small device, the pillars in the footer stack, however, since the main titles of the pillars are not linked anywhere the footer becomes unusable.

Windows 8 with a Touch Screen

I highly recommend avoiding the new touch UI with a windows 8 computer with a touch screen (that includes windows surface). Unfortunately the touch features do not work at all on these devices and even when using AEM5.6 with a mouse and a browser the new touch UI does not work well. CQ (AEM) can still be used with the classic UI – no problems there. The only thing that seems to be odd is if you are using chrome and are browsing the geometrixx website the selector .tablet is added to the URL. This is however only happening in chrome – IE and FF seem to be fine.

An easy way to get around this problem is to install virtual box and a linux operating system (for example Ubuntu) and then use firefox in that environment (or of course don’t use Windows 8 and a touch screen at all).

Is there More?

There are for sure other things one has to steer away from with the latest release, if you know of such a thing, it would be great to see some additional comments here in order for all of us to know what to avoid, how to get around an issue.

Adobe CQ5.6 First Impression

Adobe released it’s new version of the Communique suite (5.6) on Feb-8-2013. The release can be download from daycare or licensing.adobe.com for current customers. So what’s new in this release that will make you want to upgrade your project?

New in CQ5.6

1: It’s called AEM (Adobe Experience Manager) now

While I guess not that important, it’s going to be interesting if the name is going to stick – there were other occasions where Adobe tried to rename this product and at the end, we all keep calling it Adobe CQ (yes, we finally don’t call it Day CQ anymore).

2: Responsive Design Support

If you download the latest release and navigate to the geometrixx-media example webpage and switch over to preview mode, you’ll see a dropdown allowing you to easily and quickly change the device that you are using to view the site. Also, the geometrixx-media example is now a nice example of a responsive design website and a good starting point for your own projects since more and more people are going the route of designing tablet-first websites.

3: Adaptive Images Support

The inclusion (in the geometrixx-media code base) of an adaptive-image component is a great addition to the component libraries available from the get-go in CQ. The adaptive image component helps you minimize the size of a page if browsing with a smaller device (mobile phone) by downloading a version of the image that matches the screen size of the device instead of using the browser to scale the image. Also, those pesky retina displays will get a different version of the image served to them leaving  a better impression with your customer.

4: Launches

One of my favorite new features in CQ (sorry ADEP (oh now, it’s called AEM now)). You can now essentially branch your site structure and work on a future version of the site while still altering the current version of the site. The branch and the current version are kept in sync over the LiveCopy functionality. You can then launch your new content – the current copy of the content is updated at that time. There feature also makes use of the workflow package concept to allow you to publish all the pages you changed in one bulk transaction.

The sidekick allows you to switch between the current content or a branch and also has the ability to promote your branch.

Note: there are some issues with the out of the box components not working right in the branched mode. An example of this is if you go to the gemoetrixx example site and branch for example the ‘products’ section off you’ll see that the navigation is not working anymore. I heard some rumors that Adobe is addressing these issues.

5: Manuscripts/Articles

There is a new concept in 5.6 of content that does not live in the regular site hierarchy – you can author the manuscripts/articles with a wiki style editor and then include them anywhere on your site (great examples in the geometrixx-media site), select how many columns you want to use for the display of these articles and also add other content/images between every paragraph. It’s a great demonstration of authoring some sort of content outside of the regular site structure and reuse of that information in multiple places.

6: Publications

5.6 now allows you to create magazines and publish them through an Adobe service to your mobile or tablet devices and the App Store. Seems to be a great new feature and I’ll defiantly will spend more time on this one to learn how it actually works. It may be a nice feature to publish an internal or external magazine for a company.

7: New Code Editor in CRXDE|lite

CRXDE|lite got a new code editor – gone are the times of grayed out code, shadows, etc. Great to  see that this issue has been addressed.

Many more Features

The official release notes can be found here. It also includes a list of the new features:

http://dev.day.com/docs/en/cq/current/release_notes/overview.html

Adobe CQ Problem Clinic on November 7 2012

If you live in Orange County/Los Angeles or the San Diego area and work with Adobe CQ then bring your laptop, your project and your problems with Adobe CQ. We will have a session where you can present the problem you are having and we’ll discuss solutions for the problems and try to find a way to solve them to make your CQ implementations a success.

Adobe support personnel will be at the meetup to help us get through the issues.

We are meeting Wednesday November 7  from 6:30pm to 9pm at the Lake Forest/El Toro Public Library.

For more information about the meetup group and this event go to http://www.meetup.com/OC-CQ-Sling-JCR-User-Group/events/85466292/

Hope to see you there.

New VLT Tool Version for CQ

I logged into package share the other day and noticed the new vault tool version has been released. You can download it through package share at this link. A quick check of the documentation reveals the new sync feature has been included into this release. For the documentation of this addition check out how to use the vlttool – Sync.

Undo/Redo in Adobe CQ5.5 – What You Need to Know

CQ5.5 comes with a new undo/redo feature for page editing. You are now able to undo/redo any change that you made to a page. It’s a great new feature that however also comes with a bit of a learning curve if you want to use it correctly in your CQ project.

Any new component you write needs to be tested for undo/redo. Once tested and your satisfied it works correctly, you need to add your component to the whitelist of undo/redo components, otherwise a nasty popup will show up everytime somebody hits ctrl-z to undo any changes. To add your component to the whitelist, go to

http://localhost:4502/crx/de/index.jsp#/crx.default/jcr%3aroot/libs/wcm/core/config.author/com.day.cq.wcm.undo.UndoConfig

You’ll find a property cq.wcm.undo.whitelist, add your component to this list to make the message go away. Unfortunately, this is the only place to set this setting and may cause problems in the future when you upgrade CQ since everything in /libs may be overwritten by a hotfix.

Undo/Redo information for any text is stored in the browser either on the window or in a cookie, however, if you change an image, the information is stored in /var/undo. This only works if you have sufficient rights to store data in this location, by default, this is only granted to administrators, so regular users may not be able to undo/redo changes on images withing CQ. Also note, this may fill up the repository quickly since a copy of the image is stored in that location.

Undo/Redo can also be dangerous if multiple people work on the same page at any given time. There is no mechanism to make sure multiple users do not step on each other when making changes. Now with undo/redo, you can make large changes quickly and you may therefore alter a page in a way that you did not intend if there are other modifications from other users. You can turn undo/redo off altogether by setting the cq.wcm.undo.enabled property to false.

If you’re users don’t like the flashy style of CQ to show you what has been undone on a page, you can set the cq.wcm.undo.markermode property to select instead. This will just select the component that has been undone instead.

For more information about the undo/redo service please consult http://dev.day.com/docs/en/cq/current/administering/config_undo.html

Developing the style and templates/components in parallel for Adobe CQ5

In order to speed up development of a site within CQ5, it helps adopting the following process:

•  Devise templates and components for the site based on mockups
•  Implement a standard HTML for all templates and components
•  Develop the components necessary
•  Develop CSS/JS necessary to support the components

Using this approach, the front end team can develop the CSS/JS necessary for the site in parallel with the developers implementing the components and templates for CQ5. Instead of using a waterfall model where the front end team develops the basic HTML structure first and then provides the code to the CQ5 developers, this approach makes sure the CSS/JS works well within Adobe CQ.

To further minimize the risk of browser incompatibilities and to make sure the site will also look good on mobile devices from the start, it helps adopting a basic CSS/JS framework, commonly known as grid systems.

Some grid systems to consider are:

•  960gs (http://960.gs/)
•  Twitter bootstrap (http://twitter.github.com/bootstrap)

The grid systems have a well known html structure and features such as reflow that help on smaller screens. Developing your components with a grid system in mind will also make sure the developed components can be reused in the future with a different stylesheet and make your CQ5 projects faster to implement and easier to adopt to a new site style and new features provided by the grid system.

The Adobe CQ5.5 version uses 960gs for the default geometrixx site, however, choosing twitter bootstrap will provide you with more out of the box functionality commonly found on today’s website.

update: we released a bootstrap templating integration for Adobe CQ 5.5 today. See the following link for more information