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

From Script | Spoken-Tutorial
Revision as of 10:20, 10 July 2014 by PoojaMoolya (Talk | contribs)

Jump to: navigation, search
Time Narration
00:01 Hiii 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 v11.04 and Netbeans IDE v7.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 JavaServer Pages file
01:02 Creating a JavaServer pages file
01:05 and 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 employes (JSP) JavaServer 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 combobox 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 lets us declare a String variable directly below the class declaration
04:07 I will delare 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 existing code without changing the observable behaviour.
04:56 In short, you can change the structure of the code without changing the behaviour.
05:01 With Refactoring, you can easily move fields, methods or classes around, without breaking things.
05:08 Lets move back to the IDE.
05:11 The Encapsulate Fields dialog opens, listing the name field.
05:16 Notice that the Fields visibility is set to private,
05:20 and Accessors visibility is set to public, by default
05:24 Indicating that the access modifier for the class variables wil 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 Palatte manager opens.
06:26 In the palette manager expand the HTML forms options
06:31 Select the Form items.
06:34 Drag it and drop it to the points after the h1 tags in your Source Editor
06:42 The Insert form dialog box opens .
06:45 Let us Specify the values as been shown on the screen:
06:49 The Action as response.jsp
06:54 The Method as GET
06:56 And lets us 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
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 setbean 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 a 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 this process 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 sometime 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 eg 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 conduct workshops using Spoken Tutorials.
15:05 Gives certificates to those 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