Archive for the 'Knowledge Base' Category

January 7th, 2010
5:45 pm
Using Fonts in CSS

Posted under CSS
Tags , ,

The following articles are helpful re correct choice of font, and how to size and use the various units correctly.
Issues such as providing sensible fallbacks in the font list to cater for different browsers are covered, together with the use of the various absolute and relative sizing units, and how fonts are inherited

http://www.w3schools.com/css/css_websafe_fonts.asp

http://www.w3schools.com/css/css_font.asp

Gernally accepted advice is as follows :-

  1. Define a default family in CSS for the body tag, consisting of a suitable fallback stack. Use a sans serif for screen use as it is more readable
  2. Define a default size using percent in the body tag, then use ems after that for relative sizing. This gets around some browser quirks with IE, and allows resizing by the user for all browser types.
  3. The default will be inherited throughout the document. However I have found issues when tweaking local CSS files during testing – sometimes old values ‘stick’ perhaps due to caching effects.
  4. There is an issue apparently with some older browsers that tables do not inherit a default body font. Therefore, the default should be specified for body, table as in the example below.
  5. Note that not all fonts in the stack (such as the basic fallback sans-serif) are necessarily scalable, so size changes may not appear to work if an inferior fallback font is picked up.

The following is an example stack in css :-

body, table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #000000;
}

No Comments »

January 7th, 2010
5:14 pm
Hover and other effects in CSS using Pseudo Classes

Posted under CSS
Tags , , ,

There are plenty of sites about showing how to do hover and click (=active) effects on an element (typically a link or image/image button) using Javascript, but with modern browsers (including IE7 and above but not IE6) this is completely unnecessary as it can be done entirely with CSS. The advantages are clear – no Javascript is needed, the CSS is straightforward, and no round trip to the server is needed. The typical effects used are to swap images or highlight using a different border or background.

These effects can now be performed on any element, not just a link, but check out compatibility as IE has had some issues with this. I have performed this on image buttons as well as links and had no trouble.

The W3schools article on Pseudo Classes is here. An example of using the hover effect to switch a background image via CSS may be found here. (Note the importance of setting an explicit width and height in the CSS – required because the example uses background images).

The pseudo class can be added to an existing style class. The following simple example shows an ICEfaces Image button with a style class, with modified pseudo classes used in the CSS to highlight the border differently on hover and active (active in CSS terms means click).

CSS

.ImageButton {
	margin: 1px;
	padding: 1px;
}
.ImageButton:hover {
	padding: 0px;
	border: 1px solid #ffa600;
}
.ImageButton:active {
	padding: 0px;
	border: 1px solid #ffd800;
}

JSF

<ice:commandButton image="images/arrow-up.gif"
                   styleClass="ImageButton">
</ice:commandButton>

No Comments »

January 7th, 2010
3:15 pm
Eclipse error on opening jsf/jspx page with web page editor

Posted under Eclipse
Tags ,

I have run in to an issue with Eclipse (Galileo 3.5.1) when opening a jsf page with the web page editor – I get the error:-

“Could not open the editor: null argument:”

I tried the -clean flag on startup as per this post but this did not fix the problem. I also tried deleting this metadata file but this had no effect in this case

This appeared to be due to Eclipse disliking the syntax of some sections of the code I had commented out. In one case, adding the following comment:-

<!–  value=”#{appRoles.selected}” –>

caused the error to occur, and removing it caused the error to disappear. The cause was not always consistent – in another copy of this same page I had to delete a commented out table column to fix the problem:-

In general, I think that certain usage of commented out sections can trip Eclipse up and cause the editor to fail. removing these causes the problem to disappear.

Note that the error does not occur with the JSP editor, so this can be used instead or to edit the sections causing the problem.

No Comments »

January 7th, 2010
1:14 pm
Editing HTML and CSS – TopStyle

Posted under CSS
Tags , , ,

Topstyle Pro is my preferred editor for HTML and CSS. It is primarily billed as a CSS editer and  previewer, but has evolved into an equally powerful HTML editor. It has dynamic in-window previewing of changes, which is especially useful when tweaking tricky CSS, and has intelligent code/tag completion, error detection/correction/validation plus a large number of other powerful features. I find it especially useful as, not being a CSS expert who uses it all the time, the code completion, error detection/correction and dynamic preview help to fill in the missing/forgotten knowledge gaps.

No Comments »

January 7th, 2010
12:43 pm
CSS Cascade Order, Inheritance, Priority and Specificity

Posted under CSS
Tags , ,

