Step 2: Create the Contents of the JSP File

In this step, you will use the JSP editor to add content to the JSP file that you created in the previous step.

The tasks in this step are:

Add a Table to the JSP

To add a table to the JSP:

1. The JSP you created in the last step displays in the editor as shown below.



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

The Workshop JSP editor is a synchronized editor, so you can alter the page from the Design view or the Source view and the two views will stay in sync.

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

   

   For this example, set 1 row and 2 columns. Click OK to proceed.

4. The Design view updates to show the table. Note that the Source view has also been updated.
   Also note that you can edit the table directly in the Design view. For example, right-click one of the table cells and select Table > Insert Column to add a third column.
   
   

   

Insert Graphics and Text

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

1. From the Design Palette view (the HTML section), drag the Image element to the left cell of the table.
2. 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.

3. From the Choose File dialog, choose the file and click OK.

   

   Click OK on the Image Tag dialog to close it.

4. The editor updates to show the image:

   

5. Next let's add the text My Test JSP to the table. To do this, you can either click on the table cell in the Design view, or click after the <td> tag in the Source view. 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:

1. From the JSTL Core section of the Design Palette drag the Set tag into the Source view and drop it directly after the </table> tag.
2. In the Set Tag dialog, in the Var Name field, enter greeting.
   In the Value field, enter Hello, World!
   Click OK.
3. Locate the Data section of the Design Palette and expand the Page Variables node.
4. Drag the greeting node into the Source view and drop it directly after the <c:set var="greeting" value="Hello, World!"/> tag.
   
   
   
5. Save the JSP file.
   
   

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 view and the Design view 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 (in the Properties view) to specify style classes.
• You can drag tags onto either the Design or Source views. Note that if you drag to the Source view, you must position the cursor in advance on the Source view, at the destination point for the tag.
• In Design view, try dragging an element from one location to another.
• In the Source view, the IDE does code completion for any HTML tag, JSP tag or scriptlet. Activate code completion by pressing Ctrl+Space.
• Hold down the Ctrl key and hover over elements in a JSP. Notice that certain resource becomes underlined. For example, references to other JSPs, tag libraries, images, etc. will become underlined. Clicking on an underlined element will navigate to that element.

 

Click one of the following arrows to navigate through the tutorial: