Surely you have heard about the eXo mobile application; without a doubt, you’ve admired the quality of this native mobile client that is intended to be used under the iOS and Android mobile operating systems. And of course, you have enjoyed embedding your own applications with your navigation style and your design in a mobile context.
That’s why I thought about adding one more way to leverage another mobile capability and giving the power to the end user to perform a set of actions. These include creating an HTML5 mobile website through a simple template wizard, changing the look and feel of the website by customizing the logo or selecting the main colors using the data stream sent by Adobe Kuler, updating the content and the navigation menu based on the eXo Content Management System, and finally, configuring the redirection to the mobile website if using a mobile device.
During this tutorial, I will show you how to acquire all of these capabilities through simple actions and configurations:
- Template-based creation of an HTML5 website for mobile
- Look & feel customization — theme & logo
- Content and navigation updating
- Mobile device detection and redirection configuration
1. Installation
It is possible to obtain the source code from this location: https://github.com/exo-addons/mobile-template-extension
To install the extension, you need to build the project. Run this command on the top of the project: . This build will generate a JAR file, which needs to be put in the Tomcat folder, and two WARs; a that contains the extension, and the that contains the applications. These WAR files need to be added to the Tomcat folder.
2. HTML5 Mobile Website
eXo Platform 3.5 offers the way to the end user to create his or her own website based on a set of website and intranet templates. The end user is also able to create his or her own website template to automate the creation and the configuration phases. I had the idea to create a template that may be used to create a mobile website based on HTML5 standards.
The end user may select the mobile website template from the list of site templates, and then will get a pre-configured website designed to be used in a mobile web browser. The end user needs to also add the other parameters such as portal and permission settings.
This website will inject the viewport metadata to increase the ability to zoom web pages for easier reading in the mobile web browser.
meta content="width=device-width, initial-scale=1" name="viewport"
3. The Look & Feel Customization
Once the website has been created, the end user will get a HTML5 mobile website whose content is based on the categories navigation.
The main page of the website contains a banner that displays the company logo, the search box, the menu, and the related content, which is based on the categories navigation. The searching capability is performed on this mobile website, and the related result page is also adapted to the mobile context.
Now we return to the main page to try to edit the layout. Here you will find a special portlet “Mobile Theme”, which is dedicated to customize the look and feel of the page by selecting one color theme and changing the location of the logo.
For the theming part, we have already used the services of Adobe Kuler as a color themes generator. Let’s look closely at this crucial and time-saving product for designers. What’s Adobe Kuler? It’s a web-hosted application, providing free color themes that can be used by anybody, in any project you are working on.
That’s why we called for the Adobe Kuler workflow in order to provide a set of themes, which group five colors together by way of a very intuitive user interface for editing hues, help you imagine different ways to skin your application. It’s possible to filter themes based on several criteria such as ‘The Highest Rated’, ‘The most popular’, etc.
Therefore, the end user will have the opportunity to customize the look and feel of the website through the edit mode of this portlet.
By default, there is a default theme that is used at the creation of the website. The end user needs only to select one color among others to set the five main colors of the theme. The colors come from Adobe Kuler, which is a web-hosted application for exploring, creating, and sharing color themes. Each time the end user selects one group of colors, the configuration menu will be updated, and preferences will be stored after saving the menu. It’s possible to have three filters for colors: Random, Highest Rated, and Popular. It’s also possible to add a custom logo. To do so, the end user can upload the logo directly to the file system; or simply input the resource location URL (which may be a relative or absolute URL, or even a URL linking to an external resource).
4. The Content Personalization
It’s possible to personalize the content of the website using the categories navigation mechanism. The end user may update the associated categories by adding and updating one category or its related content. The categories-based navigation will be updated easily without any additional coding.
5. The Redirection Mechanism
One more feature of this add-on, is the capability to configure the redirection to the mobile website after an automatic detection of the device.
The end user only needs to indicate the URL of the mobile website already created, and then, each time a visitor arrives at the platform, the system will detect the device used for browsing. If it’s a mobile device, he or she will be redirected automatically to the indicated location. This information will also be stored in the preferences of the Mobile Switcher Portlet.
