JSP Tutorial: Step 2 Create the Contents of the JSP File

For this step of the tutorial, we will be using the Tag Libraries view to insert standard HTML and JSP tags into the JSP. Note that not all tags are provided, only the most common ones. You can use the Tag Libraries view to specify your CSS file, add graphics, tables and forms and other standard features.

Depending on the features that you have installed, you will see additional tag libraries.

Add a Table to the JSP

To add a table to the JSP:

The new empty JSP displays in the source editor as shown below.

If it is not displayed, you can open it by double clicking on its name in the AppXplorer view.

The page displays in Design/Source view (note the tab at the bottom of the editor pane) which is a split-pane view showing the JSP source at the bottom and the graphic design above.

The Workshop Studio JSP editor is a synchronized editor, so you can alter the page from the design pane or the code pane and the two panes will stay in sync.

Let's begin by adding a table to the page. To do this, from the Tag Libraries view (the HTML section), drag the Table element to the design pane.
You will be prompted to specify the table properties:

For this example, set 1 row and 2 columns. Click OK to proceed.
The Design pane updates to show the table. Note that the Source pane has also updated.

Insert Graphics and Text

The next step of the tutorial is to add a graphic and some text to the table. To do this:

From the Tag Libraries view (the HTML section), drag the Image element to the left cell of the table.
You will be prompted to specify the image:

For this example, we will use the graphic file that we copied above: WebContent/about_bea_logo.gif. Click on the icon beside the Source field.
From the Choose File dialog, choose the file and click OK.

Click OK on the Image Tag dialog to close it.
The editor updates to show the image:
Next let's add some the text My Test JSP to the table. To do this, you can either click on the table cell in the Design pane, or click after the <td> tag in the source editor. Enter the text.

Add a JSP Variable

So far, we have added only HTML tags to our JSP. Next we will add JSP tags.

To add a JSP tag:

In the Source pane, below the </table> tag, type the following JSP tags:
```
	<% String outputtext = "Hello, world!" ; %>
	<%=outputtext  %>
```
Note that the Variables view changes to show the newly defined variable:
and of course, the Design pane changes as well.
Now save your changes by clicking File > Save.

Other Features to Explore

Some of the other features that you may want to try include:

Experiment with synchronized editing, where you edit in the source pane and the design pane updates automatically. You can use HTML or JSP tags.
Create a JSP include by dragging the Include tag onto the design view. Included JSP fragments will be rendered automatically in design view and can be debugged. Anything in the included file such as variables or tag definitions are recognized by AppXRay and validated for use in any other page.
Apply a CSS stylesheet to your JSP by dragging the CSS tag onto design view or by using the smart editor to specify style classes.
You can drag tags onto either the design or source panes. Note that if you drag to the source pane, you must position the cursor in advance on the source pane, at the destination point for the tag.
In design view, try dragging an element from one location to another.
In the source pane, the IDE does code completion for any HTML tag, JSP tag or scriptlet. Activate code completion with CTRL <space>.

Step 2: Create the Contents of the JSP File