Netbeans JSF CommandLinkRenderer

[Matt Gaunt]

Hi,

Management at the company at which I work are insisting I use the JSF visual editor for creating applications. So I have commenced using this tool only to find that Netbeans has it's own custom CommandLinkRenderer. This caused me great issues when I attempted to embed an <f :p aram/> tag inside a commandlink tag.

It all worked fine when I hand coded using the appropriate JSF tags. However, when using the visual editor to create the tags, it malfunctioned throwing javascript errors as follows:

Error: document.forms['SearchResultFragment:form1'].paramname has no properties
Source File: <a href="http://localhost:9090/ejraRad-war/faces/SPage.jsp" target="_blank" rel="nofollow">http://localhost:9090/ejraRad-war/faces/SPage.jsp</a>
Line: 1

Any thoughts on why this may have occurred?

[ April 22, 2008: Message edited by: Matt Gaunt ]

[ April 22, 2008: Message edited by: Matt Gaunt ]
[ April 22, 2008: Message edited by: Matt Gaunt ]

[Alaa Nassef]

I think that the clue lies in the "paramname has no properties" part of the message. It would be a lot more helpful if you submit the code generated.

[Matt Gaunt]

Righto. I have been able to recreate this using NetBeans IDE 6.0 (Build 200711261600). Building a web project with the JSF Visual framework using Sun Application Server 9.1 as the target environment.

The page generated by the visual drag and drop palette is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
    Document   : Page1
    Created on : 23/04/2008, 09:42:13
    Author     : N020046
-->
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:jsp="http://java.sun.com/JSP/Page"
      xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
    <jsp:Directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
    <f:view>
        <webuijsf:page binding="#{Page1.page1}" id="page1">
            <webuijsf:html binding="#{Page1.html1}" id="html1">
                <webuijsf:head binding="#{Page1.head1}" id="head1">
                    <webuijsf:link binding="#{Page1.link1}" id="link1" url="/resources/stylesheet.css"/>
                </webuijsf:head>
                <webuijsf:body binding="#{Page1.body1}" id="body1" style="-rave-layout: grid">
                    <webuijsf:form binding="#{Page1.form1}" id="form1">
                        <h:outputText binding="#{Page1.outputText1}"
                              id="outputText1"
                              style="position: absolute; left: 264px; top: 96px"
                              value="Here is the page we wish to create"/>
                        <h:commandLink binding="#{Page1.linkAction1}"
                              id="linkAction1"
                              style="position: absolute; left: 192px; top: 168px"
                              value="This is my link action">
                            <f:param binding="#{Page1.param1}" id="param1" name="MyParamName"/>
                        </h:commandLink>
                    </webuijsf:form>
                </webuijsf:body>
            </webuijsf:html>
        </webuijsf:page>
    </f:view>
</jsp:root>

The associated generated Java class behind this page is as follows:

/*
 * Page1.java
 *
 * Created on 23/04/2008, 09:42:13
 */
 
package tryoutparam;
 
import com.sun.rave.web.ui.appbase.AbstractPageBean;
import com.sun.webui.jsf.component.Body;
import com.sun.webui.jsf.component.Form;
import com.sun.webui.jsf.component.Head;
import com.sun.webui.jsf.component.Html;
import com.sun.webui.jsf.component.Link;
import com.sun.webui.jsf.component.Page;
import javax.faces.FacesException;
import javax.faces.component.UIParameter;
import javax.faces.component.html.HtmlCommandLink;
import javax.faces.component.html.HtmlOutputText;
 
/**
 * <p>Page bean that corresponds to a similarly named JSP page.  This
 * class contains component definitions (and initialization code) for
 * all components that you have defined on this page, as well as
 * lifecycle methods and event handlers where you may add behavior
 * to respond to incoming events.</p>
 *
 * @author N020046
 */
public class Page1 extends AbstractPageBean {
    // <editor-fold defaultstate="collapsed" desc="Managed Component Definition">
 
    /**
     * <p>Automatically managed component initialization.  <strong>WARNING:</strong>
     * This method is automatically generated, so any user-specified code inserted
     * here is subject to being replaced.</p>
     */
    private void _init() throws Exception {
    }
 
    private Page page1 = new Page();
    
    public Page getPage1() {
        return page1;
    }
    
    public void setPage1(Page p) {
        this.page1 = p;
    }
    
    private Html html1 = new Html();
    
    public Html getHtml1() {
        return html1;
    }
    
    public void setHtml1(Html h) {
        this.html1 = h;
    }
    
