Archive for November, 2010

Next Page
November 8th, 2010
12:51 pm
Setting Column Headers on a Primefaces Table

Posted under JSF
Tags , , ,

The normal way to add JSF table headers is to use a header facet :-

<p:column sortBy=”#{car.model}” >
    <f:facet name=”header”>
        <h:outputText value=”Model” />
    </f:facet>
    <h:outputText value=”#{car.model}” />
</p:column>

In Primefaces tables, this can give column width and alignment issues in some cases, so the headerText attribute of the column should be used instead :-

<p:column headerText=”Model”  sortBy=”#{car.model}”>
    <h:outputText value=”#{car.model}” />
</p:column>

No Comments »

November 8th, 2010
12:26 pm
Using JSTL Functions in JSF EL e.g. to return list size

Posted under JSF
Tags , , ,

Unfortunately some methods of backing beans, such as size() to return the number of entries in a list in a bean, are not directly callable from an EL expression as they are not exposed as standard getters. Whilst expressions on a facelets page should be used with care so as not to include business logic on the page, they are sometimes useful. One of my use cases has been to optionally add a css class into a stylclass attribute to correct the width of a table header when scrollbars are present (when enough rows are present to cause scrolling).

You can add additional properties to the beans to do this, but an easier way is often to use JSTL functions on the page. The following declaration includes the namespace for them, using prefix fn:-

<!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:fn=”http://java.sun.com/jsp/jstl/functions”
xmlns:p=”http://primefaces.prime.com.tr/ui”>

 

The following code fragment calls the length function to return the size of a list :-

<p:dataTable var=”car” value=”#{tableBean.carsSmall}” scrollable=”true” 
         styleClass=”#{fn:length(tableBean.carsSmall) lt 8 ? ” : ‘ss-tableheader-scrolladjust’}” height=”200″ >

 The javadoc for the complete set of jstl functions may be found here.

No Comments »

November 5th, 2010
6:34 pm
Issues with JSF h:outputStylesheet and Primefaces/jQuery skinning

Posted under JSF
Tags , , , , ,

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 »

November 5th, 2010
11:08 am
Tying Primefaces page styling to the theme

Posted under JSF
Tags , , ,

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 »

November 4th, 2010
5:22 pm
Creating Primefaces icon buttons using the built in theme icons

Posted under JSF
Tags , , ,

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 »

November 4th, 2010
1:54 pm
How to add inline Javascript to a Facelets/XHTML page

Posted under JSF
Tags , , , ,

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 »

November 2nd, 2010
12:10 pm
Panther–Asus P6T SATA Drive Errors & Port Allocations

Posted under Windows 7
Tags , , , , ,

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.

 

P6T Port

PM/PS Bios Designation

Drive
SATA 1 PM (Primary Master) was OCZ Vertex 128GB (moved to SATA 5 to diagnose port event errors)
SATA 2 PS (Primary Slave) Sony/Optiarc DVD writer
SATA 3 SM (Secondary Master) not used (possibly faulty, moved to SATA 6
SATA 4 SS (Secondary Slave) Samsung HD0103SJ 1TB, old System drives, top/cooler mounted
SATA 5   OCZ Vertex 128GB (moved from SATA 1)
SATA 6 N/A Samsung HD0103SJ 1TB, Data drive, bottom/Vert mounted – moved from SATA3

 

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 »

Next Page