Developer: Java
   DOWNLOAD
 Oracle Workshop
 Oracle WebLogic Server
 Sample Code
 
   TAGS
workshop, java, All
 

Oracle Workshop's Support for Java EE 5 Web Standards

Learn how to develop Java EE Web applications, using Oracle Workshop for WebLogic.

by Andrei Cioroianu

Published August 2008

For a long time, J2EE seemed a powerful, complex technology. If you took the time to fully understand it, however, you would have discovered ingenious solutions for building scalable component-based multi-tier enterprise applications.

Java EE 5 keeps the power of the old J2EE, but the new version is much simpler and easier to use than the preceding ones. This article explores some of the new Java EE 5 features and walks you though the building of a simple Web application with Oracle Workshop (formerly BEA Workshop). You'll learn how to setup a Web project, build JavaServer Faces (JSF)-based forms, define page-navigation rules, create session EJBs with annotations, use dependency injection in JSF-managed beans, package the application in an EAR file, and deploy it to a local or remote Oracle WebLogic server.

Easier Development with Java EE 5 and Oracle Workshop

In Java EE 5, the JSP and JSF standards are better integrated through the unified expression language, which means any custom JSP tags, including tag files, can now use deferred values and methods in their attributes. Several JSTL tags, such as <c:forEach>, support deferred expressions and can be used together with JSF components. In addition, you may safely mix JSF tags and HTML content without explicitly using <f:verbatim> in the Web page as the JSF rendering has been improved to automatically generate those <f:verbatim> components for you.

Java EE's annotations are a good replacement for the XML-based EJB deployment descriptors because you'll have fewer files to edit when making changes. In addition, EJB's persistence is now based on the Plain Old Java Object (POJO) model. Annotations can be used in any Java-based components, including EJBs, Servlets, and JSF managed beans.

The benefits are great. For example, if you need a session bean, you'll just annotate an interface and its implementation. Then, if you want to call it from the Web tier, you can inject a reference to the EJB component into a JSF-managed bean with the @EJB annotation and the application server will take care of the plumbing. The sample application of this article shows how to implement a JSF form, which uses a backing bean to interact with an EJB component that simulates a language-translation service.

Despite these improvements, coding Java EE applications with a text editor is not a wise decision. Fortunately, there are modern Java IDEs that can make developers significantly more productive. Oracle Workshop is an excellent development tool, extending the Eclipse platform with many wizards and editors. It supports the most important Java EE standards, including Servlets 2.5, JSP 2.1, JSF 1.2, JSTL 1.2, EJB 3, JAX-WS, and JAXB 2.0.

One of the Workshop's unique features is the AppXRay technology, which analyzes many types of source files, including Java classes, Web pages, and configuration files. The gathered information is used to improve the development experience though code completion and validation, as well as file-navigation and dependency-visualization via AppXplorer and AppXaminer, which you'll see at work in this article.

Web Project Setup

This section shows how to create and configure a Web project. You'll use Workshop's Dynamic Web Project wizard and the Faces Configuration editor for the JSF framework.

Creating Web Projects

Click File > New > Project... In the New Project window, expand the Web node and select Dynamic Web Project. Then, click Next.

Enter the WebPrj name, keep the Oracle WebLogic Server v10.3 target runtime, use Default Configuration for Oracle WebLogic Server v10.3, select the Add project to an EAR checkbox if you want to use EJBs, enter EarPrj in the text field labeled EAR Project Name, and click Next.

In the following screens, leave the default options unchanged and click Finish.

Workshop will create the Web project containing a WebContent folder where you'll find an index.jsp page that forwards the request to welcome.jsp from the pages sub-folder. You might want to replace <jsp:forward> with <c:redirect> in index.jsp to avoid any problems with the relative URLs in the Web browser.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="#" prefix="c" %>
<c:redirect url="/pages/welcome.jsf"/>

The WEB-INF folder contains the configuration files (weblogic.xml, web.xml and faces-config.xml), which can be edited with Workshop.

Configuring Web Projects

The web.xml file generated by the New Project wizard already contains the JSF configuration as you can see in the following listing:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="#" ... version="2.5">
  <display-name>WebPrj</display-name>
  <context-param>
      <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
      <param-value>client</param-value>
  </context-param>
  <listener>
      <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
  </listener>
  <servlet>
      <servlet-name>faces</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>faces</servlet-name>
      <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
      <servlet-name>faces</servlet-name>
      <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
</web-app>

Oracle WebLogic Server 10g Rel 3 supports the new standard XML schemas defined by Java EE 5 for the web.xml and faces-config.xml. Double-click the web.xml file and then right-click the items from the list labeled Deployment Descriptor Elements if you have to make any configuration changes, such as adding new context parameters or servlet/filter mappings.

