Show TOC

Background documentationData Exchange Using a Bean Locate this document in the navigation structure

 

A bean is used to get and set "dynamic" data. The JSP DynPage usually provides the bean with data and the JSP reads the data. The functionality of the basic example is extended by an input field that allows user input. The user input is stored in a bean and than displayed as text by a JSP program.

Following steps are necessary

  • create a bean

  • initialize the bean

  • introduce the bean to the JSP program OutputText.jsp

Declaring a bean in a JSP

The tag usebean declares a bean in a JSP.

  • class

    Class name of the bean.

  • id

    Identification name of the bean. The id is used to access the bean in scriptlets.

  • scope

    Defines the availability of the bean. Details see "How to use Beans".

Attributes

M

Values

Usage – JSP Taglib

class

*

String (cs)

class="com.sap.htmlb.beandemo.myBean"

id

*

String (cs)

id="idOfMyBean"

scope

*

APPLICATION SESSION REQUEST PAGE

scope="APPLICATION"

Bean for the JSPDynPage Example

Syntax Syntax

  1. package bean;
    /*
     * A simple bean whose only purpose is to store a String.
     * It as a get and set method to store and recall the string.
    
     */
    public class DynPageNameBean {
        public String name;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    }
    
End of the code.

The GUI is extended by an inputField and a button to allow the user to enter a string (for example, user name) and submit the form by clicking the button or pressing Return/Enter on the keyboard.

Following changes to OutputText.jsp are necessary:

  • Adding a form to allow the definition of a default button.

  • Introduce the bean to the JSP program (<jsp:usebean .../>).

  • Changing the textView so that it displays the string retrieved from the bean.

  • Adding a label telling the user to enter the user name. The label should start in a new line and one line separated from the textView. That is why you find a <br><br> before the label

  • Adding the inputField "user_name_input" - the JSP DynPage retrieves the data in the input field using getComponentByName.

  • Adding a send button which we also define as the default button. This enables the user to send his input back to the server by either clicking on the button or by simply pressing Enter/Return on the keyboard when he finished the input.

Syntax Syntax

  1. <%-- OutputText.jsp --%>
    <%@ taglib uri= "tagLib" prefix="hbj" %>
    <hbj:content 
        id="myContext">
        <hbj:page 
            title="An Easy Start">
            <hbj:form 
                id="myFormId">
                <%-- Declaration of the bean. --%>
                <jsp:useBean 
                    id="UserNameBean"
                    scope="application"
                    class="bean.DynPageNameBean"
                    />
                <hbj:textView 
                    id="welcome_message"
                    design="HEADER1">
                    <%
                      welcome_message.setText
                      ("May the force be with you "+UserNameBean.getName());
                    %>
    
                </hbj:textView>
                <br>
                <br>
                <hbj:label 
                    id="label_input"
                    text="Your name please"
                    design="LABEL"
                    required="TRUE"
                    labelFor="user_name_input"
                    />
       <%-- inputfield to allow userinput - the inputfield has the id --%>
       <%-- "user_name_input" which is used in the JSP DynPage to     --%>
       <%-- access the input field and retrieve the input of the user --%>
                <hbj:inputField 
                    id="user_name_input"
                    type="STRING"
                    design="STANDARD"
                    width="250"
                    maxlength="30"
                    />
                <hbj:button 
                    id="Send_Button"
                    text="Send"
                    tooltip="Sends my name"
                    onClick="onSendButtonClicked"
                    width="100"
                    design="EMPHASIZED">
                    <%
                        myFormId.setDefaultButton(Send_Button);
                    %>
    
                </hbj:button>
            </hbj:form>
        </hbj:page>
    </hbj:content>
    
End of the code.
Result

Hint: The default string "unknown user" will be set in our JSP DynPage in the following section.

This graphic is explained in the accompanying text.

Changes in the JSPDynPage

The JSP DynPage has to be adjusted as well. Following steps are necessary:

  • Introducing the bean to the JSP DynPage (Import statement).

  • In the doInitialization() method we set a default user name to "unknown user".

  • Creating the event method onSendButtonClicked() for the button click in which the status (variable state) is set to WELCOME_STATE so that the doProcessBeforeOutput selects another JSP file.

  • In doProcessAfterInput() method (which is called whenever an event occurs) we request the inputField "user_name_input" from the JSP by using getComponentByName to have access to the user input in the JSP DynPage. If the inputField "user_name_input" is not empty the string is stored in the bean.

