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

Time	Narration
00:01	Hi everybody.
00:02	Welcome to the tutorial on introduction to Developing Web Applications on the Netbeans IDE.
00:08	We assume that you have the basic working knowledge of Netbeans.
00:12	If not, please visit the Spoken Tutorial website for relevant tutorials on Netbeans.
00:19	Having viewed the first tutorial, you would already be familiar
00:22	with the installation and interface of Netbeans.
00:25	The previous tutorial also teaches you how to create a new project.
00:29	For this demonstration, I am using the Linux Operating System Ubuntu version 11.04 and Netbeans IDE version 7.1.1.
00:40	This tutorial will take you through the basics of using Netbeans to develop web applications.
00:45	We will see -
00:46	* Setting up a web-application project
00:49	* Creating and editing web-applications source files
00:52	* Creating a java package and a java source file
00:56	* Generating the Getter and Setter methods
00:59	* Editing the default Java Server Pages file
01:02	* Creating a JavaServer pages file and
01:05	* finally running our web-application project.
01:08	To follow this tutorial, you will need: * the Netbeans IDE
01:13	* The Java Development Kit (JDK) version 6
01:17	* The GlassFish Server Open Source Edition.
01:20	All the above can be downloaded in a single bundle from the link shown on the screen.
01:26	This tutorial demonstrates how to create a simple web application,
01:30	deploy it to a server,
01:32	and view its presentation in a browser.
01:35	The application employs (JSP) Java Server Pages, to ask you, to input your name.
01:42	It then uses JavaBeans component to persist the name during the HTTP session
01:48	and then retrieves the output on a second JSP page.
01:51	Let us now move to Netbeans and create our web-application project.
01:58	From the File menu, choose New Project.
02:01	Under Categories, select Java Web.
02:04	Under Projects, select Web Application and click Next.
02:09	Give your project a name. I will name my project as "HelloWeb".
02:15	Specify the Project Location to any directory on your computer.
02:20	Click Next.
02:22	The Server and Settings panel opens.
02:25	Select the version of Java you want to use with your application.
02:29	And, select the server, you want to deploy your application to.
02:34	Click Next.
02:36	In the Frameworks panel,
02:38	click Finish to create the project.
02:41	The IDE creates the HelloWeb project folder.
02:46	This folder contains all of your sources and project metadata.
02:51	The welcome page- index.jsp, opens in the Source Editor in the main window.
02:57	You can view the project's file structure in the Files window on the left, here,
03:05	and it's logical structure in the Projects window.
03:10	Creating and editing source files is the most important function that the IDE serves.
03:15	Now in the Projects window, expand the Source Packages node.
03:20	Note that the Source Packages node contains only an empty "default package" node.
03.25	Right-click on the Source Packages and choose New > Java Class.
03:32	Give your class a name. I will name the class as "NameHandler"
03:40	and in the Package combo-box, let me type: "org.mypackage.hello"
03:54	and click Finish.
03:57	The NameHandler.java file opens in the Source editor.
04:01	Now, let's declare a String variable directly below the class declaration.
04:07	I will declare a string variable 'String name' and
04:12	I will also add a constructor public NameHandler() to the class.
04:23	Now, let me also add name = null; within the constructor.
04:30	Let us next generate the Getter and Setter Methods.
04:33	Right-click the name field in the Source Editor, choose Refactor and Encapsulate Fields from the contextual menu.
04:46	Refactoring is a disciplined technique for improving the structure of the existing code, without changing the observable behavior.
04:56	In short, you can change the structure of the code without changing the behavior.
05:01	With Refactoring, you can easily move fields, methods or classes around, without breaking things.
05:08	Let's move back to the IDE.
05:11	The Encapsulate Fields dialog-box opens, listing the name field.
05:16	Notice that the Fields Visibility is set to "private"
05:20	and the Accessors Visibility is set to "public", by default,
05:24	indicating that the access modifier for the class variables will be specified as private
05:30	whereas the getter and setter methods will be generated with 'public' modifiers respectively.
05:36	Click on Refactor.
05:39	The Getter and Setter methods are generated for the name field.
05:46	The modifier for the class variable is set to "private" whereas the getter and setter methods are generated with "public" modifier.
05:56	Your java class should finally look like this.
05:59	Let us next edit the Default JavaServer Pages File.
06:04	Let us refocus the 'index.jsp' file by clicking its tab, displayed at the top of the Source editor.
06:11	Now, let us open the Palette manager by going to the Tools menu > Palette and click on HTML/JSP code clips.
06:21	The Palette manager opens.
06:26	In the palette manager, expand the HTML Forms option.
06:31	Select the Form item.
06:34	Drag it and drop it to a point after the h1 tags, in your Source Editor.
06:42	The Insert Form dialog-box opens.
06:45	Let us specify the values as being shown on the screen:
06:49	the Action as "response.jsp",
06:54	the Method as "GET".
06:56	And, let's give our form a name as "Name Input Form".
07:04	Click OK.
07:07	An HTML form is added to the 'index.jsp' file.
07:13	Now, from the Palette manager, select a Text Input item, drag it and drop it to a point just before the closing form tags.
07:25	In the Insert Text Input dialog-box, specify the Name as "name".
07:32	Leave the Type at text
07:34	and click on OK.
07:36	A HTML input tag is now added between the form tags.
07:41	Let us delete the empty 'value' attribute from the input tag.
07:49	Now, from the palette, select the Button item.
07:53	Drag it and drop it to the point, before the closing form tag.
07:58	Specify the Label as "OK",
08:00	the Type as "submit"
08:03	and click on OK again.
08:05	An HTML button is now added to a form tags.
08:12	Infront of the first input tag, let us enter the text "Enter your name".
08:22	And, let us change the default text between the h1 tags.
08:28	We will change the text to "Entry form".
08:34	Now, right-click. Let me close the palette manager, for now.
08:38	Right-click within your Source Editor.
08:41	Select the Format option to tidy the format of your code.
08:46	Your 'index.jsp' file should now look like this.
08:49	Let us next create a JavaServer Pages file.
08:53	In the Projects window, right-click on the HelloWeb project node, choose New > JSP.
09:01	The New JSP file wizard opens.
09:05	Name the file as "response" and click on Finish.
09:14	Notice that a 'response.jsp' file node displays in the Projects window, beneath the index.jsp file
09:23	and the new file opens in the Source Editor.
09:26	Open the Palette manager again.
09:35	Now, expand the JSP option.
09:39	Select a Use Bean item, drag it and drop it to a point just below the body tag.
09:53	The Insert Use Bean dialog opens.
09:56	Specify the values as-
09:58	the ID as mybean,
10:01	the Class as "org.mypackage.hello.NameHandler".
10:13	Set the Scope as session
10:15	and click on OK.
10:18	Notice that a jsp:useBean tag is added beneath the body tag.
10:30	JavaBeans are reusable software components for Java.
10:34	They are used to encapsulate many objects into a single object
10:38	so that they can be passed around as a single bean object instead of multiple individual objects.
10:46	Now, from the Palette manager, select a Set Bean property item, drag it and drop it to a point just before the h1 tags
11:03	and click on OK.
11:12	Here, in the jsp:setProperty tag that appears, delete the empty "value" attribute
11:21	and set the name attribute to "mybean" and the Property to "name".
11:30	Now, in between the h1 tags, let us change the text to Hello comma space and an exclamation mark.
11:40	Now, from the Palette manager, select a Get Bean property item. Drag it and drop it after the "Hello" text in between the h1 tags.
11:51	In the Get Bean Property item,
11:53	set the Bean Name to "mybean"
11:57	and the Property Name to "name".
11:59	Click on OK.
12:01	Notice that jsp:getProperty tag is now added between the h1 tags.
12:07	Right-click within the Source Editor again. Click on Format to tidy the format of your code, if required.
12:16	The next step is to run our Web Application Project.
12:20	Let me close the Palette manager.
12:26	In the Projects window, right-click the "HelloWeb" project node and choose the Run option.
12:32	You can also click the Run option from the toolbar or press F6 key on your keyboard to run your Project.
12:41	I will select the button on the toolbar to run my Project.
12:44	When you run a Web application, the IDE builds and compiles the application code,
12:53	launches the server and deploys the application to the server
12:58	and finally displays the application in a browser window.
13:02	To view these processes, you can open the output window from the Window menu and select the Output option.
13:10	You can see that your application has been built successfully.
13:17	The 'index.jsp' page opens in your default browser.
13:23	Let me run the project again.
13:27	Here it is! It opens in your default browser.
13:32	Note that the browser window may sometimes open before the IDE displays the server output.
13:38	Now, let us enter the name in the text-box, in the browser.
13:42	For e.g. Ubuntu and click on OK.
13:46	The 'response.jsp' page displays, providing you with a simple greeting.
13:52	Now, to the assignment part-
13:56	As an extension to the web-application project, insert two more text fields, that is, totally three input text fields in your application.
14:06	Use the JavaBeans component to set the bean property and
14:09	view its presentation in the browser.
14:12	And finally, retrieve the output on the second JSP page.
14:17	I have already constructed my assignment.
14:21	Let me open my assignment and run it in the IDE.
14:30	I am presented with 3 input text fields.
14:35	Let me enter the details and click on OK.
14:42	I should be presented with an output like this.
14:47	Watch the video available at the link shown on the screen.
14:51	It summarizes the Spoken Tutorial project.
14:54	If you do not have good bandwidth, you can download and watch the videos.
14:59	The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.
15:05	* Gives certificates to those who pass an online test.
15:09	For more details, please write to:contact@spoken-tutorial.org
15:16	Spoken Tutorial project is a part of the Talk to a Teacher project.
15:21	It is supported by the National Mission on education through ICT, MHRD, Government of India.
15:28	More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
15:40	This tutorial has been contributed by IT for Change.
15:43	Thank you for joining us.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14