Double-click weblogic.xml if you want to edit the Weblogic-specific options, which are grouped in six tabs: General, Libraries, Container, JSP, Security and Session. The seventh tab lets you view the source of the configuration file. The following screenshot shows the JSP-related options.

The Web project also has a src folder with a resources package that contains the application.properties resource bundle, which is configured in the faces-config.xml file.

JSF Configuration

In the Project Explorer, expand WebPrj/ WebContent/ WEB-INF, and double-click the faces-config.xml file. Workshop will open the Faces Configuration editor, which lets you setup JSF components, converters, managed beans, navigation rules, referenced beans, renderer kits, and validators. Let's create and configure a backing bean for a JSF page. Right-click Managed Beans and click New Managed Bean…

In the dialog box that shows up, enter the backingBean name (starting with a lowercase), use the default request scope, select the New Bean radio button, and click New.

In the New Java Class window, enter the webprj package, the BackingBean class name, add the java.io.Serializable interface, and click Finish.

You'll return to the Managed Bean Tag window. Click Next.

Click the Add button of the wizard.

Workshop will open the Managed Property Tag window. Enter the fromLang property name, the String class, and click OK.

Repeat the previous two steps for the toLang, source and result properties. In the Managed Bean Tag, you should see four properties. Click Finish.

The Workshop's wizard will add the <managed-bean> element to the faces-config.xml file whose source code is included below. Press Ctrl+S to save faces-config.xml.

<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="#" ... version="1.2">

  <application>
    <message-bundle>resources.application</message-bundle>
    <locale-config>
      <default-locale>en</default-locale>
    </locale-config>
  </application>

  <managed-bean>
    <managed-bean-name>backingBean</managed-bean-name>
    <managed-bean-class>webprj.BackingBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>

</faces-config>

Workshop will also create the BackingBean.java file in the webprj package, which can be found in the Java Resources/src folder. Open this file and you'll see that it already has the four bean properties that you defined in the Faces Configuration editor. Add a public method named translateAction() that should return the translated string. You'll modify this method later in the article. Press Ctrl+S to save the BackingBean.java file, whose source code is shown in the following listing.

package webprj;

import java.io.Serializable;

public class BackingBean implements Serializable {

    private String fromLang;
    private String toLang;
    private String source;
    private String result;

    public String translateAction() {
        return "translated";
    }

    public String getFromLang() {
        return fromLang;
    }

    public void setFromLang(String string) {
        fromLang = string;
    }

    public String getToLang() {
        return toLang;
    }

    public void setToLang(String string) {
        toLang = string;
    }

    public String getSource() {
        return source;
    }

    public void setSource(String string) {
        source = string;
    }

    public String getResult() {
        return result;
    }

    public void setResult(String string) {
        result = string;
    }

}

Developing JSF Pages

In this section you'll learn how to create a JSF from for the backing bean, using Workshop's Design Palette, the Form Tag wizard, and the Smart Editor. You'll also learn how to use the Faces Configuration editor for defining navigation rules, and then, you'll visualize the dependencies with AppXaminer.

Creating JSF Forms

As mentioned earlier the Web project contains a welcome.jsp page in the WebContent/pages folder. Double-click this file in the Project Explorer. You'll notice the Web page uses the <h:outputText> component to show some messages from a resource bundle. Keep the Ctrl key pressed and move the mouse cursor over the welcome.message, which will become a link.

If you click it, Workshop's AppXRay will take you straight to the application.properties file where you can edit the message. Change it to This is a simple JSF application and save the file.

Go back to welcome.jsp and you'll notice the change in the Design view. Expand the JSF HTML tab in Design Palette and drag Form onto the welcome.jsp page, right before the </body> closing tag.

Workshop will open the Form Tag wizard. Click the icon next to Form Bean.

In the Choose Bean / Property window, select backingBean, and click OK.

After returning to the Form Tag wizard, click the second icon of the Form Action field.

In the Choose Method window, select the translateAction() method of backingBean, and click OK.

Click the Next button of the Form Tag wizard.

<<img src="/technology/pub/images/cioroianu-workshop-f20.jpg" alt="" />

Uncheck the result property of backingBean and click Next.

In the following screen, change the Input Type of the fromLang and toLang fields to Menu. Then, move the source field at the end of the list, using the Down button, change its Input Type to Text Area, and click Next.

When you reach the final page of the Form Tag wizard, click Finish.

Workshop's wizard will add the form in the welcome.jsp page.

Defining Style Classes for the Form Elements

In order to customize the appearance of the form elements, you'll have to create a CSS file. Right-click the WebContent folder of WebPrj, click New > Other, expand Web, select CSS, and click Next.

Enter the style.css file name and click Finish.

Add the following style classes to the newly created file and save the changes with Ctrl+S.

