Recent Notes
Displaying keyword search results 1 - 10
Created by Fang on October 31, 2011 21:10:10
Last update: October 31, 2011 21:13:10
In this example I'll add a parameter to a facelets template. The example contains three tabs, each tab points to a different page. The tab control is shared among all pages, therefore, it is put in the template.
Starting from the simple facelet example , make these additions:
Create a new template WEB-INF/templates/tabs.xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
Add a page for the about tab ( about.xhtml ):
<?xml version="1.0" encoding="UTF-8"?>
<ui:comp...
Add a page for the news tab ( news.xhtml ):
<?xml version="1.0" encoding="UTF-8"?>
<ui:comp...
Add a page for the partner tab ( partner.xhtml ):
<?xml version="1.0" encoding="UTF-8"?>
<ui:comp...
Build and re-deploy the application. Launch the browser and load page http://localhost:8080/facelet-demo/about.jsf .
This is a screenshot:
Created by Fang on October 30, 2011 20:35:17
Last update: October 30, 2011 20:37:03
This note lists some of the different behaviors I found using different JSF implementations. In the simple JSF facelet example, I used Sun's reference implementation version 2.0.0-RC:
<dependency> <groupId>javax.faces</gro... With this version, the DOCTYPE declaration is dropped when the page is rendered. It doesn't matter what DOCTYPE you declare in your templates, the facelet engine simply drops it. The problem with this is, your page is always displayed in quirks mode , despite your intentions to require standards compliant mode. The DOCTYPE problem is fixed in release 2.0.2-FCS . Change the dependency in pom.xml to: <dependency> <groupId>javax.faces</gro... and test again, you'll find that DOCTYPE is faithfully passed over to the browser (view source at browser). You can delete the DOCTYPE declaration in the xhtml template...
Created by James on May 19, 2011 16:02:40
Last update: May 19, 2011 16:05:05
Finally, MathJax makes showing math equations in the browser a reality! Here are some simple demos.
A simple example:
<!doctype html>
<html>
<head>
<title>Math...
Add HTML styling for Firefox:
<!doctype html>
<html>
<head>
<title>Math...
Created by James on September 07, 2010 03:11:39
Last update: January 11, 2011 20:28:33
I didn't know how hard it was to vertically align something to the middle until I had to do it. An excellent writeup about the various techniques (or should I say hacks?) to achieve this is here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Here I present a technique with the help of jQuery. To make it simple, what I'm doing is to display a single line of text in the middle of the page instead of at the top. The markup is made simple because the logic is moved to JavaScript. There are two requirements to make this work: The parent container uses relative positioning jQuery code added to re-position the content with absolute positioning
<!doctype html> <html> <head> <title>Vert... For some reason, the following code did not work although...
Created by James on July 19, 2009 20:51:23
Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by Fang on July 27, 2010 16:42:08
Last update: July 30, 2010 18:39:48
Three key concepts are associated with internationalization (I18N): Locale: a locale is identified by a language code along with an optional country code. For example: en for English, en_US for US English, zh_CN for simplified Chinese. Resource Bundle: a resource bundle is a properties file localized for a specific locale. For example, messages_en.properties may be a resource bundle for English, messages_zh.properties may be a resource bundle for Chinese. Basename: a basename identifies the same set of messages represented by all related resource bundles. In the above example, the basename is messages . When a user request comes to a web application, the resource bundle is retrieved using the basename and the preferred locales . The preferred locale can be either application-based or browser-based . When...
Created by Fang on April 01, 2010 22:24:58
Last update: April 02, 2010 02:49:38
In this note I'll show you how to create and package a JSP custom tag. The purpose of this tag is to display a random splash image for a home page, among a set of images. We should be able to add or delete candidate splash images from the WAR archive without the need to change the JSP. This is the intended use of the tag:
<%@ taglib uri="http://custom.tag.com/demo" prefix... In the above example you provide a set of images named splash*.png (e.g., splash1.png, spalsh2.png, ...), and the tag will pick a random one to display when the JSP is rendered. Let's get started. I'll use Maven for this purpose. Create the standard Maven directory structure ./pom.xml ./src ./src/main ./src/main/jav... pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0"... SplashTag.java package tagdemo; import java.util.ArrayList......
Created by James on October 11, 2009 21:15:53
Last update: October 11, 2009 21:19:39
Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors).
Example 1: Nifty Cube with JavaScript
<html>
<head>
<base href="http://www.html.i...
Example 2: modx Simple Rounded Corner Box
<html>
<head>
<title>Round Corner</title>
...
Example 3: CSS3 (does not work in IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Example 4: This is one that actually works ! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Created by James on July 13, 2009 02:56:04
Last update: July 15, 2009 15:56:53
The CSS 2.1 spec has these definitions about the position property: static : The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply. relative : The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. absolute : The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block . Absolutely positioned boxes are taken out of the...
Created by James on February 22, 2009 00:12:50
Last update: February 23, 2009 02:55:31
This note records my struggle to get a checkbox aligned with its label in Firefox and IE. Starting HTML code. Use default attributes. Both checkbox and label float to the left.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... IE looked OK. Firefox is messed up. Long label shifted to the next line. IE 7: Firefox 3.0.6: Set width of label to that of the containing DIV: <style type="text/css"> label { display:... Both IE and Firefox shift the label to the next line. That's reasonable because the DIV isn't wide enough to contain the label and the browser tried its best to render the label properly. IE 7 and Firefox 3.0.6: Set width of label to be less than the containing DIV: <style type="text/css"> label { display:......
