Recent Notes
Displaying keyword search results 1 - 10
Created by James on May 03, 2012 14:54:46
Last update: May 03, 2012 14:54:46
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. For HTML4 browsers it will revert back to using the old onhashchange functionality. All major browsers are supported.
This is a simple test page to get started:
<html>
<head>
<title>Test History</title>
...
Note: state url must be provided for IE to generate a unique hash. YOu can prefix the state url with '?' ('#' does not work).
Created by Fang on January 31, 2012 15:40:34
Last update: January 31, 2012 15:41:28
This is a simple Hello World application with Spring 3 MVC. Like the default Apache HTTPd welcome page, it displays " It works! " when successfully deployed. The sole purpose is to show the minimum elements needed to setup Spring 3 MVC.
I use Maven since it's so much easier than downloading the dependencies manually.
Directory layout:
./src
./src/main
./src/main/webapp
./src/...
pom.xml :
<?xml version="1.0" encoding="UTF-8"?>
<project...
WEB-INF/web.xml :
<?xml version="1.0" encoding="UTF-8"?>
<web-app...
WEB-INF/applicationContext.xml (empty, but needed):
<?xml version="1.0" encoding="UTF-8"?>
<beans x...
WEB-INF/spring-servlet.xml :
<?xml version="1.0" encoding="UTF-8"?>
<beans x...
WEB-INF/jsp/home.jsp :
<!DOCTYPE html>
<html>
<head>
<title>H...
Build with:
mvn clean package
The resulting webapp is target/springmvc.war .
Created by Fang on January 28, 2012 13:24:09
Last update: January 28, 2012 13:31:22
This is a simple JSP custom tags library with tag body. Just like the JSF counterpart , it splits a string and repeats the body for each word, i.e., with this markup:
<%@ taglib uri="http://custom.tag.com/demo" prefix...
output:
<html>
<body>
<p>Hello Tigger!</p>
<p>H...
With Maven, this is the directory structure:
./src
./src/main
./src/main/resources
./s...
There are three files to write:
pom.xml :
<project xmlns="http://maven.apache.org/POM/4.0.0"...
src/main/java/tagdemo/IterateTag.java :
package tagdemo;
import java.io.IOException...
src/main/resources/META-INF/demotag.tld :
<?xml version="1.0" encoding="UTF-8"?>
<!DO...
Build with:
mvn clean install
To use it as a dependency in other Maven projects:
<dependency>
<groupId>tag-demo</groupId>
...
Created by Fang on November 08, 2011 20:55:00
Last update: November 21, 2011 18:19:44
In the simple taglib example , I used a tag handler class to implement a taglib. This is an example to implement a taglib with a UI component. The purpose is to use a custom tag to split a string and print each part in a separate paragraph, i.e., print
<p>john</p> <p>steve</p> <p>mike</p> with custom tag <my:foreach> : <my:foreach var="who" value="john steve mike"> ... These are the files: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0"... src/main/java/com/example/UIForeash.java : package com.example; import java.io.IOExcep... src/main/resources/META-INF/faces-config.xml : <?xml version="1.0" encoding="UTF-8"?> <faces-c... src/main/resources/META-INF/foreach.taglib.xml : <?xml version="1.0" encoding="UTF-8"?> <facelet... How to use: Put the JAR file generated by the above project in the WEB-INF/lib folder of the web app. If the web app is a Maven project, just add the taglib project as a dependency:...
Created by Fang on November 03, 2011 19:47:38
Last update: November 08, 2011 20:24:47
This is a step-by-step example to create a really simple facelet taglib (in JSF 2 with Maven). Create a simple Maven project with:
mvn archetype:create -DgroupId=com.example -Dartif... Three files are created as a result: pom.xml src/main/java/com/example/App.java src/test/java/com/example/AppTest.java This project should be able to build with: mvn package Add facelet API dependencies to pom.xml : <project xmlns="http://maven.apache.org/POM/4.... The compiler plugin section is optional. Remove src/main/java/com/example/App.java , create a new Java class as the facelet Tag Handler ( HelloTagHandler.java ): package com.example; import java.io.IOExcep... This tag handler simply prints a "Hello" message. Create facelet tag declaration file src/main/resources/META-INF/hello.taglib.xml : <?xml version="1.0" encoding="UTF-8"?> <facelet... Build the JAR with mvn clean package Optionally, install it to the local repository: mvn install To use the taglib, simply drop the...
Created by Fang on November 07, 2011 09:41:57
Last update: November 07, 2011 09:42:25
Using JSTL tags in JSF facelets is quite simple: just add the XML namespace for the JSTL tags and use them in the page.
An example of using the <c:if> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...
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 Fang on October 28, 2011 13:49:40
Last update: October 30, 2011 19:23:25
This is a simple example to demonstrate the templating power of JSF facelets. If you've used struts tiles before, you'll recognize the simplicity of templating with facelets. I've stripped out everything else except the pages themselves, just to put our focus on facelets. This is a Maven based project, and you need Tomcat (or any servlet container) to run the resulting webapp. To begin with this is the list of files:
./pom.xml ./src/main/webapp/home.xhtml ./src... I left faces-config.xml in there for completeness sake, it may not be needed. The Maven POM ( pom.xml ): <?xml version="1.0" encoding="UTF-8"?> <project... Web app configuration ( WEB-INF/web.xml ): <?xml version="1.0" encoding="UTF-8"?> <web-app... Empty WEB-INF/faces-config.xml : <?xml version="1.0" encoding="UTF-8"?> <!-- Thi... index.jsp is simply a redirect to home.jsf : <% response.sendRedirect("home.jsf"); %>...
Created by Fang on October 28, 2011 14:49:53
Last update: October 28, 2011 14:52:19
Facelet templates can be nested, for example, a page can use a template which inherits from another template. To demonstrate this, let's start from the simple example and make these additions:
Add a place holder for CSS style sheets in WEB-INF/templates/default.xhtml :
<h:head>
<title>Facelets Template Demo</tit...
Add a derivative template ( WEB-INF/templates/default-style.xhtml ) which provides CSS:
<?xml version="1.0" encoding="UTF-8"?>
<ui:comp...
Add a page that uses the styled template ( home-style.xhtml ):
<?xml version="1.0" encoding="UTF-8"?>
<ui:comp...
The only difference between this file and home.xhtml is the template being used.
Compare the display of the pages home.xhtml and home-style.xhtml .
