HomeDigital EditionSys-Con RadioSearch Java Cd
Advanced Java AWT Book Reviews/Excerpts Client Server Corba Editorials Embedded Java Enterprise Java IDE's Industry Watch Integration Interviews Java Applet Java & Databases Java & Web Services Java Fundamentals Java Native Interface Java Servlets Java Beans J2ME Libraries .NET Object Orientation Observations/IMHO Product Reviews Scalability & Performance Security Server Side Source Code Straight Talking Swing Threads Using Java with others Wireless XML

Using JavaBeans in DreamWeaver UltraDev 4, by Michael Barbarelli & David Deming

Given the publication this article is appearing in, I'm not going to spend much time trying to sell you on the benefits of the Java platform for Web application development. Let's assume we're all on the same page here.

I think we can also agree that developing Web applications using JavaServer Pages (JSP) could be easier. The technology builds on the rich development architecture of the Java platform, but there aren't many programs that effectively mask the complexity of the language to simplify Web application development.

Macromedia Dreamweaver UltraDev 4 simplifies visual Web application authoring using JSP while taking advantage of the unique capabilities of the Java platform. This includes database connectivity through JDBC, connecting to other back-end and legacy systems through JavaBeans, and supporting custom tag libraries. In this article we explore how UltraDev can help Web application development teams (or individuals) streamline the process of deploying applications. We'll use JavaBeans as an example technology to illustrate this point.

A little more marketing background and then I promise I'll get technical and dig into how UltraDev makes it easier to incorporate JavaBeans into your Web development workflow. It's built on the core architecture and shares all the features available in Macromedia Dreamweaver, a visual Web authoring environment for professional Web developers. The product is fully customizable and scriptable using JavaScript, XML, and HTML. This means that with UltraDev you get an HTML editor to help visualize your design.

Now that you have a basic background on UltraDev, let's look at how JavaBeans can be used with it.

As you know, the Java 2 Platform, Enterprise Edition includes JSP. The Java platform allows access to a varied range of APIs. The JavaBean API coupled with JSP helps users to develop Web applications by moving much of the server-side logic into the bean and focusing the JSP page on the presentation layer. By developing JavaBeans to contain most of your server-side logic, reusable classes can be defined, greatly reducing future application maintenance requirements. This makes it possible to extend those classes and tailor them to different requirements.

What this means to most Web development teams today is that a wide variety of skills are necessary to effectively deploy Java-based Web applications. You need Java programming experts to develop the JavaBeans, design and layout experts to create the front-end user interface (usually in HTML), and Web application programmers to glue the back-end logic and data structure to the front-end user interface. Although, depending on the size of the team, some of these tasks might be performed by the same people, getting all of them running together smoothly is a challenge.

I think most people involved in Web application development can relate to the following scenario. A front-end designer creates a static user interface; at this point the back-end system (database data business logic, etc.,) may not be designed, or it may not be accessible enough to integrate with the user interface. Once it is ready, the Web application developer must then go through an iterative process of plugging in the back-end system to the user interface, uploading the result to a test server, determining what works and what doesn't, and asking the designer to tweak the design to fit the data structure. Where UltraDev really helps is in this test/tweak/redesign process.

One of the most difficult aspects of this problem is that it's hard to find a single person, let alone a single application, that can effectively tweak design elements and plug in server-side logic and dynamic data. As an application development environment, UltraDev can help tremendously here.

Let's assume we're responsible for the task I just described. An enterprise Java developer has given us a JavaBean that masks the complexity of a set of database functions that store customer information. We must now integrate the data from that bean into an HTML user interface.

Using JavaBeans in a Code-Only Environment
When doing tasks like this by hand, the Web application developer needs to know a bit of JSP syntax to effectively incorporate a JavaBean into the design. Assuming we have a bean called Customers available, our Web application developer would include a line in the HTML that looked something like this:

<JSP:useBean id="Customers" class="Data.Customers" />

This creates an instance of the bean that's then available on the rest of the Web page. The next step might be to set certain properties of the bean to ensure we're accessing the proper customer. This is one of the beauties of JavaBeans - the application developer doesn't need to know anything about the structure of the database that stores the information about the customer, just the unique ID that's used to identify them.

<JSP:setProperty name="Customers" property="ID" value="<%= request.getParameter("ID") %>"/>

In this case things became even more complicated - the ID for the customer was stored in a form variable called ID that came across in the request.

Once this property is set, the application developer can then plug in various customer properties at appropriate points in the design. Let's assume the designer had earmarked a portion of the page to contain a personalized greeting. The application developer would wade through the HTML to locate the appropriate area. A message welcoming the customer by name could then be inserted, for example:

<B>Welcome to our site, <JSP:getProperty name="Customers" property="firstName"/></B>

The application developer just inserted HTML and JSP code to create a personalized greeting for each customer.

The last, often overlooked, step in this workflow is for the application developer to upload this completed file to the application server and preview it in the browser. It's usually at this point where things get difficult. Although it might work perfectly in this simple case, rarely in the real world will the initial design perfectly accommodate all the dynamic elements needed on the page. This is where the dance of transferring files back and forth between the developer and the layout designer leads to delays and frustration in getting the design and dynamic elements just right.

Designers get frustrated because they can't see the dynamic data on the page as they're tweaking the layout - they have to work with placeholders. They have to take the developers' word for it - "That one table cell isn't quite big enough. You'll have to move that image somewhere else..." And application developers get frustrated because designers often step all over their hand-developed code when tweaking the design. This back and forth can be a serious headache, even when both tasks are performed by the same person! UltraDev can offer a compelling solution to this problem.

