How to parameterized label from resource bundle

Assuming we have a of labels to be displayed by type.

label.type.a = This is label A
label.type.b = This is label B
label.type.c = This is label C
label.type.d = This is label D

To display the label by type in xhtml, the simplest way it to use a rendered attribute

<h:outputLabel value="#{lbl['label.type.a']}" rendered="#{myType == 'A'}" />
<h:outputLabel value="#{lbl['label.type.b']}" rendered="#{myType == 'B'}" />
<h:outputLabel value="#{lbl['label.type.c']}" rendered="#{myType == 'C'}" />
<h:outputLabel value="#{lbl['label.type.d']}" rendered="#{myType == 'D'}" />

Instead of using the above sample, I would prefer to use two lines to achieve the same effect.

especially when the list of type are long. 

<ui:param name="typeLabel" value="label.type.#{myType}" />
<h:outputLabel value="#{lbl['typeLabel']}" />

Done!!

Google Maps' icon not rendered in Liferay 6.2

When using Google Maps in Liferay  6.2.
All the icon in Google Maps are not rendered,

This is due to css conflict in Liferay 6.2 and Google Maps.

To resolve this problem, just need to add the following css.

.aui .gm-style img {
  max-width: none;
}

Done!!

How to resolve Google Maps and jQuery conflict

If Google Maps and jQuery are running in the same page of an application.
There might be conflicts and the Google Maps is not working sometimes.

To resolve this problem, just need to replace the following line

<script src="https://maps.googleapis.com/maps/api/js?sensor=false">

to the function below:

<script>
function loadScript() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = '//maps.googleapis.com/maps/api/js?sensor=false';
 document.body.appendChild(script);
}
$(document).ready(loadScript());
</script>

Done!!

Geocoding address with Google Maps API

<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
<script>
var geocoder;
function geocodeAddr(address) {
 if(geocoder == 'undefined' || geocoder == null) {
  geocoder = new google.maps.Geocoder();
 }
 geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
  alert('Latitude: ' + results[0].geometry.location.lat());
  alert('Longitude: ' + results[0].geometry.location.lng());
 } else {
   alert('Geocode was not successful for the following reason: ' + status);
 }
  });
}
</script>

<input type="button" onclick="geocodeAddr('Cameron Highlands Resort,By The Golf Course, 39000 Tanah Rata,Cameron Highlands, Pahang, Malaysia')" />

With the geocodeAddr function above, the latitude and longitude of the given address will be alerted.


Done!!

getElementById with PrimeFaces

To get a HTML component in javascript, normally we use getElementById('componentId'),
But there are 2 constraints to get PrimeFaces component.

1. the id defined in component tag is not the actual element id in HTML.
to resolve this issue, we can use the javascript API provided by PrimeFaces to retrieve the actual HTML element id.
#{p:component('componentId')}

2. quote in the above API breaks the quote in getElementById
to resolve this problem, the quote in PF's API need to be replaced.

document.getElementById('#{p:component("componentId")}')

Done!!

Complex Native SQL to JPA entity

Assuming there is a ContactDetail entity.
This could be a database table or table view.

@Entity
public class ContactDetail {
    private String name;
    private String address;
    private String phoneNo;
    private String mobileNo;
    private String email;
    // getter and setter

}

the direct way to get this entity is to execute the following sql.

select name, address, phone_no, mobile_no, email from contact_detail;

another way is to select those column from different tables. 

eg. 

select p.name as name, a.address as address, b.phoneNo as phoneNo, b.mobileNo as mobileNo, c.email as email from person p
join address a on a.p_id = p.p_id
join phone b on b.p_id = p.p_id
join email c on c.p_id = p.p_id;

where the entity columns are actually come from different table. 

which could be a view. 

or SQL to return a table entity based on business requirement.

after gotten the correct SQL, we can proceed to query the JPA with the native SQL.

List<ContactDetail > customers = (List<ContactDetail>)em.createNativeQuery(YOUR_NATIVE_SQL, ContactDetail.class).getResultList();

Done!!

How to customize date display in PrimeFaces Calendar component

There is a scenario where the requirement wants the calendar component to enable certain date only.
eg, enable 1st day of the month only.

To achieve this requirement, attribute beforeShowDay need to be used.
Description for beforeShowDay in PrimeFaces tag document.
Callback to execute before displaying a date, used to customize date display.

Steps:
1. Write the callback function to be called by the Calendar component.

function beforeShowDayCallback(date){
  if (date.getDate() == 1) {
    return [true, ''];
  }
  return [false, ''];
}

2. Call the function in calendar component.

<p:calendar id="gstEffDateId"  beforeShowDay="beforeShowDayCallback"  />

Done!!

Synchronize Class List problem when integrating JBoss with eclipseLink

The problem when integrating eclipseLink with JBoss 7.1
the attribute below in persistence.xml is not functioning
<exclude-unlisted-classes>false</exclude-unlisted-classes>

the workaround is to list all the entity class in persistence.xml.
but this is troublesome to developers, every time entities changed. the developers need to re-sync the entity classes again.

To avoid this troublesome step, we need to add additional module into JBoss AS7 to handle this eclipseLink integration.

The official document from JBoss is here.
And steps below are the simplified version of the official document.

1. Download the precompile jar from my drive.
2. Extract and copy the jar to JBoss modules folder
3. add the following line into standalone.xml

    <system-properties>

        <property name="eclipselink.archive.factory"

            value="id.au.ringerc.as7.eclipselinkintegration.JBossArchiveFactoryImpl"/>

    </system-properties>

4. set persistence.xml to exclude classes and remove all synchronized classes.

<exclude-unlisted-classes>false</exclude-unlisted-classes>

p/s: the eclipseLink jar must be 2.4.2 or above


Done!!