The following articles give details of the resolution of styles when multiple stylesheets are cascaded, and how styles are prioritised when multiple styles affect the same element.

  • This article is a helpful introduction to the basics.
  • This article from W3.org gives the full specification, but if starting out you are advised to read the above intro first!
  • This article from David’s Kitchen gives a good insight into CSS Style inheritance, priority and the infamous specificity (try saying that one when you’ve had a few too many!)  I found it easier to understand particularly on priority than the W3.org spec above, although the latter is obviously the last word on how it all works.

No Comments »

January 7th, 2010
11:55 am
Using Unicode Characters in HTML

Posted under HTML
Tags , ,

Numeric Unicode references can be added using the format :-

  • &#N; (for decimal unicode value N)
  • &#xN; (for hexadecimal unicode value N)

The use of Webdings and Wingdings font families is not universally compatible and is considered a hack – use unicode characters instead as above.
Wikipedia has a good article on this here.
Full unicode character charts may be found on unicode.org here.

No Comments »

January 7th, 2010
10:38 am
Using Floats in CSS

Posted under CSS
Tags , , , ,

The following sites give a good introduction and insight into the use of floats and some of their quirks for the unwary.

This Excellent introductory float tutorial from Max Design is well worth working through entirely as a starter for beginners.

This article from CSS Newbie details some of the quirks of floats and how content flows around floated elements, and how container height is affected. There is a fundamental point which the article illustrates, but which I could not find spelled out clearly and obviously in other articles anywhere. When other elements flow around a floated one, it is the content area of their CSS boxes which flow. It is therefore perfectly possible (and normal) for the floated element to end up sitting inside the margin, border and padding areas of the elements which float around it. The article also describes how the floated element can overlap (extend beyond) the border of the flowing  element if for example the floated element is longer. This is not what you might expect. However, when the flowing element is itself floating, then the height of the (inner) floating element dictates the height of the flowing element.

The ‘flowing of content area’ behaviour is used when designing multi column layouts, as this article from Comunity MX illustrates. For example in a 2 column layout, the left column content is placed in a ‘float: left’ div. The adjacent right colum flows around it, and has a left margin set to the width of the left column plus any desired gap.

This article by Matthew James Taylor describes a template for a 3 column floating layout with header and footer. The interesting thing about this is that Matthew does not use any CSS hacks or browser specific coding, but manages to achieve wide cross browser compatibility. He also has a number of other templates, all freely available, an addition to an interesting article on how to acheive equal height column backgrounds, again by nesting floating column divs inside other divs which are also floating.

No Comments »

January 5th, 2010
5:34 pm
Java Bean Introspection and dynamic Sorting/Comparison

Posted under Java
Tags , , , , , ,

Whilst this can be done with the Reflection API, there are standard APIs that do this for Beans and which are therefore a better choice.

java.beans.beaninfo is a standard API for bean introspection. Better still for many applications is the Apache Commons BeanUtils library.

This provides a really simple interface for many operations. For example, get/set of simple bean properties dynamically is a single call as in this example :-

Employee employee = ...;
    String firstName = (String)
      PropertyUtils.getSimpleProperty(employee, "firstName");
    String lastName = (String)
      PropertyUtils.getSimpleProperty(employee, "lastName");
    ... manipulate the values ...
    PropertyUtils.setSimpleProperty(employee, "firstName", firstName);
    PropertyUtils.setSimpleProperty(employee, "lastName", lastName);

One of my requirements was a dynamic sort comparator for use in sorting JSF tables by any column. A static comparator is fast, but messy, as you need to hard code switch statements etc. for the property to be compared. BeanUtils has a better option and can create a dynamic comparator for you as in the following code fragment from here :-

List tvShows = new ArrayList< WorldsGreatestTVShow>();
    //group (sort) by actor
    BeanComparator actorComparator = new BeanComparator("actorName");
    Collections.sort(tvShows, actorComparator);
    //group (sort) by producer
    BeanComparator producerComparator = new BeanComparator("producerName");
    Collections.sort(tvShows, producerComparator);

However, there is a performance hit with using this – one comparison cited 16ms using a hard coded static comparator, compared to 400ms using the BeanUtils BeanComparator. Always one to strive for perfection, I said to myself “why can’t I have both” – i.e. a dynamically created comparator for no effort but which performs as well as a static one? Well, after a bit of searching I found one in the form of the Cojen Project. This is a project aimed at supporting dynamic bytecode generation and disassembly. However, the project also provides a number of powerful utility classes which use the bytecode generation to create fast dynamic Bean Comparators with the same peformance as a statically coded comparator, perform fast Bean Property Introspection, and fast Pattern Matching.

