Recent Notes
Displaying keyword search results 1 - 10
Created by James on February 02, 2012 09:20:22
Last update: February 02, 2012 09:20:22
This example came from the jQuery validation documentation. The required rule can be used to validate a required selection box when you set the value of the first option to empty.
<!DOCTYPE HTML>
<html>
<head>
<scrip...
The error message is the title since no error message is specified. A more fully defined validation check would look like this:
$('#my-form').validate({
errorElement: "p",
...
Created by Fang on January 04, 2012 09:54:05
Last update: January 04, 2012 09:54:05
There are two ways to validate a form with JSF: jsf validation on the page with <f:validate...> tags (for example: <f:validateLength> , <f:validateRegex> , etc.), or JSR303 bean validation. This note is about how to customize messages for JSR303 bean validation. The validation message is specified in the message attribute for each validation annotation type. The mesage attribute is not a literal string, but a string that is interpolated in various ways. For example, the default validation message for AssertFalse is {javax.validation.constraints.AssertFalse.message} , which is replaced with the corresponding string in ValidationMessages.properties (or ValidationMessages_tr.properties , ValidationMessages_es.properties , depending on the locale). This is the contents of ValidationMessages.properties in the hibernate validator reference implementation:
javax.validation.constraints.AssertFalse.message =... To customize the messages, just provide the new value in...
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 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 .
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 March 13, 2011 13:44:37
Last update: March 21, 2011 11:30:55
This is a jQuery input control that lets you enter any number of input rows of name and value pairs.
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Created by Captain on November 22, 2010 04:34:37
Last update: March 05, 2011 20:42:17
<!DOCTYPE html>
<html>
<head>
<style ...
Reference:
Custom Resolutions on Intel Graphics
Created by Dr. Xi on August 31, 2008 20:43:44
Last update: January 22, 2011 12:48:08
It's probably more useful to make the JavaScript executor a bookmarklet. That way it gains access to the page on which it is invoked. Therefore, more helpful while debugging. Here's the code:
<html>
<body>
<a href="javascript:(funct...
Or, you can add this link to your bookmarks, name it "JS Executor". For a full featured JavaScript console, you may need Jash
Created by James on March 29, 2010 03:11:38
Last update: January 11, 2011 20:19:39
This is an age old problem. Since it comes up time and time again, I'm writing this down for future reference. Let's start with a two-column layout generated by the 2 Column Layout Generator :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans... It renders like this: The left column is shorter than the right column. How to make the left and right column the same height? Adding height: 100% to the style sheet of the left column doesn't cut it. There are several hacks, none of them are straightforward: In search of the One True Layout Faux Columns Creating Liquid Layouts with Negative Margins In short, there's no instruction in CSS that tells a DIV that its height should be 100% of that of the...
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...