Recording AJAX navigation with Badboy

By default, Badboy recording steps in request mode.
Thus, AJAX actions triggered in the same page are unable to record.

It is easy to record AJAX actions with Badboy.
We just need to change the recording mode to navigation mode instead of request mode.

Done!!

How to set common styleClass when component is required, readonly or disabled

This is to show how to highlight input components globally when it is either required, readonly, or disabled.

1. Create a class that is extending the javax.faces.application.ViewHandlerWrapper.

public class MyViewHandlerWrapper extends ViewHandlerWrapper {

}

2. Overrider the renderView method.

@Override
public void renderView(FacesContext fc, UIViewRoot view) throws IOException, FacesException {

  super.renderView(fc, view);

}

3. create a private method to find input components recursively and highlight them based on the required, readonly and disabled attribute.

Loop every components in a ViewRoot recursively

1. Writing the recursive method.

private void loopComponentsRecursively(List<UIComponent> childrenList) {
  for(UIComponent component : childrenList) {
   if(component.getChildCount() > 0) {
    loopComponentsRecursively(component.getChildren());
   } else {
    // no more children for this component
    System.out.println("child: " + component.getId() + "  " + component.getClientId());
   }
  }
}

2. Invoking the recursive method

// some code
loopComponentsRecursively(viewRoot.getChildren());
//some other code

Done!!

How to handle localized resources with resource bundle

Generally, there are 2 ways to handle localized resources.
1. Append the locale name to the end of the file name. eg, logo_en_US.jpg, flag_zh_CN.png
2. Save the resources of the locale to individual resource bundle.

Solution 1 is kind of straight forward,

thus, in this post, we will be focusing on Solution 2. 

Normally, in java development, we have different resource bundle to handle localized messages, labels for different locales. 

eg, system-messages_en_US.properties, system-messages_ms_MY.properties, etc

Remote Deployment via the JBoss Admin Console

1. Login as JBoss admin or any management user

2. In the Runtime tab, click on Manage Deployments

How to run Linux shell command in Windows

To run shell command in windows platforms, one of the option is to use Cygwin.

1. Download and install Cygwin at this url.
2. Start Cygwin command prompt.
3. Start entering shell command into Cygwin command prompt.


Done!!

p:tabMenu model does not work with JSF 2.1.x

According to PrimeFaces demo page, <p:tabMenu /> is working with <p:menuItem /> to display tab content.
<p:tabMenu /> also works with model to display tab content.

<p:tabMenu activeIndex="#{backingBean.tabActiveIndex}"
    model="#{backingBean.tabModel}" />

But <p:tabMenu /> not working with some of the JSF2.1 distribution.
eg, JSF2.1.19, JSF2.1.22, JSF2.1.29, etc

When tabMenu with model running with JSF2.1.29. some of the tabs are not able to click.

The only solution to resolve this problem, is to use <p:menuItem /> instead of model.


Done!!

How to update JSF library in JBoss

1. Download the expected version of JSF library.
jsf-api
https://repository.jboss.org/nexus/content/groups/public/org/jboss/spec/javax/faces/jboss-jsf-api_2.1_spec/

jsf-impl
https://repository.jboss.org/nexus/content/groups/public-jboss/com/sun/faces/jsf-impl/

2. Copy the newly downloaded JSF jar into the following folder
jsf-api
<JBoss_AS>/modules/javax/faces/api/main
<JBoss_EAP>/modules/system/layers/base/javax/faces/api/main

jsf-impl
<JBoss_AS>/modules/com/sun/jsf-impl/main
<JBoss_EAP>/modules/system/layers/base/com/sun/jsf-impl/main

3. Modify module.xml with the new jar file name.
jsf-api
    <resources>
        <resource-root path="jboss-jsf-api_2.1_spec-2.1.19.1.Final-redhat-1.jar"/>
    </resources>
jsf-impl
    <resources>
        <resource-root path="jsf-impl-2.1.19-redhat-2.jar"/>
    </resources>

4. Restart JBoss


Done!!

How to display loop count in velocity

The following syntax will loop the map and display the value in the map.

#foreach($abc in $abcMap)
   $abc.get("a")  $abc.get("b")  $abc.get("c")
#endbbb

To display the loop count, just need to add velocityCount.

#foreach($abc in $abcMap)
   $velocityCount $abc.get("a")  $abc.get("b")  $abc.get("c")
#endbbb

Done!!

How to display null as empty string with Apache Velocity

We used the following Syntax to display attribute's value in Apache Velocity.
$myValue


But the problem is that, we the value carried by the attribute is null.
Velocity is not displaying an empty string or "null",
it display the attribute name that is being used.

attribute: [ $myValue1, $myValue2, $myValue3, $myValue4 ]
value:      [ "First", null, "Third", "" ]
Output:   [ First, $myValue2, Third,  ]


To display the NULL value as an empty string. we just need to add "!" after "$"

attribute: [ $!myValue1, $!myValue2, $!myValue3, $!myValue4 ]
value:      [ "First", null, "Third", "" ]
Output:   [ First, , Third,  ]


Done!!

How to retrieve value in map with Apache Velocity

Assuming we have a HashMap with the following value

HashMap myMap = new HashMap();
myMap.put("k1", "v1");
myMap.put("k2", "v2");
myMap.put("k3", "v3");

put the HashMap into the VelocityContext.

VelocityContext context = new VelocityContext();
context.put("myMap", myMap);

To retrieve the map value in the Velocity template (.vm file),
Use the following syntax to retrieve map value with constant key.

$myMap.get("k1");
$myMap.get("k2");
$myMap.get("k3");

Use the following syntax to retrieve map value with dynamic key.

$myMap.get($mapKey1);
$myMap.get($mapKey2);
$myMap.get($mapKey3);

Done!!