Facelet debug Tag

Facelet debug Tag is useful in displaying the component tree and scoped variables.


 

Ads

Tutorials   
JSF Tutorials: Easy steps to learn JSF Java Server Faces (JSF) Tutorials What is JSF Mojarra? JSF Life Cycle JSF Examples JSF Tutorial For Beginners Roseindia JSF Tutorial JSF core Tag Reference JSF internationalization example Tomahawk selectOneCountry tag RCFaces About Hibernate, Spring and JSF Integration Tutorial Creating Login Page In JSF using NetBeans JSF Hello World Declaring the Bean class in the faces-config.xml file Creating a Web Application with the JSF Framework Binding the Form Elements With the Bean Properties Adding Navigation in JSF Application Binding Component Instance to a Bean Property Tomahawk validateEqual tag Tomahawk validateEmail tag Tomahawk validateCreditCard tag Tomahawk selectOneListbox tag Tomahawk selectManyListbox tag Tomahawk selectManyCheckbox tag Tomahawk selectBooleanCheckbox tag Tomahawk saveState tag Tomahawk popup tag Tomahawk inputCalendar tag Tomahawk htmlTag tag Tomahawk graphicImage tag Tomahawk documentHead tag Tomahawk documentBody tag Tomahawk document tag Tomahawk column tag DataBase Connectivity with MySql in Visual Web JSF Application Using Net Beans IDE Retrieve Image in JSF From MySQL Table Using NetBeans IDE JSF Training Java Sever Faces 1.2 - JSF 1.2 Display Data from Database in JSF Application Business Objects of Business Logic tier Setup MySQL Database Working with Database through JDBC Working with JavaScript & CSS Referencing a Localized Message Referencing Resource Bundle from a Page Binding Component Value to an Implicit Object Phase Listener Value Change Event Listener Action Event Listener
Ads

Facelet debug Tag

        

This tag is useful in displaying the component tree and scoped variables. This information will be displayed in a popup window of browser when we press Ctrl+Shift+(a key). This key will be specified in hotkey attribute. For example, in the code below in "debugtemplate.xhtml", this has been specified "p". So when page comes to the user then if Ctrl+Shift+p is pressed, debug window is open which displays the component tree and scoped variables.
 


debug.xhtml : 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html">
<body>
  Content above composition tag will not be rendered.
   <ui:composition template="/pages/debug/debugtemplate.xhtml">
   <ui:define name="face1">
   <center><h2>RoseIndia Facelet Tags Tutorial</h2></center>
   <h3>Welcome to the Facelet world..........</h3>
  </ui:define>
  <ui:define name="face2">Enter UserID :<br/>
   <h:inputText id="it" /><br/><br/>
   </ui:define>
   <ui:define name="face3">Enter Password :<br/>
   <h:inputSecret id="is" /><br/><br/>
   </ui:define>
  <ui:define name="face4">
   <h:commandButton id="cb" value="Submit" />
  </ui:define>
   </ui:composition>
   Content below composition tag will not be rendered.
</body>
</html>

 debugtemplate.xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
   <title>facelet example </title>
  <link href="../../style/CSS.css" rel="stylesheet" type="text/css"/>
</head>
<body> 
  <ui:insert name="face1"> </ui:insert>
  <ui:insert name="face2"> </ui:insert>
  <ui:insert name="face3"> </ui:insert>
  <ui:insert name="face4"> </ui:insert>
  <ui:debug hotkey="p" rendered="true"/>
</body>
</html>

 Rendered Output : This is the page that is displayed to the user first. Now if we press Ctrl+Shift+p then debug window is opened that is shown in the second figure below :

debug window :

Html Source Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>facelet example </title>
   <link href="../../style/CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <center><h2>RoseIndia Facelet Tags Tutorial</h2></center>
   <h3>Welcome to the Facelet world..........</h3>
   Enter UserID :<br /><input id="it" type="text" name="it" /><br /><br />
   Enter Password :<br /><input id="is" type="password" 
   name="is" value="" /><br /><br />
  <input id="cb" type="submit" name="cb" value="Submit" />
  <script language="javascript" type="text/javascript">

  //<![CDATA[
function faceletsDebug(URL) { day = new Date(); id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',   'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=800,height=600,left = 240,top = 212');"); };var faceletsOrigKeyup = document.onkeyup; document.onkeyup = function(e) { if (window.event) e = window.event; if (String.fromCharCode(e.keyCode) == 'P' & e.shiftKey & e.ctrlKey) faceletsDebug('/facelettag/pages/debug/debug.jsf?facelets.ui.DebugOutput=1179482643961'); else if (faceletsOrigKeyup) faceletsOrigKeyup(e); };
//]]>
</script>
</body>
</html>

This tag contains only one attribute :

hotkey : This attribute is used to specify the key which is to be pressed with Ctrl+Shift to open a debug window. Its default value is "d". It doesn't take EL expression.

Advertisements

Ads
Share on Google+Share on Google+

Facelet debug Tag

Posted on: June 18, 2007 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: Facelet debug Tag  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads