A Tour Through WebLogic Workshop 8.1: Westside Auto Sales
Pages: 1, 2, 3, 4, 5, 6
Domain Setup
Now we need to create a connection to our database in our WebLogic Server domain. We will be using the "Workshop" domain that ships with the WebLogic samples (found in [BEA Install Directory]\WebLogic81\samples\domains\workshop). To add the services we need, first start the domain and then go to the console (usually http://localhost:7001/console) and log in (username: "weblogic", password: "weblogic").
First, we will set up the connection pool. Under JDBC on the main page, select "Connection Pools". Click "Configure a new JDBC Connection Pool", then choose the database type and select a driver. Because we will be using transactions, you will need to choose an "XA" driver. Because I am using Microsoft SQL (with the JDBC driver service pack), I choose BEA's MS SQL Server Driver (Type 4XA). Name the pool "WASPool". Test the connection, and then create and deploy it on the server. Because we will be using local transactions, click on the new "WASPool", choose the "Connections" tab and then advanced options. Check the "Supports Local Transactions" and click on "Apply".
Once the pool is created, we can create a data source. Click on the Home icon in the upper right-hand side of the page, and then choose "Datasources" under JDBC. Click on "Configure a JDBC Data Source", use "WASDataSource" as the name and the JNDI name. Click "continue", and then choose "WASPool" as the connection pool. Then click "continue" and then "create".
Now we need our JMS topic for our messaging. In the left-hand side of the console, go to Services\JMS\Servers\cgJMSServer\Destinations and configure a new JMS topic. Set the name and JNDI name as "WASTopic" and click "Create". Once the new topic is created you will need to restart the server.
Web Application
Now we are ready to start building our application. We will start with the Web application. Launch WebLogic Workshop 8.1 and create a new default application called "Westside". Web applications in WLW use a new technology called Page Flows. Based on the Struts framework, Page Flows allow you to separate business logic from display logic. This means rather than filling your JSP files with lots of code, you put all your code in the JPF. This will become clear once we start building our site.
We were given a default page flow to start with. Let's start up the server and run our page flow once to see what we are working with. Open the Controller.jpf under the WestsideWeb directory and hit the play button in the toolbar. Once the site is compiled you should get a page in the test browser that says "New Web Application Page". Our site is not very exciting yet, but that will change soon.
The first part of our application involves showing the current vehicle inventory to the user. Normally we would spend hours building JSPs that display the results of a rowset, allow for filtering and sorting, allow for pagination, etc. With WLW this task is easy. First we need a RowSet Control to access the data in our database. We will put all our controls in a new folder called "Controls" under the "WestsideWeb" folder. Create the new folder then right-click on it and choose New\Other File Type\RowSet Control. In the RowSet Control Wizard, name the new control Inventory.jcx, and be sure to specify the WASDataSource. Click "Next", and choose "Query a View or Table", and choose the "CarInventory" view. Set the SKU as the primary key and click "Create". This gives you a database control with two methods: detailsCarinventory and getAllCarinventory. Now for the fun part: right-click on the new control in the project pane and choose "Generate Page Flow". Give it a name of "Inventory" and click "create". You will see a new set of files appear and "InventoryController.jpf" in the editor window. Hit play to see it in action. You will see a fully functional list of vehicle inventory with sorting, pagination, and filtering. The details link will take you to details of the car. What normally would take hours to build was built with a few mouse clicks:
Let's finish up the rest of the Web interface. First we will put a link to this new page flow from our main page. It's also good to have a link back to the home page. Let's add it in the title bar of the Inventory section. Because every page uses NetUI templates, we can add the link in the file WestsideWeb\resources\jsp\header.jsp and it will appear on every Inventory page. Add the following code to this file (code to add in italics):
<!-- Styled, graphical look of "bar" defined here using a repeatable image
specified as "background="bar-background.gif"" -->
<td width="100%" height="21" background="<%=request.getContextPath ()
%>/resources/images/bar-background.gif">
<a href="<%=request.getContextPath ()%>/Controller.jpf">Home</a>
|
<a href="<%=request.getContextPath ()
%>/Inventory/InventoryController.jpf">
Inventory</a>
</td>If you re-run the InventoryController.jpf file, you should see the navigation at the top of the page:
Now that we have a common navigation system, let's add this template to our home page. Go back to index.jsp under WestsideWeb and change it to look like this:
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
<%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
<%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
<netui-template:template templatePage="/resources/jsp/grid_template.jsp">
<netui-template:setAttribute value="Home" name="title"/>
<netui-template:section name="bodySection">
<blockquote>
<h1>Westside Auto Sales</h1><br>
<a href="./Inventory/InventoryController.jpf">View our Inventory</a>
</blockquote>
</netui-template:section>
</netui-template:template>Now we'll add the code to allow users to buy a car. First we need a "buyCar" action in the Inventory page flow. Go to the design view of InventoryController.jpf and add an action "buyCar", accepting the defaults. You can do this by either right-clicking on the page and choosing "New Action" or by dragging an Action onto the page from the palette. We also want a confirmation page to tell the user they successfully bought the car. Add a new page called "Confirm.jsp" to the page flow (again either by right-clicking on the page flow or by dragging a Page from the palette). Draw a flow line from the "buyCar" action to the new page. Now we need to add a link to the buyCar action in the details page. In detailsCarinventory.jsp add the following code above the link back to the grid (code to add in italics):
</table>
<br/>
<% DatabaseForm myForm = (DatabaseForm)request.getAttribute("databaseForm");
if (myForm.getStatus().equals("Available")) { %>
<netui:anchor action="buyCar" >Buy This Car
<netui:parameter name="SKU" value="{request.databaseForm.sku}" />
</netui:anchor><p>
<% } %>
<netui:imageAnchor action="showGrid" border="0"
src="/WestsideWeb/resources/images/
grid.gif">
<netui:parameterMap map="{pageFlow.sortFilterService.queryParamsMap}"/>
</netui:imageAnchor>Because you can only buy a car if it is available, we first check to make sure the car has not been sold, and then we show the link. To do this, first we create a local instance of the DatabaseForm that holds all our detail information. Then we can access members within this form. Notice, our link to buy the car is a link to an action on the page flow, not a hard link to a file.
As you add this code, you will get a blue popup message asking if you want to add an import statement for Inventory.InventoryController.DatabaseForm to the page. Hit Alt+Enter to accept the import. This adds the following to the top of the page:
<%@page import="Inventory.InventoryController.DatabaseForm"%>There will be several other instances when you add code from this article that you will need to accept the import statements WebLogic Workshop suggests.
If you switch back to design view of the InventoryController.jpf you should see the new action and page in the context of the rest of the site:
