NBDemoJSFComponentsNBackingBeans

JavaServer Faces Components and Backing Beans (5 minutes)

Description

This presentation is part of the NetBeans Day World Tour and is used in the session “Introduction to JavaServer Faces and the Woodstock UI Components”. This demo helps solidify the JSF Components and Backing Beans topics.

Product Versions Supported

  • NetBeans 6.0.1 with the Web and Java EE features installed.


Points to Hit

You will be emphasizing how the JSF components and the backing beans work together. This is an introductory demo showing the audience what the JSF technology is about.

  • NetBeans JSP editor recognizes the JSF components.
  • NetBeans JSP editor recognizes the bindings and provides code completion
  • NetBeans provides all the necessary configuration files like "faces-config.xml"
  • NetBeans XML Editor recognizes context and allows you to add "managed beans" in the "faces-config.xml".

Demo Prep

  1. Make sure you have the backing bean code for "MyBean" available to paste.

Gotchas

None known.


Demo

1. Create a new Web-Web Application project choosing "JavaServer Faces" on the "Frameworks" dialog.

2. Right-click the "Sources Packages" node and choose "Add->Other...->JavaServer Faces->JSF Managed Bean". Name the class "SessionBean" and the package "myorg". Change the scope to "session" scope.

3. Copy the following code into the "SessionBean" class and do a "Fix Imports".

    private String sessionValue;

    public String getSessionValue() {
        return "A Session Value";
    }

    public void setSessionValue(String sessionValue) {
        this.sessionValue = sessionValue;
    }
Explanation Point:
This backing bean will hold session scope information.


4. Right-click the "Sources Packages" node and choose Add->JSF Managed Bean". Name the class "MyBean" and the package "myorg". Leave the "Scope:" set to "request".

5. Copy the following code into the "MyBean" class below the constructor and do a "Fix Imports".

    private String buttonText;
    private UIOutput output;

    public String getButtonText() {
        return "My Button";
    }

    public void setButtonText(String buttonText) {
        this.buttonText = buttonText;
    }

    public UIOutput getOutput() {
        return output;
    }

    public void setOutput(UIOutput output) {
        this.output = output;
    }

    public String myAction() {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        SessionBean sessionBean = 
                (SessionBean) facesContext.getApplication().getELResolver().getValue(elContext, 
                null, "SessionBean");

 
        this.getOutput().setValue(sessionBean.getSessionValue());
        return null;
    }
}
Explanation Point:
This backing bean will be used by the components that we will add.


5. Double click on the "Configuration Files->faces-config.xml" under the project node to show the added managed beans. Click on the "XML" view to show the XML.


Explanation Point:
NetBeans takes care of creating the faces-config.xml and also provides ways to create artifacts in the context of JSF.


6. Select the "welcomeJSF.jsp" window. Within the "<f:view>" tags under the "

<h:outputText value="JavaServer Faces" />

" line, type the following.
  <h:
Explanation Point:
Show the code completion provided in the JSP editor


7. Select "<h:outputText" and hit space. Select "binding" and type this in the double quotes.

#{MyBean.


Explanation Point:
Show how the JSP editor recognizes the instance binding expression and allows you to select a member.


8. Select "output" and add the closing "}".

9. After binding="${MyBean.output}", type a space and hit ctl-space to force code completion.

10. Select "id" and type "mytext" in the double quotes. Close the element with a ">".

11. Type "</" and select "</h:outputText>".


Explanation Point:
We've just done an instance binding. We bound the "mytext" outputText component to the MyBean backing bean instance variable "output".


12. From the palette, drag and drop a "JSF->JSF Form" under the "<h:outputText>" line. Select "Empty Form" when asked.

13. right-click and select "Format".

14. After the "<h:form>" line, add the following.

<h:co

and select "commandButton".

15. Enter a space and choose "id". Enter "mybutton" in the double quotes.

16. Enter a space and choose "value". Enter the following in the double quotes.

#{MyBean.

and choose "buttonText" from the list. Enter the closing "}".

17. Enter a space and choose "action". Enter the following code

#{MyBean.

and choose "myAction". Enter the closing "}". Enter the closing ">".

18. Type "</" and choose "</h:commandButton>".

Explanation Point:
We've just created a button and done a value binding and a method binding. We bound "mybutton" button text to "buttonText" and we bound the action to the MyBean backing bean method "myAction".


20. Run. Click the button to show the method being invoked and the session value being used on the page.


Demo Cleanup

None.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo