In the Applications Navigator, right-click Applications and choose New Application Workspace from the context menu.

In the Create Application Workspace dialog, set the application name to simple_jsp. Leave the Application Package Prefix and select No Template [ All Technologies ] for the Application Template. Click Ok to generate your Application Workspace and empty project.

You should now have a new Application Workspace and an empty project.

In the Navigator, right-click your new empty project, and choose New... to invoke the New Gallery. In the New Gallery, open the Web Tier node, select the JavaServer Pages (JSP) category and double-click the JSP Page item.

Name the JSP file, simple.jsp, and click Ok to generate an empty JSP page.

Your new JSP page will appear in the JSP Visual editor.

Observe that the JSP/HTML visual editing environment is actually a combination of the visual and source editors, the Structure Pane on the lower left which allows hierarchical access to all of the elements in the page, the Property Inspector on the lower right which allows for attribute setting, and the Component Palette on the upper right which allows for inserting new tags/elements into the JSP/HTML page.

As an optional step, split the editor view to show both the visual editor as well as the source code view. On the simple.jsp tab at the top of the editor, right-click and select Split Document. JDeveloper will then show both the visual and source view of the JSP at the same time.

You can either select Unsplit Document to return to pure visual editing, or keep the souce view open and do simultaneous editing of the JSP.

Click in the JSP visual editor and enter some text. For example Intro to JSP Visual Editing.

After entering your text, click on the left dropdown menu on the toolbar at the top and select Heading 2 to format the text to H2.

After selection, your text will immediately appear with the new H2 formatting.

Enter a carriage return and switch the formatting back to paragraph. Then enter a paragraph of random text.

You can copy and paste the following text into the editor:

This is a paragraph of random text. This text will be used to demonstrate how to format HTML in the JSP/HTML visual editor . This is a paragraph of random text. This text will be used to demonstrate how to format HTML in the JSP/HTML visual editor.

Select a portion of the text with your mouse and then click on the B button on the toolbar to make it Boldface.

Select another portion of text and click on the I button to italicize the text.

Apply font formatting by selecting some other text and selecting a font Times New Roman and specify a size of 5.

Now apply some color formatting. Select some text again and click on the Foreground Color and select a color to apply it to the text.

Feel free to experiment with different combinations of formatting.

Now we'll apply some alignment formatting. Select the entire paragraph and click on the Align Right button in the toolbar.

Select other alignments and observe the change to the source code as you apply them.

Below the previously edited paragraph, enter the following text in separate paragraphs. one, two, three. (After each word, enter a carriage return.) Select all three paragraphs then click on the unordered list button on the toolbar.

Observe the code changes in the source view.

Now enter additional list elements: four, five. Observe how the visual editor applies the list formatting.

Select the entire list again in the visual editor, or in the Structure Pane.Click on the ordered list button in the toolbar.

Select a subset of the list elements and then indent them by clicking on the indent button on the toolbar. Change the sublist to an un-ordered list.

Experiment further with indenting and outdenting list items.

This next task shows how to associate a link (anchor with uri) to some existing text.

Select a portion of text or a single word in the JSP using the mouse. For example select the words visual editor in the paragraph of text.

In the Component Palette, select the HTML palette page from the dropdown list at the top. Then click on the Link element on the palette. A dialog will appear where you can enter the URL:. Enter a valid URL such as: http://oracle.com.

After clicking OK to insert the link information, you'll see that the selected text renders as a link in the editor.

It is also possible to insert both text and an associated link onto your page without first highlight pre-existing text. This is done by dragging and dropping the List element from the Component Palette to any any area in your page and then enter both the URL and text for the link.

Drag and drop the Oracle image: from your browser onto your JSP in JDeveloper. Answer Yes to save the image to your application's Document Root.

It is possible to drag and drop images directly from the Windows desktop, and browsers.

Resize the Oracle image by dragging one of the grabpoints on the lower right side of the image.

Reset the image to it's original size by right-clicking on the image and selecting Reset Size.

Observe that you can also reset the size by using the task link Reset Link task link in the Property Inspector.

As an optional step, add an image by using the Component Palette. On the Component Palette, select HTML on the dropdown list. This will display HTML elements. Now drag and drop the Image element onto your JSP page. In the dialog, locate the same Oracle image and insert it into the page.

Move the image to a different location in your page by first clicking on it to select it, then drag it to another location.

You can also try copying, pasting and cutting/deleting the image in the visual editor.

Add a CSS style to your JSP by first switching the Component Palette to CSS and then dragging and dropping the jdeveloper style to your page. Observe the change in appearance to your page. Switch to the Source view and observe the change to the code.

In the Navigator, notice that a new file css/ jdeveloper.css has been added. Edit this file by double-clicking on it. Notice the color high-lighting in the Code Editor. Also notice the CSS structure in the Structure Pane.

Change the color attribute of the H2 entry in the CSS file. In the Structure Pane click on H2 and update the color value in the Property Inspector. Use the color picker to select a different color.

Back in the JSP visual editor click on the refresh button to see the change.

Right-Click on the Component Palette and select Add Component..

Use the file browser to locate any CSS file to add to the palette. If you don't have a different CSS you can just select the same stylesheet, jdeveloper.css (located in the public_html/css subdirectory) and provide a different name.

Add an HTML table to your JSP by dragging and dropping a table element from the HTML Component Palette page. In the dialog, accept the default setting and click OK.

Enter some HTML content into the HTML cells.

Add a new row by click in the lower right cell and entering a Tab. A new row will appear at the bottom of the table..

Copy the content from the second row by selecting the entire second row, entering Ctrl-C to copy the content, then click in the new empty row and enter Ctrl-V.

Note: to select an entire row, you can either mouse drag across the entire row, or place the cursor in the row and Right-Click select: Table-> Select Row.

Experiment further with the Table context menu options. Insert and, delete columns and rows. Split and Merge cells etc.

On the same page, add a text field by dragging and dropping theText Field element from the HTML Component Palette page. Notice how JDeveloper offers to add the required form element. Click Yes to continue entering your text field. Using the Property Inspector, set the size attribute to 30 and name attribute to name.
Notice the form element is rendered with a dotted red line around the text field. Add a prompt to the left of the field by adding the text, Name:.

Place your cursor to the right of the text field and enter a new paragraph (carriage return). On the next line add the text Address: and then add a Text Area element from the Component Palette. Use the Property Inspector to set the cols attribute to 30 and set name to address.

Enter a new line below the text area and add a dropdown select by dragging and dropping a DropDown element onto the page. Once the dropdown list appears, double-click on it to invoke the ComboBox editor.

Set the name to country and set the size to 1. (Don't check the Allow Multiple Selections checkbox.)

Click on the New button to add new Options: in the list. Edit the Value and Caption fields as us and United States respectively. Add other country options by clicking on the New button and editing the values and captions. (You can use: uk and United Kingdom, fr and france.)

Before we add a submit button, and define the form action, let's create a JSP page which will be the target of our form submission. In the same manner as you did before in step 1, create a new JSP named results.jsp. We'll edit this page later in step 6.

Back on the original page where our form is, add an HTML Submit Button and place it inside of the form beneath the country select control.

Now we'll set the HTML form's action attribute. To select the form in the visual editor, click inside of the form and then right-click and select Form -> Select Form Tag. Once the form has been selected, you can then set the action attribute to results.jsp in the Property Inspector. In case you get the results.jsp value from the drop down list, you need to remove the "/" character that is added to the results.jsp action name.

In the new results.jsp page, we will first add a JSP expression to display the name parameter passed from the form in the previous page. In the Component Palette select the JSP page. Drag and drop the Expression element onto the page. You should see an icon in the visual representing the JSP expression. Double-click on the icon to edit it's value.

Enter the following: request.getParameter("name") in the editor dialog. Click OK to dismiss. Before testing the page, you can add some text before the expression such as: Name parameter is:.

Save the page results.jsp.

In general all JSP standard actions, and custom tags are represented as icons in the visual editor. Once inserted into a page, you can either use the Property Inspector or double-click the icon to edit it's attributes.

Test your form and results page by running the original page simple.jsp by right-clicking on the page and selecting Run. As the form appears, enter your name in the Name: field and click submit. The results.jsp page should then appear displaying your name value.

In the next step we'll use a custom tag library instead to display a request parameter value.

In the results.jsp page let's add a custom tag in the JavaServer Pages Standard Tag Library (JSTL) to display other parameter values from our form. Enter a carriage return after the JSP expression and add a new prompt: Country:.

Switch the Component Palette page to JSTL Core and drag drop an out tag onto the page after the Country: prompt. Set the value attribute to: ${param.country}. When rendered, this will display the country parameter value.

Feel free to add another out tag to display the address parameter.

Save results.jsp.

JSTL is the first JSP tag library to use Expression Language (EL) to display the parameter data. EL provides a compact and easy way to display and interact with any Web application data including request parameter values.The next version of JSP (2.0) will also support EL without the need of a out tag. Users will be able to enter EL expressions directly to the JSP and they will render at runtime.

Re-run the original form page, simple.jsp, enter values into the form and observe how the results.jsp page displays the passed parameters.

This concludes the simple JSP tutorial.