    private Head head1 = new Head();
    
    public Head getHead1() {
        return head1;
    }
    
    public void setHead1(Head h) {
        this.head1 = h;
    }
    
    private Link link1 = new Link();
    
    public Link getLink1() {
        return link1;
    }
    
    public void setLink1(Link l) {
        this.link1 = l;
    }
    
    private Body body1 = new Body();
    
    public Body getBody1() {
        return body1;
    }
    
    public void setBody1(Body b) {
        this.body1 = b;
    }
    
    private Form form1 = new Form();
    
    public Form getForm1() {
        return form1;
    }
    
    public void setForm1(Form f) {
        this.form1 = f;
    }
 
    private HtmlOutputText outputText1 = new HtmlOutputText();
 
    public HtmlOutputText getOutputText1() {
        return outputText1;
    }
 
    public void setOutputText1(HtmlOutputText hot) {
        this.outputText1 = hot;
    }
 
    private HtmlCommandLink linkAction1 = new HtmlCommandLink();
 
    public HtmlCommandLink getLinkAction1() {
        return linkAction1;
    }
 
    public void setLinkAction1(HtmlCommandLink hcl) {
        this.linkAction1 = hcl;
    }
 
    private UIParameter param1 = new UIParameter();
 
    public UIParameter getParam1() {
        return param1;
    }
 
    public void setParam1(UIParameter uip) {
        this.param1 = uip;
    }
 
    // </editor-fold>
 
    /**
     * <p>Construct a new Page bean instance.</p>
     */
    public Page1() {
    }
 
    /**
     * <p>Callback method that is called whenever a page is navigated to,
     * either directly via a URL, or indirectly via page navigation.
     * Customize this method to acquire resources that will be needed
     * for event handlers and lifecycle methods, whether or not this
     * page is performing post back processing.</p>
     * 
     * <p>Note that, if the current request is a postback, the property
     * values of the components do <strong>not</strong> represent any
     * values submitted with this request.  Instead, they represent the
     * property values that were saved for this view when it was rendered.</p>
     */
    @Override
    public void init() {
        // Perform initializations inherited from our superclass
        super.init();
        // Perform application initialization that must complete
        // *before* managed components are initialized
        // TODO - add your own initialiation code here
        
        // <editor-fold defaultstate="collapsed" desc="Managed Component Initialization">
        // Initialize automatically managed components
        // *Note* - this logic should NOT be modified
        try {
            _init();
        } catch (Exception e) {
            log("Page1 Initialization Failure", e);
            throw e instanceof FacesException ? (FacesException) e: new FacesException(e);
        }
        
        // </editor-fold>
        // Perform application initialization that must complete
        // *after* managed components are initialized
        // TODO - add your own initialization code here
    }
 
    /**
     * <p>Callback method that is called after the component tree has been
     * restored, but before any event processing takes place.  This method
     * will <strong>only</strong> be called on a postback request that
     * is processing a form submit.  Customize this method to allocate
     * resources that will be required in your event handlers.</p>
     */
    @Override
    public void preprocess() {
    }
 
    /**
     * <p>Callback method that is called just before rendering takes place.
     * This method will <strong>only</strong> be called for the page that
     * will actually be rendered (and not, for example, on a page that
     * handled a postback and then navigated to a different page).  Customize
     * this method to allocate resources that will be required for rendering
     * this page.</p>
     */
    @Override
    public void prerender() {
    }
 
    /**
     * <p>Callback method that is called after rendering is completed for
     * this request, if <code>init()</code> was called (regardless of whether
     * or not this was the page that was actually rendered).  Customize this
     * method to release resources acquired in the <code>init()</code>,
     * <code>preprocess()</code>, or <code>prerender()</code> methods (or
     * acquired during execution of an event handler).</p>
     */
    @Override
    public void destroy() {
    }
    
    /**
     * <p>Return a reference to the scoped data bean.</p>
     *
     * @return reference to the scoped data bean
     */
    protected SessionBean1 getSessionBean1() {
        return (SessionBean1) getBean("SessionBean1");
    }
 
    /**
     * <p>Return a reference to the scoped data bean.</p>
     *
     * @return reference to the scoped data bean
     */
    protected RequestBean1 getRequestBean1() {
        return (RequestBean1) getBean("RequestBean1");
    }
 
    /**
     * <p>Return a reference to the scoped data bean.</p>
     *
     * @return reference to the scoped data bean
     */
    protected ApplicationBean1 getApplicationBean1() {
        return (ApplicationBean1) getBean("ApplicationBean1");
    }
 
}
 

