Managing a Web Site with WebSphere Studio
Articles and Tips: article
System Test Engineer
Web Experience Team
thusarik@novell.com
01 Jun 2000
Managing a Web site can be a daunting task, especially if there is a team working on the site rather than just one person and things have to be coordinated among all the team members.
With the release of IBM's WebSphere Studio, that task has become a very managable one. The tools available in the Studio make file creation, maintenance, and coordination a snap. And with the built-in version control system, you can be assured there is no duplicated effort.
Overview of the Components
The development part of WebSphere consists of several tools which will aid in designing, building, and maintaining your site.
Studio(WSStudio.exe) is the main workplace. This is where you organize all the files into a project and use version control.
All of the other tools are accessible from the Studio workbench, and some can be accessed as a standalone program. Your favorite tools can be registered, so they can be used by default instead of the tools that come with the product. For instance, the Page Designer is the default tool to open when you want to edit your HTML code (a file with a ".html" extension). However, if you have another HTML editor that you really like, you can register it as your default (this is described later in the exercise portion of this article).
Other goodies that are part of Studio are the Wizards. They will generate code for you by asking you a series of questions and developing the HTML or JSP code based on your responses. There is a JavaBean Wizard that allows Java Servlet creation by users with very little Java expertise. There is a Database Wizard that creates the code to connect to a database. There is also an SQL wizard that generates SQL statements based on the criteria you enter.
You can publish part or all of your project with the click of a button without the need for manually creating all the subdirectories on the server. (See the exercise.)
You can import an existing Web site into a new project.
You can check the integrity of the project and see where there are any broken links.
Page Designer(WSPage.exe) is the HTML generation tool. With the option of using the Normal view (WYSIWYG) or the HTML Source view (where you see the actual HTML code), you can create your Web pages. One final view is the Preview view, which shows you what your page will look like in a browser. You can designate which browser you want associated with the Preview view (described in the exercise).
The goodies here include an imagemap editor, DHTML generator, spell checker, tag validation, and script and applet insertion aids.
WebArt Designer (composer.exe) is theimage editing tool. You can create graphics from scratch or import existing images and edit them. There are Wizards here, too, for quick creation of buttons, logos, and photo frames. Several examples of buttons and clip art are included.
The Animation creation tool(animator.exe) gives you the capability to create animated gifs. Several samples are included.
Applet Designer(accessible from Studio) will create an applet that you can incorporate into your Web site. Without knowing Java, you can program various Java-based multimedia and networking effects into your Web site.
Exercise: Build a Web site Using all the Tools
This article will walk you through creating and publishing a basic Web site using the tools available in WebSphere Studio. You can download the Studio from Novell's NDK Web site at: http://developer.novell.com/ndk/wsstudio.htm.
Project Initiation and Setup
Download and install the Studio.
Create an icon for your desktop by right-clicking on your desktop and choosing New -> Shortcut. Hit Browse and navigate to where you installed the product and choose WSStudio.exe as the executable.(i.e., C:\WebSphere\Studio\bin\WSStudio.exe)
Using the Studio, store your Web site into a "project" that all team members will have access to. Open Studio by clicking on the icon on your desktop. If this is the first time you have been into the Studio, you will be prompted to open a new project.
If you have been in before, the last project you were working on will be opened as the default. For this exercise, let's start fresh by hitting File -> New Project. Name your project (how about something like My First Web site).
Studio creates a folder under C:\WebSphere\Studio\projects for your project.
You will also get a folder for servlets and style sheets.
Create a folder for the HTML pages.
Insert - > folder, name it "pages".
Create a folder for the images.
Insert - > folder, name it "images".
Now, create some HTML using the Page Designer.
Highlight the page s folder.Insert -> blank.html, name it "index.html".
Go into the page s folder and highlight index.html.
From the top menu items, choose view -> relations.Notice the view on the right-hand side of the screen. It shows you the relationship to other files in the project. Right now we only have one HTML page. As the site grows, you can see how each file fits into the project, and you can check for broken links.
Put some content into index.html.
For this exercise, we will use Page Designer(the HTML generator/editor that comes with Studio). Page Designer is the tool registered as the editor for ".html" files. If desired, you can change this to your favorite editor. Hit Tools -> Tools Registration. Type in html as the file extension and hit the edit button. Choose the Editing Applications tab and browse for another editor that is currently installed. Hit Add and Set as Default.
Double click on index.html. Page Designer opens .
You get three different "views" - tabs at the bottom of the page.
The Normal view is the WYSIWYG editor. You can drag and drop elements onto your page and manage them. The HTML Source tab shows you the code, and you can edit that way if preferred. The Preview tab shows you what your page will look like in a browser. The default is IE, but you can change that by hitting Tools -> WWW Browser and selecting Netscape.
For now, let's use the Normal, or WYSIWYG view.
Delete the default words "Put your text here".
We want to put a logo at the top of the first page.
Go into the image editor that is part of studio. Hit Tools -> WebArt Designer.
In the WebArt Designer, besides basic image manipulation, there is a quick logo and button designer. Play around in here awhile. Create a logo for your Web page using the various attributes available. To start, drag a logo style into the drawing area. To change the word, double click in the object. The effects will happen as you choose them, so you can see what your logo will look like. Try changing colors, outlines, or effects.
When you have the logo you like, drag it into Page Designer and center it. (There is an icon for text/object alignment on the tool bar on top of page.)
Position the cursor below the logo and insert a table that will hold navigation buttons for the site.
Insert -> Table -> 4 columns, 1 row.
We are going to fill in the table with four graphic buttons that will act as navigation for your Web site. You can either design your own with WebArt Designer or use some of the samples that come with Studio.
Make your own:Go back to the WebArt Designer(it should still be opened, but if not, go to Tools ->WebArt Designer).Design four buttons that would work as navigation for your Web site: IE Product Catalogue, Contact Us (this one is a form that we can create later), About Us, and Monthly Specials. For the "Contact Us" button, make three versions. We are going to create a rollover applet later, and we need one button for each state. Save them as contactr.gif (for regular), contactp.gif (for pressed), contacto.gif (for rollover). To save a file as a gif, you need to go to File -> Export.
Use samples:On the left side of the Page Designer screen, navigate into the WebSphere -> Studio -> Samples directory and choose four graphics.Drag a different button into each of the four cells in the table.
Add a link for each of the images, so when clicked a new HTML page is opened.Insert -> Link, add the name of an HTML file.
Save the file. You will also be prompted to save all the graphics in the project. Modify the path where the images will be saved, so they will go in the images directory. Hit OK.
Double click on the image directory to select, then Hit OK.
Add a form and a servlet.Go back into Studio. It should still be opened on the desktop. If not, double click on the Websphere studio icon to open it.Highlight the servle t directory and hit Insert -> file -> JavaBean.java. Hit OK.Right click on the JavaBean.java and choose compile.
Highlight the pages directory. We are going to use the Bean Wizard to create a form which calls a servle t. The page that will be created will need to reside with the rest of the HTML. That is why we need to be in the pages directory.
Choose Tools -> Wizards -> JavaBean Wizard.
Select the only bean available - the JavaBean bean. Hit Next.
Select the boxes for input page and results page. The wizard is going to create HTML pages for you. The input page is the form where people will input their name and address, etc. The results page is what will print when the person fills out the form and hits the submit button. Hit Next.
You are now asked which fields you would like to be included on your input page. The default bean that we created a few steps back by selecting Insert -> File -> Javabean.java has the fields in it that are listed on this page: name, address, etc. This is what your input form will be built on. Choose check all. Hit Next.
Now you are asked which fields you would like on your results page. This is the page that generally says something like thanks for filling out our form after users hit the submit button on the HTML form. Let's personalize the thank you message and add their name and state. Put a check in the box by firstName and state. Hit Next.
The next screen asks about methods. Just hit Next.
The next screen asks about using the bean for more than one query. Again, just hit Next.
This screen shows you the pages that will be generated and what the name of those pages will be. They will be given a default name of Bean1Input.html, Bean1Results.jsp, etc. You may want to name them something more descriptive. Hit the Rename button and enter GetInfo as the prefix. Hit Finish.
Edit your GetInfoInput.html and GetInfoResults.jsp pages to look like something more than just a standard page. Add a graphic or two. (Remember how to edit the pages? Double click on a page and Page Designer will open.) Also, while you are in Page Designer, go into the HTML Sourcetab and look at the jsp code that was generated. This code will access the bean and print the user's information on your results page .
Add an applet.
Create a folder to hold your applet. Highlight the top level directory (the project name).
Insert -> Folder. Name it applets.
Highlight the applets folder and hit Insert ->File. Choose AppletDesigner.app for the file type and name it rollovers.app.
Double click on rollovers.app. Applet Designer opens with a wizard to help you create your applet, but we're not going to use the wizard. Hit Cancel.
On the left hand side of the Applet Designer, in the Multimedia Beans section (should be showing by default and if not, hit the down arrow to see a drop-down box and select Multimedia), select the rollover bean and move the mouse into the white square blank area. Click to place a rollover bean there. You will be prompted with questions:
What picture for the button - (pic that shows by default)
When the mouse is pressed - (pic that shows when mouse is pressed)
When the mouse is over the button- (pic that shows when mouse is hovering)
Using the Find button, navigate to some buttons to use for these rollovers. If you created buttons in step 17, find them. If you want to use some of the graphics supplied, go to C:\WebSphere\Studio\Samples\image\buttons and use some of those.
Test the applet by hitting File ->Run. The applet will appear on your desktop. Roll the mouse over the button and press to see what it looks like.
Save it by selecting File -> Save.
Connect the rollover buttons to a URL.
In Applet Designer, at the left side, hit the down arrow to get the drop-down box and select Networking. Select the URL link bean.
Place the link right underneath the graphic.
In the Properties frame (right-hand side of the page), enter the following:Name: Contact Us link Status Message: Contact Us Target Frame: Top Frame URL address: http://<yourserver</<your Web directory<GetInfoInput.html">http://<yourserver</<your Web directory<GetInfoInput.html
Click on the image. Down at the bottom of the page in the Connections frame, select:When: clicked Bean: Contact Us link Do: Show documentFile -> Save.
Integrate into your page.
In Applet Designer, select File->Stage.Enter RolloverApp as the Applet Name and Press Next. The Stage tab opens. Select As an applet for the Web. Press Finish. Close the Applet Designer and answer Yes to any questions about saving the file.Go back into Studio and select View -> Refresh. Notice you now have a .jar file.Select both the rollovers.app and rollovers.jar. Right click and select check in. Double click the index.html file to open it in Page Designer.We're going to change the options so that a "dropped" java file generates an applet tag. Select Tools->Options and select the Edit tab. Change the value of the HTML generated for a dropped java file to APPLET. Hit OK.Right click on the Contact Us image and choose attributes. Note the file size (i.e., width=55 height=45). Now right click and choose Delete. (We are going to replace this button with the applet we just created.)From Studio, drag the RolloverApp.jar file into the table cell for the Contact Us button. Type in the width and height.Close Page Designer and save index.html.
Publish.
First, set up an area on your Web server that will hold your Web site. Run Windows Explorer and add a directory on the Web server for your project. Use the directory of your choice, relative to the default docs directory, e.g., <drive<:\Novonyx\suitespot\docs\mydocs.
Go back to Studio and set up your publishing targets. Tools ->Publishing Options. Click the relative to parent file radio button. Click on the Advanced tab. Click on Default Publishing Targets.
Click on the line that defines where the HTML will be published and type in a place on your Web server where these files should go. (i.e., F:\Novonyx\suitespot\docs\desk23) Use the browse button to locate the directories if you don't want to type it out.
Click on the line that defines where the servlets will be published and type in a place on your Web server where these files should go. (i.e., F:\WebSphere\Appserver\servlets)
View->Publishing.
Project -> Publishing Stage -> Production.
Right click on Production on the right side of the screen.
Choose Insert -> Server. Enter the IP address of this server (or the domain name of the server). A new server will appear in the publishing stage.
Drag the folders you want to publish (images, pages, servlets) into the new server folder.
Over on the left side of the screen, right click on the top level directory (the name of your project) and choose Check In(to first get all the files checked back in). Next, right click again and choose Publish Whole Project. You will be prompted about broken links (if there are any) and the need to create new folders on the publish machine. Just choose the defaults and hit OK to all questions asked.
A report will be generated showing the results of your publishing attempt.
Test.
Type the following into the browser url window:">http://<IPADDR</<yourdesk</index.htmlwhere <yourdesk< is the directory where you published your HTML and browse your site!
* Originally published in Novell AppNotes
Disclaimer
The origin of this information may be internal or external to Novell. While Novell makes all reasonable efforts to verify this information, Novell does not make explicit or implied claims to its validity.