Make your Platform truly responsive with this great add-on

Responsive_1

Nowadays, users expect the full web experience on their desktops and phones as well as their tablets.

There are mobile versions of eXo for accessing your site. The design and layout are specifically geared for the small screens of devices such as iPhones and Android smartphones.

However, the mobile version is not the only solution.

Responsive web design is a complementary approach for supporting most devices and screen resolutions. The following add-on is a first step in optimizing the eXo Platform UI and layout depending on the media and the available screen size: eXo Responsive Add-on.

01-mobile-responsive

Prerequisites

The add-on requires Platform 4.0.x or 4.1.x.

Installation

The Responsive add-on is available from the eXo Add-ons Repository. You can install it using the eXo Add-ons Manager with one single command line, which downloads and deploys it:

addon install exo-responsive-addon

After restarting Tomcat, you will see that your site adapts to devices with a small screen by simply using a smaller browser window. You should see that the responsive layout looks like the screenshot below:

02-screen-resize

Customizing the responsive behavior

We have tested the responsive portlet mainly with iPads and iPhones, and it only has basic responsive support. If you want to adapt the behavior for additional devices or customize the functionality for the whole site or specific pages, you can do so yourself by following the guide below.

The responsive portlet is written with the Juzu framework and it is placed in the site layout (configured in sharedlayout.xml) to add responsive capabilities to the whole site.

Start by downloading the source code from https://github.com/exo-addons/responsive-addon and then dig into it.

Adding a Viewport Meta Tag

In org.exoplatform.addons.portlets.responsive.ResponseFilter.java, we have implemented a filter to add two viewport meta tags. They are added in <head>:

Customizing the responsive CSS

We use the LESS framework, which is compiled when you build the project with Maven:

03-responsive-css

We use media queries (@media with max-width and min-width) to render a site for different devices and screen resolutions. These are the supported screen sizes:

We separated these devices into different LESS files for easier management and all these files will be imported in responsive.less.

We have added some more elements to responsive.js that do not exist in the standalone Platform, like this icon: 04-button We control some of the behavior when we resize the web browser using: $( window ).resize(function() {…});

To install the extension, first you need to build the project. Run this command on top of the project: $mvn install. This will generate a ZIP file (bundle/target/responsive.zip).

The simplest way to install this extension is to unzip this file then copy the JAR file into ${PLF_TOMCAT}/lib and the WAR file into ${PLF_TOMCAT}/webapps.

Start your Tomcat instance using: ./start_eXo.sh

Note: The current version of the Responsive add-on (1.0.0) will override sharedlayout.xml; however, with eXo Platform 4.1, the Responsive add-on won’t need to override this XML file anymore because it will use the new dynamic container feature (read the blog post: Super easy guide: inject your portlets wherever you want!). We will rely on dynamic containers in the next release.

Going further

For now, the Responsive add-on only includes basic responsive support. In the future, we’d like to polish it to support the whole site fully with a better user experience.

In parallel, we are also working on a more complete and productized responsive layout feature for eXo Platform. You can follow and participate in the specification here:

https://community.exoplatform.com/portal/g/:spaces:platform_4/platform_4/wiki/Responsive_Layout

If you have any ideas or suggestions, don’t hesitate to post them on the Support Forums.

Resources

https://github.com/exo-addons/responsive-addon
https://community.exoplatform.com/add-ons

Join the eXo tribe by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!

Make the most out of eXo Platform 4

Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!

Be part of the discussion, share your comments

comments

Keep in touch with the author

Tags: , , , , , ,