www.tothenew.com

Multi Site Manager 2

(By Shivani Garg)

www.tothenew.com

1. Previous session queries2. Why Mobile Optimized Websites3. Creating a Mobile Site4. Why and How to make a device Group5. Create your own emulator6. Server Side Device Detection7. Wurfl database8. Device Group filter9. Custom Rollout Configuration for Mobile Optimised Websites

www.tothenew.com

❖ Why language Copy create Two options like:

Previous Session Queries

www.tothenew.com

<language> + (e.g. Russian+) Create copy of the page and all its children from that language. <language> (e.g. Russian) Create copy of the page but not its children from that language.

For more Info Go through with this link : Language copy in MSM

Previous Session Queries

www.tothenew.com

99% of smartphones users use their mobile browser at least once a day.

Of the world’s 4 billion mobile phones in use, 1.08 billion are smartphones.

Why Mobile Optimized Websites?

www.tothenew.com

www.tothenew.com

In terms of mobile web design, this meant that a full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system simpler (no Flash support, etc.).

1.Web Content:Best Served Selectively2.Responsive Design

Mobile Optimised Website (Graceful degradation vs Progressive Enhancement)

www.tothenew.com

To get the complete and perfect view of websites on emulators We need to add the mobile Tab in the page

properties.

Start Working with mobile website

www.tothenew.com

➢ How to get the option of Mobile tab in the dialog: While creating a base page in the project sling:resourceType wcm/mobile/components/page

Follow These Steps …

➢ We need to fetch the value of this property DeviceGroup deviceGroup = slingRequest.adaptTo(DeviceGroup.class); deviceGroup.drawHead(pageContext);

www.tothenew.com

Git repository for Mobile project

www.tothenew.com

Device Group

AEM allows authors to configure device groups,which are categories into mobile devices on the basis of functionality.The basic features used to define device groups are:

1. CSS Support2. Device Rotation Support3. Image Loading Support4. Java Script Support5. Minimum Screen Size6. User Agent

www.tothenew.com

How to make custom Device Group

www.tothenew.com

CQ Mobile Device Group Settings

www.tothenew.com

What is Emulator?

➢ Emulator is just like a replica of something can also be termed as blueprint.

➢ Here we use the emulators of our devices(mobile.tab,laptop,desktop etc ) ,they provide me complete look and feel of that device .

www.tothenew.com

To Create your own Emulator

To create your own emulator Follow this link :

How to make your custom emulator

You can see your emulator here:

www.tothenew.com

Server Side Device Detection

CQ Publish Instance

Http Request

www.tothenew.com

Wurfl Database

WURFL = Wireless Universal Resource FiLe

WURFL is a global database of all devices and the API to tap that information programmatically.

In AEM , Wurfl database is used for device detection on the server site.

You can see your wurfl database in AEM here: /libs/wcm/mobile/devicespecs/wurfl.xml

www.tothenew.com

Device Group Filter Working

Http Request (/content/geomatrix_mobile/en.html)

CQ Publish Instance

Wurfl Database Device Capabilities

Http Response(/content/geomatrix_mobile/en.touch.htm)

www.tothenew.com

Device Group Filter

Create a device group filter to define a set of device capability requirements. Create as many filters as you require to target the needed groups of device capabilities.

www.tothenew.com

Custom Rollout Configuration

In AEM if you want to create your own custom rollout configuration Follow these steps:

1.Go to /etc/msm/rolloutconfigsCreate a cq:page and below that create a node of type cq:LiveSyncAction.

2.After that create your sync actions to provide communication between live copy and language copy.

www.tothenew.com

Custom Rollout Configuration Code

public class ExampleLiveActionFactory implements LiveActionFactory<LiveAction> { @Property(value = "exampleLiveAction") static final String actionname = LiveActionFactory.LIVE_ACTION_NAME; public LiveAction createAction(Resource config) { ValueMap configs; if (config == null || config.adaptTo(ValueMap.class) == null) { configs = new ValueMapDecorator(Collections.<String, Object>emptyMap()); } else { configs = config.adaptTo(ValueMap.class); } return new ExampleLiveAction(actionname, configs); } public String createsAction() { return actionname; }

www.tothenew.com

private static class ExampleLiveAction implements LiveAction { private String name; private ValueMap configs; private static final Logger log = LoggerFactory.getLogger(ExampleLiveAction.class);

public ExampleLiveAction(String nm, ValueMap config) { name = nm; configs = config; }public void execute(Resource source, Resource target, LiveRelationship liverel, boolean autoSave, boolean isResetRollout) throws WCMException { // Write your code here}}

www.tothenew.com

www.tothenew.com

References

1. How to make Custom Group Filter

2. Creating Custom Emulator

3. Custom rollout configuration

4 MSM complete picture 5. Language Copy

www.tothenew.com