Difference between revisions of "Netbeans/C2/Developing-a-Sample-Web-Application/English-timed"

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

 

| 00.25

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

 

 

 

 

| 02.01

 

 

| 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

|02.22

|02.25

|02.29

|And Select the server, you want to deploy your application to.

| 02.34

| 02.36

| 02.38

|02.41

 

| 02.46

 

 

|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

 

 

|03.15

 

 

|03.20

 

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

 

|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

 

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

 

|The '''Action''' as  '''response.jsp'''

 

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

 

 

| 09.56

 

|Specify the values as  

 

| 09.58

 

|The '''ID''' as '''mybean'''  

 

| 10.01

 

|The Class as '''org.mypackage.hello.NameHandler '''

 

| 10.13

 

 

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

 

 

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

 

|In the Projects window, right-click the '''HelloWeb''' project node and choose 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.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.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

 

 

| 14.54

 

 

| 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