Using JavaBeans in UltraDev's Visual Development Environment
Because hand coding is so important to most developers, it would be possible to implement the above scenario exactly as described using UltraDev. By operating only in code-view, the application developer could diligently type out each of the above lines of code in the appropriate places in the HTML layout. Of course, part of the power of UltraDev is making that process easier and more effective.

One of the first things a traditional coder will notice about UltraDev is all the visual panels and inspectors that surround the target document to be edited. Assuming that the flat HTML file is open and ready to be modified with dynamic data, the user also has a choice in how to view it.

There are three editing modes in UltraDev that can be used depending on the situation and preference of the developer. Code view shows all the code behind the page (HTML and Java) using syntax-coloring for clarification. Design view shows a visual representation of what the page will look like when viewed in the browser, while split view allows both the code and visual representation of the page to be viewed and edited at once (see Figure 1).

Figure 1
Figure  1:

Let's assume we've chosen to work in design view. The first step with UltraDev is to set up the JavaBean as a data source. This process consists of browsing to the appropriate class file, typing in the initialization parameters, and giving the bean a name. You can even visually set any of the available properties of the bean at this point (see Figure 2). This is one benefit of the visual environment - it instantly lets you know what properties are available to set. This is where we could type in the ID property for the customer, thus eliminating the need for a setProperty tag.

Figure 2
Figure  2:

Once all this is done, UltraDev automatically uses introspection to discover all the available setter and getter methods of the bean and shows them in the data bindings inspector. To use these elements on the page, our application developer has to simply drag and drop the various elements into place. In Figure 3 the designer notices the placeholder on the page and can easily replace it with the dynamic bean element. UltraDev generates the necessary JSP code behind the scenes, creating the dynamic welcome message that includes the individual customer name from the bean.

Figure 3
Figure  3:

Let's go beyond our simple example for a moment and assume the app builder needs to build more complicated behavior into the page. For example, the developer wants to hide the entire greeting message if the user's first name is not available, that is, it was never passed from the form on the previous page. Since this is such a common task, entering the code by hand each time is laborious. Using the UltraDev server behavior builder, the developer could automate this process by teaching UltraDev the code that should be used in this situation and setting the appropriate variables to make it work. Then this behavior would be saved and used later, automating this task. Let's work through this example:

  • The developer opens UltraDev's server behavior builder and gives this new behavior a name, "Hide if null".
  • The developer then defines the first code block to come before the area of the page that is to be hidden:

    <% if (request.getParameter("@@[email protected]@") == null) { %>

    The "@@" surrounding Parameter tells UltraDev that this is a variable name that should be entered by the user each time the server behavior is used.

  • The developer configures the first code block to come before the area of the page the user had selected.
  • The developer defines the second code block to come after the user's selection:

    <% } %>

  • The developer determines how the user enters the parameter when using the behavior. In this case we'll have the user enter it using plain text (see Figure 4).
Figure 4
Figure  4:

Now that the developer has saved this behavior, it can be easily accessed again though the server-behavior menu. To have a certain area of the page hidden if a request variable is null, the developer needs to select the area on the page, click on the server behavior, and type in the appropriate request parameter (see Figure 5). The developer can even share this with other users in the group to help them speed their development process.

Figure 5
Figure  5:

Instead of saving the file, uploading it, and then previewing it on the browser, the application developer can use UltraDev's LiveData Mode to see instantly what this design is going to look like in the browser (see Figure 6). With this instant visual feedback the application builder can then see the effects that different text formatting will have on the design, and even make layout tweaks visually to accommodate the dynamic data (with the designer's approval, of course!).

Figure 6
Figure  6:

If the file needed to be passed back to the designer for more complicated changes, that designer could work in UltraDev's LiveData Mode to visually edit the HTML layout and instantly see how the design changes affect the page that incorporated the dynamic data. They can also instantly tell if their design change has broken some aspect of the code because UltraDev will give them an error message in LiveData Mode. They can then use the unlimited undo feature to return the document to its previous state before things went awry. This saves developers and designers lots of heartache by eliminating the possibility that the designer could inadvertently break the code of the page during a design change.

More enterprising designers can even use the code/design split view to see what code is generated by each of the dynamic elements on the page. This has been used as an effective learning tool for designers to become familiar with JSP style code and what it does. Anything that's unclear can be instantly looked up in the Wrox JSP reference book that's built right into the product (see Figure 7).

Figure 7
Figure  7:

The idea here is that the instant visual feedback UltraDev provides makes this whole workflow process more productive and effective. It cuts down on the amount of time that designers and developers have to spend tweaking their work to accommodate what the other is doing. While UltraDev is certainly not a replacement for a Java development environment that's used to create JavaBeans and other components without visual elements, it's absolutely crucial for streamlining the process of combining a visual interface with back-end systems. Using UltraDev, teams of application development professionals can streamline their processes, allowing them to spend more time optimizing their design and code.

Author Bios
Michael Barbarelli, lead technician for Macromedia's UltraDev technical support group, is responsible for managing the product from the customer's viewpoint. He studied computer science at the University of California.[email protected]

David Deming is the product manager for Dreamweaver UltraDev. He has a mcechanical engineering degree from UC-Berkeley.[email protected]

All Rights Reserved
Copyright ©  2004 SYS-CON Media, Inc.
  E-mail: [email protected]

Java and Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. SYS-CON Publications, Inc. is independent of Sun Microsystems, Inc.