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

From Script | Spoken-Tutorial
Revision as of 18:05, 27 November 2012 by Chandrika (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Resources for "Developing Web Applications on Netbeans"


Visual Cue
Narration
Show Slide number 1 Hi everybody.


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

Slide 2

Introduction

If this is the first time you are using the Netbeans IDE,


please view the tutorial 'Introduction to Netbeans' at 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.

Slide 3

System Setup

For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.0.1
Slide 4, Slide 5

Lesson Outline

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
  • creating and editing web applications source files
    • creating a java package and a java source file
    • generating Getter and Setter methods
    • editing the default JavaServer Pages file
    • creating a JavaServer pages file
  • running a web application project


Slide 6

Requirements

To follow this tutorial, you will need


  • the Netbeans IDE
  • Java Development Kit (JDK) version 6
  • GlassFish Server Open Source Edition

All the above can be downloaded in a single bundle from the following link
http://www.oracle.com/technetwork/java/javase/downloads/jdk-netbeans-jsp-142931.html


Slide 7, Slide 8

Lesson

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.

Switch to Netbeans window 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.

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.

Continuing in the Netbeans window


Slide 9, Slide 10

Refactoring


Switch back to Netbeans Window

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



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 <h1> 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 </form> tag, then specify the values as shown:

  • Name: name
  • Type: text

Click OK.


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


Delete the value attribute from this tag.


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

  • Label: OK
  • Type: submit

Click OK.


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


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

then change the default Hello World! text between the <h1> 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).

Continuing in Netbeans Window


Slide 11

Java Beans


Switch back to Netbeans Window

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 <body>

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 <jsp:useBean> tag is added beneath the <body> 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 <h1> tag and click OK.


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


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

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

Insert Hello in between the <h1> tags, ie

<h1>Hello, !</h1>


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

Specify the following values:

  • Bean Name: mybean
  • Property Name: name
Click OK.
Notice that <jsp:getProperty> tag is now added between the <h1> tags.


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


Switch to browser 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.

Slide 12

Assignment

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

Slide 13, Slide 14

About the Spoken Tutorial Project

The video available at 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.

Slide 15, Slide 16

Acknowledgement

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.


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

Slide 17

Thank You

This is Sindhu Ghanti, from IT for Change signing off.


Thank You.

Contributors and Content Editors

Chandrika