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

|  Netbeans IDE ல் Web Applicationகளை உருவாக்குதலின் அறிமுகம் குறித்த டுடோரியலுக்கு நல்வரவு.  

| இல்லையெனில் Netbeans டுடோரியல்களுக்கு spoken tutorial website ஐ காணவும்  

| Having viewed the first tutorial you would already be familiar

|with the installation and interface of Netbeans.  

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

|For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1  

|This tutorial will take you through the basics of using Netbeans to develop web applications.  

| setting up a web application project

|creating and editing web applications source files

|creating a java package and a java source file  

|Generating the Getter and Setter methods

|Editing the default JavaServer Pages file

|Creating a JavaServer pages file

|and finally running our web application project  

|To follow this tutorial, you will need the Netbeans IDE  

|The Java Development Kit (JDK) version 6

|The GlassFish Server Open Source Edition

|All the above can be downloaded in a single bundle from the link shown on the screen

|This tutorial demonstrates how to create a simple web application,  

|Deploy it to a server,  

|and View its presentation in a browser.  

|The application employes (JSP)  JavaServer Pages to ask you to input your name

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

|and then retrieves the  output on a second JSP page.  

| Let us now move to Netbeans and create our web application project

|From the '''File''' menu choose '''New Project'''

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

|Under '''Projects,''' select '''Web Application''' , and click '''Next.'''

|Give your project a name. I will name my project as '''HelloWeb'''

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

| Click '''Next.'''

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

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

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

|Click '''Next.'''  

|In the '''Frameworks''' panel,  

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

|The IDE creates the '''HelloWeb''' project folder.  

|This folder contains all of your sources and project metadata.  

|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 on the left here

|and it's logical structure in the Projects Window.  

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

|Now in the '''Projects''' window, expand the '''Source Packages''' node.  

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

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

|Give your class a name. I will name the class as '''NameHandler'''

|and in the '''Package''' combobox let me type '''org.mypackage.hello'''  

|And Click '''Finish.'''  

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

|Now lets us declare a String variable directly below the class declaration

|I will delare a string variable String name and

| I will also add a constructor '''public NameHandler''' to the class

|Now let me also add '''name = null;''' within the constructor.  

|Let us next generate the '''Getter and Setter Methods'''  

| Right-click the name field in the '''Source Editor''' choose '''Refactor'''  and  '''Encapsulate Fields ''' from the contextual menu

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

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

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

|Lets move back to the IDE.

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

| Notice that the '''Fields''' visibility is set to private,  

|and '''Accessors''' visibility is set to '''public,''' by default

| Indicating that the access modifier for the class variables wil be specified as '''private''',  

| Whereas the '''getter''' and '''setter''' methods will be generated with '''public'''  modifiers respectively.  

| Click on '''Refactor.'''  

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

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

|Your java class should finally look like this

|Let us next Edit the '''Default JavaServer Pages File'''  

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

|Now let us open the '''Palette manager''' by going to the '''Tools''' menu > '''Palette''' and click on '''HTML/JSP code clips'''

|The '''Palatte manager''' opens.  

|In the palette manager expand the '''HTML forms''' options

| Select the '''Form''' items.  

| Drag it and drop it to the points after the h1 tags in your Source Editor

|The '''Insert form''' dialog box opens .  

|Let us Specify the values as been shown on the screen:  

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

|The '''Method''' as '''GET '''

|And lets us give our form a name as '''Name input form.'''

|Click OK.  

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

|Now from the Palette manager select a Text Input item drag it and drop it to a point just before the closing form tags

|In the '''Insert text input''' dialog box specify the '''Name''' as '''name'''

|Leave the '''Type''' at '''text'''

|And Click on OK.  

|A HTML input tag is now added between the form tags.  

|Let us delete the empty value attribute from the input tag.  

|Now from the palette select the '''Button''' item.

|Drag it and drop it to the point before the closing form tag

|Specify the '''Label''' as '''OK'''  

|The '''Type''' as '''submit'''  

|And Click on '''OK''' again

|An HTML button is now added to a form tags.  

|Infront of the first '''input tag''' let us enter the text '''Enter your name'''

|And let us change the default text between the h1  tags

|We will change the text to '''Entry form'''

|Now Right click, let me close the palette manager for now.

|Right-click within your Source Editor  

|Select the Format option to tidy the format of your code.  

|Your '''index.jsp''' file should now look like this.

|Let us next Create a JavaServer Pages File  

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

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

|Name the file as '''response,''' and click on '''Finish. '''

|Notice that a '''response.jsp''' file node displays in the Projects window beneath the '''index.jsp file''' ,

| And the new file opens in the Source Editor.  

|Open the Palette manager again

|Now expand the JSP option.

|Select a '''Use Bean''' item, drag it and drop it to a point just below the body

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

|Specify the values as

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

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

|Set the '''Scope''' as '''session '''

|And click on OK.  

|Notice that a 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.  

|Now from the Palette manager, Select a setbean property item, drag it and drop it  to a point just before the h1 tags

|And click on OK.  

|Here in the jsp:setProperty tag that appears, delete the empty value attribute.  

|And set the name attribute to '''mybean''' and the Property to '''name'''

|Now in between the h1 tags let us change the text to '''Hello''' comma space and a '''exclamation mark'''

|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

|In the '''Get Bean Property''' item

|Set the '''Bean Name''' to '''mybean'''  

|And the '''Property Name''' to '''name '''

|Click on '''OK.'''

|Notice that '''jsp:getProperty''' tag is now added between the h1 tags.

|Right-click within the Source Editor again, click on  '''Format''' to tidy the format of your code if required

|The next step is to run our '''Web Application Project '''

|Let me close the palette manager

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

|You can also click the '''Run''' option from the toolbar or press F6 key on your keyboard to run your Project.

|I will select the button on the toolbar to run my Project

|When you run a '''Web application''' the '''IDE''' builds and compiles the application code

|Launches the server and deploys the application to the server

|and finally displays the application in a browser window  

|To view this process you can open the output window from the '''Window''' menu and select the '''Output''' option

|You can see that your application has been  built successfully

|The '''index.jsp''' page opens in your default browser  

|Let me run the project again

|Here it is, it opens in your default browser

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

| Now let us Enter the name in the text box in the browser

| For eg '''Ubuntu''' and click on OK.  

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

|Now to the assignment part

|As an extension to the web application project, insert two more text fields that is totally three input text fields in your application

|Use the JavaBeans Component to set the bean property and

|View its presentation in the browser  

|And finally Retrieve the output on the second JSP page

|I have already constructed my assignment

|Let me open my assignment and run it in the ''' IDE'''  

|I am presented with 3 input text fields

|Let me enter the details and click on Ok

|I should be presented with an output like this

|Watch the video available at the link shown on the screen.  

|It summarizes the Spoken Tutorial project.  

|If you do not have good bandwidth, you can download and watch the videos.  

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  

|Gives certificates to those pass an online test.

|For more details please write to contact@spoken-tutorial.org

|Spoken Tutorial Project is a part of the Talk to a Teacher Project

|It is Supported by the National Mission on education through ICT, MHRD, Government  of India

|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro

|This tutorial has been  contributed by  IT for Change

|Thank you for joining us.