7 min read

(Read more interesting articles on Liferay Portal 6 here.)

WAP

Liferay goes mobile! As smart-phones continue to impede the space between dialing a number, taking a picture, or discovering new music, mobile browsers offer us the next frontier in the previously desktop-exclusive market of web design. A mobile browser is a web browser designed for use on a mobile device such as a mobile phone, PDA, iPhone, which is optimized to display web content most effectively for small screens on portable devices. A WAP browser provides all of the basic services of a web browser, but is simplified to operate within the restrictions of a mobile phone, such as its smaller view screen. The websites generated by the portal go with mobile browsers, or any WAP browsers. Thus you can browse portal websites, called WAP sites, through mobile devices.

Themes (look and feel of websites or WAP sites) in the portal will detect mobile devices dynamically. As mentioned earlier, each site may have its own look and feel and each page could have its own look and feel. Under the tab Look and Feel, you would see Regular Browsers and Mobile Devices, where available themes will appear.

Of course, you can develop your mobile themes or WAP themes depending on your own requirements. Here we’re going to discuss several existing mobile themes or WAP themes, and going further, see what themes are and how they work.

Jedi Mobile theme

The theme Jedi Mobile has been applied on the home page of the community Guest. As you can see, the theme Jedi Mobile takes the original Jedi theme and packs it int a bite-sized, smart-phone punch.

Structure

The theme Jedi Mobile has the following folder structure at $AS_WEB_APP_HOME/jedi-mobile-theme.

  • CSS: CSS files
  • images: Image files
  • javascripts: JavaScript files
  • templates: Velocity template files
  • WEB-INF: Web info specification includes sub-folders classes, lib, and tld

As you can see, web-info specification covers liferay-look-and-feel.xml,liferay-plugin-package.properties, liferay-plugin-package.xml, and web.xml. Knowing the structure of the theme would be helpful to customize that theme.

How does it work?

You could bring the theme Jedi Mobile Theme into the portal by following these steps:

Then apply the theme as the current look and feel of pages.

What’s happening?

The theme Jedi Mobile has specified the following script at $AS_WEB_APP_HOME/jedi-mobile-theme/templates/portal_normal.vm.

<script type="text/javascript">
iPhone = function() {
setTimeout("window.scrollTo(0,1) ", 100)
}
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", iPhone, false)
addEventListener("onorientationchange", iPhone, false)
}
</script>

As shown in the preceding code, it detects the navigator, whether it is an iPhone or not.

iPhone theme

The theme iPhone takes a much more direct approach to web applications. With its indigenous appearance and feel, the WAP site starts to feel like a playlist, user experience appears native, and navigation comes naturally.

How does it work?

You can bring the iPhone Theme into the portal by following these steps:

  1. Download the WAR file ${iphone.theme.war} from http://liferay.cignex.com/palm_tree/book/0387/chapter12/iphone-theme-6.0.0.1.war
  2. Drop the WAR file ${iphone.theme.war} to the folder $LIFERAY_HOME/deploy swhen the portal is running.

Then apply the theme as the current look and feel of pages.

What’s happening?

The theme iPhone introduces a new browser detection mechanism for specialized mobile functionality. If you visit the site on an iPhone, you get the bare minimum—JavaScript, HTML, and CSS. If you visit the site on a regular browser, you get all the more advanced UI features.

The theme iPhone has specified the following script at $AS_WEB_APP_HOME/iphonetheme/templates/portal_normal.vm.

#set ($isIphone = $request.getHeader("User-Agent").toLowerCase().
indexOf("iphone") != -1)
<!-- ignore details -->
#if ($isIphone)
<!-- ignore details -->
#else
$theme.include($top_head_include)
#end
</head>
<!-- ignore details -->

iPhone Redirect theme

The theme iPhone Redirect takes the browser detection mechanism and takes intelligent redirection. The theme iPhone Redirect is an unstyled theme, coming with a custom initialization feature—that is, it can detect an iPhone browser visiting the page, check for a Mobile community, and automatically redirect the iPhone user to that community if found. Moreover, it will work with a virtual host.

How does it work?

