Layout mode and responsive grid setting

[ryuatnorcal]

Hello AEM community!

I have a problem setting up the responsive grid in my AEM app.
I followed the Adobe's tutorial site ( Configuring Layout Container and Layouting Mode - docs.adobe.com ) and I am using 6.1 AEM.

After setting up the node as directed in the tutorial, I could not turn on Layout mode to show the ruler and grids.

Following are my set ups.

In my template node, we have following properties.

The template node has following nodes.

I have only one break point as shown, however, even I made multiple break points, it does not show layout mode at editor.html

In the Components node, I have the following structure.

The contentpage components is my page component that uses template shown above.

In the contentpage node, I have the following properties

AS you can see from the contentpage structure, I have cq:infoProviders which has a responsive node.

For cq:inforProviders node, I have the following property

For responsive node, I have the following properties

As the tutorial mentioned, I use responsivegrid instead of parsys to make a component drop section

Let's say I have a textField component to use in the page.

The textField's properties are following

And textField.html is following

In the text.js I have

I want to have my editor.html like tutorial. I need the yellowed area.

However, my editor.html has Edit, Scaffold, Developer, and Design mode. Not included the Layout mode.

I also want to my editor.html to have responsive component.

However, I have only fixed width component

I think I missed some configuration or did wrong way to set up node.

If you know about layout mode setting, please help me out here

Thank you for your help in advance

Ryu

[smacdonald2008]

In 6.1 - i am checking to see if i have same as you.

I know in 6.3 - there has been major improvements for Layout - as discussed in this article:

Creating an Adobe Experience Manager project using Lazybones

I will post back my findings.

[smacdonald2008]

When using AEM 6.1 - for Layout - look here:

http://localhost:4502/editor.html/content/geometrixx-media/en/entertainment.html

This site has been configured to use this. Look at the configuration for this site.

[ryuatnorcal]

Thank you for the comment smacdonald2008 !

Let me see if the page helps my page.

I will follow up how it goes later

[ryuatnorcal]

I am looking at the geometrixx page to find out the configuration of layout mode but I didn't quite get how the layout mode working in the geometrixx page.
I feel like the page uses a different structure than Adobe's tutorial. Since the page depends on multiple components, I am about lost trucking why and how the layout mode has created on the site.

One thing I noticed is that ruler I mentioned at the question was actually comes from the emulator.

I have done OSGi configuration as I read through the tutorial.

under my config folder, I have an node com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-<project_name>

and the node has following properties. 

Another thing, I have noticed is that the geometrixx site does not allow me to change the size of the component on editor.html.

Is there any simple example project I can refer to?

[smacdonald2008]

To turn on the Mobile emulator - try this AEM 6.3 article on 6.1. It may work as it does not use tools - only nodes and CRXDE lite. It uses HTL too that is supported in AEM 6.1.

Adobe Experience Manager Help | Creating your First Adobe Experience Manager 6.3 website

I will try this too on AEM 6.1.

[smacdonald2008]

I built the site - but it does not work the same way in AEM 6.1 as it does in AEM 6.3. For 6.1 - see this community article - it may help:

http://aempodcast.com/2016/front-end-engineering/implement-responsive-layout-aem-part-1/#.WaXsISiGOF...

[ryuatnorcal]

sound good let me try that

[smacdonald2008]

For AEM 6.1 - i created the Toy Store site - following the article.  Did this and then i was able to view the emulator...

I added the config node (named com.day.cq.wcm.emulator.EmulatorProvider-summit) - shown here:

Then i added the prop here as discussed in the artilce - /content/summit-toys/jcr:content

This did produce the emulator - see:

[ryuatnorcal]

Thank you for sharing the tutorial

I could successfully show layout mode but I still have problem to make component like following.

I followed the second tutorial and it supposed to create a component that can be customizable width.

However, it ended up creating col components to let author choose how they want to organize the column.

I kind of start doubting if it does not come with 6.1 AEM ...
Do you think if I update to 6.2 then making these components easier? 

[mickjleroy]

As I mentioned in your SO post...

Ruler (Emulator)

• make sure /libs/wcm/mobile/components/simulator/simulator.jsp is in the head of your page
• register the page component with a MobileEmulatorProvider. For example:

        com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-alias.xml:
        mobile.resourceTypes=[geometrixx-media/components/page]

• add the cq:deviceGroup property to the root content node (i.e. /etc/mobile/groups/responsive)

Note: the ruler will not show up unless the page is treated as “responsive”. The “emulators” property must not be blank at http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=<path to page>

Layouting Mode

• add the cq:responsive node to the root content node (just grab it from geometrixx-media). For example:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
  <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
  <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

• if not inheriting from the foundation page component, add /libs/foundation/components/page/cq:infoProviders/responsive node to page component
• change the "par" parsys to be of type wcm/foundation/components/responsivegrid
• include the responsive css client lib in the project (see below)

More info: https://docs.adobe.com/docs/en/aem/6-2/author/page-authoring/responsive-layout.html

[Anurag_Kumar · Accepted solution]

For Showing the rulers (Emulators)

1. Delete sling:resourceType property from your template (/apps/<project-name>/templates/contentpage)

2. Add one more property to your page (/content/<project-name>/mypage)

Property Name= cq:deviceGroups

Type= String[]

Value= /etc/mobile/groups/responsive

This should show the Emulators.

Coming to the actual magic of responsiveness.

1. After emulators are enabled, go to a mobile emulator and shorten the width to say 10 columns. On desktop keep some other width, say 5 columns.

2. Go to CRXDE Lite and check inside /content/<project-name>/mypage/jcr:content/<par-name>/<component-name>. You will see a node named cq:responsive. This will be containing two children "default" and "small" with width property of 5 and 10 respectively.

Actual change in width will happen when you include the grid definition styles.The base grid definition can be found under:

/etc/clientlibs/wcm/foundation/grid/grid_base.less

Please refer:

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-l... the Responsive CSS

Thanks,

Anurag