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 Fang on March 30, 2012 15:04:04    Last update: March 30, 2012 15:04:04
Spring MVC 3.1 can send either JSON or HTML response on the same URL, depending on the type of response requested. With this mechanism, a page can be sent when directly requested from a link, but a JSON response can be sent in response to an AJAX request. This is the controller code: package com.example; import java.util.Map; ... In the above example, JSON response will be sent when the HTTP request contains header "Accept: application/json". HTML response will be sent then the header is "Accept: */*", or "Accept: text/html", or anything else. You can add a limitation that the HTML response does not produce "application/json". But then the question is which response will be sent when the HTTP header is "Accept: */*"? Both methods will...
Created by James on January 11, 2011 22:08:26    Last update: February 03, 2012 11:23:25
By default Firefox puts a dotted line box around the link or button label when you click them. Sometimes it's annoying and makes your sexy buttons look ugly. You can get rid of the dotted lines for links with outline:none in CSS, but that doesn't work for buttons. <!doctype html> <html> <head> <style t... For buttons you need " button::-moz-focus-inner { border: 0; } ": <!doctype html> <html> <head> <style t... I've also seen this: /* get rid of those system borders being generated... For more information : Remove Button Focus Outline Using CSS
Created by James on February 02, 2012 16:09:05    Last update: February 02, 2012 16:09:17
flowplayer is another way to embed Flash in a web page. The code looks like this: <object width="6400" height="380" data="swf/flowpl... You need to download two swf files: http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf http://releases.flowplayer.org/swf/flowplayer.controls-3.2.0.swf
Created by James on January 26, 2012 21:23:56    Last update: January 26, 2012 21:23:56
In an HTML page, elements can overlap because of position styles. When there's an overlap, elements coming later in the HTML code are displayed on the top. This can be altered by specifying z-index in the CSS. Elements with higher z-index are placed on the top. However , z-index only works for elements that are not static positioned. Static positioned elements are always at the bottom compared to relative , fixed and absolute positioned elements. This is a test page: <!DOCTYPE html> <html> <head> <style t... Effects of z-index can be tested by adding it to the elements, for example: <div id="bg" class="big" style="z-index: 3"></div>...
Created by Fang on December 06, 2011 19:03:25    Last update: December 07, 2011 08:54:11
Our custom tag, as implemented in the previous note , is broken when a template is used. Create a template file ( home-template.xhtml ): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... and a test page that uses it ( home.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Then request the page with URL: http://localhost:8080/facelet-demo/home.jsf?name=Jack . You'll find that our hello tag works inside ui:repeat but fails to get the value defined by ui:param ! What's the problem? Our hello tag implementation evaluated the EL with the wrong EL context! This is the corrected implementation: package com.example; import java.io.IOExcep...
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 10, 2011 11:27:37    Last update: November 10, 2011 11:28:25
This has been tested working with Apache MyFaces 2.1.3 running Tomcat 7. Managed bean code: package com.example; import javax.faces.bea... Facelet page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
Created by Fang on November 10, 2011 09:26:12    Last update: November 10, 2011 09:26:12
Syntax highlighted XML schema for JSF 2.0 Application Configuration Resource File ( faces-config.xml ). Almost 3000 lines! <?xml version="1.0" encoding="UTF-8"?> <xsd:sch...
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:
Previous  1 2 3 4 5 Next