Salient Soft

I tried to use this whilst experimenting with dyamic style sheets, but this support post here confirms that it does not work due to an issue with the way the images are referenced.
The symptom is that you get basically correct looking layout/colours but none of the images have loaded.
The solution is to use a link tag directly e.g.:-

<link type=”text/css” rel=”stylesheet”
href=”#{request.contextPath}/resources/themes/#{themeSelectorBean.theme}/skin.css” />

Whilst on the subject of h:outputStylesheet, it should be noted that for the following example:-

<h:outputStylesheet library=”css” name=”styles.css”/>

Whilst the href of the resulting generated link tag looks like this:-

<link href=”/context-root/faces/javax.faces.resource/styles.css?ln=css”
rel=”stylesheet” type=”text/css”/>

the actual physical directory containing the style sheet in this case will be

…\WebContent\resources\css\style.css

i.e. the logical to physical mapping of the web path in this case is not straightforward and obvious. If you just create the resources folder under your project’s WebContent folder and place all your libraries as subfolders under that, it should all work correctly (the above issue with jQuery/Primefaces notwithstanding)!

No Comments »

With Primefaces, rather than applying your own style for borders, headers etc. it is important where possible to tie the styling in to the theme using theme classes.
Here is an example of this from the Primefaces showcase, used to display the header for each example:-

<h1 class=”title ui-widget-header ui-corner-all”>DataTable – Pagination</h1>

This example places a border around the header according to the theme, sets the appropriate background, and adds corner rounding as per the theme.
Whilst in some cases another Primefaces component might be the right approach (in this case a panel would do it), in many cases this is undesirable and also overkill for the job. Taking our lead from the Primefaces showcase, it is clearly acceptable to use the underlying jQuery UI classes where appropriate, as I have also done here.

Here is another example page fragment which I have used to group a few controls/buttons in a box:-

<h:head>
    <style type=”text/css”>       
        .ui-widget, .ui-widget .ui-widget {
            font-size: 80% !important;
        }
        .ss-controlgroup {
            float: left;
        }

    </style>
</h:head>
<h:body>
<h:form>
<h:panelGroup layout=”block” styleClass=”ui-widget-content ui-corner-all ss-controlgroup”>

   (controls in the box go here)

</h:panelGroup>
</h:form>
</h:body>

Details of the jQuery UI, on which Primefaces is based, may be found here.

No Comments »

There is a quite a large collection of useful built in icons, such as those used for the table paginator buttons. It is useful to be able to reuse these in your own buttons:-

• It simplifies coding as you don’t need to roll your own icons.
• The Unicode character set has quite an extensive library of symbols (see here for details of how to use numeric unicode references in HTML to access them), and it is at first tempting to use them as they are readily available. The font color used for them will change automatically with your chosen theme, so it seems like you might be home free with minimal effort for buttons with symbols on, by just using them as text labels on a button. However,  you are at the mercy of the theme font stack/Browser font fallback/font rendering as to how well they are represented in a given font. When I tried some of them out the rendering was very poor in some Primefaces themes, and getting them centrally positioned on buttons of various sizes involved some quirky bits of CSS which were dependent on your chosen font size, particularly if you wanted multiple symbols on a button (e.g. 2 triangles to give a double arrow). I decided this was a blind alley and in the end discovered that using the theme icons was better and easier. 
• You don’t need to tweak a set of new ones for each theme. Themeroller may assist with recolouring them for a theme (haven’t used it yet) but even if it does reusing is still easier than running themeroller to tweak every theme.
• It promotes consistency – your own e.g. arrow buttons can have the same look and feel as e.g. the table paginator ones, so as well as making your life easier you have scored points for better user interface design. When a user sees the same icon used consistently in different places this gives a strong visual cue on how the interface works and what to expect.
• Reusing them minimises downloading and caching additional icons.