.TextAreaClass { background-color: #DDEEFF; border-width: thin; }
.SelectMenuClass { background-color: #DDFFDD; border-width: medium; }

Return to the welcome.jsp page, expand HTML in Design Palette, and drag-and-drop Import CSS File within the <head> element of the Web page.

Select the style.css file in the Choose File window and click OK.

Workshop will insert the <link href="../style.css" rel="stylesheet" type="text/css"/> element within the Web page.

Using Smart Editor to Finish the Form

Select the fromLang component of the Web page, click Properties > Smart Editor, scroll down until you find Items Properties, and click the icon next to Static Items.

In the Edit Select Item List window, add a few languages and click OK.

You'll notice how the wizard adds the <f:selectItem> components within <h:selectOneMenu>. Select the fromLang component again, and check Required in Smart Editor. You'll see the required attribute added to the <h:selectOneMenu> tag.

For the same fromLang component, enter SelectMenuClass in the Style Class property of Smart Editor.

Repeat the previous steps for the toLang component. Then, add the required="true" rows="5" cols="40" styleClass="TextAreaClass" attributes to the <h:inputTextarea> component. You'll notice how the page's view is changed in Workshop to reflect the attribute modifications.

Press Ctrl+S to save the welcome.jsp file, whose source code you can find below.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="#" prefix="h" %>
<%@ taglib uri="#" prefix="f" %>
<f:view>
<f:loadBundle basename="resources.application" var="bundle"/>
<html>
<head>
    <title><h:outputText value="#{bundle['welcome.title']}" /></title>
    <link href="../style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<h3><h:outputText value="#{bundle['welcome.heading']}" /></h3>

<p><h:outputText value="#{bundle['welcome.message']}" /></p>
<h:form id="backingBeanForm">
    <h:panelGrid columns="3">
        <h:outputText value="From Lang:"/>
        <h:selectOneMenu id="fromLang" value="#{backingBean.fromLang}" 
                required="true" styleClass="SelectMenuClass">
            <f:selectItem itemLabel="English" itemValue="en"/>
            <f:selectItem itemLabel="French" itemValue="fr"/>
            <f:selectItem itemLabel="Spanish" itemValue="sp"/>
        </h:selectOneMenu>
        <h:message for="fromLang"/>
        <h:outputText value="To Lang:"/>
        <h:selectOneMenu id="toLang" value="#{backingBean.toLang}"
                required="true" styleClass="SelectMenuClass">
            <f:selectItem itemLabel="English" itemValue="en"/>
            <f:selectItem itemLabel="French" itemValue="fr"/>
            <f:selectItem itemLabel="Spanish" itemValue="sp"/>
        </h:selectOneMenu>
        <h:message for="toLang"/>
        <h:outputText value="Source:"/>
        <h:inputTextarea id="source" value="#{backingBean.source}"
            required="true" rows="5" cols="40" styleClass="TextAreaClass"/>
        <h:message for="source"/>
    </h:panelGrid>
    <h:commandButton action="#{backingBean.translateAction}" value="Submit"/>
</h:form>  
</body>
</html>
</f:view>

Defining Navigation Rules

Double-click the faces-config.xml file to activate the Faces Configuration editor, right click Navigation Rules, and click New Navigation Rule…

Workshop will show the Navigation Rule Tag wizard. Click the first icon of the Source Page field.

In the Choose File window, select the welcome.jsp page, and click OK.

After returning to the Navigation Rule Tag wizard, click OK.

In the Faces Configuration editor, right-click the /pages/welcome.jsp navigation rule, and click New Navigation Case…

Enter the translated outcome in the Navigation Case Tag window, and click the second icon of the Destination Page field.

Expand the WebContent folder, select pages, enter the result.jsp file name, and click Next.

Select New JSF JSP and click Next.

Select the application resource-bundle and click Finish.

After returning to the Navigation Case Tag window, click OK.

Workshop's wizard will create the result.jsp page and will insert the following <navigation-rule> element in faces-config.xml. Therefore, when the user clicks the Submit button of the welcome.jsp page, the JSF framework invokes translateAction(), which returns the translated outcome. Then, the HTTP request is forwarded to result.jsp.

<faces-config ...>

  <navigation-rule>
      <from-view-id>/pages/welcome.jsp</from-view-id>
      <navigation-case>
          <from-outcome>translated</from-outcome>
          <to-view-id>/pages/result.jsp</to-view-id>
      </navigation-case>
  </navigation-rule>

</faces-config>

Open the result.jsp page and add a <h:outputText> component to show the backingBean.result property. The next section will modify translateAction() to call an EJB method and store the returned value into the result property of the backing bean.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="#"%>
<%@ taglib prefix="h" uri="#"%>
<f:loadBundle basename="resources.application" var="bundle"/>
<html>
    <head>
    </head>
    <f:view>
        <body>
            <h3>Translated Result</h3>
            <p><h:outputText value="#{backingBean.result}"/></p>
        </body>
    </f:view>
</html>

Click File > Save All to save the edited files and let's use Workshop's AppXaminer to visualize the dependencies. Right-click the welcome.jsp page in AppXplorer, and click Show AppXRay Dependencies.

If you double click any of the nodes, Workshop will open the selected file.

Using Session Beans in JSF Pages

This section shows how to create a session bean whose methods are invoked from a JSF page via a backing bean. You'll learn how to use the @Remote, @Stateless and @EJB annotations.

Creating EJB Projects

Click File > New > Project... In the New Project window, expand the EJB node and select EJB Project. Then, click Next.

Enter the EjbPrj name, keep the Oracle WebLogic Server v10.3 target runtime, use Default Configuration for Oracle WebLogic Server v10.3, select the Add project to an EAR checkbox, select EarPrj in the combo box labeled EAR Project Name, and click Next.

In the following screens leave the default options unchanged and click Finish.

Building Stateless Session Beans

Expand EjbPrj in Project Explorer, right-click ejbModule, and select New > Interface from the context menu.

Enter the ejbprj package name, provide the Translator interface name, and click Finish.

In the Translator.java file, import javax.ejb.Remote, add the @Remote annotation right before the interface declaration, define the translate() method as shown in the following listing, and save the file.

package ejbprj;

import javax.ejb.Remote;

@Remote
public interface Translator {

    public String translate(String fromLang, String toLang, String source);

}

Right-click ejbModule again and select New > Class from the context menu.

Enter the ejbprj package name, provide the TranslatorBean class name, add the ejbprj.Translator interface, and click Finish.

In the TranslatorBean.java file, import javax.ejb.Stateless, add the @Stateless annotation right before the class declaration, and implement the translate() method as shown in the following listing.

package ejbprj;

import javax.ejb.Stateless;

@Stateless
public class TranslatorBean implements Translator {

    public String translate(String fromLang, String toLang, String source) {
        return "Translated from " + fromLang + " to " + toLang + ": " + source;
    }

}

Interacting with Session Beans via Backing Beans

Reopen the BackingBean.java file of the Web project, import ejbprj.Translator and javax.ejb.EJB, define a private Translator tr field annotated with @EJB(name="Translator"), and add result = tr.translate(fromLang, toLang, source); in the translateAction() method.

package webprj;

import ejbprj.Translator;

import javax.ejb.EJB;

import java.io.Serializable;

public class BackingBean implements Serializable {
    ...
    @EJB(name="Translator")
    private Translator tr;

    public String translateAction() {
        result = tr.translate(fromLang, toLang, source);
        return "translated";
    }
    ...
}

Click File > Save All to save the edited Java files.

Packaging and Deployment

This section shows how to build an EAR file and how to do both local and remote deployment with Workshop. You'll typically use local deployment during development and testing—or remote deployment when the application is ready for production or when you must show it to a colleague or client--and you'll build an EAR file when someone else will handle the deployment.

Local Deployment

Right-click the index.jsp page from the WebContent folder of WebPrj, click Run As > Run on Server, enter the server's host name, choose Oracle WebLogic Server 10.3, and click Next.

Make sure the server type is Local, choose a Domain Directory, and click Next.

Click Finish to deploy the project and start the Web application.

You should see the application running within Workshop's embedded Web browser.

Remote Deployment

If you want to deploy the application on a remote WebLogic server, right-click the index.jsp page from the WebContent folder of WebPrj, click Run As > Run on Server, select Manually define a new server, enter the server's name, choose Oracle WebLogic Server 10.3, and click Next.

Select the Remote server type, enter the Remote Host, Port, User and Password information, click Next and Finish.

Exporting EAR Files

If you want to distribute your application, you'll have to build an EAR file. This is easy with Workshop. Right-click EarPrj in Project Explorer, click Export > EAR File with JSP pre-compilation, provide a destination EAR file, and click Finish.

Conclusion

Hopefully you've learned how much easier Java EE development has become since the improvement and simplification of the JSF and EJB standards. Oracle Workshop lets you build and configure your application faster with the help of specialized wizards, editors, component palettes, and property sheets. In addition, the AppXRay technology of Oracle Workshop allows you to navigate quickly through your files and provides code completion and validation features that minimize the need to consult the documentation and significantly reduce the development and testing time.


Andrei Cioroianu is the founder of Devsphere, a provider of Java EE development and Web 2.0/Ajax consulting services. He's been using Java and Web technologies since 1997 and has over 10 years of professional experience in solving complex technical problems and managing the full life cycle of commercial products, custom applications, and open-source frameworks. You can reach Andrei through the contact form at www.devsphere.com.