I posted AEM related question in Adobe forums but I have still not able to resolve the configuration problems.
One is that I would like to show ruler and responsive emulator menu at the top of editor.html
Second is that I would like to components to have customizable with. For example, if you drop text component on a page at editor.html, you can adjust the width of the component with drugging blue dot on the side.
The original question in Adobe forum has my current configuration which is not quite working with screenshot and details.
Original question: https://forums.adobe.com/thread/2376694
Would anybody help me resolving the issue that I have?
Best Answer
There's several things you need to do to enable the ruler and layouting mode in AEM.
Ruler (Emulator)
- make sure
/libs/wcm/mobile/components/simulator/simulator.jspis 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:deviceGroupproperty 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:responsivenode 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/responsivenode 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