Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Questions about editing pages

Avatar

Level 3

Hi everyone,
 

I have some questions about editing pages as below.

Q1.  I can't add parallel component. The component block is too large,  I only can add one image.

[img]can'thttps://forums.adobe.com/api/core/v3/attachments/885757/data[/img]

Parallel component like this, I also want to put text beside images.

Q2.  Is the component size fixed? (That means I can't enlarge or make it smaller) 

Q3. When I use Text & Image component, I found the text editing function is limited. How can I change Text color,style or size...etc.?

Q4, How to create a new page with emulator? I've saw some post before, but I still can't find the answer.

When I create a normal page, I just choose"create Page", but no emulator function too add. (I only can find emulator pages in Geometrixx Media)

  

Thank you .

1 Accepted Solution

Avatar

Correct answer by
Administrator

For Q4, here is a good reference article to be consulted :- http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

// It talks about creating and using of Custom AEM Mobile Emulator

 

Official documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/mobile-web/emulators.html

//

Creating a Custom Mobile Emulator

To create a custom mobile emulator:

  1. Below /apps/myapp/components/emulators create the component myemulator (node type: cq:Component).
  2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
  3. Define a CSS client library with category cq.wcm.mobile.emulator for the emulator appearance: name = css, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
  4. If needed, define a JS client library, for example to define a specific plugin: name = js, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js 
  5. If the emulator supports specific functionalities defined by plugins (like touch scrolling), create a configuration node below the emulator: name = cq:emulatorConfig, node type = nt:unstructured and add the property that defines the plugin:
    - Name = canRotate, Type = Boolean, Value = true: to include the rotation functionality.
    - Name = touchScrolling, Type = Boolean, Value = true: to include the touch scrolling functionality.
    More functionalities can be added by defining your own plugins.

I hope this would also help you.

I would encourage you to create a separate questions for multiple questions post.

~kautuk



Kautuk Sahni

View solution in original post

5 Replies

Avatar

Level 10

For Q1 - if out of the box does not produce the results you want - you can either overlay the component or build a custom one that uses some sort of JS lib like JQuery to get the output that you want. 

Avatar

Administrator

For Q2, 

With every component we can associate the CSS. So we can definitely change the CSS property as per our convince.

See this community article to help you out on this:

Link:- http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

// [img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs4.jpg[/img]

Also you can change the CSS for Template as per your need/use-case.

Authoring way to add design/CSS to the template :- http://blogs.adobe.com/sunil/2015/04/29/aem-developers-apply-a-design-to-the-aem-sightly-template/

        Video :-  https://youtu.be/rv-E_WxzvVI

Reference forum post:

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

I hope this would help you.

~kautuk



Kautuk Sahni

Avatar

Level 3

Hi smacdonald2008 & kautuk,

Thanks for  your help.  I'll try it.
 

Does anyone know Q4 => How to create a new page with emulator?

Thank you.

 

Han

Avatar

Correct answer by
Administrator

For Q4, here is a good reference article to be consulted :- http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

// It talks about creating and using of Custom AEM Mobile Emulator

 

Official documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/mobile-web/emulators.html

//

Creating a Custom Mobile Emulator

To create a custom mobile emulator:

  1. Below /apps/myapp/components/emulators create the component myemulator (node type: cq:Component).
  2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
  3. Define a CSS client library with category cq.wcm.mobile.emulator for the emulator appearance: name = css, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
  4. If needed, define a JS client library, for example to define a specific plugin: name = js, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js 
  5. If the emulator supports specific functionalities defined by plugins (like touch scrolling), create a configuration node below the emulator: name = cq:emulatorConfig, node type = nt:unstructured and add the property that defines the plugin:
    - Name = canRotate, Type = Boolean, Value = true: to include the rotation functionality.
    - Name = touchScrolling, Type = Boolean, Value = true: to include the touch scrolling functionality.
    More functionalities can be added by defining your own plugins.

I hope this would also help you.

I would encourage you to create a separate questions for multiple questions post.

~kautuk



Kautuk Sahni

Avatar

Level 3

Hi kautuk,

Thank you so much, It's helpful.

For advanced questions, I'll create new post for that.

 

Thank you.