You could bring the theme iPhone Redirect Theme into the portal by following these steps:

  1. Download the WAR file ${iphone.redirect.theme.war} fromhttp://liferay.cignex.com/palm_tree/book/0387/chapter12/so-theme-6.0.0.1.war
  2. Drop the WAR file ${iphone. redirect.theme.war} to the folder$LIFERAY_HOME/deploy when the portal is running.

 

Then apply the theme as the current look and feel of pages.

What’s happening?

The theme iPhone Redirect has the following code specified at $AS_WEB_APP_HOME/iphone-detect-theme/templates/init_custom.vm.

//ignore details
#set ($isIphone = $request.getHeader("User-Agent").toLowerCase().
indexOf("iphone") != -1)
#if ($isIphone && $mobileGroup && $group_id != $mobileGroup.groupId)
<script type="text/javascript">
window.location.href = '${layoutSet.virtualHost}' ? 'http://' +
'${layoutSet.virtualHost}' + ((window.location.port) ? ':' + window.
location.port : '') : '/web${mobileGroup.friendlyURL}'
</script>
#end

Of course, you could customize the preceding themes according to your own requirements.

Reporting

JasperReports is an open source Java reporting tool that can write to screen, a printer, or to PDF, HTML, Microsoft Excel, RTF, ODT, CSV (Comma Separated Value) formats, and XML files. It can be used in Java-enabled applications, including Java EE or Web applications to generate dynamic content. It reads its instructions from an XML or .jasper file. Refer to http://www.jasperforge.org/jasperreports for more information.

The portal provides full integration of JasperReports with the reporting framework—a web called reporting-jasper-web and a portlet called reports-console-portlet. The portal provides the ability to schedule reports and deliver them via Document Library and e-mail. In addition, the portal has added support for Jasper XLS data source to a reporting framework.

JasperReports Engine

The Liferay JasperReports Report Engine provides implementation of Liferay BI using Jasper. You can bring the web Reporting Jasper into the portal by following these steps:

Note that the current integration of JasperReports version is 3.6.2. You will be able to upgrade it to the latest version of JasperReports anytime.

The Reports portlets

The plugin Reports Console defines two portlets: Reports Console at Control Panel and Reports Display. The portlet Reports Display is instanceable—that is, you can add more than one instance of the portlet on a page.

You could bring the plugin Reports Console into the portal by following these steps:

  1. Download the WAR file ${reports.console.portlet.war} from http://liferay.cignex.com/palm_tree/book/0387/chapter12/reports-console-portlet-6.0.0.1.warr
  2. Drop the WAR file ${reports.console.portlet.war} to the folder$LIFERAY_HOME/deploy when the portal is running.

As shown in the following screenshot, the portlet Reports Display provides the ability to search for reports and display search results with pagination. Search results will be displayed with a set of columns: Report Definition Name, Report Format, Requested Date, and Reporting Date.

Build WAP sites and Integrate with CRM and Netvibes widgets

As you can see, you can search for reports via basic search or advanced search. The advanced search would cover the following items:

  • Match All of the following fields: All or Any
  • Definition Name: User’s input
  • Datasource Name: Jasper Empty, Portal
  • Format: csv, excel, HTML, pdf, rtf, Text, and XML
  • Requesting User Name:User’s input
  • Start date:A date
  • End date:A date
  • Active: Yes or No

The portlet Reports Console provides the abilities to manage reports in the Control Panel. By going to Content | Reports Console under the Control Panel, you can search for generated reports under the tab Generated Reports. You can also create report definitions under the tab Report Definitions.

Build WAP sites and Integrate with CRM and Netvibes widgets

Under the tab Report Definition, you would be able to search report definitions via basic search or advanced search. The advanced search would cover the following items:

  • Match All of the following fields: All or Any
  • Definition Name: User’s input
  • Description: User’s input
  • Datasource Name: Multiple checkboxes, Jasper Empty or Portal

Of course, you could add definitions with the following items:

  • Definition Name: Input required
  • Description: User’s input
  • Datasource Name: Empty or Portal
  • Template: Uploading template file (required)
  • Report Parameters: Multiple pair (key, value)
  • Key: User’s input; optionally, it is bound to Report parameters
  • Value: User’s input
  • Permissions: A checkbox—Public permissions configuration.
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here