Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/5/5f/Developing_Web_Applications-Resources.zip Resources for "Developing Web Applications on Netbeans"] {| style="border-spacing:0;" | s…'

2012-11-27T12:35:44Z

Created page with '[http://spoken-tutorial.org/wiki/images/5/5f/Developing_Web_Applications-Resources.zip Resources for "Developing Web Applications on Netbeans"] {| style="border-spacing:0;" | s…'

New page

[http://spoken-tutorial.org/wiki/images/5/5f/Developing_Web_Applications-Resources.zip Resources for "Developing Web Applications on Netbeans"]

{| style="border-spacing:0;"
| style="border-top:0.002cm solid #000000;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| <center>'''Visual Cue'''</center>
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>'''Narration'''</center>

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Show Slide number 1
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Hi everybody.

Welcome to the spoken tutorial on Introduction to Developing Web Applications on the Netbeans IDE.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 2

Introduction
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| If this is the first time you are using the Netbeans IDE,

please view the tutorial 'Introduction to Netbeans' at [http://www.spoken-tutorial.org/ www.spoken-tutorial.org] .

Having viewed the first tutorial you would already be familiar

with the installation and interface of Netbeans.

The previous tutorial also taught you how to create a new project.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 3

System Setup
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.0.1

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 4, Slide 5

Lesson Outline
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| This tutorial will take you through the basics of using Netbeans IDE to develop web applications.

In this tutorial, we will see

* setting up a web application project<br/>

* creating and editing web applications source files<br/>

** creating a java package and a java source file<br/>

** generating Getter and Setter methods<br/>

** editing the default JavaServer Pages file<br/>

** creating a JavaServer pages file<br/>

* running a web application project

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 6

Requirements
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| To follow this tutorial, you will need

* the Netbeans IDE <br/>

* Java Development Kit (JDK) version 6<br/>

* GlassFish Server Open Source Edition<br/>
All the above can be downloaded in a single bundle from the following link<br/>
[http://www.oracle.com/technetwork/java/javase/downloads/jdk-netbeans-jsp-142931.html http://www.oracle.com/technetwork/java/javase/downloads/jdk-netbeans-jsp-142931.html]

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 7, Slide 8

Lesson
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| It demonstrates how to create a simple web application,

deploy it to a server,

and view its presentation in a browser.

The application employes JavaServer Pages (JSP) page

to ask you to input your name.

It then uses JavaBeans component to persist the name during the HTTP session,

and then retrieves the name for output on a second JSP page.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Switch to Netbeans window
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Setting Up a Web Application Project

Go to the main menu and Choose '''File > New Project '''.

Under '''Categories, '''select '''Java Web'''.

Under '''Projects''', select '''Web Application ''', then click '''Next.'''

Enter '''HelloWeb '''in the '''Project Name '''text box.

Specify the '''Project Location '''to any directory on your computer.

Click '''Next'''.

The '''Server and Settings '''panel opens.

Select the version of Java EE you want to use with your application.

Select the server to which you want to deploy your application.

Click '''Next'''.

In the '''Frameworks '''panel,

click on '''Finish '''to create the project.

The IDE creates the HelloWeb project folder.

This folder contains all of your sources and project metadata.

The HelloWeb project opens in the IDE.

The Welcome page, '''index.jsp '''opens in the Source Editor in the main window.

You can view the project's file structure in the Files window,

and it's logical structure in the Projects Window.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"|
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Creating and Editing Web Application Source Files

Creating and editing source files is the most important function that the IDE serves.

In the '''Projects '''window, expand the '''Source Packages '''node.

Note that the Source Packages node only contains an empty default package node.

Right-click on the '''Source Packages '''node and choose '''New > Java Class'''.

Enter '''NameHandler '''in the '''Class Name ''' text box

and type '''org.mypackage.hello '''in the '''Package '''combo box.

Click '''Finish'''.

The '''NameHandler.java '''file opens in the Source Editor.

In the '''Source Editor''', declare a '''String '''variable by typing

'''String name; '''directly below the class declaration.

Add the constructor '''public NameHandler() { } '''to the class.

Add '''name = null; '''in the '''NameHandler() '''constructor.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Continuing in the Netbeans window

Slide 9, Slide 10

Refactoring

Switch back to Netbeans Window
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Generating Getter and Setter Methods

Right-click the '''name '''field in the '''Source Editor '''and choose '''Refactor > Encapsulate Fields'''.

'''Refactoring '''is a disciplined technique for improving the structure of existing code without changing the observable behaviour.

In short, change the structure of the code without changing the behaviour.

With Refactoring, you can easily move fields, methods or classes around, without breaking things.

The Encapsulate Fields dialog opens, listing the '''name '''field.

Notice that the '''Fields' '''visibility is by default set to private,

and '''Accessors' '''visibility to public,

indicating that the access modifier for class variables declaration wil be specified as private,

whereas '''getter '''and '''setter '''methods will be generated with '''public '''and '''private '''modifiers respectively.

Click '''Refactor'''.

'''Getter '''and '''Setter '''methods are generated for the '''name '''field'''.'''

The modifier for the class variable is set to '''private '''while '''getter '''and '''setter '''methods are generated with '''public''' modifier.

Your java class should now look like this finally ('''show NameHandler.java''').

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"|
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Editing the Default JavaServer Pages File

Refocus the '''index.jsp '''by clicking its tab displayed at the top of the '''Source Editor'''.

In the '''Palette '''located to the right of the Source Editor, expand '''HTML Forms'''

and drag a '''Form '''item to a point after the '''<nowiki><h1> </nowiki>'''tags in the Source Editor'''.'''

The '''Insert Form '''dialog box displays.

Specify the values as shown:

* '''Action: '''response.jsp
* '''Method: '''GET
* '''Name: '''Name Input Form

Click '''OK'''.

An HTML form is added to the '''index.jsp '''file.

Drag a '''Text Input '''item to a point just before the '''<nowiki></form> </nowiki>'''tag, then specify the values as shown:

* '''Name: '''name
* '''Type: '''text

Click '''OK'''.

An HTML '''<nowiki><input></nowiki>''' tag is added between the '''<nowiki><form> </nowiki>'''tag.

Delete the '''value '''attribute from this tag.

Drag a '''Button '''item to a point just before the '''<nowiki></form> </nowiki>'''tag, then specify the values as shown:

* '''Label: '''OK
* '''Type: '''submit

Click '''OK'''.

<nowiki>An HTML button is added between the <form> tags.</nowiki>

Type '''Enter your name:''' just before the first '''<nowiki><input></nowiki>''' tag,

then change the default''' Hello World!''' text between the '''<nowiki><h1></nowiki>''' tags to '''Entry Form'''.

Right-click within the Source Editor and choose '''Format''' (Alt-Shift-F) to tidy the format of your code.

Your '''index.jsp''' file should now appear like this (show file).

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Continuing in Netbeans Window

Slide 11

Java Beans

Switch back to Netbeans Window
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Creating a JavaServer Pages File

In the Projects window, right-click the HelloWeb project node and choose '''New > JSP'''.

The '''New JSP File''' wizard opens.

Name the file '''response''', and click '''Finish'''.

Notice that a '''response.jsp''' file node displays in the '''Projects''' window beneath '''index.jsp''', and the new file opens in the Source Editor.

In the '''Palette''' to the right of the Source Editor,

expand JSP and drag a '''Use Bean''' item to a point just below the '''<nowiki><body></nowiki>'''

tag in the Source Editor.

The '''Insert Use Bean''' dialog opens.

Specify the values shown in the following figure.

* '''ID: '''mybean
* '''Class: '''org.mypackage.hello.NameHandler
* '''Scope: '''session

Click '''OK'''.

Notice that the '''<nowiki><jsp:useBean></nowiki>''' tag is added beneath the '''<nowiki><body></nowiki>''' tag.

JavaBeans are reusable software components for Java.

They are used to encapsulate many objects into a single object

so that they can be passed around as a single bean object

instead of multiple individual objects.

Drag a '''Set Bean Property''' item from the '''Palette''' to a point just before the '''<nowiki><h1></nowiki>''' tag and click OK.

In the '''<nowiki><jsp:setProperty></nowiki>''' tag that appears, delete the empty '''value''' attribute.

Otherwise, it overwrites the value for name that you pass in index.jsp (show index.jsp).

'''<nowiki><jsp:setProperty name="mybean" property="name" /></nowiki>'''

Insert '''Hello '''in between the '''<nowiki><h1> </nowiki>'''tags, ie

'''<nowiki><h1>Hello, !</h1></nowiki>'''

Drag a '''Get Bean Property '''item from the Palette and drop it after the comma between the '''<nowiki><h1> </nowiki>'''tags.

Specify the following values:

* '''Bean Name: '''mybean
* '''Property Name: '''name

Click '''OK'''.
Notice that '''<nowiki><jsp:getProperty> </nowiki>'''tag is now added between the '''<nowiki><h1> </nowiki>'''tags.

Right-click within the Source Editor and choose '''Format '''to tidy the format of your code.
The '''<nowiki><body> </nowiki>'''tags of the '''response.jsp''' file should now look like this (show response.jsp).

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"|
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Running a Web Application Project

In the '''Projects '''window, right-click the '''HelloWeb '''project node and choose '''Run'''.

When you run a web application, the IDE:

* builds and compiles the application code
* launches the server
* deploys the application to the server
* displays the application in a browser window

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Switch to browser
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| The '''index.jsp '''page opens in your default browser.

Note that the browser window may open before the IDE displays the server output.

Enter you name in the text box in the browser and click '''OK'''.

The '''response.jsp '''page displays, providing you with a simple greeting.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 12

Assignment
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| As an extension to the web application project, insert two more text fields that is totally three input text fields

Use JavaBeans Component to set the bean property

View its presentation in the browser

Retrieve the output on the second JSP page

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 13, Slide 14

About the Spoken Tutorial Project
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| The video available at [http://spoken-tutorial.org/What_is_a_Spoken_Tutorial http://spoken-tutorial.org/What_is_a_Spoken_Tutorial] summarizes the spoken tutorial project.

If you do not have a good bandwidth, you can download and watch it.

We conduct workshops using spoken tutorials.

We also give certificates to those who pass an online test.

Please contact us for more details.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 15, Slide 16

Acknowledgement
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Spoken Tutorial project is a part of the Talk to a Teacher Project.

Supported by the National Mission on Education through ICT, MHRD, Govt of India.

This project is co-ordinated by [http://spoken-tutorial.org/ http://spoken-tutorial.org].

More information on the same is available at gttp://spoken-tutorial.org/NMEICT-Intro

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 17

Thank You
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| This is Sindhu Ghanti, from IT for Change signing off.

Thank You.

|}

Netbeans/C2/Developing-a-Sample-Web-Application/English - Revision history

Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/5/5f/Developing_Web_Applications-Resources.zip Resources for "Developing Web Applications on Netbeans"] {| style="border-spacing:0;" | s…'