Recent Notes
Displaying keyword search results 1 - 10
Created by James on September 21, 2012 12:18:10
Last update: September 21, 2012 12:23:07
When one element overlaps another, which one gets the event when you click on it? The top one, of course! Not so for IE. If the top element is transparent, the click falls through on areas in the bottom element where there's "content".
Try the simple HTML below. When you click on the letter "A", the bottom DIV gets the event in IE.
<!doctype html>
<html>
<head>
<style ...
There's a CSS property pointer-events which controls click through behavior in case of overlay, but it doesn't have any effect in IE.
Created by James on September 20, 2012 10:22:58
Last update: September 20, 2012 10:22:58
This is a simple jQuery placeholder plugin that can be used on both text and password fields. I've been using the Mathias Bynens plugin for a while and it has been quite useful. I decided to create my own plugin because of two problems: The interaction between the Mathias Bynens plugin and jQuery validation can be quite intricate. Placeholder text is lost once the input field gets focus. This can be a problem when I want to auto-focus on a field, say user id on a log in form. I must mention that although it worked for me, this plugin has not been thoroughly tested. Feel free to provide feedback if you see problems.
(function($) { $.fn.placeholder = function(... Since it uses absolute positioning, you...
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...
