Building Your First JSP Page.pdf

Building Your First JSP Page

Purpose

The main purpose of this tutorial is to provide new users with the basic skills for building simple JSPpages. The lesson explains how to use JDeveloper 10g's visual JSP and HTML editing environment,and leads the user through a set of common Web application design steps such as formatting HTMLworking with images, CSS, HTML table Form elements, and how to work with custom JSP tags in the visual editor.

Time to complete

Approximately 1 hour.

Topics

This lesson will discuss the following:

Overview

Back to Topic Li

This tutorial will introduce JDeveloper 10g's visual editing environment for JSP and HTML. It will guide users through basic steps of working with common HTML and JSP elements which include HTML formatting, working with images, CSS, HTML tables and forms. This tutorial will also provide a basic introduction to working with JSP tags and elements without requiring knowledge of Java.

Prerequisites

Back to Topic Li

In order for this lesson to work successfully, you will need to have performed the following:

Viewing Screenshots

OverviewPrerequisitesHTML FormattingUsing Images Using CSSHTML TablesHTML Forms JSP Tags Summary

1.gfedc Install Oracle JDeveloper 10g.

1. oldal, összesen: 24Building Your First JSP Page

2008.02.18.http://www.oracle.com/technology/obe/obe_as_1012/j2ee/develop/client/building_fir...

Move your mouse over this icon to show all screenshots. You can also move your mouse over each individual icon to see only the screenshot associated with it.

Note: If you open all the screenshots, response time may be slow depending on your Internet connection.

HTML Formatting

Back to Topic Li

This step will guide the user first through building a workspace, project and an initial JSP. It will then demonstrate how to do common HTML formatting such as adding boldface, changing font color, and alignment etc.

Create a new Workspace, project and JSP

Back to Li

Create a new Workspace, project and JSP HTML FormattingFormatting a ListAdding a Link

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

2.gfedc 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.

3.gfedc 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.



4.gfedc 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.

5.gfedc 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.



Html Formatting

Back to Li

6.gfedc 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.

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



2.gfedc 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.

3.gfedc 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 formaHTML 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.



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

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

6.gfedc Apply font formatting by selecting some other text and selecting a font Times New Roman

and specify a size of 5.

7.gfedc 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.



Formatting a list

Back to Li

Feel free to experiment with different combinations of formatting.

8.gfedc 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.

1.gfedc 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 othe unordered list button on the toolbar.



Observe the code changes in the source view.

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

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

list button in the toolbar.



Adding a Link

Back to Li

4.gfedc 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.

1.gfedc 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.



Using Images

Back to Topic Li

This portion of the tutorial will demonstrate how to work with images in JDeveloper 10g.

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

2.gfedc 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 thlink.

1.gfedcDrag and drop the Oracle image: from your browser onto your JSP in JDeveloper. Answer Yes to save the image to your application's DocumentRoot.



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

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

image.

3.gfedc 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.

4.gfedc 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



Using CSS

Back to Topic Li

These steps explain how to work with CSS in JDeveloper 10g.

Applying a CSS style and customizing it.

and insert it into the page.

5.gfedc 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.

Applying a CSS style and customizing itAdding a CSS to the Component Palette



Back to Li

2.gfedc 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 CSSstructure in the Structure Pane.

3.gfedc 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 differencolor.



Adding a CSS to the Component Palette

Back to Li

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

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



HTML Tables

Back to Topic Li

These steps explain how to work with HTML Tables in the JSP/HTML visual editor.

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.

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

2.gfedc Enter some HTML content into the HTML cells.



3.gfedc 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..

4.gfedc 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.

5.gfedc Experiment further with the Table context menu options. Insert and, delete columns and

rows. Split and Merge cells etc.



HTML Forms

Back to Topic Lis

These steps introduce how to work with HTML form elements.

1.gfedc On the same page, add a text field by dragging and dropping theText Field element from theHTML 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:.



2.gfedc 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.

3.gfedc 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.)



JSP Tags

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

5.gfedc 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.

6.gfedc 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.



Back to Topic Li

These final steps introduce how to work with basic JSP tags in the visual editor.

1.gfedc In the new results.jsp page, we will first add a JSP expression to display the name parametepassed 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: Nameparameter 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.

2.gfedc 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.

3.gfedc 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 JSPexpression 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.

4.gfedc Re-run the original form page, simple.jsp, enter values into the form and observe how the

results.jsp page displays the passed parameters.



Summary

This lesson introduced JDeveloper 10g's new visual JSP/HTML editing environment by stepping through exercises which cover the basics of visually editing HTML/JSP pages.

Related topics

HTML specifications - http://www.w3.org/MarkUp/

JSP specification and other information. - http://java.sun.com/products/jsp/

Move your mouse over this icon to hide all screenshots

This concludes the simple JSP tutorial.



Documents

Building Your First JSP Page.pdf