The generated output when the page is displayed is as follows:

<!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:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
    xmlns:waistate="http://www.w3.org/2005/07/aaa">
<head>
<meta content="no-cache" http-equiv="Pragma" />
<meta content="no-cache" http-equiv="Cache-Control" />
<meta content="no-store" http-equiv="Cache-Control" />
<meta content="max-age=0" http-equiv="Cache-Control" />
<meta content="1" http-equiv="Expires" />
<title></title>
<link rel="stylesheet" type="text/css"
    href="/TryOutParam/theme/com/sun/webui/jsf/suntheme/css/css_master-all.css" />
<skript type="text/javaskript">var djConfig = (djConfig) ? djConfig : {"isDebug":false,"parseOnLoad":false};
</skript>
<skript type="text/javaskript"
    src="/TryOutParam/theme/META-INF/json/json.js"></skript>
<skript type="text/javaskript"
    src="/TryOutParam/theme/META-INF/prototype/prototype.js"></skript>
 
<skript type="text/javaskript"
    src="/TryOutParam/theme/META-INF/com_sun_faces_ajax.js"></skript>
<skript type="text/javaskript" src="/TryOutParam/theme/META-INF/dojo/dojo/dojo.js"></skript>
<skript type="text/javaskript" src="/TryOutParam/theme/META-INF/dojo/dijit/dijit.js"></skript>
<skript type="text/javaskript">dojo.registerModulePath("webui.suntheme",
    "/TryOutParam/theme/com/sun/webui/jsf/suntheme/javaskript");
var webui = {"suntheme":
  {"bootstrap":
    {"theme":
      {"module":"webui.suntheme.theme",
       "locale":
       "en-AU",
       "prefix":
       "/TryOutParam/theme",
       "bundle":
       "suntheme",
       "modulePath":
       "/com/sun/webui/jsf/suntheme/javaskript/theme"
      },"debug":false}}};</skript>
<skript type="text/javaskript"
    src="/TryOutParam/theme/com/sun/webui/jsf/suntheme/javaskript/webui-jsfx.js">
</skript>
<link id="link1" rel="stylesheet" type="text/css" href="/TryOutParam/resources/stylesheet.css" />
</head>
<body id="body1" style="-rave-layout: grid">
<form id="form1" class="form" method="post"
    action="/TryOutParam/faces/Page1.jsp;jsessionid=8f6fa01da21bf00ed35aab2c2ddd"
    enctype="application/x-www-form-urlencoded">
<span id="form1:outputText1" style="position: absolute; left: 264px; top: 96px">Here is the page we wish to create</span>
<input name="com_sun_rave_web_ui_appbase_renderer_CommandLinkRendererer"
    type="hidden"
    value="" />
<a id="form1:linkAction1"
    href="#"
    style="position: absolute; left: 192px; top: 168px"
    onklick="document.forms['form1']
      ['com_sun_rave_web_ui_appbase_renderer_CommandLinkRendererer']
      .value='form1:linkAction1';
    document.forms['form1']
      ['MyParamName'].value='null';
    document.forms['form1'].submit(); return false;">This is my link action</a>
<input id="form1_hidden" name="form1_hidden" value="form1_hidden" type="hidden" />
 
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAA.../o9C2kS8QAAA=" />
</form>
<skript type="text/javaskript">
dojo.addOnLoad(function() {
    webui.suntheme.bootstrap.body = new webui.suntheme.body(
      '/Page1.jsp',
      '/TryOutParam/faces/Page1.jsp',
      null,
      null,
      'com_sun_webui_util_FocusManager_focusElementId',true);});
</skript>
</body></html>

And the client side javaskript error when clicking on the link is as follows:

Error: document.forms.form1.MyParamName has no properties
Source File: <a href="http://localhost:9090/TryOutParam/" target="_blank" rel="nofollow">http://localhost:9090/TryOutParam/</a>
Line: 1

I have only used the GUI builder and haven't altered the generated jsp page at all. So why is this occurring when I nest an f:param tag inside an h:commandLink tag.

[ April 22, 2008: Message edited by: Matt Gaunt ]

(I edited this so it hopefully won't make the post be six pages wide - PC)
[ April 22, 2008: Message edited by: Paul Clapham ]

[Matt Gaunt]

Hi Adam,

I was wondering if you have an idea as to what is causing the error I have explained above please?

Regards

Matt Gaunt