Here is an example comparator which orders threads by name, thread group name, and reverse priority :-

 Comparator c = BeanComparator.forClass(Thread.class)
     .orderBy("name")
     .orderBy("threadGroup.name")
     .orderBy("-priority");

I particularly love the fact that the customising methods e.g. orderBy return the comparator instance so that you can chain them together as above. Sorting by multiple properties is supported as the above example shows. All the generated objects are fully serializable. I  also love the fact that you can prefix a property name with a minus sign to reverse the comparison order for that orderBy, which is great for toggling column sort orders with JSF etc.  A brief test had it working correctly in no time, and it does indeed appear to be just as fast as a static comparator and very flexible. In future, I would make Cojen my first port of call for bean pattern matching / introspection / comparison without hesitation, and then look at Apache Commons BeanUtils only if Cojen couldn’t do what I needed, then failing that java.beans.beaninfo or finally the raw reflection API.

I really can have my cake and eat it! Sex on a stick!

No Comments »

January 5th, 2010
4:56 pm
@ManyToMany issues with Eclipselink 1.1.2

Posted under JPA
Tags , , , ,

I found a number of issues when configuring a many to many relationship, but eventually found a working solution.

1/  This example for a many to many uses referencedColumnName when it does not need to – it was a hangover from an example using multiple join columns. If you do this with Eclipselink 1.1.2 and Oracle (in my case XE 10g), the columns are created with data types of varchar2(255) instead of the default of number(19)  :-

      @ManyToMany
      @JoinTable(name="AppUserRole",
                 joinColumns =@JoinColumn(name="AppUserID",
                                          referencedColumnName="AppUserID"),
                 inverseJoinColumns=@JoinColumn(name="AppRoleID",
                                          referencedColumnName="AppRoleID”))

The referencedColumnName attribute is the cause of this issue. Leaving it out causes correct column types. It is only needed for multiple column joins (which break anyway see 2/), and so should not be used. This therefore works correctly and is the recommended format to use  :-

      @ManyToMany
      @JoinTable(name="AppUserRole",
                 joinColumns =@JoinColumn(name="AppUserID"),
                 inverseJoinColumns=@JoinColumn(name="AppRoleID"))

2/ Using a many to many as in 1/ but with multiple join columns causes eclipselink bug 300485. (Although listed as a one to many bug it also happens with many to many). This is not due to be fixed until eclipselink 2.1. The bug gives a query parameter not found error for an internally generated query used when eclipselink lazily loads a relationship collection.

3/ Leaving out the @JoinTable and only having the @ManyToMany annotation works ok, but gives an XML column name resolution error from eclipse for one of the join columns. This is purely an ‘invalid validation’ however, as the code runs fine against a database created from it.

4/ using the xml annotations in orm.xml along with just an @ManyToMany annotation in the code works fine, but you do get some validation errors from Eclipse as the validation does not appear to merge the annotations and xml correctly when validating :-

<entity>
  <attributes>
   <many-to-many name="appRoles">
    <join-table name="AppUserRole">
     <join-column name="AppUserID" column-definition="number(19)"/>
     <inverse-join-column name="AppRoleID" column-definition="number(19)"/>
    </join-table>
   </many-to-many>
  </attributes>
 </entity>

This would be the preferred route if anything database specific  was needed, such as the column-definition attributes for Oracle in the example.  The “@ManyToMany” annotation on the entity may be superfluous in this case but is a helpful label. A comment in the code that there are overrides in orm.xml would be helpful. The above fragment was tested but without the column-definition attributes on the columns – these are shown as examples of how to add database specific column definitions without having to pollute the code with them via annotations.

The intention here would be to use xml in conjunction with annotations, with annotations used for all the standard metadata. Different versions of orm.xml and persistence.xml could then be swapped in and out for different back end databases, keeping the code standard. The same approach has been advocated to permit using Oracle sequences here.

No Comments »

January 5th, 2010
9:05 am
JPQL Query Editing Tools

Posted under JPA
Tags ,

Not too many of these around…

The plan is to donate the Oracle Weblogic Workshop JPQL Query Editor but haven’t seen a release of that yet.

jpaquerytool looks like a possible – a stand alone query tool. You need to feed it your jars in order to give it your entity definitions, then off you go. It mentions Toplink Essentials but not Eclipselink, and it has to use proprietary apis to get the entity mapping metadata so may have issues but worth a look.

No Comments »