How to Implement a Responsive Layout in AEM part 2

05287_How-To-Implement-A-Responsive-Layout-In-AEM-Part-2

The components and the page template referred to in this section come with the Prototype Responsive Page Layout package versions 1.4 and later. The latest version of this package can be found here along with other related packages. The previous article, How to Implement a Responsive Layout in AEM part 1, covered the details of the Layouting mode, how to install one of these packages, and the basics of how this system is used. This article will cover the additional components and templates that come with the packages. When using this layouting system, the information provided in this article will enhance your experience as well as increase the potential of the webpages that you design.

The Responsive Column Controller
The default page template that comes with the package(s) contains a single responsive grid that spans all twelve columns. This may be adequate in some situations, however, more columns are typically desired. These are the cases when, generally speaking, this component will be most useful. It provides numerous column options. It will create one to six columns, with multiple options for two to three columns including symmetrical and asymmetrical widths. This simple column controller will define a single row of the layout. Additional rows are easily created by adding additional responsive column controller components. These responsive column controllers are also nestable, greatly increasing their ability to be customized for any need.

As of package version 1.4 and later, the responsive column controller also comes in a Sightly (now called HTL or HTML Template Language) implemented version. It is functionally and visually the same as the original implementation.

As can be seen in the image below, when a new column controller is first created, a box appears stating that it is a column control component that needs to be configured. This placeholder box will automatically disappear from the page in Preview mode, when WCM mode is set to disabled, or when on a published page. This prevents the end user from seeing this placeholder. However, for these components to transition from being rendered to not being rendered or from a non-rendered state to a rendered one, the page must be refreshed once the mode is changed. A simple fix for this can be found in the /apps/aem-prototypes/optionals/ folder. This is accomplished by replacing the file /apps/aem-prototypes/optionals/PreviewLayer.js with the file /libs/cq/gui/components/authoring/clientlibs/editor/js/layers/PreviewLayer.js. Adobe Experience Manager will now refresh whenever the mode is changed to or from Preview mode. Additional information about the optionals folder and its contents will be covered later in the next article.

Upon selecting the component in Edit mode and clicking on the edit/wrench button, the edit dialog box will appear as seen below (a similar dialog is available in the Classic UI.) There are twelve different column options to choose from. A developer could add additional options if desired without too much effort.

Screen Shot 2016-02-17 at 2.12.24 PM

Although the columns can be changed after content is added, the column controller does not transfer any components from one column option to another. As a best practice, all content in a column controller should be deleted before selecting a new column option. This content can also be deleted from CRXDE Lite or by selecting the original column option again. This is done to avoid loading data and content that will never be displayed, especially if the content takes more than a negligible amount of time to load.

At times you may want to know what is contained within your column controller. There are two ways you can do this. The first is to inspect the content tree of the column controller in the content folder of CRXDE Lite; this option provides explicit detail of the content that is contained within each site and page. The latter is more simple and visual: under the “Advanced Options” section of the column controller’s edit dialog box is an option to show a border around the column controller. As shown in the image below, this option will draw a simple border around the outside of the column controller, thus everything inside this red rectangle is also inside the column controller. Also found under the “Advanced Options” section is an option to show a border around each column. This border distinguishes itself from the other border just mentioned by being blue and dashed. These visual representations can be used individually or together. These options are intended for demonstrational and informative purposes and are not intended to be used as is for published versions of webpages, though they could be made to be, or they could be removed entirely for consumer (non-prototype) versions. Removing these options would entail deleting their respective nodes from the dialog boxes and removing the related code from the column.css file as well as from the column definition files. The last of the “Advanced Options” is an option to show a border around the content of the column controller. This option will draw a green dotted border around all visible child components within the column controller. This option is most useful when the user desires to visualize how all the elements of the column controller are laid out (perhaps checking the size of a particular component) or for debugging purposes.

border_example

The Ghost Component
The ghost component exists as a way to insert blank spaces into your layout design. This can allow you to right justify, center, or offset content in a column, add extra spacing to either side of your content or even add space between the rows of your content. Simply put, the ghost component is an invisible content block. Its width is determined by the Layouting mode and its height is configurable via a dialog box in the Edit mode of AEM. The height of each ghost is limited to 10,000 pixels, although this can be changed by editing its maximum value in CRXDE Lite. This component has an orange border and displays its current height setting when editing, layouting, designing, etc. However, this component is not visible in Preview mode or when WCM mode is disabled, so will it not be visible when published. This is done in order to make it easy to use and simple to visualize how the component is interacting with the content on the page. This component has the same inherent rendering problem as the column controller’s placeholder. For this component to transition from visible to invisible or from invisible to visible, the page must be refreshed once the mode is changed. A simple fix for this can be found in the /apps/aem-prototypes/optionals/ folder. This is accomplished by overlaying the file /apps/aem-prototypes/optionals/PreviewLayer.js with the file /libs/cq/gui/components/authoring/clientlibs/editor/js/layers/PreviewLayer.js. Adobe Experience Manager will now refresh whenever the mode is changed. Additional information about the optionals folder and its content will be covered later in the next article.

ghosts2

As of package version 1.3 and later, the ghost component also comes in a Sightly (now called HTL or HTML Template Language) implemented version. It is functionally and visually the same as the original implementation.

Next time in this series we will learn how to create various page templates for use with the responsive grid component. It will cover some very useful tips and tricks that will come in handy when developing for the responsive grid and Layouting mode.

Part 1, Part 2, Part 3, Part 4, Part 5