Implementing Main View using static Java script in Openbravo
March 29, 2012 2 Comments
In addition to the standard UI generation framework provided by Openbravo, we can also generate our own User Interface and manage them using our own controllers or by extending the controllers provided by Openbravo. There are multiple ways of achieving this. I have provided below, one way of achieving the same, which is specially better suited when the view does not need any dynamic data.
This approach requires a javascript file and a component which can tell the javascript file path to Openbravo. For the sake of simplicity, I have done all the logic in JSP and included the JSP as the html pane in smart client. You can use your own implementation stack for the same. I have used an example module (Fugo Example – com.fugoconsulting.example(DBPrefix – FEX)) for illustrating this.
Development Steps:
Html Content:
Create a jsp file to filter all the customers and their detailed information. For example create BusinessPartner.jsp with all logic and place it in modules/com.fugoconsulting.example/web/com.fugoconsulting.example/jsp/
/**
* JSP page to provide the List of Customers
*
* @author pandeeswari
*/
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="org.openbravo.model.common.businesspartner.BusinessPartner"%>
<%@page import="org.openbravo.dal.service.OBQuery"%>
<%@page import="org.openbravo.dal.service.OBDal"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
table.hovertable {
font-family: helvetica;
font-size:13px;
color:#000;
padding:5px;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.hovertable th {
background-color:#008000;
color:#FFF;
padding:5px;
font-weight:bold;
font-family: helvetica;
border-width: 1px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
color:#000;
padding:5px;
border-width: 1px;
border-color: #a9c6c9;
color: #008000;
}
table.hovertable td {
border-width: 1px;
border-style: solid;
font-family: helvetica;
border-color: #a9c6c9;
padding:5px;
}
.text {
font-family : helvetica;
font-size:12px;
}
.heading {
font-family : helvetica;
font-size : 15px;
font-weight : Bold;
color: #008000;
}
.trwithoutbg {
color:#333333;
font-size:12px;
background:#FFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Customer Information</title>
<p>List of customers</p>
<table id = "customer">
<tr>
<th>Name</th>
<th>Name2</th>
<th>Business Partner Category</th>
<th>Price List</th>
<th>Payment Method</th>
<th>Payment Terms</th>
<th>Account</th>
<th>Invoice Terms</th>
<th>Credit Limit</th>
</tr>
<%
try {
OBQuery<BusinessPartner> businessPartner = OBDal.getInstance().createQuery(BusinessPartner.class, "customer = 'Y'");
for(BusinessPartner customer : businessPartner.list()) {
String name = customer.getName();
String name2 = "";
if(customer.getName2() != null) {
name2 = customer.getName2();
}
String businessPartnerCategory = customer.getBusinessPartnerCategory().getName();
String priceList = "";
if(customer.getPriceList() != null) {
priceList = customer.getPriceList().getName();
}
String paymentMethod = "";
if(customer.getPaymentMethod() != null) {
paymentMethod = customer.getPaymentMethod().getName();
}
String paymentTerms = "";
if(customer.getPaymentTerms() != null) {
paymentTerms = customer.getPaymentTerms().getName();
}
String financialAccount = "";
if(customer.getAccount() != null) {
financialAccount = customer.getAccount().getName();
}
String invoiceTerms = "";
if(customer.getInvoiceTerms() != null) {
invoiceTerms = customer.getInvoiceTerms();
}
String creditLimit = customer.getCreditLimit().toString();
%>
<tr onmouseover="this.style.backgroundColor='#D0D0D0';" onmouseout="this.style.backgroundColor='#FFF';">
<td><%= name %></td>
<td><%= name2 %></td>
<td><%= businessPartnerCategory %></td>
<td><%= priceList %></td>
<td><%= paymentMethod %></td>
<td><%= paymentTerms %></td>
<td><%= financialAccount %></td>
<td><%= invoiceTerms %></td>
<td><%= creditLimit %></td>
</tr>
<%
}
}
catch(Exception e) {
System.out.println("Error:"+e.getMessage());
}
%>
</table>
</head>
<body>
</body>
</html>
Create a javascript file to include the jsp so that it can be rendered as a main view in openbravo. For example, create fex-business-partner-info.js and place it in modules/com.fugoconsulting.example/web/com.fugoconsulting.example/js/ .
isc.defineClass("FEX_BusinessPartnerInfo", isc.HTMLPane).addProperties({
width: '100%',
height: '100%',
overflow: 'visible',
contentsType: 'page',
contentsURL: 'web/com.fugoconsulting.example/jsp/BusinessPartner.jsp',
// allow only open one tab for this tab instance
isSameTab: function (viewId, params) {
return viewId === this.getClassName();
},
getBookMarkParams: function () {
var result = {};
result.viewId = this.getClassName();
result.tabTitle = this.tabTitle;
return result;
}
});
defineClass:
The method defineClass is a smartclient method which is used to define a new java script class. It will create a javascript class with the name “FEX_BusinessPartnerInfo” as a HtmlPane. isc.HTMLPane is the smartclient class that is extended to create the html pane. Any class of smartclient can be extended like this. You can also define your own javascript class and extend the same. For instance, you can also extend the “FEX_BusinessPartnerInfo” class.
contentsType:
The contentsType property is used to specify whether the included html should be opened as a page or a fragment. In our example, since its “Page”, it will load the html as a standalone html page.
contentsURL:
The contentsURL property is used to specify the URL of the html page which we want to load. Since we have our jsp at com.fugoconsulting.example/jsp of our module’s web directory, we need to give the path as “web/com.fugoconsulting.example/jsp/BusinessPartner.jsp.
isSameTab:
The method isSameTab is overrided to stop Openbravo from opening many instance of the same tab again and again when the menu is clicked.
View Definition:
You can define the view as follows:
- Log in as System Administrator
- Open Application Dictionary -> User Interface -> View Definition
- Define the view as below.
The name of the View Implementation must be same as the java script class name. Since we are creating the main view using static java script, we don not need to specify the template or class implementation. Instead, to make openbravo aware of our static java script, we need to register it in a global component provider. We need to create our own component provider that will act as a common resource pool for our static resources.
Component Provider:
Create a component provider FEXComponentProvider.java and place it in the directory modules/com.fugoconsulting.example/src/com/fugoconsulting/example/ as follows.
package com.fugoconsulting.example;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Map;
import javax.enterprise.context.ApplicationScoped;
import org.openbravo.client.kernel.BaseComponentProvider;
import org.openbravo.client.kernel.Component;
import org.openbravo.client.kernel.ComponentProvider;
import org.openbravo.client.kernel.KernelConstants;
/**
* The Example module Component Provider.
*
* @author pandeeswari
*/
@ApplicationScoped
@ComponentProvider.Qualifier(FEXComponentProvider.QUALIFIER)
public class FEXComponentProvider extends BaseComponentProvider {
public static final String QUALIFIER = "FEX_COMPONENTPROVIDER";
/*
* (non-Javadoc)
*
* @see org.openbravo.client.kernel.ComponentProvider#getComponent(java.lang.String,
* java.util.Map)
*/
@Override
public Component getComponent(String componentId, Map<String, Object> parameters) {
throw new IllegalArgumentException("Component id " + componentId + " not supported.");
}
@Override
public List<ComponentResource> getGlobalComponentResources() {
final List<ComponentResource> globalResources = new ArrayList<ComponentResource>();
globalResources.add(createStaticResource(
"web/com.fugoconsulting.example/js/fex-business-partner-info.js", false));
return globalResources;
}
@Override
public List<String> getTestResources() {
return Collections.emptyList();
}
}
We should add all the static resources in the list variable globalResources. This is done by overriding the getGlobalComponentResources() method. At runtime, Openbravo will get the resource path from this component provider.
Now, create a menu “Customer Information” for this main view with action as “Open View in MDI” and choose the view implementation we just created. Build the application and restart tomcat.
- Login as Client
- Choose the menu “Customer Information”
- Now you should be able to see the list of customers as below.
This example module is hosted in Openbravo forge and can be downloaded from http://forge.openbravo.com/projects/fugoexamplesmodule
Fugo Consulting 