{"id":7672,"date":"2014-10-15T05:55:30","date_gmt":"2014-10-15T12:55:30","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=7672"},"modified":"2014-10-15T05:55:30","modified_gmt":"2014-10-15T12:55:30","slug":"make-your-platform-truly-responsive-with-this-great-add-on","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/make-your-platform-truly-responsive-with-this-great-add-on\/","title":{"rendered":"Make your Platform truly responsive with this great add-on"},"content":{"rendered":"

\"Responsive_1\"<\/a><\/p>\n

Nowadays, users expect the full web experience on their desktops and phones as well as their tablets.<\/p>\n

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.<\/p>\n

However, the mobile version is not the only solution.<\/p>\n

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.<\/a>
\n
\n\"01-mobile-responsive\"<\/a><\/p>\n

Prerequisites<\/h2>\n

The add-on requires Platform 4.0.x or 4.1.x.<\/p>\n

Installation<\/h2>\n

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

addon install exo-responsive-addon<\/span><\/p>\n

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:<\/p>\n

\"02-screen-resize\"<\/a><\/p>\n

Customizing the responsive behavior<\/h2>\n

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<\/a> the functionality for the whole site or specific pages, you can do so yourself by following the guide below.<\/p>\n

The responsive portlet is written with the Juzu<\/a> framework and it is placed in the site layout (configured in sharedlayout.xml<\/a><\/span>) to add responsive capabilities to the whole site.<\/p>\n

Start by downloading the source code from https:\/\/github.com\/exo-addons\/responsive-addon<\/a> and then dig into it.<\/p>\n

Adding a Viewport Meta Tag<\/strong><\/p>\n

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

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1\">\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><\/pre>\n
Customizing the responsive CSS<\/strong><\/p>\n
We use the LESS framework, which is compiled when you build the project with Maven:<\/p>\n
\"03-responsive-css\"<\/a><\/p>\n
We use media queries (@media<\/span> with max-width<\/span> and min-width<\/span>) to render a site for different devices and screen resolutions. These are the supported screen sizes:<\/p>\n
\/* Large desktop *\/\n@media (min-width: 1200px) { ... }\n \n\/* Portrait tablet to landscape and desktop *\/\n@media (min-width: 768px) and (max-width: 979px) { ... }\n \n\/* Landscape phone to portrait tablet *\/\n@media (max-width: 767px) { ... }\n \n\/* Landscape phones and down *\/\n@media (max-width: 480px) { ... }<\/pre>\n
We separated these devices into different LESS files for easier management and all these files will be imported in responsive.less<\/span>.<\/p>\n
We have added some more elements to responsive.js <\/span>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() {…});<\/span><\/p>\n
To install the extension, first you need to build the project. Run this command on top of the project: $mvn install<\/span>. This will generate a ZIP file (bundle\/target\/responsive.zip<\/span>).<\/p>\n
The simplest way to install this extension is to unzip this file then copy the JAR file into ${PLF_TOMCAT}\/lib<\/span> and the WAR file into ${PLF_TOMCAT}\/webapps<\/span>.<\/p>\n
Start your Tomcat instance using: .\/start_eXo.sh<\/span><\/p>\n
Note: The current version of the Responsive add-on (1.0.0) will override sharedlayout.xml<\/a><\/span>; 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!<\/a>). We will rely on dynamic containers in the next release.<\/p>\n
Going further<\/h2>\n
For now, the Responsive add-on only includes basic responsive support. In the future, we\u2019d like to polish it to support the whole site fully with a better user experience.<\/p>\n
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:<\/p>\n
https:\/\/community.exoplatform.com\/portal\/g\/:spaces:platform_4\/platform_4\/wiki\/Responsive_Layout<\/a><\/p>\n
If you have any ideas or suggestions, don\u2019t hesitate to post them on the Support Forums<\/a>.<\/p>\n
Resources<\/h2>\n
https:\/\/github.com\/exo-addons\/responsive-addon<\/a>
\nhttps:\/\/community.exoplatform.com\/add-ons<\/a><\/p>\n
Join the eXo tribe<\/a> by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!<\/b><\/p>\n
<\/p>\n
\n
\n

\n\"make-the-most-out-of-eXo-platform4\"
\n<\/a><\/div>\n
\n
Make the most out of eXo Platform 4<\/h4>\n
Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"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. […]","protected":false},"author":7,"featured_media":12746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":7672},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7672"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=7672"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=7672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=7672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=7672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}