Syntax Syntax

  1. package com.mycompany.basicexample;
    /**  introduce the bean */
    import bean.DynPageNameBean;
    import com.sap.htmlb.*;
    import com.sap.htmlb.enum.*;
    import com.sap.htmlb.event.Event;
    import com.sap.htmlb.page.DynPage;
    import com.sap.htmlb.page.PageException;
    import com.sap.portal.htmlb.page.JSPDynPage;
    import com.sap.portal.htmlb.page.PageProcessorComponent;
    import com.sap.portal.prt.component.IPortalComponentContext;
    import com.sap.portal.prt.component.IPortalComponentProfile;
    import com.sap.portal.prt.component.IPortalComponentRequest;
    
    public class DynPageOne extends JSPDynPage {
        private final static int INITIAL_STATE = 0;
        private final static int WELCOME_STATE = 1;
        private int state = INITIAL_STATE;
        private String name;
    
        /**
         * Constructor
         */
        public DynPageOne() {
            this.setTitle("Become a Jedi");
        }
    
        /**
        * Used for user initialization. called when the application is 
        * started
        */
        public void doInitialization() {
            // create the bean and set a default text value "unknown user
            IPortalComponentRequest request = 
                        (IPortalComponentRequest) this.getRequest();
            IPortalComponentContext myContext = request.getComponentContext();
            IPortalComponentProfile myProfile = myContext.getProfile();
            // new bean object
            UserNameContainer = new DynPageNameBean();
            // set default name
            UserNameContainer.setName("unknown user");
            // store bean in profile for the JSP
            myProfile.putValue("UserNameBean", UserNameContainer);
            // Set the state so that we can decide what action to do next
            state = INITIAL_STATE;
        }
        /**
        * Used for handling the input. Generally called on each event
        * we use this method to get the user name and store it in the bean
        */
        public void doProcessAfterInput() throws PageException {
            // get the input field from the JSP
            InputField myInputField = 
                        (InputField) getComponentByName("user_name_input");
            if (myInputField != null) {
                this.name = myInputField.getValueAsDataType().toString();
            }
            IPortalComponentRequest request = 
    
                           (IPortalComponentRequest) this.getRequest();
            IPortalComponentContext myContext = request.getComponentContext();
            IPortalComponentProfile myProfile = myContext.getProfile();
            DynPageNameBean myNameContainer = 
                   (DynPageNameBean) myProfile.getValue("MyNameBean");
            myNameContainer.setName(name);
        }
        /**
         * Used for handling the output. This method is always called.
         * In our example before the JSP made a textView with 
         * "May the force be with you unknown user".
         * We now extend this method that according to the state it either - 
         * that is when state = INITIAL_STATE - asks for the user name 
         * and calls the user "unknown user" or after init - that is when 
         * state = WELCOME_STATE - displays a success message with 
         * the username.
         */
        public void doProcessBeforeOutput() throws PageException {
            switch (state) {
                case WELCOME_STATE :
                    this.setJspName("OutputSuccessText.jsp");
            }
            break;
            default :
                this.setJspName("OutputText.jsp");
                break;
        }
        /**
         * this method handles the event of the button. The event is fired 
         * either when the user clicks on the button or presses the 
         * Return/Enter key when he is in the inputField (since we defined 
         * the button as default button). In this method we set the state to 
         * WELCOME_STATE so that on the following doProcessBeforeOutput 
         * (which is called immediately after this method)
         * a success message is displayed
         */
        public void onSendButtonClicked(Event event) throws PageException {
            state = WELCOME_STATE;
        }
    }
    
End of the code.

The only thing missing now is OutputSuccessText.jsp which should send the personalized message to the user. The usage of the bean has been already shown in OutputText.jsp so OutputSuccessText.jsp is very small and creates a textview with the username in it.

Syntax Syntax

  1. <%-- OutputSuccessText.jsp --%>
    <%@ taglib uri= "tagLib" prefix="hbj" %>
    <hbj:content 
        id="myContext">
        <hbj:page 
            title="Successful processing">
            <jsp:useBean 
                id="UserNameBean"
                scope="application"
                class="bean.DynPageNameBean"
                />
            <hbj:textView 
                id="success_message"
                design="HEADER1">
                <%
                    success_message.setText
                    ("The force is with you" + UserNameBean.getName());
                %>
    
            </hbj:textView>
        </hbj:page>
    </hbj:content>
    
End of the code.
Result of the JSP

(assuming that the user responded with "SAP")

The force is with you SAP