After quite a bit a bit of experimentation with both commandButtons and commandLinks, and learning about how JQuery (which Primefaces is based on) works,  I came up with the following example page which illustrates how to add a built in theme icon to a commandButton:-

<!DOCTYPE HTML>
<html xmlns=’http://www.w3c.org/1999/xhtml’
   xmlns:f=’http://java.sun.com/jsf/core’
   xmlns:h=’http://java.sun.com/jsf/html’
   xmlns:p=’http://primefaces.prime.com.tr/ui’>
<f:view contentType=’text/html’>
<h:head>
    <link type=”text/css” rel=”stylesheet”
     href=”#{request.contextPath}/themes/cupertino/skin.css” />    
    
    <style type=”text/css”>       
        .ui-widget, .ui-widget .ui-widget {
            font-size: 80% !important;
        }
        .ss-iconbutton {
            height:21px;
            width:30px;
        }
        .ss-spacer {margin-right:4px;}
        .ss-iconbutton-icon {
            background-color: transparent;
            border:none;
        }
    </style>
</h:head>
<h:body>
<h:form>
    <p:commandButton styleClass=”ss-iconbutton ss-spacer” onclick=”alert(‘Previous button clicked’)”
      image=”ss-iconbutton-icon ui-icon ui-icon-seek-prev”/>
    <p:commandButton styleClass=”ss-iconbutton” onclick=”alert(‘Next button clicked’)”
      image=”ss-iconbutton-icon ui-icon ui-icon-seek-next”/>                               
</h:form> 
</h:body>
</f:view>
</html>

Note the following points about the example:-

• The image property of the commandButton accepts a CSS class which loads the icon as a background property. If you inspect one of the command buttons e.g. with Firebug you will note that it applies this class to a <span> tag. The advantage of this is that the icon is defined in theme switched CSS rather than HTML. Note that as is normal when applying CSS classes, multiple classes may be passed as a space separated list as I have done.
• The example uses some of the standard jQueryCSS classes from WebContent/themes/cupertino/skin.css which is the skinning css present for each theme (in this case, the theme used is cupertino).
• Class ui-icon defines and loads an icon file for the theme. The chosen file may be modified by the jQuery state classes such as ui-state-default, ui-state-disabled, ui-state hover etc. Therefore,the added benefit of using the standard jQuery classes and icon files is that mouse hover automatically causes a switch of icon file to change the colour as determined by the theme, and things like enable/disable of the button also have the correct effect. In short – it all just works as it should with no effort if the built-in classes are correctly used.
• A fundamental mechanism used by jQuery for states like hover is to use Javascript functions triggered by the hover/mouseover to dynamically add and remove CSS classes from elements. For example, class ui-state-hover is added and removed on hover. this may be seen within Firebug when you hover over the button with the mouse. Note that therefore jQuery does not only use CSS Pseudo-classes such as :hover, :active to support this as one might expect. Examples of the latter will be found in skin.css  but they do not give the whole picture about what is going on internally. This is presumably done for reasons of browser compatibility as CSS pseudo classes do not work consistently across different element types and browsers (IE is especially limited in this regard).
• Primefaces/jQuery stores multiple icons in a single icon file, and uses the css background-position property with appropriate X and Y pixel coordinates in the file to pick out the desired icon. If an icon file is examined with Windows you will see all the icons store in the file in a matrix fashion. A set of classes is defined in skin.css , one for each icon, to encapsulate the position of that icon within the icon file. In the above example, ui-icon-seek-prev and ui-icon-seek-next have been used to select the next and previous icons used on the dataTable paginator.
• By default, the icon in a commandButton is given a border and a background colour, which in this case we do not want. These are removed by class ss-iconbutton-icon above which is also passed as one of the classes to the image attribute of the commandButton.
• Whilst we are to an extent going “under the hood” and using mechanisms and CSS classes which are not part of the documented Primefaces interface, they are a standard part of jQuery upon which Primefaces is based. When extending a user interface a fashion similar to the above, it is highly recommended to gain familiarity with the workings and operation of jQuery, as this can allow additional functionality to be harmonised with the existing functionality. This will typically make adding functionality easier, promote consistency with the existing feature set, and as in this case can give a number of side benefits for no extra work. Of course, using features that are not part of a formally documented Primefaces interface may mean that your code needs to change with later releases, but in this case, as these are jQuery features, it definitely feels the right way to go.

The jQuery UI web site, which contains full documentation, tutorials and demos,  may be found here. In my opinion it is certainly worth delving into further to augment your understanding of Primefaces, especially when you want to extend or reuse features and components in ways like the above example.

No Comments »

This is not immediately obvious; the following are the key points:-

• The Javascript code between the script tags needs to be embedded in XML “CDATA” sections
• The CDATA open and close tags need to be preceded with Javascript comment markers “//”
• You can freely use JSF Expression language within the Javascript and it will be evaluated and inserted (as with the “request.contextPath” below)

The following example xhtml page illustrates this:-

<!DOCTYPE HTML>
<html xmlns=’http://www.w3c.org/1999/xhtml’
   xmlns:f=’http://java.sun.com/jsf/core’
   xmlns:h=’http://java.sun.com/jsf/html’>
<f:view contentType=”text/html”>
<h:head>
<script type=”text/javascript”>
//<![CDATA[
    alert(“Hello World from #{request.contextPath}”);
//]]>
</script>
</h:head>
<h:body></h:body>
</f:view>
</html>

No Comments »

Update 24/3/2011 09:08

The event log reported an error on boot today (after a very slow boot with a long blank screen), seemingly for SATA 3 again (unless I am still confused about how the port mapping works)!

The driver detected a controller error on \Device\Ide\IdePort2

This is very strange as SATA 3 is no longer connected, so it appeared to be winging about an unused port. It is possible that Windows interrogated the port on boot and got an error even though nothing was connected, but it is still a bit weird. No immediate action has been taken – will monitor over the next few weeks.

The next step would probably be to add a new PCI express SATA controller and disable all the onboard SATA completely. This Startech controller offers 4 internal and 2 external ports, and needs a pci express X4 slot. It would therefore fit in the spare pci express X16 slot in my P6T, as pci express cards with less lanes can fit happily in a larger slot and use it partially. At the time of writing it is available from Lambdatek for around £66 inc VAT. It appears to get very mixed reviews, although my experience with startech has been good. A search did not reveal any other obvious cadidates for a reasonable price – just some higher end raid ones which also seem to have fans so hot and noisy as well as pricey!

Update 7/2/2011 12:54

I examined the event log again over the last few weeks and new errors were present for SATA 3:-

Error, Event 11, Atapi – The driver detected a controller error on \Device\Ide\IdePort2

This appears to be a new problem affecting the Samsung 1TB data drive. The drive has therefore been moved to SATA 6 and will be monitored over the next month.
It is still not clear whether these issues are due to one or more faulty cables or to faulty ports on the motherboard. The next test will probably be to swap the cables for new ones and monitor again, as this is much easier and cheaper than a full motherboard swap. Given that a single cause is more likely than multiple independant failures (unless a whole batch of cables were faulty or of poor design), a fault on the motherboard looks most likely for all the issues.
As multiple disks have now been affected (The Vertex and one of the Samsungs), at least it does not appear to be a fault with a particular device.

Update 7/11/2010 8:33

I examined the event log and the drive error has not occurred since before moving the cable to port SATA 5 (last occurrence of error was 2/11/2010 at 9:51)
Therefore my conclusion is that either port SATA 1 on the motherboard is faulty, or there was a poor connection, or a faulty cable issue which has been rectified when the cable was moved.

I may try some further tests – perhaps moving back to port SATA 1 with a new cable to further narrow down the issue.
I will check again in a couple of weeks for any errors and perhaps try a further test then.

The good news is that the evidence does not point to a faulty OCZ Vertex drive.

I have had occasional drive errors logged, as follows :-

Error, Event 11, Atapi – The driver detected a controller error on \Device\Ide\IdePort0.

It appears that this error relates to SATA 1, the OCZ Vertex, although the mapping between the event and the actual disk is hard to establish. There are Microsoft posts on how to do this here and here, however they do not use the same disk/port designation as above so they are not all that helpful.

The problem could be the drive, the motherboard controller, or the cable. To start to diagnose it, as at 12 noon on 2/11/2010 I have moved the OCZ Vertex onto Port SATA 5 with the same cable. I will monitor the issue and try further diagnosis over the next few days/weeks and post the outcomes here.

IF I do have to replace the existing OCZ Vertex (should be under warranty though…) there is now a Vertex 2 which is faster, and also a Vertex 2e which reduces the overprovisioning in the SSD. This overprovisioning is the area used for read-modify-writes/block cleaning where a block is swapped for one in the overprovisioning area. It is also used for wear levelling and bad block replacement. See here and here for for a discussion by AnandTech on this. See here for a  review of the Vertex 2e and comparisons with the Vertex 2.

No Comments »

This component binds a hotkey combination to specified javascript event handlers or ajax calls.
Unfortunately The Primefaces docs do not fully document the hotkey bindings.

This component appears to be based on the JQuery  js-hotkeys plugin which is documented here and has more details about the bindings and operation.

Note that some bindings are browser dependent – i.e. some browsers may not allow a browser hotkey to be overridden.
Also one gotcha to look out for is that hotkey prefixes (alt, ctrl) etc. are case insensitive but must be placed in alphabetic order, so ctrl-alt-s will not work.

No Comments »

This follows on from my previous post which highlighted an example of a valid DOCTYPE which still threw IE into Quirks mode.

The DOCTYPE issue has been something of a minefield – there are a number of different declarations and they are relatively complex, some have browser compatibility issues, and then of course different ones are needed for XHTML/facelets use.

It seems the holy grail of simplifying all of this is just to stick to the remarkably simple and highly compatible HTML5 DOCTYPE:-

<!DOCTYPE html>

• This has the following highly desirable characteristics:-
• It triggers standards mode for all known modern browsers
• It is backwards compatible
• It works with HTML pages and facelets/XHTML

See these posts here, here and here for more discussion on this.

It really does seem to solve all the DOCTYPE pain – I think I’ve died and gone to heaven!

No Comments »

A simple Primefaces table sample application was not displaying in Chrome. Some of the output data from the cells plus some other metadata was displayed as raw text with no formatting.

This answer to FAQ question 6 in the documentation PDF details the problem and the solution:-

6. With facelets some components like charts do not work in Safari or Chrome but there?s no problem with Firefox.
The common reason is the response mimeType when using with PrimeFaces with facelets. You need to make sure responseType is “text/html”. With facelets you can use the <f:view contentType=”text/html”> to enforce this setting.

I added this to the sample code and Chrome then worked correctly. I checked the Primefaces Showcase and note that the same is done there.

No Comments »

I recreated a new simple JSF application from scratch, in the end making it identical to an existing one that worked.
Each time I ran it on Glassfish 3.0.1 from Eclipse, it displayed a blank page as if not being sent to the faces servlet.
I checked every detail in making the apps identical – checking every configuration file and the xhtml page.
I cleaned and republished to Glassfish, but still no joy.

In the end I did a detailed examination of the deployment folders under the Glassfish domain (Eclipse deploys its apps under domain1\eclipseApps\ assuming you are using the default domain of domain1). I discovered that the Primefaces jar, primefaces-2.2M1.jar had not been deployed, even though the library was added and the web deployment assembly page had an entry for it.

I tried explicitly removing the app from Glassfish by using the Add and Remove… option on Eclipse’s server context menu for the Glassfish server, and then adding it back. This time, the deployment folders were correct and the library was deployed correctly. The application then ran correctly and displayed the page.

The lesson from this is that deployment to Glassfish 3.0.1 from Helios can be flakey, and just using a clean in Eclipse is not always enough to really clean out any issues. Removing the app and re-adding may be needed. If there is any strange behaviour, the deployment folders under the Glassfish domain should be examined early on to check that everything did in fact deploy – sometimes Eclipse will say it is all ‘synchronised’ when it may not be, and you will not always get smoking gun errors to lead you to the problem!

No Comments »

I have experimented with the following techniques for managing user defined collections of library jars in a Java EE 6 web application within Eclipse Helios. Much of this follows from this chapter in Eclipse Distilled:-

1. An interesting method described in “Eclipse Distilled” is to use a local simple project in the workspace as a library project just to hold eclipse folders to plant the jar collections in. This then allows all other projects in the workspace to reference the jars using relative workspace references, which gives complete portability to the workspace across different locations and operating systems. It does not however allow the library collections to be designated via a single name in the way that user libraries do – you end up with a just a pile of jars on the build path of a referencing project. You can however at least add them all at once via multi select of the jars from a folder in the library project.
2. Another way is to use User Libraries, again as in the above chapter. They have the benefit of allowing a single name to designate the collection of jars, they can be used from anywhere in the workspace, and they can also be exported and imported between workspaces along with other workspace settings. The drawback is that the library location must be defined as an absolute file system location, which means that unlike the above method, you can’t just copy a workspace with all the libraries in it to somewhere completely different and have it ‘just work’ – you have to set up the library locations. However, you also have to typically do this for JSF and JRE libraries, so unless you have a lot of them it is not such a chore.
3. Another mechanism is to use eclipse Classpath Variables, which allow a folder location in the filesystem to be defined and then used via a name. Again, the definitions need to be set up on each different system/location that you migrate the workspace to.
4. Classpath Containers are a dynamic form of reference where a named reference is intercepted by code in a class. This is used by plugins, and allows the definition to change dynamically in response to other environmental changes detected by the plugin code.

On balance, in the absence of a plugin/Classpath Container approach, my favoured option is to use User Libraries for tools like Primefaces as they are convenient and look tidy on the build path even when it gets large. In an ideal world, it would be helpful if User Libraries allowed workspace relative references. This would permit the libraries to be packaged within the workspace which would mean no setup is needed to port the workspace. The downside is that when multiple workspaces are used, you end up with library duplication unless you use an absolute location outside the workspaces. However, you could have a libraries folder under a parent folder above all the workspaces. Then if a relative reference like ..\libraries was permitted you get your cake and eat it – no duplication and a portable collection of workspaces with a single copy of all the associated libraries.

However for now, it’s User Libraries for me. To create a User Library for a project in Eclipse, do the following :-

1. Select project properties/build path/Configure build path, then select the Libraries tab in the right hand pane.
2. Click Add Library…, select User Libraries, and hit Next.
3. Click User Libraries… which will display the User libraries page.
4. Click New to add a library, then add jar(s) to it with Add Jars…
5. Having added a jar, you can expand its definition using the tree control in the middle pane, and then double click on javadoc location, and/or Source attachment to add a jar or zip containing the javadocs/source for the jar.
6. The library is then accessible from all the projects in your Workspace. You can export it to other workspaces by using File/Export/Preferences.
7. Note that typically you need to tell Eclipse to deploy the libraries to WEB-INF\lib when deploying. Under Eclipse Helios, you do this using the Deployment Assembly options page under the project properties, adding an entry for each library you need deploying. When adding, you can elect to add from the java build path, which makes the most sense if you are deploying libraries you have added to the build path. Note that in previous versions of Eclipse, this option on the project properties was designated J2EE Module Dependencies.

No Comments »