CSS3 Selector - nth-of-type

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent (from w3schools at http://www.w3schools.com/cssref/sel_nth-of-type.asp).

So assume you have the following HTML:

<ul class="clearfix">
  <li><a href="#bg1">content1</a></li>
  <li><a href="#bg2">content2</a></li>
  <li><a href="#bg3">content3</a></li>
</ul>

And you want to add something after each 'a', you should write style as follow:

li:nth-of-type(1) a::after{
  background: url(sbg1.jpg) no-repeat center;
}
li:nth-of-type(2) a::after{
  background: url(sbg2.jpg) no-repeat center;
}
li:nth-of-type(3) a::after{
  background: url(sbg3.jpg) no-repeat center;
}

The following will not work:

a:nth-of-type(1)::after{
  background: url(sbg1.jpg) no-repeat center;
}
a:nth-of-type(2)::after{
  background: url(sbg2.jpg) no-repeat center;
}
a:nth-of-type(3)::after{
  background: url(sbg3.jpg) no-repeat center;
}

This is because those 'a' elements have different parents.

PrimeFaces Google Map | Google Map (gmap) not Rendering in PrimeFaces

Google Map Properties

For google map to be rendered correctly, you need specify the following properties:
center, zoom, type and style, such as

<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" />

You can find details here:
http://stackoverflow.com/questions/4754708/primefaces-gmap-not-rendering

Longitude and Latitude Order

However, if you have done all these but the map is still not rendered, please check the 'center' property, for which you should put latitude before longitude. In the example above, 41.381542 is the latitude while 2.122893 is the longitude.

Camel Exec Command Script | Apache Camel Exec - Run Multiple Commands/Scripts at One Go

Camel Exec Windows Example

You could use the following settings to run multiple executables (including scripts) at one go using the Exec component.

On Windows:

<exec executable="cmd" argument="RAW(/c c:/batch1.bat;&amp;c:/batch2.bat)"/>

Camel Exec Linux Example

On Linux:

<exec executable="sh" argument="-c &quot;cd /product;./executable1;cd /customer;./executable2&quot;"/>

Camel Exec XML Example

If you use Java code instead of XML, you could simply replace '&' with '&' and '"' with '\"', and make them work.

Another thing I want to mention is that on Linux, it's better to run with './executable1' instead of 'executable1'.

Check more details here.

Apache Camel Ampersand URL | Apache Camel - Include an Ampersand in an URL

Camel URL Ampersand Issue

Recently I encountered a problem when I was using the Exec component to run multiple Windows batch files at one go.

All my parameters were put in an XML file, so I had something like:

<exec executable="cmd" argument="/c c:/batch1.bat;c:/batch2.bat"/>

However, with these settings, only the first batch file was executed.

After some search, I changed the configuration to

<exec executable="cmd" argument="/c c:/batch1.bat;&amp;c:/batch2.bat"/>

This time Camel complained it did not recognize some parameters (c:/batch2.bat). This was because Camel treats '&' as URL delimiter.

Use RAW  to Escape Ampersand

I managed to solve it by using the syntax RAW:

<exec executable="cmd" argument="RAW(/c c:/batch1.bat;&amp;c:/batch2.bat)"/>

What I want to mention is that RAW must be used to enclose the whole value of a parameter, not a part. So the following does not work:

<exec executable="cmd" argument="/c RAW(c:/batch1.bat;&amp;c:/batch2.bat)"/>

Check more details here.

JSF JSTL | Conditionally Display JSF Component: JSTL Tag vs. JSF Rendered Attribute

Initially I thought there were two approaches: using JSTL choose/when tags and using JSF rendered attribute.

However, I found that the first approach didn't work.

I wrote the following code and found that the 'otherwise' branch was always evaluated.

<c:choose>
    <c:when test="${status == 1}">
       <p:graphicImage value="green.png" />
    </c:when>
    <c:when test="${status == 2}">
       <p:graphicImage value="red.png" />
    </c:when>
    <c:otherwise>
       <p:graphicImage value="blue.png" />
    </c:otherwise>
</c:choose>

Later I discovered explain to this issue at:
http://stackoverflow.com/questions/7437882/jstl-cchoose-cwhen-not-working-in-a-jsf-page, and
http://stackoverflow.com/questions/4870462/conditionally-displaying-jsf-components.

Simply speaking, JSTL tages are evaluated prior to JSF components processing.

So the second approach became the only choice.

<p:graphicImage value="green.png" rendered="#{status == 1}/>
<p:graphicImage value="red.png" rendered="#{status == 2}/>
<p:graphicImage value="blue.png" rendered="#{status != 1 and status != 2}/>

The above is the second approach.

However, this approach also has an issue.

I have a background appliation which sends status update at a certain interval. Upon receiving an update, the frontend application should update the web page.

So first I tried to add an ID to the graphicImage components in order to update one of them based on their id.

<p:graphicImage id="statusImage" value="green.png" rendered="#{status == 1}/>
<p:graphicImage id="statusImage" value="red.png" rendered="#{status == 2}/>
<p:graphicImage id="statusImage" value="blue.png" rendered="#{status != 1 and status != 2}/>

But JSF complained about duplicated IDs.

Finally I found a solution which was to use JQuery selector:

function updateStatusImage(status)
{
  var image;

  if (status == 1) image = 'green.png';
  else if (status == 2) image = 'red.png';
  else image = 'blue.png';

  $('#form img').attr('src', image);
}

Check more details here.